commit 5012f1f1eef3568e8fb4b385aa63e8b5bbee3c79 · knotbin.com/blog

+11

.gitignore

···

       1
       1
       +
       # dotenv environment variable files

     

       2
       2
       +
       .env

     

       3
       3
       +
       .env.development.local

     

       4
       4
       +
       .env.test.local

     

       5
       5
       +
       .env.production.local

     

       6
       6
       +
       .env.local

     

       7
       7
       +
       

     

       8
       8
       +
       # Fresh build directory

     

       9
       9
       +
       _fresh/

     

       10
       10
       +
       # npm dependencies

     

       11
       11
       +
       node_modules/

+6

.vscode/extensions.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "recommendations": [

     

       3
       3
       +
           "denoland.vscode-deno",

     

       4
       4
       +
           "bradlc.vscode-tailwindcss"

     

       5
       5
       +
         ]

     

       6
       6
       +
       }

+20

.vscode/settings.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "deno.enable": true,

     

       3
       3
       +
         "deno.lint": true,

     

       4
       4
       +
         "editor.defaultFormatter": "denoland.vscode-deno",

     

       5
       5
       +
         "[typescriptreact]": {

     

       6
       6
       +
           "editor.defaultFormatter": "denoland.vscode-deno"

     

       7
       7
       +
         },

     

       8
       8
       +
         "[typescript]": {

     

       9
       9
       +
           "editor.defaultFormatter": "denoland.vscode-deno"

     

       10
       10
       +
         },

     

       11
       11
       +
         "[javascriptreact]": {

     

       12
       12
       +
           "editor.defaultFormatter": "denoland.vscode-deno"

     

       13
       13
       +
         },

     

       14
       14
       +
         "[javascript]": {

     

       15
       15
       +
           "editor.defaultFormatter": "denoland.vscode-deno"

     

       16
       16
       +
         },

     

       17
       17
       +
         "css.customData": [

     

       18
       18
       +
           ".vscode/tailwind.json"

     

       19
       19
       +
         ]

     

       20
       20
       +
       }

+55

.vscode/tailwind.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "version": 1.1,

     

       3
       3
       +
         "atDirectives": [

     

       4
       4
       +
           {

     

       5
       5
       +
             "name": "@tailwind",

     

       6
       6
       +
             "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",

     

       7
       7
       +
             "references": [

     

       8
       8
       +
               {

     

       9
       9
       +
                 "name": "Tailwind Documentation",

     

       10
       10
       +
                 "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"

     

       11
       11
       +
               }

     

       12
       12
       +
             ]

     

       13
       13
       +
           },

     

       14
       14
       +
           {

     

       15
       15
       +
             "name": "@apply",

     

       16
       16
       +
             "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.",

     

       17
       17
       +
             "references": [

     

       18
       18
       +
               {

     

       19
       19
       +
                 "name": "Tailwind Documentation",

     

       20
       20
       +
                 "url": "https://tailwindcss.com/docs/functions-and-directives#apply"

     

       21
       21
       +
               }

     

       22
       22
       +
             ]

     

       23
       23
       +
           },

     

       24
       24
       +
           {

     

       25
       25
       +
             "name": "@responsive",

     

       26
       26
       +
             "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",

     

       27
       27
       +
             "references": [

     

       28
       28
       +
               {

     

       29
       29
       +
                 "name": "Tailwind Documentation",

     

       30
       30
       +
                 "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"

     

       31
       31
       +
               }

     

       32
       32
       +
             ]

     

       33
       33
       +
           },

     

       34
       34
       +
           {

     

       35
       35
       +
             "name": "@screen",

     

       36
       36
       +
             "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",

     

       37
       37
       +
             "references": [

     

       38
       38
       +
               {

     

       39
       39
       +
                 "name": "Tailwind Documentation",

     

       40
       40
       +
                 "url": "https://tailwindcss.com/docs/functions-and-directives#screen"

     

       41
       41
       +
               }

     

       42
       42
       +
             ]

     

       43
       43
       +
           },

     

       44
       44
       +
           {

     

       45
       45
       +
             "name": "@variants",

     

       46
       46
       +
             "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",

     

       47
       47
       +
             "references": [

     

       48
       48
       +
               {

     

       49
       49
       +
                 "name": "Tailwind Documentation",

     

       50
       50
       +
                 "url": "https://tailwindcss.com/docs/functions-and-directives#variants"

     

       51
       51
       +
               }

     

       52
       52
       +
             ]

     

       53
       53
       +
           }

     

       54
       54
       +
         ]

     

       55
       55
       +
       }

+16

README.md

···

       1
       1
       +
       # Fresh project

     

       2
       2
       +
       

     

       3
       3
       +
       Your new Fresh project is ready to go. You can follow the Fresh "Getting

     

       4
       4
       +
       Started" guide here: https://fresh.deno.dev/docs/getting-started

     

       5
       5
       +
       

     

       6
       6
       +
       ### Usage

     

       7
       7
       +
       

     

       8
       8
       +
       Make sure to install Deno: https://deno.land/manual/getting_started/installation

     

       9
       9
       +
       

     

       10
       10
       +
       Then start the project:

     

       11
       11
       +
       

     

       12
       12
       +
       ```

     

       13
       13
       +
       deno task start

     

       14
       14
       +
       ```

     

       15
       15
       +
       

     

       16
       16
       +
       This will watch the project directory and restart as necessary.

assets/fonts/BerkeleyMono-Regular.woff2

This is a binary file and will not be displayed.

assets/me_blue_square.jpg

This is a binary file and will not be displayed.

+62

components/bluesky-embed.tsx

···

       1
       1
       +
       "use client";

     

       2
       2
       +
       

     

       3
       3
       +
       import { useEffect, useId, useState } from "npm:react";

     

       4
       4
       +
       

     

       5
       5
       +
       const EMBED_URL = "https://embed.bsky.app";

     

       6
       6
       +
       

     

       7
       7
       +
       export function BlueskyPostEmbed({ uri }: { uri: string }) {

     

       8
       8
       +
         const id = useId();

     

       9
       9
       +
         const [height, setHeight] = useState(0);

     

       10
       10
       +
       

     

       11
       11
       +
         useEffect(() => {

     

       12
       12
       +
           const abortController = new AbortController();

     

       13
       13
       +
           const { signal } = abortController;

     

       14
       14
       +
           window.addEventListener(

     

       15
       15
       +
             "message",

     

       16
       16
       +
             (event) => {

     

       17
       17
       +
               if (event.origin !== EMBED_URL) {

     

       18
       18
       +
                 return;

     

       19
       19
       +
               }

     

       20
       20
       +
       

     

       21
       21
       +
               const iframeId = (event.data as { id: string }).id;

     

       22
       22
       +
               if (id !== iframeId) {

     

       23
       23
       +
                 return;

     

       24
       24
       +
               }

     

       25
       25
       +
       

     

       26
       26
       +
               const internalHeight = (event.data as { height: number }).height;

     

       27
       27
       +
               if (internalHeight && typeof internalHeight === "number") {

     

       28
       28
       +
                 setHeight(internalHeight);

     

       29
       29
       +
               }

     

       30
       30
       +
             },

     

       31
       31
       +
             { signal },

     

       32
       32
       +
           );

     

       33
       33
       +
       

     

       34
       34
       +
           return () => {

     

       35
       35
       +
             abortController.abort();

     

       36
       36
       +
           };

     

       37
       37
       +
         }, [id]);

     

       38
       38
       +
       

     

       39
       39
       +
         const ref_url =

     

       40
       40
       +
           "https://" + "knotbin.xyz/post/" + uri.split("/").pop();

     

       41
       41
       +
       

     

       42
       42
       +
         const searchParams = new URLSearchParams();

     

       43
       43
       +
         searchParams.set("id", id);

     

       44
       44
       +
         searchParams.set("ref_url", encodeURIComponent(ref_url));

     

       45
       45
       +
       

     

       46
       46
       +
         return (

     

       47
       47
       +
           <div

     

       48
       48
       +
             className="mt-6 flex max-w-[600px] w-full bluesky-embed"

     

       49
       49
       +
             data-uri={uri}

     

       50
       50
       +
           >

     

       51
       51
       +
             <iframe

     

       52
       52
       +
               className="w-full block border-none grow"

     

       53
       53
       +
               style={{ height }}

     

       54
       54
       +
               data-bluesky-uri={uri}

     

       55
       55
       +
               src={`${EMBED_URL}/embed/${uri.slice("at://".length)}?${searchParams.toString()}`}

     

       56
       56
       +
               width="100%"

     

       57
       57
       +
               frameBorder="0"

     

       58
       58
       +
               scrolling="no"

     

       59
       59
       +
             />

     

       60
       60
       +
           </div>

     

       61
       61
       +
         );

     

       62
       62
       +
       }

+42

components/footer.tsx

···

       1
       1
       +
       import { siBluesky as BlueskyIcon, siGithub as GithubIcon } from "npm:simple-icons";

     

       2
       2
       +
       

     

       3
       3
       +
       import { env } from "../lib/env.ts";

     

       4
       4
       +
       

     

       5
       5
       +
       export function Footer() {

     

       6
       6
       +
         return (

     

       7
       7
       +
           <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">

     

       8
       8
       +
             <a

     

       9
       9
       +
               className="flex items-center gap-2 hover:underline hover:underline-offset-4"

     

       10
       10
       +
               href={`https://bsky.app/profile/${env.NEXT_PUBLIC_BSKY_DID}`}

     

       11
       11
       +
               target="_blank"

     

       12
       12
       +
               rel="noopener noreferrer"

     

       13
       13
       +
             >

     

       14
       14
       +
               <svg

     

       15
       15
       +
                 width={16}

     

       16
       16
       +
                 height={16}

     

       17
       17
       +
                 viewBox="0 0 24 24"

     

       18
       18
       +
                 className="fill-black dark:fill-white"

     

       19
       19
       +
               >

     

       20
       20
       +
                 <path d={BlueskyIcon.path} />

     

       21
       21
       +
               </svg>

     

       22
       22
       +
               Bluesky

     

       23
       23
       +
             </a>

     

       24
       24
       +
             <a

     

       25
       25
       +
               className="flex items-center gap-2 hover:underline hover:underline-offset-4"

     

       26
       26
       +
               href="https://github.com/mozzius"

     

       27
       27
       +
               target="_blank"

     

       28
       28
       +
               rel="noopener noreferrer"

     

       29
       29
       +
             >

     

       30
       30
       +
               <svg

     

       31
       31
       +
                 width={16}

     

       32
       32
       +
                 height={16}

     

       33
       33
       +
                 viewBox="0 0 24 24"

     

       34
       34
       +
                 className="fill-black dark:fill-white"

     

       35
       35
       +
               >

     

       36
       36
       +
                 <path d={GithubIcon.path} />

     

       37
       37
       +
               </svg>

     

       38
       38
       +
               GitHub

     

       39
       39
       +
             </a>

     

       40
       40
       +
           </footer>

     

       41
       41
       +
         );

     

       42
       42
       +
       }

+50

components/post-info.tsx

···

       1
       1
       +
       import { date } from "../lib/date.ts";

     

       2
       2
       +
       import { env } from "../lib/env.ts";

     

       3
       3
       +
       

     

       4
       4
       +
       import { Paragraph } from "./typography.tsx";

     

       5
       5
       +
       import type { ComponentChildren } from "preact";

     

       6
       6
       +
       

     

       7
       7
       +
       export function PostInfo({

     

       8
       8
       +
         createdAt,

     

       9
       9
       +
         content,

     

       10
       10
       +
         includeAuthor = false,

     

       11
       11
       +
         className,

     

       12
       12
       +
         children,

     

       13
       13
       +
       }: {

     

       14
       14
       +
         createdAt?: string;

     

       15
       15
       +
         content: string;

     

       16
       16
       +
         includeAuthor?: boolean;

     

       17
       17
       +
         className?: string;

     

       18
       18
       +
         children?: ComponentChildren;

     

       19
       19
       +
       }) {

     

       20
       20
       +
         return (

     

       21
       21
       +
           <Paragraph className={className}>

     

       22
       22
       +
             {includeAuthor && (

     

       23
       23
       +
               <>

     

       24
       24
       +
                 <img

     

       25
       25
       +
                   width={14}

     

       26
       26
       +
                   height={14}

     

       27
       27
       +
                   loading="lazy"

     

       28
       28
       +
                   src="../assets/me_blue_square.jpg"

     

       29
       29
       +
                   alt="Roscooe's profile picture"

     

       30
       30
       +
                   className="inline rounded-full mr-1.5 mb-0.5"

     

       31
       31
       +
                 />

     

       32
       32
       +
                 <a

     

       33
       33
       +
                   href={`https://bsky.app/profile/${env.NEXT_PUBLIC_BSKY_DID}`}

     

       34
       34
       +
                   className="hover:underline hover:underline-offset-4"

     

       35
       35
       +
                 >

     

       36
       36
       +
                   Roscoe Rubin-Rottenberg

     

       37
       37
       +
                 </a>{" "}

     

       38
       38
       +
                 &middot;{" "}

     

       39
       39
       +
               </>

     

       40
       40
       +
             )}

     

       41
       41
       +
             {createdAt && (

     

       42
       42
       +
               <>

     

       43
       43
       +
                 <time dateTime={createdAt}>{date(new Date(createdAt))}</time>{" "}

     

       44
       44
       +
                 &middot;{" "}

     

       45
       45
       +
               </>

     

       46
       46
       +
             )}

     

       47
       47
       +
             {children}

     

       48
       48
       +
           </Paragraph>

     

       49
       49
       +
         );

     

       50
       50
       +
       }

+84

components/post-list-item.tsx

···

       1
       1
       +
       "use client";

     

       2
       2
       +
       

     

       3
       3
       +
       import { useEffect, useRef, useState } from "preact/hooks";

     

       4
       4
       +
       import { ComWhtwndBlogEntry } from "npm:@atcute/client/whitewind";

     

       5
       5
       +
       

     

       6
       6
       +
       import { cx } from "../lib/cx.ts";

     

       7
       7
       +
       

     

       8
       8
       +
       import { PostInfo } from "./post-info.tsx";

     

       9
       9
       +
       import { Title } from "./typography.tsx";

     

       10
       10
       +
       

     

       11
       11
       +
       export function PostListItem({

     

       12
       12
       +
         post,

     

       13
       13
       +
         rkey,

     

       14
       14
       +
       }: {

     

       15
       15
       +
         post: ComWhtwndBlogEntry.Record;

     

       16
       16
       +
         rkey: string;

     

       17
       17
       +
       }) {

     

       18
       18
       +
         const [isHovered, setIsHovered] = useState(false);

     

       19
       19
       +
         const [isLeaving, setIsLeaving] = useState(false);

     

       20
       20
       +
         const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

     

       21
       21
       +
       

     

       22
       22
       +
         // Clean up any timeouts on unmount

     

       23
       23
       +
         useEffect(() => {

     

       24
       24
       +
           return () => {

     

       25
       25
       +
             if (timeoutRef.current) {

     

       26
       26
       +
               clearTimeout(timeoutRef.current);

     

       27
       27
       +
             }

     

       28
       28
       +
           };

     

       29
       29
       +
         }, []);

     

       30
       30
       +
       

     

       31
       31
       +
         const handleMouseEnter = () => {

     

       32
       32
       +
           if (timeoutRef.current) {

     

       33
       33
       +
             clearTimeout(timeoutRef.current);

     

       34
       34
       +
           }

     

       35
       35
       +
           setIsLeaving(false);

     

       36
       36
       +
           setIsHovered(true);

     

       37
       37
       +
         };

     

       38
       38
       +
       

     

       39
       39
       +
         const handleMouseLeave = () => {

     

       40
       40
       +
           setIsLeaving(true);

     

       41
       41
       +
           timeoutRef.current = setTimeout(() => {

     

       42
       42
       +
             setIsHovered(false);

     

       43
       43
       +
             setIsLeaving(false);

     

       44
       44
       +
           }, 300); // Match the animation duration

     

       45
       45
       +
         };

     

       46
       46
       +
       

     

       47
       47
       +
         return (

     

       48
       48
       +
           <>

     

       49
       49
       +
             {isHovered && (

     

       50
       50
       +
               <div

     

       51
       51
       +
                 className={cx(

     

       52
       52
       +
                   "fixed inset-0 pointer-events-none z-0 overflow-hidden flex items-center",

     

       53
       53
       +
                   isLeaving ? "animate-fade-out" : "animate-fade-in",

     

       54
       54
       +
                 )}

     

       55
       55
       +
               >

     

       56
       56
       +
                 <div className="absolute whitespace-nowrap animate-marquee font-serif font-medium uppercase overflow-visible flex items-center justify-center leading-none">

     

       57
       57
       +
                   {Array(10).fill(post.title).join(" · ")}

     

       58
       58
       +
                 </div>

     

       59
       59
       +
               </div>

     

       60
       60
       +
             )}

     

       61
       61
       +
             <a

     

       62
       62
       +
               href={`/post/${rkey}`}

     

       63
       63
       +
               className="w-full group"

     

       64
       64
       +
               onMouseEnter={handleMouseEnter}

     

       65
       65
       +
               onMouseLeave={handleMouseLeave}

     

       66
       66
       +
             >

     

       67
       67
       +
               <article className="w-full flex flex-row border-b items-stretch relative transition-color backdrop-blur-sm hover:bg-slate-700/5 dark:hover:bg-slate-200/10">

     

       68
       68
       +
                 <div className="w-1.5 diagonal-pattern shrink-0 opacity-20 group-hover:opacity-100 transition-opacity" />

     

       69
       69
       +
                 <div className="flex-1 py-2 px-4 z-10 relative">

     

       70
       70
       +
                   <Title className="text-lg" level="h3">

     

       71
       71
       +
                     {post.title}

     

       72
       72
       +
                   </Title>

     

       73
       73
       +
                   <PostInfo

     

       74
       74
       +
                     content={post.content}

     

       75
       75
       +
                     createdAt={post.createdAt}

     

       76
       76
       +
                     className="text-xs mt-1"

     

       77
       77
       +
                   >

     

       78
       78
       +
                   </PostInfo>

     

       79
       79
       +
                 </div>

     

       80
       80
       +
               </article>

     

       81
       81
       +
             </a>

     

       82
       82
       +
           </>

     

       83
       83
       +
         );

     

       84
       84
       +
       }

+64

components/typography.tsx

···

       1
       1
       +
       import { h } from "preact/src/index.d.ts";

     

       2
       2
       +
       import { cx } from "../lib/cx.ts";

     

       3
       3
       +
       

     

       4
       4
       +
       export function Title({

     

       5
       5
       +
         level = "h1",

     

       6
       6
       +
         className,

     

       7
       7
       +
         ...props

     

       8
       8
       +
       }: h.JSX.HTMLAttributes<HTMLHeadingElement> & {

     

       9
       9
       +
         level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

     

       10
       10
       +
       }) {

     

       11
       11
       +
         const Tag = level;

     

       12
       12
       +
       

     

       13
       13
       +
         let style;

     

       14
       14
       +
         switch (level) {

     

       15
       15
       +
           case "h1":

     

       16
       16
       +
             style = "text-4xl lg:text-5xl";

     

       17
       17
       +
             break;

     

       18
       18
       +
           case "h2":

     

       19
       19
       +
             style = "border-b pb-2 text-3xl";

     

       20
       20
       +
             break;

     

       21
       21
       +
           case "h3":

     

       22
       22
       +
             style = "text-2xl";

     

       23
       23
       +
             break;

     

       24
       24
       +
           case "h4":

     

       25
       25
       +
             style = "text-xl";

     

       26
       26
       +
             break;

     

       27
       27
       +
           case "h5":

     

       28
       28
       +
             style = "text-lg";

     

       29
       29
       +
             break;

     

       30
       30
       +
           case "h6":

     

       31
       31
       +
             style = "text-base";

     

       32
       32
       +
             break;

     

       33
       33
       +
         }

     

       34
       34
       +
       

     

       35
       35
       +
         return (

     

       36
       36
       +
           <Tag

     

       37
       37
       +
             className={cx(

     

       38
       38
       +
               "font-serif font-bold text-balance tracking-wide scroll-m-20 uppercase mt-8 [&>code]:text-[length:inherit] first:mt-0",

     

       39
       39
       +
               style,

     

       40
       40
       +
               className?.toString(),

     

       41
       41
       +
             )}

     

       42
       42
       +
             {...props}

     

       43
       43
       +
           />

     

       44
       44
       +
         );

     

       45
       45
       +
       }

     

       46
       46
       +
       

     

       47
       47
       +
       export function Paragraph({

     

       48
       48
       +
         className,

     

       49
       49
       +
         ...props

     

       50
       50
       +
       }: h.JSX.HTMLAttributes<HTMLParagraphElement>) {

     

       51
       51
       +
         return <p className={cx("font-sans text-pretty", className?.toString())} {...props} />;

     

       52
       52
       +
       }

     

       53
       53
       +
       

     

       54
       54
       +
       export function Code({ className, ...props }: h.JSX.HTMLAttributes<HTMLElement>) {

     

       55
       55
       +
         return (

     

       56
       56
       +
           <code

     

       57
       57
       +
             className={cx(

     

       58
       58
       +
               "font-mono normal-case relative rounded-sm px-[0.3rem] py-[0.2rem] bg-slate-100 text-sm dark:bg-slate-800 dark:text-slate-100",

     

       59
       59
       +
               className?.toString(),

     

       60
       60
       +
             )}

     

       61
       61
       +
             {...props}

     

       62
       62
       +
           />

     

       63
       63
       +
         );

     

       64
       64
       +
       }

+40

deno.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "lock": false,

     

       3
       3
       +
         "tasks": {

     

       4
       4
       +
           "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",

     

       5
       5
       +
           "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",

     

       6
       6
       +
           "manifest": "deno task cli manifest $(pwd)",

     

       7
       7
       +
           "start": "deno run -A --watch=static/,routes/ dev.ts",

     

       8
       8
       +
           "build": "deno run -A dev.ts build",

     

       9
       9
       +
           "preview": "deno run -A main.ts",

     

       10
       10
       +
           "update": "deno run -A -r https://fresh.deno.dev/update ."

     

       11
       11
       +
         },

     

       12
       12
       +
         "lint": {

     

       13
       13
       +
           "rules": {

     

       14
       14
       +
             "tags": [

     

       15
       15
       +
               "fresh",

     

       16
       16
       +
               "recommended"

     

       17
       17
       +
             ]

     

       18
       18
       +
           }

     

       19
       19
       +
         },

     

       20
       20
       +
         "exclude": [

     

       21
       21
       +
           "**/_fresh/*"

     

       22
       22
       +
         ],

     

       23
       23
       +
         "imports": {

     

       24
       24
       +
           "$fresh/": "https://deno.land/x/fresh@1.7.3/",

     

       25
       25
       +
           "@deno/gfm": "jsr:@deno/gfm@^0.10.0",

     

       26
       26
       +
           "preact": "https://esm.sh/preact@10.22.0",

     

       27
       27
       +
           "preact/": "https://esm.sh/preact@10.22.0/",

     

       28
       28
       +
           "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",

     

       29
       29
       +
           "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",

     

       30
       30
       +
           "tailwindcss": "npm:tailwindcss@3.4.1",

     

       31
       31
       +
           "tailwindcss/": "npm:/tailwindcss@3.4.1/",

     

       32
       32
       +
           "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",

     

       33
       33
       +
           "$std/": "https://deno.land/std@0.216.0/"

     

       34
       34
       +
         },

     

       35
       35
       +
         "compilerOptions": {

     

       36
       36
       +
           "jsx": "react-jsx",

     

       37
       37
       +
           "jsxImportSource": "preact"

     

       38
       38
       +
         },

     

       39
       39
       +
         "nodeModulesDir": "auto"

     

       40
       40
       +
       }

+8

dev.ts

···

       1
       1
       +
       #!/usr/bin/env -S deno run -A --watch=static/,routes/

     

       2
       2
       +
       

     

       3
       3
       +
       import dev from "$fresh/dev.ts";

     

       4
       4
       +
       import config from "./fresh.config.ts";

     

       5
       5
       +
       

     

       6
       6
       +
       import "$std/dotenv/load.ts";

     

       7
       7
       +
       

     

       8
       8
       +
       await dev(import.meta.url, "./main.ts", config);

+6

fresh.config.ts

···

       1
       1
       +
       import { defineConfig } from "$fresh/server.ts";

     

       2
       2
       +
       import tailwind from "$fresh/plugins/tailwind.ts";

     

       3
       3
       +
       

     

       4
       4
       +
       export default defineConfig({

     

       5
       5
       +
         plugins: [tailwind()],

     

       6
       6
       +
       });

+31

fresh.gen.ts

···

       1
       1
       +
       // DO NOT EDIT. This file is generated by Fresh.

     

       2
       2
       +
       // This file SHOULD be checked into source version control.

     

       3
       3
       +
       // This file is automatically updated during development when running `dev.ts`.

     

       4
       4
       +
       

     

       5
       5
       +
       import * as $_404 from "./routes/_404.tsx";

     

       6
       6
       +
       import * as $_app from "./routes/_app.tsx";

     

       7
       7
       +
       import * as $api_joke from "./routes/api/joke.ts";

     

       8
       8
       +
       import * as $greet_name_ from "./routes/greet/[name].tsx";

     

       9
       9
       +
       import * as $index from "./routes/index.tsx";

     

       10
       10
       +
       import * as $post_slug_ from "./routes/post/[slug].tsx";

     

       11
       11
       +
       import * as $rss from "./routes/rss.ts";

     

       12
       12
       +
       import * as $post_list from "./islands/post-list.tsx";

     

       13
       13
       +
       import type { Manifest } from "$fresh/server.ts";

     

       14
       14
       +
       

     

       15
       15
       +
       const manifest = {

     

       16
       16
       +
         routes: {

     

       17
       17
       +
           "./routes/_404.tsx": $_404,

     

       18
       18
       +
           "./routes/_app.tsx": $_app,

     

       19
       19
       +
           "./routes/api/joke.ts": $api_joke,

     

       20
       20
       +
           "./routes/greet/[name].tsx": $greet_name_,

     

       21
       21
       +
           "./routes/index.tsx": $index,

     

       22
       22
       +
           "./routes/post/[slug].tsx": $post_slug_,

     

       23
       23
       +
           "./routes/rss.ts": $rss,

     

       24
       24
       +
         },

     

       25
       25
       +
         islands: {

     

       26
       26
       +
           "./islands/post-list.tsx": $post_list,

     

       27
       27
       +
         },

     

       28
       28
       +
         baseUrl: import.meta.url,

     

       29
       29
       +
       } satisfies Manifest;

     

       30
       30
       +
       

     

       31
       31
       +
       export default manifest;

+32

islands/post-list.tsx

···

       1
       1
       +
       import { useSignal } from "@preact/signals";

     

       2
       2
       +
       import { useEffect } from "preact/hooks";

     

       3
       3
       +
       import { PostListItem } from "../components/post-list-item.tsx";

     

       4
       4
       +
       

     

       5
       5
       +
       interface PostRecord {

     

       6
       6
       +
         value: any;

     

       7
       7
       +
         uri: string;

     

       8
       8
       +
       }

     

       9
       9
       +
       

     

       10
       10
       +
       export default function PostList({ posts: initialPosts }: { posts: PostRecord[] }) {

     

       11
       11
       +
         const posts = useSignal(initialPosts);

     

       12
       12
       +
       

     

       13
       13
       +
         useEffect(() => {

     

       14
       14
       +
           posts.value = initialPosts;

     

       15
       15
       +
         }, [initialPosts]);

     

       16
       16
       +
       

     

       17
       17
       +
         return (

     

       18
       18
       +
           <>

     

       19
       19
       +
             {posts.value?.map((record) => {

     

       20
       20
       +
               const post = record.value;

     

       21
       21
       +
               const rkey = record.uri.split("/").pop() || "";

     

       22
       22
       +
               return (

     

       23
       23
       +
                 <PostListItem

     

       24
       24
       +
                   key={record.uri}

     

       25
       25
       +
                   post={post}

     

       26
       26
       +
                   rkey={rkey}

     

       27
       27
       +
                 />

     

       28
       28
       +
               );

     

       29
       29
       +
             })}

     

       30
       30
       +
           </>

     

       31
       31
       +
         );

     

       32
       32
       +
       }

+40

lib/api.ts

···

       1
       1
       +
       import { bsky } from "./bsky.ts";

     

       2
       2
       +
       import { env } from "./env.ts";

     

       3
       3
       +
       

     

       4
       4
       +
       import { type ComAtprotoRepoListRecords } from "npm:@atcute/client/lexicons";

     

       5
       5
       +
       import { type ComWhtwndBlogEntry } from "npm:@atcute/whitewind";

     

       6
       6
       +
       

     

       7
       7
       +
       export async function getPosts() {

     

       8
       8
       +
         const posts = await bsky.get("com.atproto.repo.listRecords", {

     

       9
       9
       +
           params: {

     

       10
       10
       +
             repo: env.NEXT_PUBLIC_BSKY_DID,

     

       11
       11
       +
             collection: "com.whtwnd.blog.entry",

     

       12
       12
       +
             // todo: pagination

     

       13
       13
       +
           },

     

       14
       14
       +
         });

     

       15
       15
       +
         return posts.data.records.filter(

     

       16
       16
       +
           drafts,

     

       17
       17
       +
         ) as (ComAtprotoRepoListRecords.Record & {

     

       18
       18
       +
           value: ComWhtwndBlogEntry.Record;

     

       19
       19
       +
         })[];

     

       20
       20
       +
       }

     

       21
       21
       +
       

     

       22
       22
       +
       function drafts(record: ComAtprotoRepoListRecords.Record) {

     

       23
       23
       +
         if (Deno.env.get("NODE_ENV") === "development") return true;

     

       24
       24
       +
         const post = record.value as ComWhtwndBlogEntry.Record;

     

       25
       25
       +
         return post.visibility === "public";

     

       26
       26
       +
       }

     

       27
       27
       +
       

     

       28
       28
       +
       export async function getPost(rkey: string) {

     

       29
       29
       +
         const post = await bsky.get("com.atproto.repo.getRecord", {

     

       30
       30
       +
           params: {

     

       31
       31
       +
             repo: env.NEXT_PUBLIC_BSKY_DID,

     

       32
       32
       +
             rkey: rkey,

     

       33
       33
       +
             collection: "com.whtwnd.blog.entry",

     

       34
       34
       +
           },

     

       35
       35
       +
         });

     

       36
       36
       +
       

     

       37
       37
       +
         return post.data as ComAtprotoRepoListRecords.Record & {

     

       38
       38
       +
           value: ComWhtwndBlogEntry.Record;

     

       39
       39
       +
         };

     

       40
       40
       +
       }

+9

lib/bsky.ts

···

       1
       1
       +
       import { CredentialManager, XRPC } from "npm:@atcute/client";

     

       2
       2
       +
       

     

       3
       3
       +
       import { env } from "./env.ts";

     

       4
       4
       +
       

     

       5
       5
       +
       const handler = new CredentialManager({

     

       6
       6
       +
         service: env.NEXT_PUBLIC_BSKY_PDS,

     

       7
       7
       +
         fetch,

     

       8
       8
       +
       });

     

       9
       9
       +
       export const bsky = new XRPC({ handler });

+1

lib/cx.ts

···

       1
       1
       +
       export { twMerge as cx } from "npm:tailwind-merge";

+3

lib/date.ts

···

       1
       1
       +
       export const { format: date } = new Intl.DateTimeFormat("en-GB", {

     

       2
       2
       +
         dateStyle: "medium",

     

       3
       3
       +
       });

+26

lib/env.ts

···

       1
       1
       +
       import { cleanEnv, str, url } from "npm:envalid";

     

       2
       2
       +
       

     

       3
       3
       +
       const envVars = {

     

       4
       4
       +
         NODE_ENV: "production",

     

       5
       5
       +
         PLAUSIBLE_SITE_ID: "knotbin.xyz",

     

       6
       6
       +
         PLAUSIBLE_DOMAIN: "https://plausible.knotbin.xyz",

     

       7
       7
       +
         PLAUSIBLE_API_KEY: "",

     

       8
       8
       +
         NEXT_PUBLIC_BSKY_DID: "did:plc:6hbqm2oftpotwuw7gvvrui3i",

     

       9
       9
       +
         NEXT_PUBLIC_BSKY_PDS: "https://puffball.us-east.host.bsky.network",

     

       10
       10
       +
       };

     

       11
       11
       +
       

     

       12
       12
       +
       // Use cleanEnv to validate and parse the environment variables

     

       13
       13
       +
       export const env = cleanEnv(envVars, {

     

       14
       14
       +
         NODE_ENV: str({

     

       15
       15
       +
           choices: ["development", "production"],

     

       16
       16
       +
           default: "production",

     

       17
       17
       +
           devDefault: "development",

     

       18
       18
       +
         }),

     

       19
       19
       +
         PLAUSIBLE_SITE_ID: str({ default: "knotbin.xyz" }),

     

       20
       20
       +
         PLAUSIBLE_DOMAIN: url({ default: "https://plausible.knotbin.xyz" }),

     

       21
       21
       +
         PLAUSIBLE_API_KEY: str({ default: "" }),

     

       22
       22
       +
         NEXT_PUBLIC_BSKY_DID: str({ default: "did:plc:6hbqm2oftpotwuw7gvvrui3i" }),

     

       23
       23
       +
         NEXT_PUBLIC_BSKY_PDS: url({

     

       24
       24
       +
           default: "https://puffball.us-east.host.bsky.network",

     

       25
       25
       +
         }),

     

       26
       26
       +
       });

+21

lib/google-font.ts

···

       1
       1
       +
       // from https://github.com/kosei28/vercel-og-google-fonts/blob/main/src/utils/font.ts

     

       2
       2
       +
       export async function loadGoogleFont(font: string, text: string) {

     

       3
       3
       +
         const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(

     

       4
       4
       +
           text,

     

       5
       5
       +
         )}`;

     

       6
       6
       +
       

     

       7
       7
       +
         const css = await (await fetch(url)).text();

     

       8
       8
       +
       

     

       9
       9
       +
         const resource = css.match(

     

       10
       10
       +
           /src: url\((.+)\) format\('(opentype|truetype)'\)/,

     

       11
       11
       +
         );

     

       12
       12
       +
       

     

       13
       13
       +
         if (resource) {

     

       14
       14
       +
           const res = await fetch(resource[1]);

     

       15
       15
       +
           if (res.status == 200) {

     

       16
       16
       +
             return await res.arrayBuffer();

     

       17
       17
       +
           }

     

       18
       18
       +
         }

     

       19
       19
       +
       

     

       20
       20
       +
         throw new Error("failed to load font data");

     

       21
       21
       +
       }

lib/render-markdown.ts

This is a binary file and will not be displayed.

+12

main.ts

···

       1
       1
       +
       /// <reference lib="dom" />

     

       2
       2
       +
       /// <reference lib="dom.iterable" />

     

       3
       3
       +
       /// <reference lib="dom.asynciterable" />

     

       4
       4
       +
       /// <reference lib="deno.ns" />

     

       5
       5
       +
       

     

       6
       6
       +
       import "$std/dotenv/load.ts";

     

       7
       7
       +
       

     

       8
       8
       +
       import { start } from "$fresh/server.ts";

     

       9
       9
       +
       import manifest from "./fresh.gen.ts";

     

       10
       10
       +
       import config from "./fresh.config.ts";

     

       11
       11
       +
       

     

       12
       12
       +
       await start(manifest, config);

+27

routes/_404.tsx

···

       1
       1
       +
       import { Head } from "$fresh/runtime.ts";

     

       2
       2
       +
       

     

       3
       3
       +
       export default function Error404() {

     

       4
       4
       +
         return (

     

       5
       5
       +
           <>

     

       6
       6
       +
             <Head>

     

       7
       7
       +
               <title>404 - Page not found</title>

     

       8
       8
       +
             </Head>

     

       9
       9
       +
             <div class="px-4 py-8 mx-auto bg-[#86efac]">

     

       10
       10
       +
               <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">

     

       11
       11
       +
                 <img

     

       12
       12
       +
                   class="my-6"

     

       13
       13
       +
                   src="/logo.svg"

     

       14
       14
       +
                   width="128"

     

       15
       15
       +
                   height="128"

     

       16
       16
       +
                   alt="the Fresh logo: a sliced lemon dripping with juice"

     

       17
       17
       +
                 />

     

       18
       18
       +
                 <h1 class="text-4xl font-bold">404 - Page not found</h1>

     

       19
       19
       +
                 <p class="my-4">

     

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

     

       21
       21
       +
                 </p>

     

       22
       22
       +
                 <a href="/" class="underline">Go back home</a>

     

       23
       23
       +
               </div>

     

       24
       24
       +
             </div>

     

       25
       25
       +
           </>

     

       26
       26
       +
         );

     

       27
       27
       +
       }

+16

routes/_app.tsx

···

       1
       1
       +
       import { type PageProps } from "$fresh/server.ts";

     

       2
       2
       +
       export default function App({ Component }: PageProps) {

     

       3
       3
       +
         return (

     

       4
       4
       +
           <html>

     

       5
       5
       +
             <head>

     

       6
       6
       +
               <meta charset="utf-8" />

     

       7
       7
       +
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       8
       8
       +
               <title>blog</title>

     

       9
       9
       +
               <link rel="stylesheet" href="/styles.css" />

     

       10
       10
       +
             </head>

     

       11
       11
       +
             <body>

     

       12
       12
       +
               <Component />

     

       13
       13
       +
             </body>

     

       14
       14
       +
           </html>

     

       15
       15
       +
         );

     

       16
       16
       +
       }

+21

routes/api/joke.ts

···

       1
       1
       +
       import { FreshContext } from "$fresh/server.ts";

     

       2
       2
       +
       

     

       3
       3
       +
       // Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/

     

       4
       4
       +
       const JOKES = [

     

       5
       5
       +
         "Why do Java developers often wear glasses? They can't C#.",

     

       6
       6
       +
         "A SQL query walks into a bar, goes up to two tables and says “can I join you?”",

     

       7
       7
       +
         "Wasn't hard to crack Forrest Gump's password. 1forrest1.",

     

       8
       8
       +
         "I love pressing the F5 key. It's refreshing.",

     

       9
       9
       +
         "Called IT support and a chap from Australia came to fix my network connection.  I asked “Do you come from a LAN down under?”",

     

       10
       10
       +
         "There are 10 types of people in the world. Those who understand binary and those who don't.",

     

       11
       11
       +
         "Why are assembly programmers often wet? They work below C level.",

     

       12
       12
       +
         "My favourite computer based band is the Black IPs.",

     

       13
       13
       +
         "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",

     

       14
       14
       +
         "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",

     

       15
       15
       +
       ];

     

       16
       16
       +
       

     

       17
       17
       +
       export const handler = (_req: Request, _ctx: FreshContext): Response => {

     

       18
       18
       +
         const randomIndex = Math.floor(Math.random() * JOKES.length);

     

       19
       19
       +
         const body = JOKES[randomIndex];

     

       20
       20
       +
         return new Response(body);

     

       21
       21
       +
       };

+5

routes/greet/[name].tsx

···

       1
       1
       +
       import { PageProps } from "$fresh/server.ts";

     

       2
       2
       +
       

     

       3
       3
       +
       export default function Greet(props: PageProps) {

     

       4
       4
       +
         return <div>Hello {props.params.name}</div>;

     

       5
       5
       +
       }

+31

routes/index.tsx

···

       1
       1
       +
       import { Footer } from "../components/footer.tsx";

     

       2
       2
       +
       import PostList from "../islands/post-list.tsx";

     

       3
       3
       +
       import { Title } from "../components/typography.tsx";

     

       4
       4
       +
       import { getPosts } from "../lib/api.ts";

     

       5
       5
       +
       

     

       6
       6
       +
       export const dynamic = "force-static";

     

       7
       7
       +
       export const revalidate = 3600; // 1 hour

     

       8
       8
       +
       

     

       9
       9
       +
       export default async function Home() {

     

       10
       10
       +
         const posts = await getPosts();

     

       11
       11
       +
       

     

       12
       12
       +
         return (

     

       13
       13
       +
           <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-dvh p-8 pb-20 gap-16 sm:p-20">

     

       14
       14
       +
             <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start w-full max-w-[600px]">

     

       15
       15
       +
               <div className="self-center flex flex-col">

     

       16
       16
       +
                 <Title level="h1" className="m-0">

     

       17
       17
       +
                   knotbin

     

       18
       18
       +
                 </Title>

     

       19
       19
       +
                 <span className="font-bold text-xs opacity-50 text-right flex-1 mr-6">

     

       20
       20
       +
                   looking into it

     

       21
       21
       +
                 </span>

     

       22
       22
       +
               </div>

     

       23
       23
       +
       

     

       24
       24
       +
               <div className="flex flex-col gap-4 w-full">

     

       25
       25
       +
                 <PostList posts={posts} />

     

       26
       26
       +
               </div>

     

       27
       27
       +
             </main>

     

       28
       28
       +
             <Footer />

     

       29
       29
       +
           </div>

     

       30
       30
       +
         );

     

       31
       31
       +
       }

+153

routes/post/[slug].tsx

···

       1
       1
       +
       /** @jsxImportSource preact */

     

       2
       2
       +
       import { CSS, render } from "@deno/gfm";

     

       3
       3
       +
       import { Handlers, PageProps } from "$fresh/server.ts";

     

       4
       4
       +
       

     

       5
       5
       +
       import { Footer } from "../../components/footer.tsx";

     

       6
       6
       +
       import { PostInfo } from "../../components/post-info.tsx";

     

       7
       7
       +
       import { Title } from "../../components/typography.tsx";

     

       8
       8
       +
       import { getPost } from "../../lib/api.ts";

     

       9
       9
       +
       import { Head } from "$fresh/runtime.ts";

     

       10
       10
       +
       

     

       11
       11
       +
       interface Post {

     

       12
       12
       +
         uri: string;

     

       13
       13
       +
         value: {

     

       14
       14
       +
           title: string;

     

       15
       15
       +
           content: string;

     

       16
       16
       +
           createdAt: string;

     

       17
       17
       +
         };

     

       18
       18
       +
       }

     

       19
       19
       +
       

     

       20
       20
       +
       // Only override backgrounds in dark mode to make them transparent

     

       21
       21
       +
       const transparentDarkModeCSS = `

     

       22
       22
       +
       @media (prefers-color-scheme: dark) {

     

       23
       23
       +
         .markdown-body {

     

       24
       24
       +
           color: white;

     

       25
       25
       +
           background-color: transparent;

     

       26
       26
       +
         }

     

       27
       27
       +
       

     

       28
       28
       +
         .markdown-body a {

     

       29
       29
       +
           color: #58a6ff;

     

       30
       30
       +
         }

     

       31
       31
       +
       

     

       32
       32
       +
         .markdown-body blockquote {

     

       33
       33
       +
           border-left-color: #30363d;

     

       34
       34
       +
           background-color: transparent;

     

       35
       35
       +
         }

     

       36
       36
       +
       

     

       37
       37
       +
         .markdown-body pre,

     

       38
       38
       +
         .markdown-body code {

     

       39
       39
       +
           background-color: transparent;

     

       40
       40
       +
           color: #c9d1d9;

     

       41
       41
       +
         }

     

       42
       42
       +
       

     

       43
       43
       +
         .markdown-body table td,

     

       44
       44
       +
         .markdown-body table th {

     

       45
       45
       +
           border-color: #30363d;

     

       46
       46
       +
           background-color: transparent;

     

       47
       47
       +
         }

     

       48
       48
       +
       }

     

       49
       49
       +
       

     

       50
       50
       +
       .font-sans { font-family: var(--font-sans); }

     

       51
       51
       +
       .font-serif { font-family: var(--font-serif); }

     

       52
       52
       +
       .font-mono { font-family: var(--font-mono); }

     

       53
       53
       +
       

     

       54
       54
       +
       .markdown-body h1 {

     

       55
       55
       +
         font-family: var(--font-serif);

     

       56
       56
       +
         text-transform: uppercase;

     

       57
       57
       +
         font-size: 2.25rem;

     

       58
       58
       +
       }

     

       59
       59
       +
       

     

       60
       60
       +
       .markdown-body h2 {

     

       61
       61
       +
         font-family: var(--font-serif);

     

       62
       62
       +
         text-transform: uppercase;

     

       63
       63
       +
         font-size: 1.75rem;

     

       64
       64
       +
       }

     

       65
       65
       +
       

     

       66
       66
       +
       .markdown-body h3 {

     

       67
       67
       +
         font-family: var(--font-serif);

     

       68
       68
       +
         text-transform: uppercase;

     

       69
       69
       +
         font-size: 1.5rem;

     

       70
       70
       +
       }

     

       71
       71
       +
       

     

       72
       72
       +
       .markdown-body h4 {

     

       73
       73
       +
         font-family: var(--font-serif);

     

       74
       74
       +
         text-transform: uppercase;

     

       75
       75
       +
         font-size: 1.25rem;

     

       76
       76
       +
       }

     

       77
       77
       +
       

     

       78
       78
       +
       .markdown-body h5 {

     

       79
       79
       +
         font-family: var(--font-serif);

     

       80
       80
       +
         text-transform: uppercase;

     

       81
       81
       +
         font-size: 1rem;

     

       82
       82
       +
       }

     

       83
       83
       +
       

     

       84
       84
       +
       .markdown-body h6 {

     

       85
       85
       +
         font-family: var(--font-serif);

     

       86
       86
       +
         text-transform: uppercase;

     

       87
       87
       +
         font-size: 0.875rem;

     

       88
       88
       +
       }

     

       89
       89
       +
       `;

     

       90
       90
       +
       

     

       91
       91
       +
       export const handler: Handlers<Post> = {

     

       92
       92
       +
         async GET(_req, ctx) {

     

       93
       93
       +
           try {

     

       94
       94
       +
             const { slug } = ctx.params;

     

       95
       95
       +
             const post = await getPost(slug);

     

       96
       96
       +
             return ctx.render(post);

     

       97
       97
       +
           } catch (error) {

     

       98
       98
       +
             console.error("Error fetching post:", error);

     

       99
       99
       +
             return new Response("Post not found", { status: 404 });

     

       100
       100
       +
           }

     

       101
       101
       +
         },

     

       102
       102
       +
       };

     

       103
       103
       +
       

     

       104
       104
       +
       export default function BlogPage({ data: post }: PageProps<Post>) {

     

       105
       105
       +
         if (!post) {

     

       106
       106
       +
           return <div>Post not found</div>;

     

       107
       107
       +
         }

     

       108
       108
       +
       

     

       109
       109
       +
         return (

     

       110
       110
       +
           <>

     

       111
       111
       +
             <Head>

     

       112
       112
       +
               <title>{post.value.title} — knotbin</title>

     

       113
       113
       +
               <meta name="description" content="by Roscoe Rubin-Rottenberg" />

     

       114
       114
       +
               {/* Merge GFM’s default styles with our dark-mode overrides */}

     

       115
       115
       +
               <style

     

       116
       116
       +
                 dangerouslySetInnerHTML={{ __html: CSS + transparentDarkModeCSS }}

     

       117
       117
       +
               />

     

       118
       118
       +
             </Head>

     

       119
       119
       +
       

     

       120
       120
       +
             <div className="grid grid-rows-[20px_1fr_20px] justify-items-center min-h-dvh py-8 px-4 xs:px-8 pb-20 gap-16 sm:p-20">

     

       121
       121
       +
               <link rel="alternate" href={post.uri} />

     

       122
       122
       +
               <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start w-full max-w-[600px] overflow-hidden">

     

       123
       123
       +
                 <article className="w-full space-y-8">

     

       124
       124
       +
                   <div className="space-y-4 w-full">

     

       125
       125
       +
                     <a

     

       126
       126
       +
                       href="/"

     

       127
       127
       +
                       className="hover:underline hover:underline-offset-4 font-medium"

     

       128
       128
       +
                     >

     

       129
       129
       +
                       Back

     

       130
       130
       +
                     </a>

     

       131
       131
       +
                     <Title>{post.value.title}</Title>

     

       132
       132
       +
                     <PostInfo

     

       133
       133
       +
                       content={post.value.content}

     

       134
       134
       +
                       createdAt={post.value.createdAt}

     

       135
       135
       +
                       includeAuthor

     

       136
       136
       +
                       className="text-sm"

     

       137
       137
       +
                     />

     

       138
       138
       +
                     <div className="diagonal-pattern w-full h-3" />

     

       139
       139
       +
                   </div>

     

       140
       140
       +
                   <div className="[&>.bluesky-embed]:mt-8 [&>.bluesky-embed]:mb-0">

     

       141
       141
       +
                     {/* Render GFM HTML via dangerouslySetInnerHTML */}

     

       142
       142
       +
                     <div

     

       143
       143
       +
                       class="mt-8 markdown-body"

     

       144
       144
       +
                       dangerouslySetInnerHTML={{ __html: render(post.value.content) }}

     

       145
       145
       +
                     />

     

       146
       146
       +
                   </div>

     

       147
       147
       +
                 </article>

     

       148
       148
       +
               </main>

     

       149
       149
       +
               <Footer />

     

       150
       150
       +
             </div>

     

       151
       151
       +
           </>

     

       152
       152
       +
         );

     

       153
       153
       +
       }

+43

routes/rss.ts

···

       1
       1
       +
       import rehypeFormat from "npm:rehype-format";

     

       2
       2
       +
       import rehypeStringify from "npm:rehype-stringify";

     

       3
       3
       +
       import remarkParse from "npm:remark-parse";

     

       4
       4
       +
       import remarkRehype from "npm:remark-rehype";

     

       5
       5
       +
       import RSS from "npm:rss";

     

       6
       6
       +
       import { unified } from "npm:unified";

     

       7
       7
       +
       

     

       8
       8
       +
       import { getPosts } from "../lib/api.ts";

     

       9
       9
       +
       

     

       10
       10
       +
       export const dynamic = "force-static";

     

       11
       11
       +
       export const revalidate = 3600; // 1 hour

     

       12
       12
       +
       

     

       13
       13
       +
       export async function GET() {

     

       14
       14
       +
         const posts = await getPosts();

     

       15
       15
       +
       

     

       16
       16
       +
         const rss = new RSS({

     

       17
       17
       +
           title: "knotbin",

     

       18
       18
       +
           feed_url: "https://knotbin.xyz/rss",

     

       19
       19
       +
           site_url: "https://knotbin.xyz",

     

       20
       20
       +
           description: "a webbed site",

     

       21
       21
       +
         });

     

       22
       22
       +
       

     

       23
       23
       +
         for (const post of posts) {

     

       24
       24
       +
           rss.item({

     

       25
       25
       +
             title: post.value.title ?? "Untitled",

     

       26
       26
       +
             description: await unified()

     

       27
       27
       +
               .use(remarkParse)

     

       28
       28
       +
               .use(remarkRehype)

     

       29
       29
       +
               .use(rehypeFormat)

     

       30
       30
       +
               .use(rehypeStringify)

     

       31
       31
       +
               .process(post.value.content)

     

       32
       32
       +
               .then((v) => v.toString()),

     

       33
       33
       +
             url: `https://mozzius.dev/post/${post.uri.split("/").pop()}`,

     

       34
       34
       +
             date: new Date(post.value.createdAt ?? Date.now()),

     

       35
       35
       +
           });

     

       36
       36
       +
         }

     

       37
       37
       +
       

     

       38
       38
       +
         return new Response(rss.xml(), {

     

       39
       39
       +
           headers: {

     

       40
       40
       +
             "content-type": "application/rss+xml",

     

       41
       41
       +
           },

     

       42
       42
       +
         });

     

       43
       43
       +
       }

static/favicon.ico

This is a binary file and will not be displayed.

+6

static/logo.svg

···

       1
       1
       +
       <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       +
         <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"/>

     

       3
       3
       +
         <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"/>

     

       4
       4
       +
         <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"/>

     

       5
       5
       +
         <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"/>

     

       6
       6
       +
       </svg>

+145

static/styles.css

···

       1
       1
       +
       @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

     

       2
       2
       +
       @import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;700&display=swap');

     

       3
       3
       +
       @font-face {

     

       4
       4
       +
         font-family: 'Berkeley Mono';

     

       5
       5
       +
         src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),

     

       6
       6
       +
              url('/path/to/local/fonts/BerkeleyMono-Regular.woff') format('woff');

     

       7
       7
       +
         font-weight: 400;

     

       8
       8
       +
         font-style: normal;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       @tailwind base;

     

       12
       12
       +
       @tailwind components;

     

       13
       13
       +
       @tailwind utilities;

     

       14
       14
       +
       

     

       15
       15
       +
       @theme inline {

     

       16
       16
       +
         --color-background: var(--background);

     

       17
       17
       +
         --color-foreground: var(--foreground);

     

       18
       18
       +
       }

     

       19
       19
       +
       

     

       20
       20
       +
       :root {

     

       21
       21
       +
         --font-sans: 'Inter', sans-serif;

     

       22
       22
       +
         --font-serif: 'Libre Bodoni', serif;

     

       23
       23
       +
         --font-mono: 'Berkeley Mono', monospace;

     

       24
       24
       +
       }

     

       25
       25
       +
       

     

       26
       26
       +
       .font-sans { font-family: var(--font-sans); }

     

       27
       27
       +
       .font-serif { font-family: var(--font-serif); }

     

       28
       28
       +
       .font-mono { font-family: var(--font-mono); }

     

       29
       29
       +
       

     

       30
       30
       +
       /*

     

       31
       31
       +
         The default border color has changed to `currentColor` in Tailwind CSS v4,

     

       32
       32
       +
         so we've added these compatibility styles to make sure everything still

     

       33
       33
       +
         looks the same as it did with Tailwind CSS v3.

     

       34
       34
       +
       

     

       35
       35
       +
         If we ever want to remove these styles, we need to add an explicit border

     

       36
       36
       +
         color utility to any element that depends on these defaults.

     

       37
       37
       +
       */

     

       38
       38
       +
       @layer base {

     

       39
       39
       +
         *,

     

       40
       40
       +
         ::after,

     

       41
       41
       +
         ::before,

     

       42
       42
       +
         ::backdrop,

     

       43
       43
       +
         ::file-selector-button {

     

       44
       44
       +
           border-color: var(--color-gray-200, currentColor);

     

       45
       45
       +
         }

     

       46
       46
       +
       }

     

       47
       47
       +
       

     

       48
       48
       +
       @utility text-balance {

     

       49
       49
       +
         text-wrap: balance;

     

       50
       50
       +
       }

     

       51
       51
       +
       

     

       52
       52
       +
       @layer utilities {

     

       53
       53
       +
         :root {

     

       54
       54
       +
           --background: #ffffff;

     

       55
       55
       +
           --foreground: #171717;

     

       56
       56
       +
         }

     

       57
       57
       +
       

     

       58
       58
       +
         @media (prefers-color-scheme: dark) {

     

       59
       59
       +
           :root {

     

       60
       60
       +
             --background: #0a0a0a;

     

       61
       61
       +
             --foreground: #ededed;

     

       62
       62
       +
           }

     

       63
       63
       +
         }

     

       64
       64
       +
       

     

       65
       65
       +
         body {

     

       66
       66
       +
           color: var(--foreground);

     

       67
       67
       +
           background: var(--background);

     

       68
       68
       +
           font-family: var(--font-sans);

     

       69
       69
       +
         }

     

       70
       70
       +
       

     

       71
       71
       +
         @keyframes marquee {

     

       72
       72
       +
           0% {

     

       73
       73
       +
             opacity: 0;

     

       74
       74
       +
             transform: translateX(0px);

     

       75
       75
       +
           }

     

       76
       76
       +
           2% {

     

       77
       77
       +
             opacity: 0.075;

     

       78
       78
       +
           }

     

       79
       79
       +
           98% {

     

       80
       80
       +
             opacity: 0.075;

     

       81
       81
       +
           }

     

       82
       82
       +
           100% {

     

       83
       83
       +
             opacity: 0;

     

       84
       84
       +
             transform: translateX(-4000px);

     

       85
       85
       +
           }

     

       86
       86
       +
         }

     

       87
       87
       +
       

     

       88
       88
       +
         @keyframes fadeIn {

     

       89
       89
       +
           0% {

     

       90
       90
       +
             opacity: 0;

     

       91
       91
       +
           }

     

       92
       92
       +
           100% {

     

       93
       93
       +
             opacity: 1;

     

       94
       94
       +
           }

     

       95
       95
       +
         }

     

       96
       96
       +
       

     

       97
       97
       +
         @keyframes fadeOut {

     

       98
       98
       +
           0% {

     

       99
       99
       +
             opacity: 1;

     

       100
       100
       +
           }

     

       101
       101
       +
           100% {

     

       102
       102
       +
             opacity: 0;

     

       103
       103
       +
           }

     

       104
       104
       +
         }

     

       105
       105
       +
       

     

       106
       106
       +
         .animate-marquee {

     

       107
       107
       +
           animation: marquee 30s linear infinite;

     

       108
       108
       +
           font-size: 100vh;

     

       109
       109
       +
           line-height: 0.8;

     

       110
       110
       +
           height: 100vh;

     

       111
       111
       +
           display: flex;

     

       112
       112
       +
           align-items: center;

     

       113
       113
       +
         }

     

       114
       114
       +
       

     

       115
       115
       +
         .animate-fade-in {

     

       116
       116
       +
           animation: fadeIn 0.3s ease-in-out forwards;

     

       117
       117
       +
         }

     

       118
       118
       +
       

     

       119
       119
       +
         .animate-fade-out {

     

       120
       120
       +
           animation: fadeOut 0.3s ease-in-out forwards;

     

       121
       121
       +
         }

     

       122
       122
       +
       }

     

       123
       123
       +
       

     

       124
       124
       +
       .diagonal-pattern {

     

       125
       125
       +
         background-color: transparent;

     

       126
       126
       +
         background: repeating-linear-gradient(

     

       127
       127
       +
           -45deg,

     

       128
       128
       +
           #000000,

     

       129
       129
       +
           #000000 4px,

     

       130
       130
       +
           transparent 4px,

     

       131
       131
       +
           transparent 10px

     

       132
       132
       +
         );

     

       133
       133
       +
       }

     

       134
       134
       +
       

     

       135
       135
       +
       @media (prefers-color-scheme: dark) {

     

       136
       136
       +
         .diagonal-pattern {

     

       137
       137
       +
           background: repeating-linear-gradient(

     

       138
       138
       +
             -45deg,

     

       139
       139
       +
             #ffffff,

     

       140
       140
       +
             #ffffff 4px,

     

       141
       141
       +
             transparent 4px,

     

       142
       142
       +
             transparent 10px

     

       143
       143
       +
           );

     

       144
       144
       +
         }

     

       145
       145
       +
       }

+7

tailwind.config.ts

···

       1
       1
       +
       import { type Config } from "tailwindcss";

     

       2
       2
       +
       

     

       3
       3
       +
       export default {

     

       4
       4
       +
         content: [

     

       5
       5
       +
           "{routes,islands,components}/**/*.{ts,tsx,js,jsx}",

     

       6
       6
       +
         ],

     

       7
       7
       +
       } satisfies Config;