feat: migrate deploy to Cloudflare Workers

.github/workflows/deploy.yml

@@ -1,18 +1,17 @@
 name: Deploy
 on:
   push:
-    branches: main
+    branches: ["main"]
   pull_request:
-    branches: main
+    branches: ["main"]
 
 jobs:
-  deploy:
-    name: Deploy
+  verify:
+    name: Verify
     runs-on: ubuntu-latest
 
     permissions:
-      id-token: write # Needed for auth with Deno Deploy
-      contents: read # Needed to clone the repository
+      contents: read
 
     steps:
       - name: Clone repository
@@ -23,14 +22,44 @@ jobs:
         with:
           deno-version: v2.x
 
+      - name: Type check and lint
+        run: deno task check
+
       - name: Build step
-        run: "deno task build"
+        run: deno task build
+
+      - name: Upload build artifacts
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: actions/upload-artifact@v4
+        with:
+          name: fresh-build
+          path: |
+            _fresh/
+          retention-days: 1
+
+  deploy:
+    name: Deploy to Cloudflare
+    runs-on: ubuntu-latest
+    needs: verify
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+
+    permissions:
+      contents: read
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: fresh-build
+          path: _fresh/
 
-      - name: Upload to Deno Deploy
-        uses: denoland/deployctl@v1
+      - name: Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
         with:
-          project: "vide-coding"
-          entrypoint: "main.ts"
-          root: "."
-
-
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy
+          wranglerVersion: "4.80.0"

README.md

@@ -1,20 +1,31 @@
-# Basado en el archivo Vibe Coding de Peter Wong
+# Vibe Coding - La Guía Definitiva
 
-<p aling="center">
+> Basado en el trabajo de Peter Wong · Creado por
+> [@daesdev](https://github.com/daesdev)
+
+<p align="center">
     <img width="800px" src="./static/preview.webp" alt="Localhost preview page Mac">
 </p>
 
 ### Tecnologías usadas
 
-[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de la aplicación.
+[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de
+la aplicación.
+
+[Tailwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación.
+
+[Cloudflare Workers](https://developers.cloudflare.com/workers/) para el
+despliegue de la aplicación.
 
-[Taildwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación.
+### Deploy
 
-[Deno Deploy](https://deno.com/deploy/docs) para el despliegue de la aplicación.
-\*\*
+```bash
+deno task deploy
+```
 
 ### Información
-[Post Linkedin Miduedev](https://www.linkedin.com/posts/midudev_he-traducido-la-gu%C3%ADa-del-vibe-coding-por-activity-7305964730001596416-dTiG?utm_source=share&utm_medium=member_desktop&rcm=ACoAAB3PwcUBiv3bSv2wXSWJredG6j5r6cHfe4M)
+
+[Post Linkedin Midudev](https://www.linkedin.com/posts/midudev_he-traducido-la-gu%C3%ADa-del-vibe-coding-por-activity-7305964730001596416-dTiG?utm_source=share&utm_medium=member_desktop&rcm=ACoAAB3PwcUBiv3bSv2wXSWJredG6j5r6cHfe4M)
 
 [Post X Peter](https://x.com/peterwong_xyz/status/1898090027873452542)
 
@@ -24,6 +35,6 @@ Make sure to install Deno: https://deno.land/manual/getting_started/installation
 
 Then start the project:
 
-```
+```bash
 deno task start
 ```

components/Footer.tsx

@@ -10,14 +10,14 @@ export default function Footer({ state }: PageProps<State>) {
       <div
         class="py-1"
         dangerouslySetInnerHTML={{
-          __html: translations.index.footer.development
+          __html: translations.index.footer.development,
         }}
       >
       </div>
       <div
         class="py-1"
         dangerouslySetInnerHTML={{
-          __html: translations.index.footer.created
+          __html: translations.index.footer.created,
         }}
       >
       </div>

components/Header.tsx

@@ -3,7 +3,7 @@ export default function Header() {
   return (
     <header class="min-w-min px-4 py-2 rounded-lg max-w-min mx-auto flex gap-4 items-center bg-slate-300/40 left-1/2 -translate-x-1/2 fixed bottom-4 md:sticky md:top-4 z-50 backdrop-blur-md dark:bg-slate-700/40 print:hidden">
       <a
-        href="https://github.com/darioesp/vide-coding"
+        href="https://github.com/daesdev/vibe-coding"
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -22,7 +22,7 @@ export default function Header() {
         </svg>
       </a>
       <a
-        href="https://github.com/darioesp"
+        href="https://github.com/daesdev"
         target="_blank"
         rel="noopener noreferrer"
       >

components/SectionWrapperContent.tsx

@@ -1,17 +1,21 @@
 interface SectionWrapperContentProps {
-    readonly title?: string;
-    readonly attrClass?: string;
-    readonly children: preact.ComponentChildren;
+  readonly title?: string;
+  readonly attrClass?: string;
+  readonly children: preact.ComponentChildren;
 }
-export default function SectionWrapperContent({title, attrClass, children}: SectionWrapperContentProps) {
-    const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`;
-    return (
-        <section class={classes}>
-            { title &&
-                <h2 class="font-bold text-[17px]">
-                    {title}
-                </h2> }
-            {children}
-        </section>
-    );
+export default function SectionWrapperContent(
+  { title, attrClass = "", children }: SectionWrapperContentProps,
+) {
+  const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`;
+  return (
+    <section class={classes}>
+      {title &&
+        (
+          <h2 class="font-bold text-[17px]">
+            {title}
+          </h2>
+        )}
+      {children}
+    </section>
+  );
 }

components/WrapperPage.tsx

@@ -1,13 +1,16 @@
-
 interface ParentComponentProps {
-    readonly attrClass: string;
-    readonly children: preact.ComponentChildren;
+  readonly attrClass: string;
+  readonly children: preact.ComponentChildren;
+}
+export default function WrapperPage(
+  { attrClass, children }: ParentComponentProps,
+) {
+  const valueClass = attrClass
+    ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100`
+    : "relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5";
+  return (
+    <div class={valueClass}>
+      {children}
+    </div>
+  );
 }
-export default function WrapperPage({attrClass, children}: ParentComponentProps ) {
-    const valueClass = attrClass ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5';
-    return (
-        <div class={valueClass}>
-            {children}
-        </div>
-    );
-}   

deno.json

@@ -7,7 +7,8 @@
     "start": "deno run -A --watch=static/,routes/ dev.ts",
     "build": "deno run -A dev.ts build",
     "preview": "deno run -A main.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "deploy": "deno run -A npm:wrangler deploy"
   },
   "lint": {
     "rules": {
@@ -36,4 +37,4 @@
     "jsxImportSource": "preact"
   },
   "nodeModulesDir": "auto"
-}
+}

islands/AnchorLang.tsx

@@ -15,7 +15,9 @@ const AnchorLang = ({ lang: currentLang, languages }: AnchorLangProps) => {
             >
               <span
                 className={`${
-                  isActive ? "bg-white/70 dark:bg-black/70" : "group-hover:bg-white/30 dark:group-hover:bg-black/30"
+                  isActive
+                    ? "bg-white/70 dark:bg-black/70"
+                    : "group-hover:bg-white/30 dark:group-hover:bg-black/30"
                 } text-black/60 dark:text-white/60 inline-flex text-xl px-2 py-1.5 font-bold rounded-md justify-center items-center aspect-video max-w-min`}
               >
                 {lang}

islands/ButtonPrint.tsx

@@ -1,19 +1,23 @@
 const ButtonPrint = () => {
+  const handlePrint = () => {
+    window.print();
+  };
 
-    const handlePrint = () => {
-        window.print();
-    };
-
-    return (
-        <button 
-            type="button"
-            onClick={handlePrint} aria-label="Imprimir"
-            className="group">
-            <span class="text-nowrap inline-block py-2">
-                <small class="text-base group-hover:underline">imprimir</small> <span class="hidden lg:inline"><kbd>cmd</kbd>+<kbd>P</kbd></span>
-            </span>
-        </button>
-    );
+  return (
+    <button
+      type="button"
+      onClick={handlePrint}
+      aria-label="Imprimir"
+      className="group"
+    >
+      <span class="text-nowrap inline-block py-2">
+        <small class="text-base group-hover:underline">imprimir</small>{" "}
+        <span class="hidden lg:inline">
+          <kbd>cmd</kbd>+<kbd>P</kbd>
+        </span>
+      </span>
+    </button>
+  );
 };
 
-export default ButtonPrint;
+export default ButtonPrint;

islands/DarkMode.tsx

@@ -2,11 +2,13 @@
 import { useEffect, useState } from "preact/hooks";
 
 const DarkMode = () => {
-  const [isDarkMode, setIsDarkMode] = useState( false );
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {
     const savedTheme = localStorage.getItem("theme");
-    const isDarkModeClient = savedTheme ? savedTheme === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const isDarkModeClient = savedTheme
+      ? savedTheme === "dark"
+      : window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (isDarkModeClient) {
       setIsDarkMode(true);
     }