Updates to the workflows.

Adjustments to new workflows. Update build.yml Update deploy.yml Update deploy.yml Update build.yml Update deploy.yml Update deploy.yml Update deploy.yml Update deploy.yml Update build.yml Update build.yml Finally think I fixed it... strip_components needed to be 1, not 2. Adjusted hover styles. Merged workflow changes from main. Fixed styles for code highlighting and theme toggle button. Added color transition and increased duration for theme switch to avoid flashbanging someone. added color transitions to code blocks
corigne · Jul 3, 2024 · 349ca53 · 349ca53
1 parent e0b61a9
commit 349ca53
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 67 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,38 +1,38 @@
-name: Build and Publish
+name: Build, Test and Transfer
 
 on:
   workflow_dispatch:
   push:
-    branches:
-      - main
-
+    branches: [ main ]
+
 jobs:
-  build:
-    name: Pull, Build & Deploy to AWS
+  Build_and_Test:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
 
       - name: Setup Node
         uses: actions/[email protected]
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1.6.0
+      - name: Install Node Deps
+        uses: bahmutov/npm-install@v1.10.2
         with:
           working-directory: ./frontend
 
-      - name: Build Frontend
+      - name: NPM Run Build (Vite)
         working-directory: ./frontend
         run: npm run build
+      #run tests here eventually
 
-      - name: Copy frontend files to webserver folder
-        uses: appleboy/[email protected].4
+      - name: SCP Build Artifact to AWS
+        uses: appleboy/[email protected].7
         with:
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USERNAME }}
           port: ${{ secrets.PORT }}
           key: ${{ secrets.SSH_PRIVATE_KEY }}
-          source: "frontend/build/"
-          target: "/var/www/${{ secrets.DOMAIN }}"
-          strip_components: 2
+          source: "frontend/build,frontend/package.json,frontend/package-lock.json"
+          target: "~/${{ secrets.DOMAIN }}"
+          rm: true
+          strip_components: 1
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,39 @@
+name: Prepare and Publish
+
+on:
+  workflow_dispatch:
+  workflow_run:
+    workflows: ["Build, Test and Transfer"]
+    types: [completed]
+
+jobs:
+  Prepare:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: ${{ secrets.PORT }}
+          script: | 
+            export NVM_DIR=~/.nvm
+            source ~/.nvm/nvm.sh
+            cd ~/${{ secrets.DOMAIN }}
+            npm ci --omit dev
+  Publish:
+    needs: [Prepare]
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: ${{ secrets.PORT }}
+          script: |
+            export NVM_DIR=~/.nvm
+            source ~/.nvm/nvm.sh
+            pm2 restart ${{ secrets.DOMAIN }}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@svelte-dev/pretty-code": "^1.0.0",
     "@sveltejs/adapter-node": "^5.2.0",
+    "shiki": "^1.10.1",
     "svelte-hero-icons": "^5.1.0"
   }
 }
diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -3,16 +3,63 @@
 @tailwind utilities;
 
 @layer base {
+    body {
+        @apply bg-crust transition-colors duration-700
+    }
+    main {
+        @apply bg-base text-text outline outline-1 outline-slate-400 drop-shadow-md transition-colors duration-700
+    }
     h1 {
-        @apply text-2xl font-bold py-2
+        @apply text-2xl font-bold py-2 mt-10 text-text
     }
     h2 {
-        @apply text-xl font-semibold py-2
+        @apply text-xl font-semibold py-2 mt-5 text-subtext0
+    }
+    h3 {
+        @apply text-lg italic mt-5
+    }
+    h4 {
+
     }
     a {
-        @apply text-sapphire font-semibold
+        @apply text-blue font-semibold
+    }
+    pre {
+        @apply p-2 w-full
+    }
+    code {
+        @apply py-2 px-4 rounded-lg outline outline-1 outline-slate-400 drop-shadow-md transition-colors duration-700
+    }
+    @media (hover: hover) {
+        a:hover {
+            @apply invert drop-shadow-2xl transition-all
+        }
     }
-    a:hover {
-        @apply underline
+}
+
+@layer components {
+    .header {
+        a {
+            @apply text-sapphire
+        }
+    }
+    .tags {
+        @apply text-overlay0
+    }
+}
+
+code[data-theme*=' '],
+code[data-theme*=' '] span {
+    color: var(--shiki-light);
+    background-color: var(--shiki-light-bg);
+}
+
+html[class*='dark']{
+    @media (prefers-color-scheme: dark) {
+        code[data-theme*=' '],
+        code[data-theme*=' '] span {
+            color: var(--shiki-dark);
+            background-color: var(--shiki-dark-bg);
+        }
     }
 }
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="icon" href="https://fav.farm/📜" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %sveltekit.head%
-  </head>
-    <body class="latte dark:frappe bg-crust h-full min-h-screen" data-sveltekit-preload-data="hover" >
-    <div class="text" style="display: contents">%sveltekit.body%</div>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <link rel="icon" href="https://fav.farm/📜" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        %sveltekit.head%
+    </head>
+    <body class="latte dark:frappe h-full min-h-screen" data-sveltekit-preload-data="hover" >
+        <div class="text" style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>
diff --git a/frontend/src/blogposts/hello-world.md b/frontend/src/blogposts/hello-world.md
@@ -11,11 +11,21 @@ published: true
 
 # Hello world
 
-Some text.  
+Welcome to my dev blog.  
 
+I built this from scratch with:  
+- SvelteKit 
+- mdsvex 
+- tailwind   
 
-```bash  
-
-echo 'some bash code in a code block'
+## Code Blocks!
 
+I am using [@svelte-dev/pretty-code](https://pretty-code.js.cool/) for syntax highlighting.
+```ts
+// typescript
+function greet(name: string) {
+    console.log(`Hello ${name}!`)
+}
 ```
+
+Some *more* text.
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import "../app.css"
 import { darkMode } from "../stores";
-import type { LayoutData } from "./$types";
 
 import Footer from "./footer.svelte"
 import Header from "./header.svelte"
@@ -18,7 +17,7 @@ $: darkMode
 
 <div class="flex flex-col h-screen items-center overflow-scroll">
     <Header />
-    <main class="bg-base text-text md:w-5/6 max-w-7xl w-full py-4 px-4 mb-auto md:rounded-lg">
+    <main class="md:w-5/6 max-w-7xl w-full p-6 mb-auto md:rounded-lg">
         <slot />
     </main>
     <Footer />

diff --git a/frontend/src/routes/blog/[slug]/+page.svelte b/frontend/src/routes/blog/[slug]/+page.svelte
@@ -12,21 +12,20 @@ export let data : PageData
 <article>
 
     <hgroup>
-        <h1>{data.meta.title}</h1>
-        <p>Published on {new Date(data.meta.data).toString()}</p>
+        <h1 class="text-4xl">{data.meta.title}</h1>
+        <p>Published on {new Date(data.meta.date).toLocaleDateString()}</p>
     </hgroup>
 
     <div class="tags">
         {#each data.meta.categories as category}
-            <span class="text-surface2">&num;{category} </span>
+            <span>&num;{category} </span>
         {/each}
     </div>
 
     <div class="prose">
         <svelte:component this={data.content}/>
     </div>
 
-
 </article>
 
 <style>

diff --git a/frontend/src/routes/header.svelte b/frontend/src/routes/header.svelte
@@ -4,7 +4,7 @@ import { Icon, Moon, Sun } from 'svelte-hero-icons'
 import { darkMode } from '../stores'
 </script>
 
-<div class="text-lg w-5/6 max-w-7xl flex justify-center">
+<div class="header text-lg w-5/6 max-w-7xl flex justify-center">
     <nav class="w-full py-5 gap-5 flex flex-col justify-between items-center md:flex-row ">
         <a href="/" class="title">
             <b>{config.title}</b>
@@ -29,8 +29,8 @@ import { darkMode } from '../stores'
             <label for="dark-mode-toggle" />
             <button
                 id="dark-mode-toggle"
-                class={ "h-8 w-8 p-1 text-sapphire outline outline-2 outline-base "
-                    + "hover:bg-sapphire hover:text-base font-bold rounded-md transition-colors" }
+                class={ "h-8 w-8 p-1 text-sapphire outline outline-1 outline-overlay0 shadow-md transition-all "
+                    + "font-bold rounded-md [@media(hover:hover)]:hover:bg-sapphire [@media(hover:hover)]:hover:text-base" }
                 on:click={ () => {darkMode.set(!$darkMode)} }
             >
                 <Icon src="{($darkMode) ? Moon : Sun}" solid />