d7dbb78 | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

d7dbb78 — pyrossh 2023-12-01T23:53:13+05:30

initial commit

Files changed (28) hide show

.github/workflows/deploy.yml +33 -0
.gitignore +10 -0
.vscode/extensions.json +6 -0
.vscode/settings.json +17 -0
README.md +16 -0
components/Button.tsx +12 -0
components/Footer.tsx +22 -0
components/Header.tsx +44 -0
components/SocialLinks.tsx +19 -0
components/icons/EmailIcon.tsx +15 -0
components/icons/GithubIcon.tsx +15 -0
components/icons/LinkedInIcon.tsx +11 -0
deno.json +26 -0
dev.ts +8 -0
fresh.config.ts +6 -0
fresh.gen.ts +29 -0
islands/Counter.tsx +16 -0
islands/LemonDrop.tsx +177 -0
main.ts +13 -0
routes/_404.tsx +27 -0
routes/_app.tsx +39 -0
routes/api/joke.ts +21 -0
routes/greet/[name].tsx +5 -0
routes/index.tsx +39 -0
static/favicon.ico +0 -0
static/logo.svg +6 -0
static/styles.css +3 -0
tailwind.config.ts +25 -0

.github/workflows/deploy.yml ADDED Viewed

@@ -0,0 +1,33 @@
+name: Deploy
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: main
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write # Needed for auth with Deno Deploy
+      contents: read # Needed to clone the repository
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+      - name: Build step
+        run: "deno task build"
+      - name: Upload to Deno Deploy
+        uses: denoland/deployctl@v1
+        with:
+          project: "example-project"
+          entrypoint: "./main.ts"

.gitignore ADDED Viewed

@@ -0,0 +1,10 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+# Fresh build directory
+_fresh/
+node_modules/

.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "sastan.twind-intellisense"
+  ]
+}

.vscode/settings.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "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"
+  }
+}

README.md ADDED Viewed

@@ -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.

components/Button.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+    />
+  );
+}

components/Footer.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import SocialLinks from "./SocialLinks.tsx";
+import LemonDrop from "../islands/LemonDrop.tsx";
+export default function Footer() {
+  return (
+    <footer class="flex w-full flex-1 flex-row justify-center text-xl leading-6">
+      <div class="flex flex-row flex-1 p-4 max-w-5xl text-yellow">
+        <div class="flex-1">
+          <SocialLinks />
+        </div>
+        <div class="flex">
+          <span class="text-base text-yellow hover:no-underline">
+            powered by
+          </span>
+          <a class="ml-2 -mt-3" href="https://fresh.deno.dev">
+            <LemonDrop />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import SocialLinks from "./SocialLinks.tsx";
+export default function Header() {
+  return (
+    <header>
+      <nav class="sm:py-2 md:py-0 flex w-full flex-1 flex-row justify-center bg-black text-xl font-mono">
+        <div class="flex flex-row flex-1 items-center p-3.5 max-w-5xl">
+          <a
+            class="flex text-yellow pr-4 hover:no-underline text-xl ml-0 pl-0 pr-4"
+            href="/"
+          >
+            <span class="mr-1 font-logo font-bold">木</span> pyros.sh
+          </a>
+          <div class="flex flex-row flex-1 items-center">
+            <a
+              class="text-white mx-1 px-2 hover:bg-[#444] hover:no-underline"
+              href="/dev"
+              rel="prefetch"
+            >
+              dev
+            </a>
+            <div class="text-white">|</div>
+            <a
+              class="text-white mx-1 px-2 hover:bg-[#444] hover:no-underline"
+              href="/ref"
+              rel="prefetch"
+            >
+              ref
+            </a>
+            <div class="text-white">|</div>
+            <a
+              class="text-white mx-1 px-2 hover:bg-[#444] hover:no-underline"
+              href="/blog"
+              rel="prefetch"
+            >
+              blog
+            </a>
+          </div>
+          <SocialLinks />
+        </div>
+      </nav>
+    </header>
+  );
+}

components/SocialLinks.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import EmailIcon from "./icons/EmailIcon.tsx";
+import GithubIcon from "./icons/GithubIcon.tsx";
+import LinkedInIcon from "./icons/LinkedInIcon.tsx";
+export default function SocialLinks() {
+  return (
+    <div class="flex hover:no-underline text-white [&>a]:ml-5">
+      <a href="https://linkedin.com/in/pyrossh" title="My LinkedIn profile">
+        <LinkedInIcon />
+      </a>
+      <a href="https://github.com/pyrossh" title="My GitHub profile">
+        <GithubIcon />
+      </a>
+      <a href="mailto:[email protected]" title="My email">
+        <EmailIcon />
+      </a>
+    </div>
+  );
+}

components/icons/EmailIcon.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export default function EmailIcon() {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      width="32"
+      height="32"
+    >
+      <path
+        fill="currentColor"
+        d="M424 80H88a56.06 56.06 0 0 0-56 56v240a56.06 56.06 0 0 0 56 56h336a56.06 56.06 0 0 0 56-56V136a56.06 56.06 0 0 0-56-56zm-14.18 92.63-144 112a16 16 0 0 1-19.64 0l-144-112a16 16 0 1 1 19.64-25.26L256 251.73l134.18-104.36a16 16 0 0 1 19.64 25.26z"
+      >
+      </path>
+    </svg>
+  );
+}

components/icons/GithubIcon.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export default function GithubIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="32"
+      height="32"
+    >
+      <path
+        fill="currentColor"
+        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"
+      >
+      </path>
+    </svg>
+  );
+}

components/icons/LinkedInIcon.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function LinkedInIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="32" height="32">
+      <path
+        fill="currentColor"
+        d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+      >
+      </path>
+    </svg>
+  );
+}

deno.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "lock": false,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "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 ."
+  },
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"],
+  "nodeModulesDir": true,
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "$std/": "https://deno.land/[email protected]/"
+  },
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
+}

dev.ts ADDED Viewed

@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+import "$std/dotenv/load.ts";
+await dev(import.meta.url, "./main.ts", config);

fresh.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+export default defineConfig({
+  plugins: [tailwind()],
+});

fresh.gen.ts ADDED Viewed

@@ -0,0 +1,29 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+import * as $_404 from "./routes/_404.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $api_joke from "./routes/api/joke.ts";
+import * as $greet_name_ from "./routes/greet/[name].tsx";
+import * as $index from "./routes/index.tsx";
+import * as $Counter from "./islands/Counter.tsx";
+import * as $LemonDrop from "./islands/LemonDrop.tsx";
+import { type Manifest } from "$fresh/server.ts";
+const manifest = {
+  routes: {
+    "./routes/_404.tsx": $_404,
+    "./routes/_app.tsx": $_app,
+    "./routes/api/joke.ts": $api_joke,
+    "./routes/greet/[name].tsx": $greet_name_,
+    "./routes/index.tsx": $index,
+  },
+  islands: {
+    "./islands/Counter.tsx": $Counter,
+    "./islands/LemonDrop.tsx": $LemonDrop,
+  },
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+export default manifest;

islands/Counter.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Signal } from "@preact/signals";
+import { Button } from "../components/Button.tsx";
+interface CounterProps {
+  count: Signal<number>;
+}
+export default function Counter(props: CounterProps) {
+  return (
+    <div class="flex gap-8 py-6">
+      <Button onClick={() => props.count.value -= 1}>-1</Button>
+      <p class="text-3xl">{props.count}</p>
+      <Button onClick={() => props.count.value += 1}>+1</Button>
+    </div>
+  );
+}

islands/LemonDrop.tsx ADDED Viewed

@@ -0,0 +1,177 @@
+import { useEffect, useRef } from "preact/hooks";
+import { useSignal } from "@preact/signals";
+export interface Spring {
+  p: number;
+  v: number;
+}
+export class WaveTank {
+  springs = [] as Spring[];
+  waveLength = 100;
+  k = 0.02;
+  damping = 0.02;
+  spread = 0.02;
+  constructor() {
+    for (let i = 0; i < this.waveLength; i++) {
+      this.springs[i] = {
+        p: 0,
+        v: 0,
+      };
+    }
+  }
+  update(springs: Spring[]) {
+    for (const i of springs) {
+      const a = -this.k * i.p - this.damping * i.v;
+      i.p += i.v;
+      i.v += a;
+    }
+    const leftDeltas = [];
+    const rightDeltas = [];
+    for (let t = 0; t < 8; t++) {
+      for (let i = 0; i < springs.length; i++) {
+        const prev = springs[(i - 1 + springs.length) % springs.length];
+        const next = springs[(i + 1) % springs.length];
+        leftDeltas[i] = this.spread * (springs[i].p - prev.p);
+        rightDeltas[i] = this.spread * (springs[i].p - next.p);
+      }
+      for (let i = 0; i < springs.length; i++) {
+        const prev = springs[(i - 1 + springs.length) % springs.length];
+        const next = springs[(i + 1) % springs.length];
+        prev.v += leftDeltas[i];
+        next.v += rightDeltas[i];
+        prev.p += leftDeltas[i];
+        next.p += rightDeltas[i];
+      }
+    }
+  }
+}
+function easeInCirc(x: number) {
+  return 1 - Math.sqrt(1 - Math.pow(x, 2));
+}
+const waveTank = new WaveTank();
+function LemonDrop() {
+  const SVG_WIDTH = 100;
+  const counter = useSignal(0);
+  const dropy = useSignal(60);
+  const width = useSignal(SVG_WIDTH);
+  const widthRef = useRef(width.value);
+  const springs = useSignal(waveTank.springs);
+  const requestIdRef = useRef<number>();
+  const grid = SVG_WIDTH / waveTank.waveLength;
+  const points = [
+    [0, 100],
+    [0, 0],
+    ...springs.value.map((x, i) => [i * grid, x.p]),
+    [width.value, 0],
+    [width.value, 100],
+  ];
+  const springsPath = `${points.map((x) => x.join(",")).join(" ")}`;
+  const juice = `M18 ${63 + counter.value} C15 ${63 + counter.value} 16 ${
+    63 + counter.value
+  } 12 61L9 56C2 33 62 -3 80 12C103 27 44 56 29 58C27 58 25 59 24 61C20 ${
+    63 + counter.value
+  } 21 ${63 + counter.value} 18 ${63 + counter.value}Z`;
+  function updateJuice(timestamp: number) {
+    const amp = 40;
+    const x = timestamp / 2000;
+    const saw = x - Math.floor(x);
+    if (saw < 0.6) {
+      counter.value = easeInCirc(saw) * amp;
+      dropy.value = -100;
+    } else {
+      counter.value = easeInCirc(1 - saw) * amp * 0.1;
+      dropy.value = 70 + Math.pow(saw - 0.6, 2) * 10000;
+    }
+  }
+  function update(timestamp: number) {
+    updateJuice(timestamp);
+    waveTank.update(waveTank.springs);
+    springs.value = [...waveTank.springs];
+    const offset = 500;
+    const saw = (timestamp + offset) / 2000 -
+      Math.floor((timestamp + offset) / 2000);
+    if (saw < 0.01) {
+      drop();
+    }
+    requestIdRef.current = globalThis.requestAnimationFrame(update);
+  }
+  function resize() {
+    width.value = document.body.clientWidth;
+  }
+  function drop() {
+    const dropPosition = Math.round(
+      ((widthRef.current / 2 - 30) / widthRef.current) * 100,
+    );
+    waveTank.springs[dropPosition].p = -60;
+  }
+  useEffect(() => {
+    widthRef.current = width.value;
+  }, [width.value]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mediaQuery.matches) {
+      return;
+    }
+    requestIdRef.current = requestAnimationFrame(update);
+    globalThis.addEventListener("resize", resize);
+    resize();
+    return () => {
+      globalThis.removeEventListener("resize", resize);
+      if (requestIdRef.current !== undefined) {
+        cancelAnimationFrame(requestIdRef.current);
+      }
+    };
+  }, []);
+  return (
+    <svg
+      width="32"
+      height="48"
+      viewBox="0 0 100 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Fresh logo"
+    >
+      <circle cx="18" cy={dropy.value} r="4" fill="white"></circle>
+      <path
+        d="M11.9 96.3v24H7v-24h4.9Zm7.5 10.2v4h-8.8v-4h8.8Zm1-10.2v4h-9.8v-4h9.8ZM23.2 96.3H31c1.6 0 3 .3 4.1.9 1.1.5 2 1.3 2.6 2.4a8 8 0 0 1 1 4c0 1.3-.2 2.4-.6 3.3-.3 1-.8 1.7-1.5 2.3-.7.6-1.4 1-2.3 1.5l-1.5.8h-6.3v-4h4.3a3 3 0 0 0 1.7-.4c.4-.3.7-.7 1-1.2a5 5 0 0 0 .3-2c0-.7-.1-1.3-.3-1.9-.2-.5-.5-1-1-1.2-.3-.3-.9-.5-1.5-.5h-3v20h-4.8v-24Zm11 24-4.4-10.7h5l4.6 10.5v.2h-5.2ZM55.9 116.3v4H45.4v-4h10.5Zm-9-20v24H42v-24H47Zm7.6 9.8v3.8h-9.1v-3.8h9Zm1.4-9.8v4H45.4v-4h10.5ZM69 114c0-.4 0-.8-.2-1.1 0-.4-.2-.7-.5-1l-1-1-1.9-.8-2.6-1.2-2.2-1.5a6.5 6.5 0 0 1-1.7-2 6 6 0 0 1-.5-2.7c0-1 .1-2 .5-2.7a6 6 0 0 1 1.6-2.2c.7-.5 1.5-1 2.4-1.3a9.5 9.5 0 0 1 7.1.5c1.2.6 2 1.5 2.7 2.6.6 1 1 2.4 1 3.8h-5a5 5 0 0 0-.2-1.8c-.2-.5-.5-1-1-1.2-.4-.3-1-.5-1.6-.5-.6 0-1.1.2-1.5.4-.4.2-.7.6-1 1l-.2 1.4c0 .4.1.8.3 1.1l.8.8a21.3 21.3 0 0 0 2.8 1.4l2.9 1.4a9 9 0 0 1 2 1.8c.7.6 1 1.3 1.4 2a7.9 7.9 0 0 1-.1 5.5c-.4.8-.9 1.5-1.5 2.1a7 7 0 0 1-2.5 1.4c-2 .5-1 1.8-3 1.8s-1.3-1.5-3.2-1.8c-1-.3-2-.8-2.7-1.4a6.7 6.7 0 0 1-1.8-2.5c-.4-1-.6-2.2-.6-3.5h4.9c0 .7 0 1.3.2 1.8.1.5.3 1 .6 1.3.3.2.7.5 1.1.6.5.2 1 .2 1.5.2.7 0 1.2 0 1.6-.3.4-.3.6-.6.8-1 .2-.4.3-.9.3-1.4ZM90.5 106v4h-10v-4h10Zm-8.6-9.7v24h-4.8v-24h4.8Zm12.1 0v24h-4.8v-24H94Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M84 16c13 27 1 52-7 59 0 4-9 9-12 7-12 5-38-2-53-21-6-7 1-21 21-36 13-10 33-17 51-9Z"
+        fill="#FFD80B"
+      />
+      <path d={juice} fill="white" />
+      <path
+        d="M69 15c15-1 9 10-6 19L44 44c-2 1-4-2-6 0l-3 6c-3 1-13 3-16 2-5-2-5-9 5-18l7-4c-1-2-1-2 2-5 3-2 19-10 29-11l1 2 6-1Z"
+        fill="#FFED4E"
+      />
+      <path
+        d="M38 35c1-1 3-2 3-4l8-3c0 1-1 3 1 4-2 1-7 1-8 5-1-2-1-2-4-2Z"
+        fill="#fff"
+      />
+    </svg>
+  );
+}
+export default LemonDrop;

main.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+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);

routes/_404.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { Head } from "$fresh/runtime.ts";
+export default function Error404() {
+  return (
+    <>
+      <Head>
+        <title>404 - Page not found</title>
+      </Head>
+      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+          <img
+            class="my-6"
+            src="/logo.svg"
+            width="128"
+            height="128"
+            alt="the Fresh logo: a sliced lemon dripping with juice"
+          />
+          <h1 class="text-4xl font-bold">404 - Page not found</h1>
+          <p class="my-4">
+            The page you were looking for doesn't exist.
+          </p>
+          <a href="/" class="underline">Go back home</a>
+        </div>
+      </div>
+    </>
+  );
+}

routes/_app.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { AppProps } from "$fresh/server.ts";
+import Footer from "../components/Footer.tsx";
+import Header from "../components/Header.tsx";
+// const SEO = () => (
+//   <title>fres</title>
+//   <link rel="canonical" href={Astro.url} />
+//     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+//     <link rel="icon" type="image/png" href="/favicon.png" />
+//     <meta name="author" content="pyrossh" />
+//     <meta name="keywords" content="pyros.sh,pyrossh,astro,website" />
+//     <meta property="og:site_name" content="pyros.sh" />
+//     <meta property="og:type" content="website" />
+//     <meta property="og:url" content={Astro.url} />
+//     <meta property="og:site_name" content="pyros.sh" />
+// )
+export default function App({ Component }: AppProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body class="bg-black-lighter">
+        <Header />
+        <main class="w-full h-full block bg-white">
+          <div class="flex w-full flex-1 flex-row justify-center">
+            <div class="flex w-full flex-1 flex-row items-center max-w-5xl mt-4 mb-20 p-2">
+              <Component />
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

routes/api/joke.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { HandlerContext } 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: HandlerContext): Response => {
+  const randomIndex = Math.floor(Math.random() * JOKES.length);
+  const body = JOKES[randomIndex];
+  return new Response(body);
+};

routes/greet/[name].tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { PageProps } from "$fresh/server.ts";
+export default function Greet(props: PageProps) {
+  return <div>Hello {props.params.name}</div>;
+}

routes/index.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { useSignal } from "@preact/signals";
+import { HandlerContext, Handlers, PageProps } from "$fresh/server.ts";
+import Counter from "../islands/Counter.tsx";
+export const handler: Handlers = {
+  async GET(req, ctx) {
+    return await ctx.render();
+  },
+  async POST(req, ctx) {
+    const form = await req.formData();
+    return new Response(null, {
+      status: 303,
+      headers: { location: "/" },
+    });
+  },
+};
+export default function Home() {
+  const count = useSignal(3);
+  return (
+    <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+        <img
+          class="my-6"
+          src="/logo.svg"
+          width="128"
+          height="128"
+          alt="the Fresh logo: a sliced lemon dripping with juice"
+        />
+        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
+        <p class="my-4">
+          Try updating this message in the
+          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
+        </p>
+        <Counter count={count} />
+      </div>
+    </div>
+  );
+}

static/favicon.ico ADDED Viewed

Binary file

static/logo.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>

static/styles.css ADDED Viewed

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { type Config } from "tailwindcss";
+export default {
+  content: ["{routes,islands,components}/**/*.{ts,tsx}"],
+  theme: {
+    fontFamily: {
+      sans: "system-ui",
+      serif: "system-ui",
+      mono: "monospace",
+      logo: "Kaiti SC",
+    },
+    extend: {
+      colors: {
+        yellow: "#f1fa8c",
+        black: "#1a1a1a",
+        "black-lighter": "#1f1f1f",
+        "black-light": "#313a3d",
+        "yellow-dark": "#858579",
+        blue: "#0645ad",
+        "blue-light": "#0e81c7",
+        "slider-bg": "#f0ede2",
+      },
+    },
+  },
+} as Config;