fix(docs-site): configure base path for GitHub Pages

.github/workflows/docs.yml

@@ -33,9 +33,19 @@ jobs:
       - name: Build docs site
         run: pnpm --filter docs-site build
 
+      - name: Prepare deploy directory
+        run: |
+          cd apps/docs/dist
+          cp -r assets devtools/assets
+          cp elm.*.js devtools/
+          cp style.css devtools/ 2>/dev/null || true
+          cp favicon.ico devtools/ 2>/dev/null || true
+          cp content.dat devtools/ 2>/dev/null || true
+          find devtools -name '*.html' -exec sed -i 's|src="/elm\.|src="/devtools/elm.|g' {} +
+
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: apps/docs/dist
+          path: apps/docs/dist/devtools
 
   deploy:
     environment:

apps/docs/app/Route/Index.elm

@@ -8,8 +8,8 @@ import Html
 import Html.Attributes as Attr
 import Pages.Url
 import PagesMsg exposing (PagesMsg)
+import Route exposing (Route)
 import UrlPath
-import Route
 import RouteBuilder exposing (App, StatelessRoute)
 import Shared
 import View exposing (View)
@@ -98,41 +98,42 @@ viewPackageGrid =
         [ viewPackageCard
             { name = "@wolfcola/treeshake-check"
             , description = "CLI & library to verify packages are tree-shakeable by Rollup"
-            , href = "/packages/treeshake-check"
+            , route = Route.Packages__Slug_ { slug = "treeshake-check" }
             , tag = "Published"
             }
         , viewPackageCard
             { name = "@wolfcola/eslint-plugin-treeshake"
             , description = "ESLint plugin that flags tree-breaking patterns"
-            , href = "/packages/eslint-plugin-treeshake"
+            , route = Route.Packages__Slug_ { slug = "eslint-plugin-treeshake" }
             , tag = "Published"
             }
         , viewPackageCard
             { name = "@wolfcola/devtools-bridge"
             , description = "SDK adapter for emitting events from DaVinci, Journey, OIDC clients"
-            , href = "/packages/devtools-bridge"
+            , route = Route.Packages__Slug_ { slug = "devtools-bridge" }
             , tag = "Published"
             }
         , viewPackageCard
             { name = "@wolfcola/devtools-types"
             , description = "Effect Schema definitions for AuthEvent and FlowState"
-            , href = "/packages/devtools-types"
+            , route = Route.Packages__Slug_ { slug = "devtools-types" }
             , tag = "Published"
             }
         ]
 
 
 viewPackageCard :
-    { name : String, description : String, href : String, tag : String }
+    { name : String, description : String, route : Route, tag : String }
     -> Html.Html (PagesMsg Msg)
 viewPackageCard pkg =
-    Html.a [ Attr.class "package-card", Attr.href pkg.href ]
+    Route.link [ Attr.class "package-card" ]
         [ Html.div [ Attr.class "package-card-header" ]
             [ Html.h3 [] [ Html.text pkg.name ]
             , Html.span [ Attr.class "package-tag" ] [ Html.text pkg.tag ]
             ]
         , Html.p [] [ Html.text pkg.description ]
         ]
+        pkg.route
 
 
 viewQuickLinks : Html.Html (PagesMsg Msg)
@@ -141,16 +142,13 @@ viewQuickLinks =
         [ Html.h2 [] [ Html.text "Quick Links" ]
         , Html.ul []
             [ Html.li []
-                [ Html.a [ Attr.href "/docs/getting-started" ]
-                    [ Html.text "Installation & Setup" ]
+                [ Route.link [] [ Html.text "Installation & Setup" ] (Route.Docs__Slug_ { slug = "getting-started" })
                 ]
             , Html.li []
-                [ Html.a [ Attr.href "/architecture" ]
-                    [ Html.text "Architecture Overview" ]
+                [ Route.link [] [ Html.text "Architecture Overview" ] Route.Architecture
                 ]
             , Html.li []
-                [ Html.a [ Attr.href "/contributing/development-setup" ]
-                    [ Html.text "Contributing" ]
+                [ Route.link [] [ Html.text "Contributing" ] (Route.Contributing__Slug_ { slug = "development-setup" })
                 ]
             ]
         ]

apps/docs/app/Shared.elm

@@ -137,7 +137,7 @@ globEntries dir section =
                                 (Decode.map2
                                     (\title description ->
                                         { title = title
-                                        , url = "/" ++ sectionToUrlPrefix section ++ "/" ++ slug
+                                        , url = Route.baseUrl ++ sectionToUrlPrefix section ++ "/" ++ slug
                                         , section = section
                                         , excerpt = description
                                         }
@@ -219,18 +219,13 @@ viewHeader sharedData model toMsg =
                     "\u{2630}"
                 )
             ]
-        , Html.a
-            [ Attr.class "logo"
-            , Attr.href "/"
-            ]
-            [ Html.text "wolfcola devtools" ]
+        , Route.link [ Attr.class "logo" ] [ Html.text "wolfcola devtools" ] Route.Index
         , viewSearch sharedData model toMsg
         , Html.nav [ Attr.class "header-nav" ]
-            [ Html.a [ Attr.href "/packages/treeshake-check" ] [ Html.text "Packages" ]
-            , Html.a [ Attr.href "/docs/getting-started" ] [ Html.text "Guides" ]
-
-            , Html.a [ Attr.href "/architecture" ] [ Html.text "Architecture" ]
-            , Html.a [ Attr.href "/contributing/development-setup" ] [ Html.text "Contributing" ]
+            [ Route.link [] [ Html.text "Packages" ] (Route.Packages__Slug_ { slug = "treeshake-check" })
+            , Route.link [] [ Html.text "Guides" ] (Route.Docs__Slug_ { slug = "getting-started" })
+            , Route.link [] [ Html.text "Architecture" ] Route.Architecture
+            , Route.link [] [ Html.text "Contributing" ] (Route.Contributing__Slug_ { slug = "development-setup" })
             ]
         , Html.button
             [ Attr.class "theme-toggle"
@@ -297,38 +292,38 @@ viewSidebar model toMsg =
             )
         ]
         [ viewSidebarSection "Packages"
-            [ ( "/packages/treeshake-check", "treeshake-check" )
-            , ( "/packages/eslint-plugin-treeshake", "eslint-plugin-treeshake" )
-            , ( "/packages/devtools-bridge", "devtools-bridge" )
-            , ( "/packages/devtools-types", "devtools-types" )
+            [ ( Route.Packages__Slug_ { slug = "treeshake-check" }, "treeshake-check" )
+            , ( Route.Packages__Slug_ { slug = "eslint-plugin-treeshake" }, "eslint-plugin-treeshake" )
+            , ( Route.Packages__Slug_ { slug = "devtools-bridge" }, "devtools-bridge" )
+            , ( Route.Packages__Slug_ { slug = "devtools-types" }, "devtools-types" )
             ]
         , viewSidebarSection "Guides"
-            [ ( "/docs/getting-started", "Getting Started" )
-            , ( "/docs/devtools-extension", "DevTools Extension" )
-            , ( "/docs/vscode-extension", "VS Code Extension" )
-            , ( "/docs/tree-shaking", "Tree-Shaking" )
-            , ( "/docs/davinci-integration", "DaVinci Integration" )
-            , ( "/docs/journey-integration", "Journey Integration" )
-            , ( "/docs/oidc-integration", "Generic OIDC Integration" )
+            [ ( Route.Docs__Slug_ { slug = "getting-started" }, "Getting Started" )
+            , ( Route.Docs__Slug_ { slug = "devtools-extension" }, "DevTools Extension" )
+            , ( Route.Docs__Slug_ { slug = "vscode-extension" }, "VS Code Extension" )
+            , ( Route.Docs__Slug_ { slug = "tree-shaking" }, "Tree-Shaking" )
+            , ( Route.Docs__Slug_ { slug = "davinci-integration" }, "DaVinci Integration" )
+            , ( Route.Docs__Slug_ { slug = "journey-integration" }, "Journey Integration" )
+            , ( Route.Docs__Slug_ { slug = "oidc-integration" }, "Generic OIDC Integration" )
             ]
         , viewSidebarSection "Contributing"
-            [ ( "/contributing/development-setup", "Development Setup" )
-            , ( "/contributing/repository-structure", "Repository Structure" )
-            , ( "/contributing/code-style", "Code Style" )
-            , ( "/contributing/release-process", "Release Process" )
+            [ ( Route.Contributing__Slug_ { slug = "development-setup" }, "Development Setup" )
+            , ( Route.Contributing__Slug_ { slug = "repository-structure" }, "Repository Structure" )
+            , ( Route.Contributing__Slug_ { slug = "code-style" }, "Code Style" )
+            , ( Route.Contributing__Slug_ { slug = "release-process" }, "Release Process" )
             ]
         ]
 
 
-viewSidebarSection : String -> List ( String, String ) -> Html msg
+viewSidebarSection : String -> List ( Route, String ) -> Html msg
 viewSidebarSection heading links =
     Html.div [ Attr.class "sidebar-section" ]
         [ Html.h3 [ Attr.class "sidebar-heading" ] [ Html.text heading ]
         , Html.ul [ Attr.class "sidebar-links" ]
             (List.map
-                (\( href, label ) ->
+                (\( route, label ) ->
                     Html.li []
-                        [ Html.a [ Attr.href href ] [ Html.text label ] ]
+                        [ Route.link [] [ Html.text label ] route ]
                 )
                 links
             )

apps/docs/app/Site.elm

@@ -8,7 +8,7 @@ import SiteConfig exposing (SiteConfig)
 
 config : SiteConfig
 config =
-    { canonicalUrl = "https://elm-pages.com"
+    { canonicalUrl = "https://ryanbas21.github.io/devtools"
     , head = head
     }
 

apps/docs/elm-pages.config.mjs

@@ -2,17 +2,17 @@ import { defineConfig } from 'vite';
 import adapter from 'elm-pages/adapter/netlify.js';
 
 export default {
-  vite: defineConfig({}),
+  vite: defineConfig({
+    base: '/devtools/',
+  }),
   adapter,
   headTagsTemplate(context) {
     return `
-<link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/devtools/style.css" />
 <meta name="generator" content="elm-pages v${context.cliVersion}" />
 `;
   },
   preloadTagForFile(file) {
-    // add preload directives for JS assets and font assets, etc., skip for CSS files
-    // this function will be called with each file that is processed by Vite, including any files in your headTagsTemplate in your config
     return !file.endsWith('.css');
   },
 };

apps/docs/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "elm-pages dev",
-    "build": "elm-pages build"
+    "build": "elm-pages build --base /devtools/"
   },
   "devDependencies": {
     "elm-codegen": "^0.6.3",