Convert global-navbar to Svelte and add mobile support (#103)

leaningtech · Jul 31, 2024 · 6c81378 · 6c81378
1 parent b615420
commit 6c81378
Show file tree

Hide file tree

Showing 27 changed files with 722 additions and 385 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -42,14 +42,13 @@ jobs:
       - name: Install dependencies
         run: cd sites/cheerpj && pnpm install
 
+      - name: Build global-navbar
+        run: cd packages/global-navbar && pnpm run build
+
       - name: Build sites/cheerpj
         run: cd sites/cheerpj && pnpm run build
 
-      # This is included by the CheerpJ.com WP theme
-      - name: Copy global-navbar include.html to dist
-        run: cp packages/global-navbar/include.html sites/cheerpj/dist/_global-navbar.html
-
-      - name: Deploy
+      - name: Deploy cheerpj.com/docs
         uses: burnett01/rsync-deployments@7.0.1
         with:
           switches: -avzr --delete
@@ -59,3 +58,17 @@ jobs:
           remote_port: ${{ secrets.RSYNC_DEPLOY_PORT }}
           remote_user: ${{ secrets.RSYNC_DEPLOY_USER }}
           remote_key: ${{ secrets.RSYNC_DEPLOY_KEY }}
+
+      - name: Copy global-navbar dist to WordPress plugin
+        run: cp -r packages/global-navbar/dist packages/global-navbar/wordpress-plugin/global-navbar
+
+      - name: Deploy global-navbar WordPress plugin
+        uses: burnett01/rsync-deployments@7.0.1
+        with:
+          switches: -avzr --delete
+          path: packages/global-navbar/wordpress-plugin/global-navbar/
+          remote_path: ${{ secrets.RSYNC_DEPLOY_PATH_GLOBAL_NAVBAR }}
+          remote_host: ${{ secrets.RSYNC_DEPLOY_HOST }}
+          remote_port: ${{ secrets.RSYNC_DEPLOY_PORT }}
+          remote_user: ${{ secrets.RSYNC_DEPLOY_USER }}
+          remote_key: ${{ secrets.RSYNC_DEPLOY_KEY }}
diff --git a/...astro-theme/components/EventBanner.svelte → .../components/nav/global/EventBanner.svelte b/...astro-theme/components/EventBanner.svelte → .../components/nav/global/EventBanner.svelte
diff --git a/...es/astro-theme/components/GlobalNav.astro → .../components/nav/global/GlobalNavbar.astro b/...es/astro-theme/components/GlobalNav.astro → .../components/nav/global/GlobalNavbar.astro
@@ -1,7 +1,7 @@
 ---
 import EventBanner from "./EventBanner.svelte";
-import GlobalNavbar from "@leaningtech/global-navbar/include.html";
+import Nav from "@leaningtech/global-navbar/Wrapper.astro";
 ---
 
 <EventBanner client:idle />
-<GlobalNavbar />
+<Nav />
diff --git a/packages/astro-theme/index.ts b/packages/astro-theme/index.ts
@@ -146,6 +146,11 @@ export default function ThemeIntegration(
 					image: {
 						service: squooshImageService(),
 					},
+					vite: {
+						ssr: {
+							noExternal: ["@leaningtech/global-navbar"],
+						},
+					},
 				});
 			},
 		},

diff --git a/packages/astro-theme/layouts/Shell.astro b/packages/astro-theme/layouts/Shell.astro
@@ -1,6 +1,6 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
-import GlobalNav from "../components/GlobalNav.astro";
+import GlobalNavbar from "../components/nav/global/GlobalNavbar.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 
 interface Props {
@@ -100,7 +100,7 @@ const { title, description, image } = Astro.props;
 	<body
 		class="font-sans antialiased min-w-full min-h-screen flex flex-col m-0 p-0 bg-stone-900 text-stone-200"
 	>
-		<GlobalNav />
+		<GlobalNavbar />
 		<slot />
 	</body>
 </html>
diff --git a/packages/astro-theme/package.json b/packages/astro-theme/package.json
@@ -22,7 +22,8 @@
 		"./components/BlogPostCardSet.astro": "./components/BlogPostCardSet.astro",
 		"./components/LatestBlogPostPill.astro": "./components/LatestBlogPostPill.astro",
 		"./components/ShowcaseList.astro": "./components/ShowcaseList.astro",
-		"./components/Callout.astro": "./components/Callout.astro"
+		"./components/Callout.astro": "./components/Callout.astro",
+		"./components/nav/global/GlobalNavbar.astro": "./components/nav/global/GlobalNavbar.astro"
 	},
 	"scripts": {},
 	"peerDependencies": {

diff --git a/packages/global-navbar/README.md b/packages/global-navbar/README.md
@@ -0,0 +1,7 @@
+# global-navbar
+
+This is a Svelte component for the navigation bar that appears across almost all Leaning Technologies websites.
+
+It can also be built with `pnpm build` to produce a hydratable version of the component ready to be used in non-JS apps (such as WordPress sites). The WordPress plugin is available at `wordpress-plugin/global-navbar`.
+
+To develop this component, launch a site such as `sites/labs` and observe the changes there.
diff --git a/packages/global-navbar/include.html b/packages/global-navbar/include.html
-Original file line number
+Diff line change
@@ Expand Up / @@ -146,6 +146,11 @@ export default function ThemeIntegration( @@
     					image: {
     						service: squooshImageService(),
     					},
+    					vite: {
+    						ssr: {
+    							noExternal: ["@leaningtech/global-navbar"],
+    						},
+    					},
     				});
     			},
     		},
@@ Expand Down @@