Skip to content

Commit

Permalink
Update to bulma v1.0.0 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
Freymaurer committed Mar 23, 2024
1 parent 07cc998 commit 1073e07
Show file tree
Hide file tree
Showing 16 changed files with 394 additions and 21,096 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"FSharp.inlayHints.parameterNames": false
}
478 changes: 226 additions & 252 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@
"pretest": "dotnet fable clean tests --yes & dotnet fable tests -o tests/dist",
"posttest": "cd tests & dotnet run",
"test": "mocha tests/dist",
"watchtests": "cd tests & dotnet watch run",
"style": "sass src/styles"
"watchtests": "cd tests & dotnet watch run"
},
"dependencies": {
"bulma": "^0.9.4",
"bulma": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
79 changes: 39 additions & 40 deletions src/App.fsproj
Original file line number Diff line number Diff line change
@@ -1,41 +1,40 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Content Include="styles\styles.css" />
<None Include="styles\styles_dark.scss" />
<None Include="styles\styles_light.scss" />
<Compile Include="Literals.fs" />
<Compile Include="Extensions.fs" />
<Compile Include="Routing.fs" />
<Compile Include="Classes.fs" />
<Compile Include="Dice\Dice.Icon.fs" />
<Compile Include="Dice\Dice.Roll.fs" />
<Compile Include="Dice\Dice.Parsing.fs" />
<Compile Include="Dice\Dice.HtmlAux.fs" />
<Compile Include="LocalStorage.fs" />
<Compile Include="States.fs" />
<Compile Include="Components\Component.DarkModeButton.fs" />
<Compile Include="Components\Component.Shake.fs" />
<Compile Include="Components\Component.QuickAccess.fs" />
<Compile Include="Components\Component.History.fs" />
<Compile Include="Components\Component.DiceStorageModal.fs" />
<Compile Include="Components\Component.Footer.fs" />
<Compile Include="Components\Component.Navbar.fs" />
<Compile Include="Pages\Page.Reference.fs" />
<Compile Include="Pages\Page.Dicacle.fs" />
<Compile Include="Components.fs" />
<Compile Include="Main.fs" />
<None Include="index.html" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Fable.SimpleJson" Version="3.24.0" />
<PackageReference Include="Feliz" Version="2.6.0" />
<PackageReference Include="Feliz.Bulma" Version="3.0.0" />
<PackageReference Include="Feliz.Router" Version="4.0.0" />
</ItemGroup>
<ItemGroup>
<PackageReference Update="FSharp.Core" Version="[6.0.7]" />
</ItemGroup>
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Content Include="styles\styles.scss" />
<Compile Include="Literals.fs" />
<Compile Include="Extensions.fs" />
<Compile Include="Routing.fs" />
<Compile Include="State.ColorMode.fs" />
<Compile Include="Classes.fs" />
<Compile Include="Dice\Dice.Icon.fs" />
<Compile Include="Dice\Dice.Roll.fs" />
<Compile Include="Dice\Dice.Parsing.fs" />
<Compile Include="Dice\Dice.HtmlAux.fs" />
<Compile Include="LocalStorage.fs" />
<Compile Include="States.fs" />
<Compile Include="Components\Component.DarkModeButton.fs" />
<Compile Include="Components\Component.Shake.fs" />
<Compile Include="Components\Component.QuickAccess.fs" />
<Compile Include="Components\Component.History.fs" />
<Compile Include="Components\Component.DiceStorageModal.fs" />
<Compile Include="Components\Component.Footer.fs" />
<Compile Include="Components\Component.Navbar.fs" />
<Compile Include="Pages\Page.Reference.fs" />
<Compile Include="Pages\Page.Dicacle.fs" />
<Compile Include="Components.fs" />
<Compile Include="Main.fs" />
<None Include="index.html" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Fable.SimpleJson" Version="3.24.0" />
<PackageReference Include="Feliz" Version="2.6.0" />
<PackageReference Include="Feliz.Bulma" Version="3.0.0" />
<PackageReference Include="Feliz.Router" Version="4.0.0" />
</ItemGroup>
<ItemGroup>
<PackageReference Update="FSharp.Core" Version="[6.0.7]" />
</ItemGroup>
</Project>
32 changes: 19 additions & 13 deletions src/Components.fs
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,27 @@ type Components =
[<ReactComponent>]
static member Router() =
let (currentPage, updatePage) = React.useState(Router.currentUrl() |> Routing.Pages.ofUrl)
let colorTheme, setColorTheme = React.useState(LocalStorage.Darkmode.State.init)
let v = {colorTheme with SetTheme = setColorTheme}
React.router [
router.onUrlChanged (Routing.Pages.ofUrl >> updatePage)
router.children [
Html.div [
Component.Navbar.Main()
Bulma.hero [
Bulma.hero.isFullHeightWithNavbar
prop.children [
match currentPage with
| Routing.Dicacle -> Components.Dicacle()
| Routing.Reference -> Components.Reference()
| Routing.NotFound -> Html.h1 "404: Page not found"
Component.Footer.Main
]
]
]
React.contextProvider(
LocalStorage.Darkmode.themeContext,
v,
Html.div [
Component.Navbar.Main()
Bulma.hero [
Bulma.hero.isFullHeightWithNavbar
prop.children [
match currentPage with
| Routing.Dicacle -> Components.Dicacle()
| Routing.Reference -> Components.Reference()
| Routing.NotFound -> Html.h1 "404: Page not found"
Component.Footer.Main
]
]
]
)
]
]
95 changes: 6 additions & 89 deletions src/Components/Component.DarkModeButton.fs
Original file line number Diff line number Diff line change
Expand Up @@ -2,105 +2,22 @@

open Feliz
open Feliz.Bulma

[<RequireQualifiedAccess>]
type private ColorMode =
| Light
| Dark
| Auto of ColorMode
with
member this.toIcon =
let c =
match this with
| Light | Auto Light -> "fa-regular fa-sun"
| Dark | Auto Dark -> "fa-solid fa-moon"
| _ -> ""
Html.i [
prop.className (sprintf "%s fa-xl" c)
]

let private (|IsLight|IsDark|) (input: ColorMode) =
match input with
| ColorMode.Light | ColorMode.Auto ColorMode.Light -> IsLight
| ColorMode.Dark | ColorMode.Auto ColorMode.Dark -> IsDark
| _ -> failwith "This can never happen"


[<RequireQualifiedAccess>]
module private LocalStorage =

open Browser
open Fable.SimpleJson

let [<Literal>] Key = "ColorMode"

let write(mode: ColorMode) =
let v = Json.serialize mode
WebStorage.localStorage.setItem(Key, v)

let load() =
try
WebStorage.localStorage.getItem(Key)
|> Json.parseAs<ColorMode>
|> Some
with
|_ ->
WebStorage.localStorage.removeItem(Key)
printfn "Could not find %s" Key
None

module private JsInteropAux =
open Fable.Core.JsInterop

let getPreferredSchema() =
let isDark = Browser.Dom.window?matchMedia("(prefers-color-scheme: dark)")?matches
if isDark then ColorMode.Auto ColorMode.Dark else ColorMode.Auto ColorMode.Light

let activateLightMode() =
let style_dark = Browser.Dom.document.getElementById(Literals.StyleSheets.DarkMode)
let style_light = Browser.Dom.document.getElementById(Literals.StyleSheets.LightMode)
style_dark?disabled <- "disabled"

let activateDarkMode() =
let style_dark = Browser.Dom.document.getElementById(Literals.StyleSheets.DarkMode)
style_dark.removeAttribute("disabled")
style_dark.removeAttribute("media")

let toggleStyleSheets(mode:ColorMode) =
match mode with
| IsLight -> activateLightMode()
| IsDark -> activateDarkMode()

type private State = {
ColorMode: ColorMode
} with
static member init() =
let def = JsInteropAux.getPreferredSchema()
let mode_stored = LocalStorage.load()
let mode = Option.defaultValue def mode_stored
JsInteropAux.toggleStyleSheets(mode)
{
ColorMode = mode
}
open LocalStorage.Darkmode

[<ReactComponent>]
let Main() =
let state, setState = React.useState(State.init)
React.useEffect(fun () -> JsInteropAux.toggleStyleSheets(state.ColorMode))
let state = React.useContext(LocalStorage.Darkmode.themeContext)
Bulma.navbarItem.a [
prop.onClick (fun e ->
e.preventDefault()
let next =
match state.ColorMode with
| IsLight -> ColorMode.Dark
| IsDark -> ColorMode.Light
LocalStorage.write(next)
setState {ColorMode = next}
let next = if state.Theme = Dark then Light else Dark
DataTheme.SET next
state.SetTheme {state with Theme = next}
)
prop.children [
Bulma.icon [
Bulma.icon.isMedium
prop.children state.ColorMode.toIcon
prop.children state.Theme.toIcon
]
]
]
Expand Down
2 changes: 2 additions & 0 deletions src/Main.fs
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,7 @@ open Feliz
open App
open Browser.Dom

Fable.Core.JsInterop.importSideEffects "./styles/styles.scss"

let root = ReactDOM.createRoot(document.getElementById "feliz-app")
root.render(Components.Router())
92 changes: 92 additions & 0 deletions src/State.ColorMode.fs
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
module rec LocalStorage.Darkmode

open Feliz
open Fable.Core.JsInterop

[<RequireQualifiedAccess>]
module private Attribute =
let getDataTheme() =
let v = Browser.Dom.document.documentElement.getAttribute("data-theme")
if isNull v then
None
else
DataTheme.ofString v |> Some

let setDataTheme(theme: string) =
Browser.Dom.document.documentElement.setAttribute("data-theme", theme.ToLower() )

[<RequireQualifiedAccess>]
module private BrowserSetting =
let getDefault() =
let m : bool = Browser.Dom.window?matchMedia("(prefers-color-scheme: dark)")?matches
// Browser.Dom.console.log(m)
if m then Dark else Light

[<RequireQualifiedAccess>]
module private LocalStorage =

open Browser

let [<Literal>] DataTheme_Key = "DataTheme"

let write(dt: DataTheme) =
let s = string dt
WebStorage.localStorage.setItem(DataTheme_Key, s)

let load() =
try
WebStorage.localStorage.getItem(DataTheme_Key)
|> DataTheme.ofString
|> Some
with
|_ ->
WebStorage.localStorage.removeItem(DataTheme_Key)
printfn "Could not find %s" DataTheme_Key
None

type DataTheme =
| Dark
| Light
static member ofString (str: string) =
match str.ToLower() with
| "dark" -> Dark
| "light" | _ -> Light

static member SET(theme:DataTheme) =
Attribute.setDataTheme <| string theme
LocalStorage.write <| theme // This helps remember

static member GET() =
// Check local storage
let localStorage = LocalStorage.load()
// check data theme attribute
let dataTheme = Attribute.getDataTheme()
match localStorage, dataTheme with
| _, Some dt -> dt // this value actually decides the theme via styles.scss
| Some dt, _ -> dt // this value is set by website but does not reflect actual styling directly
| _, _ -> BrowserSetting.getDefault() // if all fails we check for the browser setting
member this.isDark = this = Dark

member this.toIcon : ReactElement =
let c =
match this with
| Light -> "fa-solid fa-lightbulb"
| Dark -> "fa-solid fa-moon"
Html.i [
prop.className (sprintf "%s fa-xl" c)
]

[<RequireQualifiedAccess>]
type State = {
Theme: DataTheme
SetTheme: State -> unit
} with
static member init() =
let dt = DataTheme.GET()
DataTheme.SET dt
{
Theme = dt
SetTheme = fun (state) -> failwith "This is not implemented and serves as placeholder"
}

let themeContext = React.createContext(name="Theme", defaultValue=State.init())
6 changes: 3 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<link rel="shortcut icon" type="image/png" href="./img/favicon-32x32.png" sizes="32x32" />
<link rel="shortcut icon" type="image/png" href="./img/favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
<link id="style-light" rel="stylesheet" type="text/css" href="./styles/styles_light.css" media="all"/>
<link id="style-dark" rel="stylesheet" type="text/css" href="./styles/styles_dark.css" media="(prefers-color-scheme: dark)"/>
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
<!-- <link id="style-light" rel="stylesheet" type="text/css" href="./styles/styles_light.css" media="all"/>
<link id="style-dark" rel="stylesheet" type="text/css" href="./styles/styles_dark.css" media="(prefers-color-scheme: dark)"/> -->
<!-- <link rel="stylesheet" type="text/css" href="./styles/styles.scss" /> -->
<style>
html {
overflow-y: unset;
Expand Down
2 changes: 2 additions & 0 deletions src/styles/styles.css → src/styles/styles.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../node_modules/bulma/bulma.scss";

.hero {
max-height: calc(100vh - 3.25rem)
}
Expand Down
Loading

0 comments on commit 1073e07

Please sign in to comment.