Updated packages and config and fixed the CI/CD pipeline (I hope)

.forgejo/workflows/deploy.yaml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          cache: "pnpm"
+          node-version: 22
 
       - name: "Install dependencies"
         run: pnpm install
@@ -37,21 +37,40 @@ jobs:
     needs: build
     runs-on: docker
     steps:
-      - name: Get current date
-        id: date
-        run: echo "::set-output name=date::$(date +'%Y%m%d%H%M%S')"
-      - name: Setup SSH
+      - name: Install Deployment Tools
         run: |
-          mkdir -p ~/.ssh
-          chmod 0700 ~/.ssh
-          echo "${{ secrets.SSHPRIVKEY }}" > ~/.ssh/id_ed25519
-          chmod 0600 ~/.ssh/id_ed25519
-          echo "[${{ vars.WEBSERVER_IP  }}]:${{ SSHPORT }} ${{ secrets.SSHPUBKEY }}" > ~/.ssh/known_hosts
-          chmod 0600 ~/.ssh/known_hosts
+          if command -v apk >/dev/null; then
+            apk add --no-cache rsync openssh-client
+          else
+            apt-get update && apt-get install -y rsync openssh-client
+          fi
+      - name: Setup SSH
+        uses: https://github.com/webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
       - name: Push
         run: |
-          scp -P ${{ secrets.SSHPORT }} -r dist ${{ secrets.SSH_USERNAME }}@${{ vars.WEBSERVER_IP }}:~/oblog-parallels/build-${{ steps.date.outputs.date }}
-      - name: Update symlink
-        run: |
-          ssh ${{ secrets.SSH_USERNAME }}@${{ vars.WEBSERVER_IP  }} -p ${{ secrets.SSHPORT }} "cp -r ~/oblog-parallels/build-${{ steps.date.outputs.date }} ~/oblog-parallels/dist"
+          rsync -avz -e "ssh -p ${{ secrets.SERVER_PORT }}" \
+                --delete ./dist/ \
+                ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_IP }}:${{ variables.DESTINATION }}
 
+  notify:
+    needs: deploy
+    runs-on: docker
+    if: always() # Always run
+    steps:
+      - name: Send Discord Notification
+        run: |
+          STATUS="${{ needs.deploy.result }}"
+          COLOR=$([ "$STATUS" == "success" ] && echo "4582179" || echo "16711680")
+
+          curl -H "Content-Type: application/json" \
+                -X POST \
+                -d '{
+                  "embeds": [{
+                    "title": "Deployment Report",
+                    "color": '$COLOR',
+                    "description": "Status: **'$STATUS'**\nRepo: ${{ github.repository }}\nCommit: ${{ github.sha }}"
+                  }]
+                }' \
+                "${{ secrets.DISCORD_WEBHOOK_URL }}"

astro.config.ts

@@ -1,8 +1,14 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, envField, fontProviders } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
+import {
+  transformerNotationDiff,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from "@shikijs/transformers";
+import { transformerFileName } from "./src/utils/transformers/fileName";
 import { SITE } from "./src/config";
 
 // https://astro.build/config
@@ -18,23 +24,50 @@ export default defineConfig({
     shikiConfig: {
       // For more themes, visit https://shiki.style/themes
       themes: { light: "min-light", dark: "night-owl" },
-      wrap: true,
+      defaultColor: false,
+      wrap: false,
+      transformers: [
+        transformerFileName({ style: "v2", hideDot: false }),
+        transformerNotationHighlight(),
+        transformerNotationWordHighlight(),
+        transformerNotationDiff({ matchAlgorithm: "v3" }),
+      ],
     },
   },
   vite: {
+    // eslint-disable-next-line
+    // @ts-ignore
+    // This will be fixed in Astro 6 with Vite 7 support
+    // See: https://github.com/withastro/astro/issues/14030
     plugins: [tailwindcss()],
     optimizeDeps: {
       exclude: ["@resvg/resvg-js"],
     },
   },
   image: {
-    // Used for all Markdown images; not configurable per-image
-    // Used for all `<Image />` and `<Picture />` components unless overridden with a prop
-    experimentalLayout: "responsive",
+    responsiveStyles: true,
+    layout: "constrained",
+  },
+  env: {
+    schema: {
+      PUBLIC_GOOGLE_SITE_VERIFICATION: envField.string({
+        access: "public",
+        context: "client",
+        optional: true,
+      }),
+    },
   },
   experimental: {
-    svg: true,
-    responsiveImages: true,
     preserveScriptOrder: true,
+    fonts: [
+      {
+        name: "Google Sans Code",
+        cssVariable: "--font-google-sans-code",
+        provider: fontProviders.google(),
+        fallbacks: ["monospace"],
+        weights: [300, 400, 500, 600, 700],
+        styles: ["normal", "italic"],
+      },
+    ],
   },
 });

package.json

@@ -13,33 +13,35 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/rss": "^4.0.18",
+    "@astrojs/sitemap": "^3.7.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@tailwindcss/vite": "^4.0.14",
-    "astro": "^5.5.2",
-    "dayjs": "^1.11.13",
+    "@tailwindcss/vite": "^4.2.2",
+    "astro": "^5.18.1",
+    "dayjs": "^1.11.20",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "satori": "^0.12.1",
-    "sharp": "^0.33.5",
-    "tailwindcss": "^4.0.14"
+    "satori": "^0.18.4",
+    "sharp": "^0.34.5",
+    "slugify": "^1.6.9",
+    "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@pagefind/default-ui": "^1.3.0",
-    "@tailwindcss/typography": "^0.5.16",
+    "@astrojs/check": "^0.9.8",
+    "@pagefind/default-ui": "^1.5.0",
+    "@shikijs/transformers": "^3.23.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/lodash.kebabcase": "^4.1.9",
-    "@typescript-eslint/parser": "^8.26.1",
-    "eslint": "^9.22.0",
-    "eslint-plugin-astro": "^1.3.1",
-    "globals": "^16.0.0",
-    "pagefind": "^1.3.0",
-    "prettier": "^3.5.3",
+    "@typescript-eslint/parser": "^8.58.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-astro": "^1.7.0",
+    "globals": "^16.5.0",
+    "pagefind": "^1.5.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1"
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.58.1"
   }
 }

src/utils/transformers/fileName.js

@@ -0,0 +1,69 @@
+/**
+ * CustomShiki transformer that adds file name labels to code blocks.
+ *
+ * This transformer looks for the `file="filename"` meta attribute in code blocks
+ * and creates a styled label showing the filename. It supports two different
+ * styling options and can optionally hide the green dot indicator.
+ *
+ * @param {Object} options - Configuration options for the transformer
+ * @param {string} [options.style="v2"] - The styling variant to use
+ *   - `"v1"`: Tab-style with rounded top corners, positioned at top-left
+ *   - `"v2"`: Badge-style with border, positioned at top-left with offset
+ * @param {boolean} [options.hideDot=false] - Whether to hide the green dot indicator
+ */
+export const transformerFileName = ({
+  style = "v2",
+  hideDot = false,
+} = {}) => ({
+  pre(node) {
+    // Add CSS custom property to the node
+    const fileNameOffset = style === "v1" ? "0.75rem" : "-0.75rem";
+    node.properties.style =
+      (node.properties.style || "") + `--file-name-offset: ${fileNameOffset};`;
+
+    const raw = this.options.meta?.__raw?.split(" ");
+
+    if (!raw) return;
+
+    const metaMap = new Map();
+
+    for (const item of raw) {
+      const [key, value] = item.split("=");
+      if (!key || !value) continue;
+      metaMap.set(key, value.replace(/["'`]/g, ""));
+    }
+
+    const file = metaMap.get("file");
+
+    if (!file) return;
+
+    // Add additional margin to code block
+    this.addClassToHast(
+      node,
+      `mt-8 ${style === "v1" ? "rounded-tl-none" : ""}`
+    );
+
+    // Add file name to code block
+    node.children.push({
+      type: "element",
+      tagName: "span",
+      properties: {
+        class: [
+          "absolute py-1 text-foreground text-xs font-medium leading-4",
+          hideDot
+            ? "px-2"
+            : "pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2",
+          style === "v1"
+            ? "left-0 -top-6 rounded-t-md border border-b-0 bg-muted/50"
+            : "left-2 top-(--file-name-offset) border rounded-md bg-background",
+        ],
+      },
+      children: [
+        {
+          type: "text",
+          value: file,
+        },
+      ],
+    });
+  },
+});