Refactor documentation structure and update dependencies

Author: Tim Forkmann

.config/dotnet-tools.json

@@ -10,7 +10,7 @@
       "rollForward": false
     },
     "fable": {
-      "version": "5.0.0-alpha.5",
+      "version": "4.24.0",
       "commands": [
         "fable"
       ],

Build.fs

@@ -196,10 +196,10 @@ Target.create "InstallDocs" (fun _ ->
     run npm "install --frozen-lockfile" "."
     run dotnet "restore" docsSrcPath )
 
-Target.create "PublishDocs" (fun _ -> run npm "run build::docs" ".")
+Target.create "PublishDocs" (fun _ -> run npm "run build::docs" "")
 
 Target.create "RunDocs" (fun _ ->
-    run npm "run startdocs" ".")
+    run npm "run start::docs" "")
 
 let dependencies = [
 

package-lock.json

@@ -3,8 +3,8 @@
     "scripts": {
         "start::client": "dotnet fable watch ./src/Client --outDir ./src/Client/output --run vite serve",
         "build::client": "dotnet fable ./src/Client --outDir ./src/Client/output --run vite build",
-        "start::docs": "dotnet fable watch ./src/Docs --outDir ./src/Docs/output --run vite serve",
-        "build::docs": "dotnet fable ./src/Docs --outDir ./src/Docs/output --run vite build"
+        "start::docs": "dotnet fable watch ./src/Docs --outDir ./src/Docs/output --run vite serve --config ./viteDocs.config.mts",
+        "build::docs": "dotnet fable ./src/Docs --outDir ./src/Docs/output --run vite build --config ./viteDocs.config.mts"
     },
 
     "cross-os": {
@@ -15,34 +15,22 @@
         }
     },
     "devDependencies": {
-        "@babel/core": "^7.6.4",
-        "@babel/plugin-transform-runtime": "^7.6.2",
-        "@babel/preset-env": "^7.9.6",
-        "@babel/runtime": "^7.6.3",
         "@fortawesome/fontawesome-free": "^5.15.1",
         "vite": "^6.0.11",
-        "buffer": "^6.0.3",
         "@vitejs/plugin-react" : "^4.3.4",
         "core-js": "^3.3.2",
         "http-proxy-middleware": "^3.0.3",
         "i18next": "^20.3.5",
         "open-sans-fonts": "^1.6.2",
-        "react": "^18.2.0",
+        "react": "^19.1.0",
         "remotedev": "^0.2.0",
-        "react-dom": "^18.2.0",
-        "@tailwindcss/vite" : "^4.0.3",
+        "react-dom": "^19.1.0",
+        "@tailwindcss/vite" : "^4.0.17",
         "@tailwindcss/typography" : "^0.5.16",
-        "tailwindcss": "^4.0.3",
-        "cssnano": "^7.0.6",
-        "autoprefixer": "^10.4.2",
+        "tailwindcss": "^4.0.17",
         "react-highlight": "0.15.0",
-        "sass": "^1.69.5",
         "selfsigned": "^2.0.1",
         "highlight.js" : "^11.11.1",
-        "serve-static": "^1.10.2",
-        "react-slick": "^0.30.3",
-        "slick-carousel": "1.8.1",
-        "style-loader": "^1.2.1",
         "daisyui": "5.0.9"
     },
     "dependencies": {
@@ -52,7 +40,7 @@
         "daisyui": "^5.0.9",
         "hammerjs": "^2.0.8",
         "react-chartjs-2": "5.3.0",
-        "tailwindcss": "^4.0.3",
+        "tailwindcss": "^4.0.17",
         "chartjs-adapter-moment" : "1.0.1"
     }
 }

package.json

@@ -2,18 +2,21 @@ module Docs.App
 
 open Elmish
 open Elmish.React
+open Fable.Core.JsInterop
 
 #if DEBUG
 open Elmish.Debug
 open Elmish.HMR
 #endif
 
+importSideEffects "./index.css"
+
 Program.mkProgram View.init View.update View.AppView
 #if DEBUG
 |> Program.withConsoleTrace
 #endif
-|> Program.withReactSynchronous "safer-app"
+|> Program.withReactSynchronous "elmish-app"
 #if DEBUG
 |> Program.withDebugger
 #endif
-|> Program.run
+|> Program.run

src/Docs/App.fs

@@ -15,16 +15,14 @@ type State = { Page: Page; Theme: string }
 
 let init () =
     let nextPage = Router.currentUrl () |> Page.parseFromUrlSegments
-    { Page = nextPage; Theme = "light" }, Cmd.navigatePage nextPage
+    { Page = nextPage; Theme = "corporate" }, Cmd.navigatePage nextPage
 
 let update (msg: Msg) (state: State) : State * Cmd<Msg> =
     match msg with
     | UrlChanged page -> { state with Page = page }, Cmd.none
     | SetTheme theme -> { state with Theme = theme }, Cmd.none
 
 let private rightSide state dispatch (title: string) (docLink: string) elm =
-
-
     Daisy.drawerContent [
         Daisy.navbar [
             Daisy.navbarStart [
@@ -57,30 +55,10 @@ let private rightSide state dispatch (title: string) (docLink: string) elm =
                   ++ prop.className "my-6 text-5xl font-bold"
                   prop.text title
               ]
-
               elm ]
     ]
 
 let private leftSide (p: Page) =
-    let miBadge (b: string) (t: string) (mp: Page) =
-        Html.li [
-            Html.a [
-                prop.href mp
-                prop.onClick Router.goToUrl
-                if p = mp then
-                    menuItem.active
-                    ++ prop.className "justify-between"
-                else
-                    prop.className "justify-between"
-                prop.children [
-                    Html.span t
-                    Html.span [
-                        prop.className "badge"
-                        prop.text b
-                    ]
-                ]
-            ]
-        ]
 
     let mi (t: string) (mp: Page) =
         Html.li [
@@ -124,6 +102,7 @@ let private leftSide (p: Page) =
                         mi "BarChart" BarChart
                         mi "DoughnutChart" DoughnutChart
                         mi "MixedChart" MixedChart
+                        mi "BubbleChart" BubbleChart
                         ]
                 ]
             ]
@@ -149,7 +128,6 @@ let private inLayout state dispatch (title: string) (docLink: string) (p: Page)
     ]
 
 
-
 [<ReactComponent>]
 let AppView (state: State) (dispatch: Msg -> unit) =
 

src/Docs/View.fs

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+
+html, body {
+    height: 100%;
+    scroll-behavior: smooth;
+}
+
+#elmish-app {
+    display: flex;
+    flex-flow: column;
+    height: 100%
+}
+
+@plugin 'daisyui' {
+    themes: all;
+}

src/Docs/index.css

@@ -5,11 +5,11 @@
     <title>Feliz.ChartJS</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="./output/App.js" type="module"></script>
 </head>
 
 <body>
-    <div id="safer-app"></div>
+    <div id="elmish-app"></div>
+    <script src="./output/App.js" type="module"></script>
 </body>
 
-</html>
+</html>