Skip to content

Commit bba2901

Browse files
daesdevdaesdev
authored
Merge pull request #1 from daesdev/feature/cloudflare-deploy
feat: migrate deploy to Cloudflare Workers
2 parents a728c93 + 88bb5ac commit bba2901

20 files changed

Lines changed: 339 additions & 242 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
name: Deploy
22
on:
33
push:
4-
branches: main
4+
branches: ["main"]
55
pull_request:
6-
branches: main
6+
branches: ["main"]
77

88
jobs:
9-
deploy:
10-
name: Deploy
9+
verify:
10+
name: Verify
1111
runs-on: ubuntu-latest
1212

1313
permissions:
14-
id-token: write # Needed for auth with Deno Deploy
15-
contents: read # Needed to clone the repository
14+
contents: read
1615

1716
steps:
1817
- name: Clone repository
@@ -23,14 +22,44 @@ jobs:
2322
with:
2423
deno-version: v2.x
2524

25+
- name: Type check and lint
26+
run: deno task check
27+
2628
- name: Build step
27-
run: "deno task build"
29+
run: deno task build
30+
31+
- name: Upload build artifacts
32+
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
33+
uses: actions/upload-artifact@v4
34+
with:
35+
name: fresh-build
36+
path: |
37+
_fresh/
38+
retention-days: 1
39+
40+
deploy:
41+
name: Deploy to Cloudflare
42+
runs-on: ubuntu-latest
43+
needs: verify
44+
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
45+
46+
permissions:
47+
contents: read
48+
49+
steps:
50+
- name: Clone repository
51+
uses: actions/checkout@v4
52+
53+
- name: Download build artifacts
54+
uses: actions/download-artifact@v4
55+
with:
56+
name: fresh-build
57+
path: _fresh/
2858

29-
- name: Upload to Deno Deploy
30-
uses: denoland/deployctl@v1
59+
- name: Deploy to Cloudflare Workers
60+
uses: cloudflare/wrangler-action@v3
3161
with:
32-
project: "vide-coding"
33-
entrypoint: "main.ts"
34-
root: "."
35-
36-
62+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
63+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
64+
command: deploy
65+
wranglerVersion: "4.80.0"

‎README.md‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
1-
# Basado en el archivo Vibe Coding de Peter Wong
1+
# Vibe Coding - La Guía Definitiva
22

3-
<p aling="center">
3+
> Basado en el trabajo de Peter Wong · Creado por
4+
> [@daesdev](https://github.com/daesdev)
5+
6+
<p align="center">
47
<img width="800px" src="./static/preview.webp" alt="Localhost preview page Mac">
58
</p>
69

710
### Tecnologías usadas
811

9-
[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de la aplicación.
12+
[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de
13+
la aplicación.
14+
15+
[Tailwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación.
16+
17+
[Cloudflare Workers](https://developers.cloudflare.com/workers/) para el
18+
despliegue de la aplicación.
1019

11-
[Taildwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación.
20+
### Deploy
1221

13-
[Deno Deploy](https://deno.com/deploy/docs) para el despliegue de la aplicación.
14-
\*\*
22+
```bash
23+
deno task deploy
24+
```
1525

1626
### Información
17-
[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)
27+
28+
[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)
1829

1930
[Post X Peter](https://x.com/peterwong_xyz/status/1898090027873452542)
2031

@@ -24,6 +35,6 @@ Make sure to install Deno: https://deno.land/manual/getting_started/installation
2435

2536
Then start the project:
2637

27-
```
38+
```bash
2839
deno task start
2940
```

‎components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ export default function Footer({ state }: PageProps<State>) {
1010
<div
1111
class="py-1"
1212
dangerouslySetInnerHTML={{
13-
__html: translations.index.footer.development
13+
__html: translations.index.footer.development,
1414
}}
1515
>
1616
</div>
1717
<div
1818
class="py-1"
1919
dangerouslySetInnerHTML={{
20-
__html: translations.index.footer.created
20+
__html: translations.index.footer.created,
2121
}}
2222
>
2323
</div>

‎components/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default function Header() {
33
return (
44
<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">
55
<a
6-
href="https://github.com/darioesp/vide-coding"
6+
href="https://github.com/daesdev/vibe-coding"
77
target="_blank"
88
rel="noopener noreferrer"
99
>
@@ -22,7 +22,7 @@ export default function Header() {
2222
</svg>
2323
</a>
2424
<a
25-
href="https://github.com/darioesp"
25+
href="https://github.com/daesdev"
2626
target="_blank"
2727
rel="noopener noreferrer"
2828
>

‎components/SectionWrapperContent.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
interface SectionWrapperContentProps {
2-
readonly title?: string;
3-
readonly attrClass?: string;
4-
readonly children: preact.ComponentChildren;
2+
readonly title?: string;
3+
readonly attrClass?: string;
4+
readonly children: preact.ComponentChildren;
55
}
6-
export default function SectionWrapperContent({title, attrClass, children}: SectionWrapperContentProps) {
7-
const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`;
8-
return (
9-
<section class={classes}>
10-
{ title &&
11-
<h2 class="font-bold text-[17px]">
12-
{title}
13-
</h2> }
14-
{children}
15-
</section>
16-
);
6+
export default function SectionWrapperContent(
7+
{ title, attrClass = "", children }: SectionWrapperContentProps,
8+
) {
9+
const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`;
10+
return (
11+
<section class={classes}>
12+
{title &&
13+
(
14+
<h2 class="font-bold text-[17px]">
15+
{title}
16+
</h2>
17+
)}
18+
{children}
19+
</section>
20+
);
1721
}

‎components/WrapperPage.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
21
interface ParentComponentProps {
3-
readonly attrClass: string;
4-
readonly children: preact.ComponentChildren;
2+
readonly attrClass: string;
3+
readonly children: preact.ComponentChildren;
4+
}
5+
export default function WrapperPage(
6+
{ attrClass, children }: ParentComponentProps,
7+
) {
8+
const valueClass = attrClass
9+
? `${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`
10+
: "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";
11+
return (
12+
<div class={valueClass}>
13+
{children}
14+
</div>
15+
);
516
}
6-
export default function WrapperPage({attrClass, children}: ParentComponentProps ) {
7-
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';
8-
return (
9-
<div class={valueClass}>
10-
{children}
11-
</div>
12-
);
13-
}

‎deno.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"start": "deno run -A --watch=static/,routes/ dev.ts",
88
"build": "deno run -A dev.ts build",
99
"preview": "deno run -A main.ts",
10-
"update": "deno run -A -r https://fresh.deno.dev/update ."
10+
"update": "deno run -A -r https://fresh.deno.dev/update .",
11+
"deploy": "deno run -A npm:wrangler deploy"
1112
},
1213
"lint": {
1314
"rules": {
@@ -36,4 +37,4 @@
3637
"jsxImportSource": "preact"
3738
},
3839
"nodeModulesDir": "auto"
39-
}
40+
}

‎islands/AnchorLang.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ const AnchorLang = ({ lang: currentLang, languages }: AnchorLangProps) => {
1515
>
1616
<span
1717
className={`${
18-
isActive ? "bg-white/70 dark:bg-black/70" : "group-hover:bg-white/30 dark:group-hover:bg-black/30"
18+
isActive
19+
? "bg-white/70 dark:bg-black/70"
20+
: "group-hover:bg-white/30 dark:group-hover:bg-black/30"
1921
} 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`}
2022
>
2123
{lang}

‎islands/ButtonPrint.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
const ButtonPrint = () => {
2+
const handlePrint = () => {
3+
window.print();
4+
};
25

3-
const handlePrint = () => {
4-
window.print();
5-
};
6-
7-
return (
8-
<button
9-
type="button"
10-
onClick={handlePrint} aria-label="Imprimir"
11-
className="group">
12-
<span class="text-nowrap inline-block py-2">
13-
<small class="text-base group-hover:underline">imprimir</small> <span class="hidden lg:inline"><kbd>cmd</kbd>+<kbd>P</kbd></span>
14-
</span>
15-
</button>
16-
);
6+
return (
7+
<button
8+
type="button"
9+
onClick={handlePrint}
10+
aria-label="Imprimir"
11+
className="group"
12+
>
13+
<span class="text-nowrap inline-block py-2">
14+
<small class="text-base group-hover:underline">imprimir</small>{" "}
15+
<span class="hidden lg:inline">
16+
<kbd>cmd</kbd>+<kbd>P</kbd>
17+
</span>
18+
</span>
19+
</button>
20+
);
1721
};
1822

19-
export default ButtonPrint;
23+
export default ButtonPrint;

‎islands/DarkMode.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
import { useEffect, useState } from "preact/hooks";
33

44
const DarkMode = () => {
5-
const [isDarkMode, setIsDarkMode] = useState( false );
5+
const [isDarkMode, setIsDarkMode] = useState(false);
66

77
useEffect(() => {
88
const savedTheme = localStorage.getItem("theme");
9-
const isDarkModeClient = savedTheme ? savedTheme === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
9+
const isDarkModeClient = savedTheme
10+
? savedTheme === "dark"
11+
: window.matchMedia("(prefers-color-scheme: dark)").matches;
1012
if (isDarkModeClient) {
1113
setIsDarkMode(true);
1214
}

0 commit comments

Comments
 (0)