V6

.github/workflows/publish.yml → .github/workflows/deploy.yml

@@ -3,6 +3,7 @@ on:
     branches:
       - main
       - preview
+      - 'v*'
     paths-ignore: 
       - "*.md"
       - ".github/**/*.md"
@@ -13,10 +14,10 @@ jobs:
     permissions:
       contents: read
       deployments: write
-    name: Publish to Cloudflare Pages
+    name: Deploy
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -35,13 +36,11 @@ jobs:
 
       - name: Build
         run: pnpm run build
-
-      - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+      
+      - name: Deploy
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: web
-          directory: dist
+          command: pages deploy dist --project-name=web
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          wranglerVersion: '3'

.github/workflows/protect.yml

@@ -0,0 +1,16 @@
+name: Enforce preview branch for main merges
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Fail if not from preview branch
+        run: | 
+          if [[ "${{ github.head_ref }}" != "preview" ]]; then
+            echo "Only pull requests from 'preview' branch can be merged into 'main'."
+            exit 1
+          fi

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "type": "module",
-  "version": "0.0.1",
+  "version": "6.0.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -11,26 +11,26 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
-    "@astrojs/mdx": "^3.0.1",
-    "@astrojs/rss": "^4.0.6",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/rss": "^4.0.7",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/instrument-sans": "^5.1.0",
-    "@fontsource-variable/space-grotesk": "^5.0.18",
-    "@fontsource/instrument-serif": "^5.0.22",
-    "astro": "^4.9.2",
-    "astro-critters": "^2.1.10",
-    "astro-pagefind": "^1.5.0",
+    "@fontsource-variable/space-grotesk": "^5.1.0",
+    "@fontsource/instrument-serif": "^5.1.0",
+    "astro": "^4.15.4",
+    "astro-critters": "^2.2.0",
+    "astro-pagefind": "^1.6.0",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.15",
     "astro-robots-txt": "^1.0.0",
-    "pagefind": "^1.1.0",
-    "prettier": "^3.2.5",
+    "pagefind": "^1.1.1",
+    "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.14",

src/components/Button.astro

@@ -0,0 +1,62 @@
+---
+interface Props {
+    id: string;
+    className?: string;
+    style: "primary" | "secondary" | "outlined";
+    size?: "normal" | "tall" | "taller";
+    disabled?: boolean;
+}
+
+const { id, style, size, className, disabled } = Astro.props;
+---
+
+<base-button data-id={id}>
+    <button
+        class:list={[
+            "flex w-full flex-nowrap justify-center rounded-full px-6 py-1.5 font-mono transition-colors disabled:cursor-not-allowed",
+            style === "primary" &&
+                "bg-black text-white disabled:bg-neutral-200 disabled:text-neutral-700",
+            style === "secondary" &&
+                "bg-neutral-300 text-black disabled:bg-neutral-200 disabled:text-neutral-700",
+            style === "outlined" &&
+                "border border-neutral-300 text-black duration-300 hover:bg-neutral-200/50 disabled:bg-neutral-100 disabled:text-neutral-700",
+            size === "normal" && "py-1.5",
+            size === "tall" && "py-2",
+            size === "taller" && "py-2.5",
+        ]}
+        class={className}
+        disabled={disabled}
+    >
+        <div class="text-sm">
+            <slot />
+        </div>
+    </button>
+</base-button>
+
+<script>
+    import type { BaseButtonClickEvent } from "@types";
+
+    class BaseButton extends HTMLElement {
+        connectedCallback() {
+            const id: string = this.dataset.id as string;
+            const button = this.querySelector("button");
+            button?.addEventListener("click", () => onClick());
+
+            function onClick() {
+                const event = new CustomEvent<BaseButtonClickEvent>(
+                    "base-button-click",
+                    {
+                        bubbles: true,
+                        detail: {
+                            id,
+                        },
+                    },
+                );
+
+                button?.dispatchEvent(event);
+            }
+        }
+    }
+
+    customElements.define("base-button", BaseButton);
+</script>

src/components/Container.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<div class=`mx-auto max-w-screen-md px-6 page-spacing`>
+<div class=`mx-auto max-w-screen-md px-6 mt-2 lg:page-spacing`>
     <slot />
 </div>

src/components/Footer.astro

@@ -58,9 +58,9 @@ function getLinkTitle(link: NavigationLink) {
                 {
                     footerGroup.map((group) => (
                         <div class="flex w-1/2 flex-col gap-2 px-2 md:w-auto md:px-0">
-                            <h2 class="text-primary font-medium">
+                            <span class="text-primary font-medium">
                                 {t(getGroupTitle(group))}
-                            </h2>
+                            </span>
                             <ul class="flex flex-col gap-2">
                                 {group.links.map((link) => (
                                     <li class="hyphens-auto">

src/components/Navigation/NavBar.astro

@@ -13,7 +13,7 @@ let currentNavItem = "";
 ---
 
 <nav
-    class="bg-secondary/80 top-0 mx-auto flex h-fit w-full flex-col rounded-lg px-4 py-1 font-mono sm:max-w-screen-lg sm:py-0"
+    class="bg-secondary/80 top-0 mx-auto flex h-fit w-full flex-col rounded-lg py-1 pl-4 pr-2 font-mono sm:max-w-screen-lg sm:py-0"
     aria-label="Global"
 >
     <div id="empty" class=""></div>

src/components/Navigation/NavBarLink.astro

@@ -1,11 +1,16 @@
 ---
 import type { ui } from "@i18n/ui";
-import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import {
+    getLangFromUrl,
+    useTranslatedPath,
+    useTranslations,
+} from "@i18n/utils";
 import type { NavigationLink } from "@types";
 
 const { link } = Astro.props;
 
 const lang = getLangFromUrl(Astro.url);
+const translatePath = useTranslatedPath(lang);
 const t = useTranslations(lang);
 
 function getLinkTitle(link: NavigationLink) {
@@ -14,7 +19,11 @@ function getLinkTitle(link: NavigationLink) {
 ---
 
 <li class="text-black">
-    <a href={link.url} target={link.external ? "_blank" : "_self"} class="py-3">
+    <a
+        href={link.external ? link.url : translatePath(link.url)}
+        target={link.external ? "_blank" : "_self"}
+        class="py-3"
+    >
         {t(getLinkTitle(link))}
     </a>
 </li>

src/components/News/Card.astro

@@ -3,7 +3,7 @@ import type { CollectionEntry } from "astro:content";
 import { Image } from "astro:assets";
 import FormattedDate from "./FormattedDate.astro";
 import { getLangFromUrl, useTranslations } from "@i18n/utils";
-import { getTranslatedSlug } from "@lib/utils";
+import { getTranslatedSlug } from "@i18n/utils";
 import { ui } from "@i18n/ui";
 
 type Props = {

src/components/News/FormattedDate.astro

@@ -1,10 +1,18 @@
 ---
+import { getLangFromUrl } from "@i18n/utils";
+
 interface Props {
     date: Date;
-    lang: string;
+    lang?: string;
 }
 
-const { date, lang } = Astro.props;
+let { date, lang } = Astro.props;
+
+const language = getLangFromUrl(Astro.url);
+
+if (!lang) {
+    lang = language;
+}
 ---
 
 <time datetime={date.toISOString()}>