From f68b6ed22ba9a935e0290218406c0b7b5049a8e7 Mon Sep 17 00:00:00 2001
From: Nir Galon <nir@galons.io>
Date: Mon, 24 Jun 2024 01:07:38 +0300
Subject: [PATCH] fix: deployment workflow

---
 .github/workflows/continuous-deployment.yml | 74 ---------------------
 .github/workflows/deploy.yml                | 57 ++++++++++++++++
 components/AppHeader.vue                    | 33 +++++++--
 pages/index.vue                             | 21 +++++-
 4 files changed, 103 insertions(+), 82 deletions(-)
 delete mode 100644 .github/workflows/continuous-deployment.yml
 create mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/continuous-deployment.yml b/.github/workflows/continuous-deployment.yml
deleted file mode 100644
index 41476a9..0000000
--- a/.github/workflows/continuous-deployment.yml
+++ /dev/null
@@ -1,74 +0,0 @@
-name: Continuous Deployment
-
-on:
-  push:
-    branches:
-      - main
-  schedule:
-    - cron: "0 7 1 * *" # Every first day on every month at 7:00 AM UTC (10:00 AM Israel time).
-
-# Allow this job to clone the repo and create a page deployment
-permissions:
-  contents: write
-  pages: write
-  id-token: write
-  pull-requests: write
-  repository-projects: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout your repository using git
-        uses: actions/checkout@v3
-
-      - name: Install and build website
-        uses: withastro/action@v0
-
-  publish-release:
-    needs: build
-    runs-on: ubuntu-latest
-    name: Publish a release to GitHub
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Create Release 🚀
-        uses: ridedott/release-me-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          release-branches: '["main"]'
-          node-module: true
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1
-
-  # build-index:
-  #   needs: deploy
-  #   runs-on: ubuntu-latest
-  #   name: Build search index and push it to Algolia
-  #   steps:
-  #     - name: Checkout your repository using git
-  #       uses: actions/checkout@v3
-
-  #     - name: Install dependencies
-  #       run: npm install
-
-  #     - name: Create index file
-  #       run: node index-posts.js
-
-  #     - name: Update index.json To Algolia
-  #       run: npx atomic-algolia
-  #       env:
-  #         ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
-  #         ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
-  #         ALGOLIA_INDEX_NAME: index.json
-  #         ALGOLIA_INDEX_FILE: ./dist/index.json
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..403c5ed
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,57 @@
+name: Deploy to GitHub pages on merge
+
+on:
+  push:
+    branches:
+      - main
+  schedule:
+    - cron: "0 7 1 * *" # Every first day on every month at 7:00 AM UTC (10:00 AM Israel time).
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+    name: Publish a release to GitHub
+    outputs:
+      version: ${{ steps.release_version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - run: npm install
+
+      - run: npx nuxt generate
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+      - name: Create Release 🚀
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release
+
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build_and_publish
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index a51f7a2..12e02e5 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const mobileMenu = ref(false);
 const colorMode = useColorMode();
 const isDark = computed({
   get() {
@@ -21,13 +22,33 @@ const isDark = computed({
           />
         </svg>
       </a>
-      <!-- <span id="openMenu" onclick="toggleMenu()" class="md:hidden"><i class="fa-regular fa-bars w-8 h-8"></i></span> -->
-      <!-- <span id="closeMenu" onclick="toggleMenu()" class="hidden md:hidden"><i class="fa-regular fa-xmark w-8 h-8"></i></span> -->
+
+      <span @click="mobileMenu = !mobileMenu" class="md:hidden">
+        <svg
+          v-if="!mobileMenu"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-8 w-8 fill-zinc-700 dark:fill-zinc-400"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-8 w-8 fill-zinc-700 dark:fill-zinc-400"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </span>
     </div>
-    <div
-      id="menu"
-      class="text-center space-y-4 py-2 md:py-0 mt-2 md:mt-2 md:space-y-0 md:ml-10 md:space-x-8 hidden md:block border-t-2 md:border-t-0 border-zinc-800"
-    >
+    <div class="space-y-4 py-2 md:py-0 mt-2 md:mt-2 md:space-y-0 md:ml-10 md:space-x-8 hidden md:flex items-center border-t-2 md:border-t-0 border-zinc-800">
       <div class="md:hidden">
         <div class="relative mt-1 rounded-md shadow-sm">
           <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
diff --git a/pages/index.vue b/pages/index.vue
index bed4911..114ac47 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,7 +24,20 @@ const posts = (await queryContent("/").find())
   <!-- Recent posts -->
   <section class="py-6">
     <div class="flex items-center my-2">
-      <i class="fa-thin fa-pencil h-8 w-8"></i>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-8 w-8 text-zinc-700 dark:text-zinc-400"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+        />
+      </svg>
       <h2 class="ml-2 font-medium text-3xl">Recent Posts</h2>
     </div>
 
@@ -35,7 +48,11 @@ const posts = (await queryContent("/").find())
 
   <section class="py-6">
     <div class="flex items-center my-2">
-      <i class="fa-light fa-presentation-screen h-8 w-8"></i>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="h-8 w-8 fill-zinc-700 dark:fill-zinc-400">
+        <path
+          d="M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V288c0 35.3 28.7 64 64 64H256v34.7l-70.6 70.6c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L288 445.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L320 386.7V352H480c35.3 0 64-28.7 64-64V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H512 64 32zM96 64H480V288H288 96V64z"
+        />
+      </svg>
       <h2 class="ml-2 font-medium text-3xl">Upcoming & Recent Talks</h2>
     </div>