diff --git a/landing/.gitignore b/landing/.gitignore new file mode 100644 index 0000000..5b4bdef --- /dev/null +++ b/landing/.gitignore @@ -0,0 +1,11 @@ +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# Fresh build directory +_fresh/ +# npm dependencies +node_modules/ diff --git a/landing/.vscode/extensions.json b/landing/.vscode/extensions.json new file mode 100644 index 0000000..455f9fc --- /dev/null +++ b/landing/.vscode/extensions.json @@ -0,0 +1,6 @@ +{ + "recommendations": [ + "denoland.vscode-deno", + "bradlc.vscode-tailwindcss" + ] +} diff --git a/landing/.vscode/settings.json b/landing/.vscode/settings.json new file mode 100644 index 0000000..bedf1ce --- /dev/null +++ b/landing/.vscode/settings.json @@ -0,0 +1,20 @@ +{ + "deno.enable": true, + "deno.lint": true, + "editor.defaultFormatter": "denoland.vscode-deno", + "[typescriptreact]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "[typescript]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "[javascript]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "css.customData": [ + ".vscode/tailwind.json" + ] +} diff --git a/landing/.vscode/tailwind.json b/landing/.vscode/tailwind.json new file mode 100644 index 0000000..96a1f57 --- /dev/null +++ b/landing/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/landing/README.md b/landing/README.md new file mode 100644 index 0000000..ec0e33e --- /dev/null +++ b/landing/README.md @@ -0,0 +1,16 @@ +# Fresh project + +Your new Fresh project is ready to go. You can follow the Fresh "Getting +Started" guide here: https://fresh.deno.dev/docs/getting-started + +### Usage + +Make sure to install Deno: https://deno.land/manual/getting_started/installation + +Then start the project: + +``` +deno task start +``` + +This will watch the project directory and restart as necessary. diff --git a/landing/components/Button.tsx b/landing/components/Button.tsx new file mode 100644 index 0000000..f1b80a0 --- /dev/null +++ b/landing/components/Button.tsx @@ -0,0 +1,12 @@ +import { JSX } from "preact"; +import { IS_BROWSER } from "$fresh/runtime.ts"; + +export function Button(props: JSX.HTMLAttributes) { + return ( + +

{props.count}

+ + + ); +} diff --git a/landing/islands/ServerStatus.tsx b/landing/islands/ServerStatus.tsx new file mode 100644 index 0000000..0cba145 --- /dev/null +++ b/landing/islands/ServerStatus.tsx @@ -0,0 +1,54 @@ +import { useEffect, useMemo } from "preact/hooks"; +import { useSignal } from "@preact/signals"; + +const latencySamples = [18, 21, 24, 19, 22, 27, 20, 23, 25]; + +function getLatency() { + const jitter = Math.floor(Math.random() * 4) - 2; // -2..1 + const base = + latencySamples[Math.floor(Math.random() * latencySamples.length)]; + return Math.max(12, base + jitter); +} + +export default function ServerStatus() { + const latency = useSignal(getLatency()); + const status = useSignal<"online" | "warning">("online"); + + useEffect(() => { + const interval = setInterval(() => { + const value = getLatency(); + latency.value = value; + status.value = value > 28 ? "warning" : "online"; + }, 1400); + + return () => clearInterval(interval); + }, []); + + const statusLabel = useMemo( + () => (status.value === "online" ? "Operacional" : "Oscilação"), + [status.value], + ); + + return ( +
+
+ + Ping em tempo real + +
+ + {statusLabel} + cloudflare-edge-01 +
+
+
+

{latency.value}ms

+

latência média

+
+
+ ); +} diff --git a/landing/main.ts b/landing/main.ts new file mode 100644 index 0000000..675f529 --- /dev/null +++ b/landing/main.ts @@ -0,0 +1,13 @@ +/// +/// +/// +/// +/// + +import "$std/dotenv/load.ts"; + +import { start } from "$fresh/server.ts"; +import manifest from "./fresh.gen.ts"; +import config from "./fresh.config.ts"; + +await start(manifest, config); diff --git a/landing/routes/_404.tsx b/landing/routes/_404.tsx new file mode 100644 index 0000000..c63ae2e --- /dev/null +++ b/landing/routes/_404.tsx @@ -0,0 +1,27 @@ +import { Head } from "$fresh/runtime.ts"; + +export default function Error404() { + return ( + <> + + 404 - Page not found + +
+
+ the Fresh logo: a sliced lemon dripping with juice +

404 - Page not found

+

+ The page you were looking for doesn't exist. +

+ Go back home +
+
+ + ); +} diff --git a/landing/routes/_app.tsx b/landing/routes/_app.tsx new file mode 100644 index 0000000..25b1610 --- /dev/null +++ b/landing/routes/_app.tsx @@ -0,0 +1,37 @@ +import { type PageProps } from "$fresh/server.ts"; +import Header from "../components/Header.tsx"; + +export default function App({ Component }: PageProps) { + return ( + + + + + Cloudflare & GitHub DevOps Console + + + + + + + + + +
+ + + + ); +} diff --git a/landing/routes/api/joke.ts b/landing/routes/api/joke.ts new file mode 100644 index 0000000..db17edd --- /dev/null +++ b/landing/routes/api/joke.ts @@ -0,0 +1,21 @@ +import { FreshContext } from "$fresh/server.ts"; + +// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/ +const JOKES = [ + "Why do Java developers often wear glasses? They can't C#.", + "A SQL query walks into a bar, goes up to two tables and says “can I join you?”", + "Wasn't hard to crack Forrest Gump's password. 1forrest1.", + "I love pressing the F5 key. It's refreshing.", + "Called IT support and a chap from Australia came to fix my network connection. I asked “Do you come from a LAN down under?”", + "There are 10 types of people in the world. Those who understand binary and those who don't.", + "Why are assembly programmers often wet? They work below C level.", + "My favourite computer based band is the Black IPs.", + "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.", + "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.", +]; + +export const handler = (_req: Request, _ctx: FreshContext): Response => { + const randomIndex = Math.floor(Math.random() * JOKES.length); + const body = JOKES[randomIndex]; + return new Response(body); +}; diff --git a/landing/routes/greet/[name].tsx b/landing/routes/greet/[name].tsx new file mode 100644 index 0000000..9c06827 --- /dev/null +++ b/landing/routes/greet/[name].tsx @@ -0,0 +1,5 @@ +import { PageProps } from "$fresh/server.ts"; + +export default function Greet(props: PageProps) { + return
Hello {props.params.name}
; +} diff --git a/landing/routes/index.tsx b/landing/routes/index.tsx new file mode 100644 index 0000000..7c98880 --- /dev/null +++ b/landing/routes/index.tsx @@ -0,0 +1,146 @@ +import ServerStatus from "../islands/ServerStatus.tsx"; + +const DASHBOARD_URL = "https://dashboard.core.dev"; + +function GitHubIcon() { + return ( + + + + ); +} + +function CloudflareIcon() { + return ( + + + + + ); +} + +export default function Home() { + return ( +
+
+
+
+

+ Orquestração +

+

+ Orquestração de Infraestrutura Centralizada +

+

+ Gerencie Workers, Pages e Repositórios em um único painel. Fluxos + GitHub e Cloudflare operando lado a lado, com observabilidade + nativa. +

+
+ + Acessar Console + +
+ + Deploy ativo em rede edge global +
+
+
+
+
+ Edge workload + + Live + +
+
+
+ Workers ativos + 128 +
+
+ Repos monitorados + 56 +
+
+ Páginas entregues + 324 +
+
+ +
+
+
+
+ +
+
+
+

+ Integrações Suportadas +

+

+ Pipelines prontos para GitHub e Cloudflare +

+

+ Conecte repositórios GitHub, sincronize ambientes e publique + workers em minutos. Observabilidade e segurança alinhadas para + equipes de plataforma. +

+
+ + Ver status em tempo real + ↗ + +
+
+
+
+ + + +

+ GitHub Ops +

+
+

+ Releases controladas +

+

+ Automatize PR checks, proteja branches principais e promova + releases para edge com auditoria completa. +

+
+
+
+ + + +

+ Cloudflare +

+
+

+ Workers e Pages +

+

+ Deploys paralelos, métricas em tempo real e roteamento inteligente + com baixa latência. +

+
+
+
+
+ ); +} diff --git a/landing/static/favicon.svg b/landing/static/favicon.svg new file mode 100644 index 0000000..265df9b --- /dev/null +++ b/landing/static/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/landing/static/logo.svg b/landing/static/logo.svg new file mode 100644 index 0000000..5b99e0b --- /dev/null +++ b/landing/static/logo.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/landing/static/styles.css b/landing/static/styles.css new file mode 100644 index 0000000..9f78d79 --- /dev/null +++ b/landing/static/styles.css @@ -0,0 +1,9 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + body { + @apply bg-surface text-foreground antialiased; + } +} diff --git a/landing/tailwind.config.ts b/landing/tailwind.config.ts new file mode 100644 index 0000000..cea35e4 --- /dev/null +++ b/landing/tailwind.config.ts @@ -0,0 +1,16 @@ +import { type Config } from "tailwindcss"; + +export default { + content: [ + "{routes,islands,components}/**/*.{ts,tsx,js,jsx}", + ], + theme: { + extend: { + colors: { + surface: "#0f172a", + foreground: "#f8fafc", + accent: "#22d3ee", + }, + }, + }, +} satisfies Config;