Merge pull request #4 from FernandoArteaga/github-pages

add workflow for publishing astro site to github pages
FernandoArteaga · Feb 3, 2024 · 03b8467 · 03b8467
2 parents 6a41552 + a580166
commit 03b8467
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 15 deletions.
diff --git a/.github/publish.yaml b/.github/publish.yaml
@@ -0,0 +1,76 @@
+name: Deploy Astro site to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+env:
+  BUILD_PATH: "."
+
+jobs:
+  build:
+    name: "Build"
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout"
+        uses: actions/checkout@v4
+      - name: "Setup Node"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: 'pnpm'
+      - name: "Setup pnpm"
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+      - name: "Get pnpm store directory"
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - name: "Setup pnpm cache"
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: "Setup Pages"
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: "Install dependencies"
+        run: pnpm install
+        working-directory: ${{ env.BUILD_PATH }}
+      - name: "Build with Astro"
+        run: |
+          pnpx --no-install astro build \
+            --site "${{ steps.pages.outputs.origin }}" \
+            --base "${{ steps.pages.outputs.base_path }}"
+        working-directory: ${{ env.BUILD_PATH }}
+      - name: "Upload artifact"
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ${{ env.BUILD_PATH }}/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: "Deploy"
+    steps:
+      - name: "Deploy to GitHub Pages"
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
@@ -4,8 +4,8 @@ import { Icon } from "astro-icon/components";
 export type IconName = 'github' | 'lightbulb-off' | 'lightbulb-on' | 'linkedin' | 'mail' | 'blog'
 interface Props {
   name: IconName
-  size?: number
-  className?: string
+  size?: string
+  class?: string
 }
 
 const { name, size = 32, class: className } = Astro.props;

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -1,5 +1,6 @@
 ---
-import Icon from "$/components/Icon.astro";---
+import Icon from "$/components/Icon.astro"
+---
 
 <label id="astro-color-scheme-switch" class="swap">
     <input type="checkbox"/>
@@ -14,26 +15,26 @@ import Icon from "$/components/Icon.astro";---
 </style>
 
 <script>
-    const themeSwitch = document.getElementById("astro-color-scheme-switch");
-    const theme = localStorage.getItem("theme");
-    const themeMatcher = window.matchMedia("(prefers-color-scheme: dark)");
-    let systemTheme = themeMatcher.matches ? "dark" : "light";
+    const themeSwitch = document.getElementById("astro-color-scheme-switch")
+    const theme = localStorage.getItem("theme")
+    const themeMatcher = window.matchMedia("(prefers-color-scheme: dark)")
+    let systemTheme = themeMatcher.matches ? "dark" : "light"
 
     themeMatcher.addEventListener("change", (event) => {
         const theme = event.matches ? "dark" : "light";
         systemTheme = theme;
         if (localStorage.getItem("theme") === "system") {
             updateAppliedTheme(theme);
         }
-    });
+    })
 
-    function updateAppliedTheme(value) {
+    function updateAppliedTheme(value: string) {
         document.documentElement.classList.remove("light", "dark");
         document.documentElement.classList.add(value);
         document.documentElement.setAttribute("data-theme", value);
     }
 
-    function updateTheme(value) {
+    function updateTheme(value: string)    {
         const theme = value === "system" ? systemTheme : value;
         updateAppliedTheme(theme);
         localStorage.setItem("theme", value);
@@ -46,10 +47,10 @@ import Icon from "$/components/Icon.astro";---
     updateTheme(currentTheme);
 
     checkbox.addEventListener("change", (event) => {
-        const checkbox = event.target;
-        const settheme = checkbox.value === "dark" ? "light" : "dark";
-        checkbox.value = settheme;
-        updateTheme(settheme);
-    });
+        const checkbox: EventTarget = event.target;
+        const setTheme = checkbox.value === "dark" ? "light" : "dark";
+        checkbox.value = setTheme;
+        updateTheme(setTheme);
+    })
 
 </script>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -7,6 +7,7 @@ import Layout from '../layouts/BlogPost.astro';
 	description="Lorem ipsum dolor sit amet"
 	pubDate={new Date('August 08 2021')}
 	heroImage="/blog-placeholder-about.jpg"
+	topics={[]}
 >
 	<p>
 		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut