comparing cffda79608030a19be242a28ec437606276ee080 and main on knotbin.com/blog

.gitignore

···

       9
       9
        
       _fresh/

     

       10
       10
        
       # npm dependencies

     

       11
       11
        
       node_modules/

     

       12
       12
       +
       **/.DS_Store

+21

Dockerfile

···

       1
       1
       +
       FROM denoland/deno:ubuntu

     

       2
       2
       +
       

     

       3
       3
       +
       USER root

     

       4
       4
       +
       

     

       5
       5
       +
       # Create and set up directory

     

       6
       6
       +
       WORKDIR /app

     

       7
       7
       +
       RUN chown -R deno:deno /app

     

       8
       8
       +
       

     

       9
       9
       +
       # Copy files at build time

     

       10
       10
       +
       COPY . /app/

     

       11
       11
       +
       

     

       12
       12
       +
       # Ensure Deno user has write permissions

     

       13
       13
       +
       RUN chown -R deno:deno /app

     

       14
       14
       +
       

     

       15
       15
       +
       # Run the build step

     

       16
       16
       +
       RUN deno task build

     

       17
       17
       +
       

     

       18
       18
       +
       EXPOSE 8000

     

       19
       19
       +
       

     

       20
       20
       +
       # Run the application

     

       21
       21
       +
       CMD ["run", "-A", "main.ts"]

+119

components/TextBlock.tsx

···

       1
       1
       +
       import { PubLeafletBlocksText } from "npm:@atcute/leaflet";

     

       2
       2
       +
       

     

       3
       3
       +
       interface TextBlockProps {

     

       4
       4
       +
         plaintext: string;

     

       5
       5
       +
         facets?: PubLeafletBlocksText.Main["facets"];

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       interface LinkFeature {

     

       9
       9
       +
         $type: "pub.leaflet.richtext.facet#link";

     

       10
       10
       +
         uri: string;

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       function byteToCharIndex(text: string, byteIndex: number): number {

     

       14
       14
       +
         const textEncoder = new TextEncoder();

     

       15
       15
       +
         const textDecoder = new TextDecoder();

     

       16
       16
       +
         const fullBytes = textEncoder.encode(text);

     

       17
       17
       +
         const bytes = fullBytes.slice(0, byteIndex);

     

       18
       18
       +
         return textDecoder.decode(bytes).length;

     

       19
       19
       +
       }

     

       20
       20
       +
       

     

       21
       21
       +
       export function TextBlock({ plaintext, facets }: TextBlockProps) {

     

       22
       22
       +
         // Only process facets if at least one facet has features

     

       23
       23
       +
         if (!facets || !facets.some((f) => f.features && f.features.length > 0)) {

     

       24
       24
       +
           return <>{plaintext}</>;

     

       25
       25
       +
         }

     

       26
       26
       +
       

     

       27
       27
       +
         const parts: (string | { text: string; type: string; uri?: string })[] = [];

     

       28
       28
       +
         let lastIndex = 0;

     

       29
       29
       +
       

     

       30
       30
       +
         facets.forEach((facet) => {

     

       31
       31
       +
           // Convert byte positions to character positions

     

       32
       32
       +
           const charStart = byteToCharIndex(plaintext, facet.index.byteStart);

     

       33
       33
       +
           const charEnd = byteToCharIndex(plaintext, facet.index.byteEnd);

     

       34
       34
       +
           const charLastIndex = byteToCharIndex(plaintext, lastIndex);

     

       35
       35
       +
       

     

       36
       36
       +
           if (charStart > charLastIndex) {

     

       37
       37
       +
             parts.push(plaintext.slice(charLastIndex, charStart));

     

       38
       38
       +
           }

     

       39
       39
       +
       

     

       40
       40
       +
           const text = plaintext.slice(charStart, charEnd);

     

       41
       41
       +
           const feature = facet.features?.[0];

     

       42
       42
       +
       

     

       43
       43
       +
           if (!feature) {

     

       44
       44
       +
             parts.push(text);

     

       45
       45
       +
             return;

     

       46
       46
       +
           }

     

       47
       47
       +
       

     

       48
       48
       +
           if (feature.$type === "pub.leaflet.richtext.facet#bold") {

     

       49
       49
       +
             parts.push({ text, type: feature.$type });

     

       50
       50
       +
           } else if (feature.$type === "pub.leaflet.richtext.facet#highlight") {

     

       51
       51
       +
             parts.push({ text, type: feature.$type });

     

       52
       52
       +
           } else if (feature.$type === "pub.leaflet.richtext.facet#italic") {

     

       53
       53
       +
             parts.push({ text, type: feature.$type });

     

       54
       54
       +
           } else if (feature.$type === "pub.leaflet.richtext.facet#strikethrough") {

     

       55
       55
       +
             parts.push({ text, type: feature.$type });

     

       56
       56
       +
           } else if (feature.$type === "pub.leaflet.richtext.facet#underline") {

     

       57
       57
       +
             parts.push({ text, type: feature.$type });

     

       58
       58
       +
           } else if (feature.$type === "pub.leaflet.richtext.facet#link") {

     

       59
       59
       +
             const linkFeature = feature as LinkFeature;

     

       60
       60
       +
             parts.push({ text, type: feature.$type, uri: linkFeature.uri });

     

       61
       61
       +
           } else {

     

       62
       62
       +
             parts.push(text);

     

       63
       63
       +
           }

     

       64
       64
       +
       

     

       65
       65
       +
           lastIndex = facet.index.byteEnd;

     

       66
       66
       +
         });

     

       67
       67
       +
       

     

       68
       68
       +
         // Convert final lastIndex from bytes to characters

     

       69
       69
       +
         const charLastIndex = byteToCharIndex(plaintext, lastIndex);

     

       70
       70
       +
       

     

       71
       71
       +
         if (charLastIndex < plaintext.length) {

     

       72
       72
       +
           parts.push(plaintext.slice(charLastIndex));

     

       73
       73
       +
         }

     

       74
       74
       +
       

     

       75
       75
       +
         return (

     

       76
       76
       +
           <>

     

       77
       77
       +
             {parts.map((part, i) => {

     

       78
       78
       +
               if (typeof part === "string") {

     

       79
       79
       +
                 return part;

     

       80
       80
       +
               }

     

       81
       81
       +
       

     

       82
       82
       +
               switch (part.type) {

     

       83
       83
       +
                 case "pub.leaflet.richtext.facet#bold":

     

       84
       84
       +
                   return <strong key={i}>{part.text}</strong>;

     

       85
       85
       +
                 case "pub.leaflet.richtext.facet#highlight":

     

       86
       86
       +
                   return (

     

       87
       87
       +
                     <mark

     

       88
       88
       +
                       key={i}

     

       89
       89
       +
                       className="bg-blue-100 dark:bg-blue-900 text-inherit rounded px-1"

     

       90
       90
       +
                       style={{ borderRadius: "0.375rem" }}

     

       91
       91
       +
                     >

     

       92
       92
       +
                       {part.text}

     

       93
       93
       +
                     </mark>

     

       94
       94
       +
                   );

     

       95
       95
       +
                 case "pub.leaflet.richtext.facet#italic":

     

       96
       96
       +
                   return <em key={i}>{part.text}</em>;

     

       97
       97
       +
                 case "pub.leaflet.richtext.facet#strikethrough":

     

       98
       98
       +
                   return <s key={i}>{part.text}</s>;

     

       99
       99
       +
                 case "pub.leaflet.richtext.facet#underline":

     

       100
       100
       +
                   return <u key={i}>{part.text}</u>;

     

       101
       101
       +
                 case "pub.leaflet.richtext.facet#link":

     

       102
       102
       +
                   return (

     

       103
       103
       +
                     <a

     

       104
       104
       +
                       key={i}

     

       105
       105
       +
                       href={part.uri}

     

       106
       106
       +
                       target="_blank"

     

       107
       107
       +
                       rel="noopener noreferrer"

     

       108
       108
       +
                       className="text-blue-600 dark:text-blue-400 hover:underline"

     

       109
       109
       +
                     >

     

       110
       110
       +
                       {part.text}

     

       111
       111
       +
                     </a>

     

       112
       112
       +
                   );

     

       113
       113
       +
                 default:

     

       114
       114
       +
                   return part.text;

     

       115
       115
       +
               }

     

       116
       116
       +
             })}

     

       117
       117
       +
           </>

     

       118
       118
       +
         );

     

       119
       119
       +
       }

+6 -5

components/bluesky-embed.tsx

···

       1
       1
        
       "use client";

     

       2
       2
        
       

     

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

     

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

     

       4
       4
        
       

     

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

     

       6
       6
        
       

     
···

       11
       11
        
         useEffect(() => {

     

       12
       12
        
           const abortController = new AbortController();

     

       13
       13
        
           const { signal } = abortController;

     

       14
       14
       -
           window.addEventListener(

     

       14
       14
       +
           globalThis.addEventListener(

     

       15
       15
        
             "message",

     

       16
       16
        
             (event) => {

     

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

     
···

       36
       36
        
           };

     

       37
       37
        
         }, [id]);

     

       38
       38
        
       

     

       39
       39
       -
         const ref_url =

     

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

     

       39
       39
       +
         const ref_url = "https://" + "knotbin.com/post/" + uri.split("/").pop();

     

       41
       40
        
       

     

       42
       41
        
         const searchParams = new URLSearchParams();

     

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

     
···

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

     

       53
       52
        
               style={{ height }}

     

       54
       53
        
               data-bluesky-uri={uri}

     

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

     

       54
       54
       +
               src={`${EMBED_URL}/embed/${

     

       55
       55
       +
                 uri.slice("at://".length)

     

       56
       56
       +
               }?${searchParams.toString()}`}

     

       56
       57
        
               width="100%"

     

       57
       58
        
               frameBorder="0"

     

       58
       59
        
               scrolling="no"

+27 -9

components/footer.tsx

···

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

     

       2
       2
       -
       

     

       1
       1
       +
       import {

     

       2
       2
       +
         siBluesky as BlueskyIcon,

     

       3
       3
       +
         siGithub as GithubIcon,

     

       4
       4
       +
       } from "npm:simple-icons";

     

       5
       5
       +
       import { useState } from "preact/hooks";

     

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

     

       4
       7
        
       

     

       5
       8
        
       export function Footer() {

     

       9
       9
       +
         const [blueskyHovered, setBlueskyHovered] = useState(false);

     

       10
       10
       +
         const [githubHovered, setGithubHovered] = useState(false);

     

       11
       11
       +
       

     

       6
       12
        
         return (

     

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

     

       13
       13
       +
           <footer class="py-8 flex gap-6 flex-wrap items-center justify-center text-sm">

     

       8
       14
        
             <a

     

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

     

       15
       15
       +
               class="flex items-center gap-2 relative group"

     

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

     

       11
       17
        
               target="_blank"

     

       12
       18
        
               rel="noopener noreferrer"

     

       19
       19
       +
               data-hovered={blueskyHovered}

     

       20
       20
       +
               onMouseEnter={() => setBlueskyHovered(true)}

     

       21
       21
       +
               onMouseLeave={() => setBlueskyHovered(false)}

     

       13
       22
        
             >

     

       14
       23
        
               <svg

     

       15
       24
        
                 width={16}

     

       16
       25
        
                 height={16}

     

       17
       26
        
                 viewBox="0 0 24 24"

     

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

     

       27
       27
       +
                 class="fill-black dark:fill-white"

     

       19
       28
        
               >

     

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

     

       21
       30
        
               </svg>

     

       22
       22
       -
               Bluesky

     

       31
       31
       +
               <span class="opacity-50 group-hover:opacity-100 transition-opacity">

     

       32
       32
       +
                 Bluesky

     

       33
       33
       +
               </span>

     

       34
       34
       +
               <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       23
       35
        
             </a>

     

       24
       36
        
             <a

     

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

     

       37
       37
       +
               class="flex items-center gap-2 relative group"

     

       26
       38
        
               href="https://github.com/knotbin"

     

       27
       39
        
               target="_blank"

     

       28
       40
        
               rel="noopener noreferrer"

     

       41
       41
       +
               data-hovered={githubHovered}

     

       42
       42
       +
               onMouseEnter={() => setGithubHovered(true)}

     

       43
       43
       +
               onMouseLeave={() => setGithubHovered(false)}

     

       29
       44
        
             >

     

       30
       45
        
               <svg

     

       31
       46
        
                 width={16}

     

       32
       47
        
                 height={16}

     

       33
       48
        
                 viewBox="0 0 24 24"

     

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

     

       49
       49
       +
                 class="fill-black dark:fill-white"

     

       35
       50
        
               >

     

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

     

       37
       52
        
               </svg>

     

       38
       38
       -
               GitHub

     

       53
       53
       +
               <span class="opacity-50 group-hover:opacity-100 transition-opacity">

     

       54
       54
       +
                 GitHub

     

       55
       55
       +
               </span>

     

       56
       56
       +
               <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       39
       57
        
             </a>

     

       40
       58
        
           </footer>

     

       41
       59
        
         );

+15

components/post-info.tsx

···

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

     

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

     

       6
       6
        
       

     

       7
       7
       +
       // Calculate reading time based on content length

     

       8
       8
       +
       function getReadingTime(content: string): number {

     

       9
       9
       +
         const wordsPerMinute = 200;

     

       10
       10
       +
         const words = content.trim().split(/\s+/).length;

     

       11
       11
       +
         const minutes = Math.max(1, Math.ceil(words / wordsPerMinute));

     

       12
       12
       +
         return minutes;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

       7
       15
        
       export function PostInfo({

     

       8
       16
        
         createdAt,

     

       9
       17
        
         content,

     
···

       17
       25
        
         className?: string;

     

       18
       26
        
         children?: ComponentChildren;

     

       19
       27
        
       }) {

     

       28
       28
       +
         const readingTime = getReadingTime(content);

     

       29
       29
       +
       

     

       20
       30
        
         return (

     

       21
       31
        
           <Paragraph className={className}>

     

       22
       32
        
             {includeAuthor && (

     
···

       36
       46
        
                 &middot;{" "}

     

       37
       47
        
               </>

     

       38
       48
        
             )}

     

       49
       49
       +
             <span>

     

       50
       50
       +
               <span style={{ lineHeight: 1, marginRight: "0.25rem" }}>

     

       51
       51
       +
                 {readingTime} min read

     

       52
       52
       +
               </span>

     

       53
       53
       +
             </span>

     

       39
       54
        
             {children}

     

       40
       55
        
           </Paragraph>

     

       41
       56
        
         );

+33 -16

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";

     

       4
       4
       +
       import {

     

       5
       5
       +
         type PubLeafletBlocksText,

     

       6
       6
       +
         type PubLeafletDocument,

     

       7
       7
       +
       } from "npm:@atcute/leaflet";

     

       5
       8
        
       

     

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

     

       7
       10
        
       

     
···

       12
       15
        
         post,

     

       13
       16
        
         rkey,

     

       14
       17
        
       }: {

     

       15
       15
       -
         post: ComWhtwndBlogEntry.Record;

     

       18
       18
       +
         post: PubLeafletDocument.Main;

     

       16
       19
        
         rkey: string;

     

       17
       20
        
       }) {

     

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

     
···

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

     

       42
       45
        
             setIsHovered(false);

     

       43
       46
        
             setIsLeaving(false);

     

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

     

       47
       47
       +
           }, 300); // Match animation duration

     

       45
       48
        
         };

     

       46
       49
        
       

     

       50
       50
       +
         // Gather all text blocks' plaintext for preview and reading time

     

       51
       51
       +
         const allText = post.pages?.[0]?.blocks

     

       52
       52
       +
           ?.filter((block) => block.block.$type === "pub.leaflet.blocks.text")

     

       53
       53
       +
           .map((block) => (block.block as PubLeafletBlocksText.Main).plaintext)

     

       54
       54
       +
           .join(" ") || "";

     

       55
       55
       +
       

     

       47
       56
        
         return (

     

       48
       57
        
           <>

     

       49
       58
        
             {isHovered && (

     

       50
       59
        
               <div

     

       51
       60
        
                 className={cx(

     

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

     

       61
       61
       +
                   "fixed inset-0 pointer-events-none z-0",

     

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

     

       54
       63
        
                 )}

     

       55
       64
        
               >

     

       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(" · ")}

     

       65
       65
       +
                 <div className="h-full w-full pt-[120px] flex items-center overflow-hidden">

     

       66
       66
       +
                   <div className="whitespace-nowrap animate-marquee font-serif font-medium uppercase leading-[0.8] text-[20vw] opacity-[0.015] -rotate-12 absolute left-0">

     

       67
       67
       +
                     {Array(8).fill(post.title).join(" · ")}

     

       68
       68
       +
                   </div>

     

       58
       69
        
                 </div>

     

       59
       70
        
               </div>

     

       60
       71
        
             )}

     

       61
       72
        
             <a

     

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

     

       63
       63
       -
               className="w-full group"

     

       74
       74
       +
               className="w-full group block"

     

       64
       75
        
               onMouseEnter={handleMouseEnter}

     

       65
       76
        
               onMouseLeave={handleMouseLeave}

     

       66
       77
        
             >

     

       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">

     

       78
       78
       +
               <article className="w-full flex flex-row border-b items-stretch relative transition-colors duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] backdrop-blur-sm hover:bg-slate-700/5 dark:hover:bg-slate-200/10">

     

       79
       79
       +
                 <div className="w-1.5 diagonal-pattern shrink-0 opacity-20 group-hover:opacity-100 transition-opacity duration-300 ease-[cubic-bezier(0.33,0,0.67,1)]" />

     

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

     

       81
       81
       +
                   <Title className="text-lg w-full" level="h3">

     

       71
       82
        
                     {post.title}

     

       72
       83
        
                   </Title>

     

       73
       84
        
                   <PostInfo

     

       74
       74
       -
                     content={post.content}

     

       75
       75
       -
                     createdAt={post.createdAt}

     

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

     

       77
       77
       -
                   >

     

       78
       78
       -
                   </PostInfo>

     

       85
       85
       +
                     content={allText}

     

       86
       86
       +
                     createdAt={post.publishedAt}

     

       87
       87
       +
                     className="text-xs mt-1 w-full"

     

       88
       88
       +
                   />

     

       89
       89
       +
                   <div className="grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] grid-rows-[0fr] group-hover:grid-rows-[1fr] opacity-0 group-hover:opacity-100 mt-2">

     

       90
       90
       +
                     <div className="overflow-hidden">

     

       91
       91
       +
                       <p className="text-sm text-slate-600 dark:text-slate-300 break-words line-clamp-3">

     

       92
       92
       +
                         {allText}

     

       93
       93
       +
                       </p>

     

       94
       94
       +
                     </div>

     

       95
       95
       +
                   </div>

     

       79
       96
        
                 </div>

     

       80
       97
        
               </article>

     

       81
       98
        
             </a>

+150

components/project-list-item.tsx

···

       1
       1
       +
       "use client";

     

       2
       2
       +
       

     

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

     

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

     

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

     

       6
       6
       +
       

     

       7
       7
       +
       interface Project {

     

       8
       8
       +
         id: string;

     

       9
       9
       +
         title: string;

     

       10
       10
       +
         description: string;

     

       11
       11
       +
         technologies: string[];

     

       12
       12
       +
         url: string;

     

       13
       13
       +
         demo?: string;

     

       14
       14
       +
         year: string;

     

       15
       15
       +
         status: "active" | "completed" | "maintained" | "archived";

     

       16
       16
       +
       }

     

       17
       17
       +
       

     

       18
       18
       +
       export function ProjectListItem({ project }: { project: Project }) {

     

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

     

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

     

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

     

       22
       22
       +
       

     

       23
       23
       +
         // Clean up any timeouts on unmount

     

       24
       24
       +
         useEffect(() => {

     

       25
       25
       +
           return () => {

     

       26
       26
       +
             if (timeoutRef.current) {

     

       27
       27
       +
               clearTimeout(timeoutRef.current);

     

       28
       28
       +
             }

     

       29
       29
       +
           };

     

       30
       30
       +
         }, []);

     

       31
       31
       +
       

     

       32
       32
       +
         const handleMouseEnter = () => {

     

       33
       33
       +
           if (timeoutRef.current) {

     

       34
       34
       +
             clearTimeout(timeoutRef.current);

     

       35
       35
       +
           }

     

       36
       36
       +
           setIsLeaving(false);

     

       37
       37
       +
           setIsHovered(true);

     

       38
       38
       +
         };

     

       39
       39
       +
       

     

       40
       40
       +
         const handleMouseLeave = () => {

     

       41
       41
       +
           setIsLeaving(true);

     

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

     

       43
       43
       +
             setIsHovered(false);

     

       44
       44
       +
             setIsLeaving(false);

     

       45
       45
       +
           }, 300); // Match animation duration

     

       46
       46
       +
         };

     

       47
       47
       +
       

     

       48
       48
       +
         const getStatusColor = (status: string) => {

     

       49
       49
       +
           switch (status) {

     

       50
       50
       +
             case "active":

     

       51
       51
       +
               return "text-green-600 dark:text-green-400";

     

       52
       52
       +
             case "completed":

     

       53
       53
       +
               return "text-blue-600 dark:text-blue-400";

     

       54
       54
       +
             case "maintained":

     

       55
       55
       +
               return "text-yellow-600 dark:text-yellow-400";

     

       56
       56
       +
             case "archived":

     

       57
       57
       +
               return "text-slate-500 dark:text-slate-400";

     

       58
       58
       +
             default:

     

       59
       59
       +
               return "text-slate-600 dark:text-slate-300";

     

       60
       60
       +
           }

     

       61
       61
       +
         };

     

       62
       62
       +
       

     

       63
       63
       +
         return (

     

       64
       64
       +
           <>

     

       65
       65
       +
             {isHovered && (

     

       66
       66
       +
               <div

     

       67
       67
       +
                 className={cx(

     

       68
       68
       +
                   "fixed inset-0 pointer-events-none z-0",

     

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

     

       70
       70
       +
                 )}

     

       71
       71
       +
               >

     

       72
       72
       +
                 <div className="h-full w-full pt-[120px] flex items-center overflow-hidden">

     

       73
       73
       +
                   <div className="whitespace-nowrap animate-marquee font-serif font-medium uppercase leading-[0.8] text-[20vw] opacity-[0.015] -rotate-12 absolute left-0">

     

       74
       74
       +
                     {Array(8).fill(project.title).join(" · ")}

     

       75
       75
       +
                   </div>

     

       76
       76
       +
                 </div>

     

       77
       77
       +
               </div>

     

       78
       78
       +
             )}

     

       79
       79
       +
             <a

     

       80
       80
       +
               href={project.demo || project.url}

     

       81
       81
       +
               target="_blank"

     

       82
       82
       +
               rel="noopener noreferrer"

     

       83
       83
       +
               className="w-full group block"

     

       84
       84
       +
               onMouseEnter={handleMouseEnter}

     

       85
       85
       +
               onMouseLeave={handleMouseLeave}

     

       86
       86
       +
             >

     

       87
       87
       +
               <article className="w-full flex flex-row border-b items-stretch relative transition-colors duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] backdrop-blur-sm hover:bg-slate-700/5 dark:hover:bg-slate-200/10">

     

       88
       88
       +
                 <div className="w-1.5 diagonal-pattern shrink-0 opacity-20 group-hover:opacity-100 transition-opacity duration-300 ease-[cubic-bezier(0.33,0,0.67,1)]" />

     

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

     

       90
       90
       +
                   <div className="flex items-start justify-between gap-4">

     

       91
       91
       +
                     <Title className="text-lg w-full flex-1" level="h3">

     

       92
       92
       +
                       {project.title}

     

       93
       93
       +
                     </Title>

     

       94
       94
       +
                     <div className="flex items-center gap-2 shrink-0">

     

       95
       95
       +
                       <span className="text-xs text-slate-500 dark:text-slate-400">

     

       96
       96
       +
                         {project.year}

     

       97
       97
       +
                       </span>

     

       98
       98
       +
                       <span

     

       99
       99
       +
                         className={cx(

     

       100
       100
       +
                           "text-xs font-medium capitalize",

     

       101
       101
       +
                           getStatusColor(project.status),

     

       102
       102
       +
                         )}

     

       103
       103
       +
                       >

     

       104
       104
       +
                         {project.status}

     

       105
       105
       +
                       </span>

     

       106
       106
       +
                     </div>

     

       107
       107
       +
                   </div>

     

       108
       108
       +
       

     

       109
       109
       +
                   <div className="flex flex-wrap gap-1 mt-2">

     

       110
       110
       +
                     {project.technologies.slice(0, 4).map((tech) => (

     

       111
       111
       +
                       <span

     

       112
       112
       +
                         key={tech}

     

       113
       113
       +
                         className="text-xs px-2 py-0.5 bg-slate-100 dark:bg-slate-800 rounded-sm text-slate-600 dark:text-slate-300"

     

       114
       114
       +
                       >

     

       115
       115
       +
                         {tech}

     

       116
       116
       +
                       </span>

     

       117
       117
       +
                     ))}

     

       118
       118
       +
                     {project.technologies.length > 4 && (

     

       119
       119
       +
                       <span className="text-xs px-2 py-0.5 text-slate-500 dark:text-slate-400">

     

       120
       120
       +
                         +{project.technologies.length - 4} more

     

       121
       121
       +
                       </span>

     

       122
       122
       +
                     )}

     

       123
       123
       +
                   </div>

     

       124
       124
       +
       

     

       125
       125
       +
                   <div className="grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] grid-rows-[0fr] group-hover:grid-rows-[1fr] opacity-0 group-hover:opacity-100 mt-3">

     

       126
       126
       +
                     <div className="overflow-hidden">

     

       127
       127
       +
                       <p className="text-sm text-slate-600 dark:text-slate-300 break-words line-clamp-3 mb-3">

     

       128
       128
       +
                         {project.description}

     

       129
       129
       +
                       </p>

     

       130
       130
       +
                       <div className="flex gap-3">

     

       131
       131
       +
                         {project.demo && (

     

       132
       132
       +
                           <a

     

       133
       133
       +
                             href={project.url}

     

       134
       134
       +
                             target="_blank"

     

       135
       135
       +
                             rel="noopener noreferrer"

     

       136
       136
       +
                             className="text-sm text-blue-600 dark:text-blue-400 hover:underline"

     

       137
       137
       +
                             onClick={(e) => e.stopPropagation()}

     

       138
       138
       +
                           >

     

       139
       139
       +
                             Source

     

       140
       140
       +
                           </a>

     

       141
       141
       +
                         )}

     

       142
       142
       +
                       </div>

     

       143
       143
       +
                     </div>

     

       144
       144
       +
                   </div>

     

       145
       145
       +
                 </div>

     

       146
       146
       +
               </article>

     

       147
       147
       +
             </a>

     

       148
       148
       +
           </>

     

       149
       149
       +
         );

     

       150
       150
       +
       }

+12 -4

components/typography.tsx

···

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

     

       1
       1
       +
       import { h } from "preact";

     

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

     

       3
       3
        
       

     

       4
       4
        
       export function Title({

     
···

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

     

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

     

       39
       39
        
               style,

     

       40
       40
        
               className?.toString(),

     

       41
       41
        
             )}

     
···

       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} />;

     

       51
       51
       +
         return (

     

       52
       52
       +
           <p

     

       53
       53
       +
             className={cx("font-sans text-pretty", className?.toString())}

     

       54
       54
       +
             {...props}

     

       55
       55
       +
           />

     

       56
       56
       +
         );

     

       52
       57
        
       }

     

       53
       58
        
       

     

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

     

       59
       59
       +
       export function Code({

     

       60
       60
       +
         className,

     

       61
       61
       +
         ...props

     

       62
       62
       +
       }: h.JSX.HTMLAttributes<HTMLElement>) {

     

       55
       63
        
         return (

     

       56
       64
        
           <code

     

       57
       65
        
             className={cx(

+10 -15

deno.json

···

       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
       -
         ],

     

       12
       12
       +
         "lint": { "rules": { "tags": ["fresh", "recommended"] } },

     

       13
       13
       +
         "exclude": ["**/_fresh/*"],

     

       23
       14
        
         "imports": {

     

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

     

       16
       16
       +
           "@atcute/atproto": "npm:@atcute/atproto@^3.0.1",

     

       17
       17
       +
           "@atcute/client": "npm:@atcute/client@^4.0.1",

     

       18
       18
       +
           "@atcute/leaflet": "npm:@atcute/leaflet@^1.0.2",

     

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

     

       20
       20
       +
           "@preact-icons/cg": "jsr:@preact-icons/cg@^1.0.13",

     

       21
       21
       +
           "@preact-icons/fi": "jsr:@preact-icons/fi@^1.0.13",

     

       22
       22
       +
           "@tabler/icons-preact": "npm:@tabler/icons-preact@^3.31.0",

     

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

     

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

     

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

     

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

     

       27
       27
       +
           "rss": "npm:rss@^1.2.2",

     

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

     

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

     

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

     

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

     

       34
       32
        
         },

     

       35
       35
       -
         "compilerOptions": {

     

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

     

       37
       37
       -
           "jsxImportSource": "preact"

     

       38
       38
       -
         },

     

       33
       33
       +
         "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },

     

       39
       34
        
         "nodeModulesDir": "auto"

     

       40
       35
        
       }

+15

docker-compose.yml

···

       1
       1
       +
       version: "3.8"

     

       2
       2
       +
       services:

     

       3
       3
       +
         deno-app:

     

       4
       4
       +
           build: .

     

       5
       5
       +
           # Use named volume for persistent data

     

       6
       6
       +
           volumes:

     

       7
       7
       +
             - deno_data:/app/data

     

       8
       8
       +
           ports:

     

       9
       9
       +
             - "8001:8000"

     

       10
       10
       +
           environment:

     

       11
       11
       +
             - DENO_ENV=production

     

       12
       12
       +
       

     

       13
       13
       +
       volumes:

     

       14
       14
       +
         deno_data:

     

       15
       15
       +
           name: "deno_data"

+10

fresh.gen.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 $about from "./routes/about.tsx";

     

       8
       8
       +
       import * as $api_atproto_images from "./routes/api/atproto_images.ts";

     

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

     

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

     

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

     

       12
       12
       +
       import * as $work from "./routes/work.tsx";

     

       13
       13
       +
       import * as $layout from "./islands/layout.tsx";

     

       10
       14
        
       import * as $post_list from "./islands/post-list.tsx";

     

       15
       15
       +
       import * as $project_list from "./islands/project-list.tsx";

     

       11
       16
        
       import type { Manifest } from "$fresh/server.ts";

     

       12
       17
        
       

     

       13
       18
        
       const manifest = {

     

       14
       19
        
         routes: {

     

       15
       20
        
           "./routes/_404.tsx": $_404,

     

       16
       21
        
           "./routes/_app.tsx": $_app,

     

       22
       22
       +
           "./routes/about.tsx": $about,

     

       23
       23
       +
           "./routes/api/atproto_images.ts": $api_atproto_images,

     

       17
       24
        
           "./routes/index.tsx": $index,

     

       18
       25
        
           "./routes/post/[slug].tsx": $post_slug_,

     

       19
       26
        
           "./routes/rss.ts": $rss,

     

       27
       27
       +
           "./routes/work.tsx": $work,

     

       20
       28
        
         },

     

       21
       29
        
         islands: {

     

       30
       30
       +
           "./islands/layout.tsx": $layout,

     

       22
       31
        
           "./islands/post-list.tsx": $post_list,

     

       32
       32
       +
           "./islands/project-list.tsx": $project_list,

     

       23
       33
        
         },

     

       24
       34
        
         baseUrl: import.meta.url,

     

       25
       35
        
       } satisfies Manifest;

+105

islands/layout.tsx

···

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

     

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

     

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

     

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

     

       5
       5
       +
       

     

       6
       6
       +
       export function Layout({ children }: { children: ComponentChildren }) {

     

       7
       7
       +
         const [isScrolled, setIsScrolled] = useState(false);

     

       8
       8
       +
         const [blogHovered, setBlogHovered] = useState(false);

     

       9
       9
       +
         const [workHovered, setWorkHovered] = useState(false);

     

       10
       10
       +
         const [aboutHovered, setAboutHovered] = useState(false);

     

       11
       11
       +
         const pathname = useSignal("");

     

       12
       12
       +
       

     

       13
       13
       +
         const isActive = (href: string) => {

     

       14
       14
       +
           if (href === "/") {

     

       15
       15
       +
             return pathname.value === "/" || pathname.value.startsWith("/post/");

     

       16
       16
       +
           }

     

       17
       17
       +
           return pathname.value === href;

     

       18
       18
       +
         };

     

       19
       19
       +
       

     

       20
       20
       +
         useEffect(() => {

     

       21
       21
       +
           const handleScroll = () => {

     

       22
       22
       +
             setIsScrolled(globalThis.scrollY > 0);

     

       23
       23
       +
           };

     

       24
       24
       +
       

     

       25
       25
       +
           const handlePathChange = () => {

     

       26
       26
       +
             pathname.value = globalThis.location.pathname;

     

       27
       27
       +
           };

     

       28
       28
       +
       

     

       29
       29
       +
           globalThis.addEventListener("scroll", handleScroll);

     

       30
       30
       +
           globalThis.addEventListener("popstate", handlePathChange);

     

       31
       31
       +
           handleScroll(); // Check initial scroll position

     

       32
       32
       +
           handlePathChange(); // Set initial path

     

       33
       33
       +
       

     

       34
       34
       +
           return () => {

     

       35
       35
       +
             globalThis.removeEventListener("scroll", handleScroll);

     

       36
       36
       +
             globalThis.removeEventListener("popstate", handlePathChange);

     

       37
       37
       +
           };

     

       38
       38
       +
         }, []);

     

       39
       39
       +
       

     

       40
       40
       +
         return (

     

       41
       41
       +
           <div class="flex flex-col min-h-dvh">

     

       42
       42
       +
             <nav class="w-full sticky top-0 z-50 backdrop-blur-sm transition-[padding,border-color] duration-200">

     

       43
       43
       +
               <div class="relative">

     

       44
       44
       +
                 <div

     

       45
       45
       +
                   class="absolute inset-x-0 bottom-0 h-2 diagonal-pattern opacity-0 transition-opacity duration-300"

     

       46
       46
       +
                   style={{ opacity: isScrolled ? 0.25 : 0 }}

     

       47
       47
       +
                 />

     

       48
       48
       +
                 <div class="max-w-screen-2xl mx-auto px-8 py-5 flex justify-between items-center">

     

       49
       49
       +
                   <div class="flex items-center gap-7">

     

       50
       50
       +
                     <a href="/" class="font-serif text-xl">

     

       51
       51
       +
                       knotbin

     

       52
       52
       +
                     </a>

     

       53
       53
       +
                     <div class="h-4 w-px bg-slate-200 dark:bg-slate-700"></div>

     

       54
       54
       +
                     <div class="text-base flex items-center gap-7">

     

       55
       55
       +
                       <a

     

       56
       56
       +
                         href="/"

     

       57
       57
       +
                         class="relative group"

     

       58
       58
       +
                         data-current={isActive("/")}

     

       59
       59
       +
                         data-hovered={blogHovered}

     

       60
       60
       +
                         onMouseEnter={() => setBlogHovered(true)}

     

       61
       61
       +
                         onMouseLeave={() => setBlogHovered(false)}

     

       62
       62
       +
                       >

     

       63
       63
       +
                         <span class="opacity-50 group-hover:opacity-100 group-data-[current=true]:opacity-100 transition-opacity">

     

       64
       64
       +
                           blog

     

       65
       65
       +
                         </span>

     

       66
       66
       +
                         <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 group-data-[current=true]:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       67
       67
       +
                       </a>

     

       68
       68
       +
                       <a

     

       69
       69
       +
                         href="/work"

     

       70
       70
       +
                         class="relative group"

     

       71
       71
       +
                         data-current={isActive("/work")}

     

       72
       72
       +
                         data-hovered={workHovered}

     

       73
       73
       +
                         onMouseEnter={() => setWorkHovered(true)}

     

       74
       74
       +
                         onMouseLeave={() => setWorkHovered(false)}

     

       75
       75
       +
                       >

     

       76
       76
       +
                         <span class="opacity-50 group-hover:opacity-100 group-data-[current=true]:opacity-100 transition-opacity">

     

       77
       77
       +
                           work

     

       78
       78
       +
                         </span>

     

       79
       79
       +
                         <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 group-data-[current=true]:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       80
       80
       +
                       </a>

     

       81
       81
       +
                       <a

     

       82
       82
       +
                         href="/about"

     

       83
       83
       +
                         class="relative group"

     

       84
       84
       +
                         data-current={isActive("/about")}

     

       85
       85
       +
                         data-hovered={aboutHovered}

     

       86
       86
       +
                         onMouseEnter={() => setAboutHovered(true)}

     

       87
       87
       +
                         onMouseLeave={() => setAboutHovered(false)}

     

       88
       88
       +
                       >

     

       89
       89
       +
                         <span class="opacity-50 group-hover:opacity-100 group-data-[current=true]:opacity-100 transition-opacity">

     

       90
       90
       +
                           about

     

       91
       91
       +
                         </span>

     

       92
       92
       +
                         <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 group-data-[current=true]:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       93
       93
       +
                       </a>

     

       94
       94
       +
                     </div>

     

       95
       95
       +
                   </div>

     

       96
       96
       +
                 </div>

     

       97
       97
       +
               </div>

     

       98
       98
       +
             </nav>

     

       99
       99
       +
       

     

       100
       100
       +
             <main class="flex-1">{children}</main>

     

       101
       101
       +
       

     

       102
       102
       +
             <Footer />

     

       103
       103
       +
           </div>

     

       104
       104
       +
         );

     

       105
       105
       +
       }

+8 -9

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
       +
       import { PubLeafletDocument } from "@atcute/leaflet";

     

       4
       5
        
       

     

       5
       6
        
       interface PostRecord {

     

       6
       6
       -
         value: any;

     

       7
       7
       +
         value: PubLeafletDocument.Main;

     

       7
       8
        
         uri: string;

     

       8
       9
        
       }

     

       9
       10
        
       

     

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

     

       11
       11
       +
       export default function PostList({

     

       12
       12
       +
         posts: initialPosts,

     

       13
       13
       +
       }: {

     

       14
       14
       +
         posts: PostRecord[];

     

       15
       15
       +
       }) {

     

       11
       16
        
         const posts = useSignal(initialPosts);

     

       12
       17
        
       

     

       13
       18
        
         useEffect(() => {

     
···

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

     

       20
       25
        
               const post = record.value;

     

       21
       26
        
               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
       -
               );

     

       27
       27
       +
               return <PostListItem key={record.uri} post={post} rkey={rkey} />;

     

       29
       28
        
             })}

     

       30
       29
        
           </>

     

       31
       30
        
         );

+35

islands/project-list.tsx

···

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

     

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

     

       3
       3
       +
       import { ProjectListItem } from "../components/project-list-item.tsx";

     

       4
       4
       +
       

     

       5
       5
       +
       interface Project {

     

       6
       6
       +
         id: string;

     

       7
       7
       +
         title: string;

     

       8
       8
       +
         description: string;

     

       9
       9
       +
         technologies: string[];

     

       10
       10
       +
         url: string;

     

       11
       11
       +
         demo?: string;

     

       12
       12
       +
         year: string;

     

       13
       13
       +
         status: "active" | "completed" | "maintained" | "archived";

     

       14
       14
       +
       }

     

       15
       15
       +
       

     

       16
       16
       +
       export default function ProjectList(

     

       17
       17
       +
         { projects: initialProjects }: { projects: Project[] },

     

       18
       18
       +
       ) {

     

       19
       19
       +
         const projects = useSignal(initialProjects);

     

       20
       20
       +
       

     

       21
       21
       +
         useEffect(() => {

     

       22
       22
       +
           projects.value = initialProjects;

     

       23
       23
       +
         }, [initialProjects]);

     

       24
       24
       +
       

     

       25
       25
       +
         return (

     

       26
       26
       +
           <>

     

       27
       27
       +
             {projects.value?.map((project) => (

     

       28
       28
       +
               <ProjectListItem

     

       29
       29
       +
                 key={project.id}

     

       30
       30
       +
                 project={project}

     

       31
       31
       +
               />

     

       32
       32
       +
             ))}

     

       33
       33
       +
           </>

     

       34
       34
       +
         );

     

       35
       35
       +
       }

+15 -17

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";

     

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

     

       5
       5
       +
       import { type ComAtprotoRepoListRecords } from "npm:@atcute/atproto";

     

       6
       6
       +
       import { type PubLeafletDocument } from "npm:@atcute/leaflet";

     

       6
       7
        
       

     

       7
       8
        
       export async function getPosts() {

     

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

     

       9
       10
        
           params: {

     

       10
       10
       -
             repo: env.NEXT_PUBLIC_BSKY_DID,

     

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

     

       11
       11
       +
             repo: env.NEXT_PUBLIC_BSKY_DID as ActorIdentifier,

     

       12
       12
       +
             collection: "pub.leaflet.document",

     

       12
       13
        
             // todo: pagination

     

       13
       14
        
           },

     

       14
       15
        
         });

     

       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
       16
        
       

     

       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";

     

       17
       17
       +
         if ("error" in posts.data) {

     

       18
       18
       +
           throw new Error(posts.data.error);

     

       19
       19
       +
         }

     

       20
       20
       +
       

     

       21
       21
       +
         return posts.data.records as (ComAtprotoRepoListRecords.Record & {

     

       22
       22
       +
           value: PubLeafletDocument.Main;

     

       23
       23
       +
         })[];

     

       26
       24
        
       }

     

       27
       25
        
       

     

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

     

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

     

       30
       28
        
           params: {

     

       31
       31
       -
             repo: env.NEXT_PUBLIC_BSKY_DID,

     

       29
       29
       +
             repo: env.NEXT_PUBLIC_BSKY_DID as ActorIdentifier,

     

       32
       30
        
             rkey: rkey,

     

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

     

       31
       31
       +
             collection: "pub.leaflet.document",

     

       34
       32
        
           },

     

       35
       33
        
         });

     

       36
       34
        
       

     

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

     

       38
       38
       -
           value: ComWhtwndBlogEntry.Record;

     

       36
       36
       +
           value: PubLeafletDocument.Main;

     

       39
       37
        
         };

     

       40
       38
        
       }

+3 -4

lib/bsky.ts

···

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

     

       1
       1
       +
       import { Client, simpleFetchHandler } from "@atcute/client";

     

       2
       2
        
       

     

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

     

       4
       4
        
       

     

       5
       5
       -
       const handler = new CredentialManager({

     

       5
       5
       +
       const handler = simpleFetchHandler({

     

       6
       6
        
         service: env.NEXT_PUBLIC_BSKY_PDS,

     

       7
       7
       -
         fetch,

     

       8
       7
        
       });

     

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

     

       8
       8
       +
       export const bsky = new Client({ handler });

+6 -6

lib/env.ts

···

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

     

       5
       5
       +
         PLAUSIBLE_SITE_ID: "knotbin.com",

     

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

     

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

     

       9
       9
       +
         NEXT_PUBLIC_BSKY_PDS: "https://knotbin.xyz",

     

       10
       10
        
       };

     

       11
       11
        
       

     

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

     
···

       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" }),

     

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

     

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

     

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

     

       24
       24
       +
           default: "https://knotbin.xyz",

     

       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
       -
       }

+14 -15

routes/_404.tsx

···

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

     

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

     

       3
       3
       +
       import { Layout } from "../islands/layout.tsx";

     

       2
       4
        
       

     

       3
       5
        
       export default function Error404() {

     

       4
       6
        
         return (

     
···

       6
       8
        
             <Head>

     

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

     

       8
       10
        
             </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>

     

       11
       11
       +
             <Layout>

     

       12
       12
       +
               <div class="flex-1 flex items-center justify-center">

     

       13
       13
       +
                 <div class="p-8 pb-20 sm:p-20 text-center">

     

       14
       14
       +
                   <Title class="font-serif-italic text-4xl sm:text-5xl lowercase mb-6">

     

       15
       15
       +
                     Page not found

     

       16
       16
       +
                   </Title>

     

       17
       17
       +
                   <p class="my-4">The page you were looking for doesn't exist.</p>

     

       18
       18
       +
                   <a href="/" class="underline">

     

       19
       19
       +
                     Go back home

     

       20
       20
       +
                   </a>

     

       21
       21
       +
                 </div>

     

       23
       22
        
               </div>

     

       24
       24
       -
             </div>

     

       23
       23
       +
             </Layout>

     

       25
       24
        
           </>

     

       26
       25
        
         );

     

       27
       26
        
       }

+38

routes/about.tsx

···

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

     

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

     

       3
       3
       +
       import { Layout } from "../islands/layout.tsx";

     

       4
       4
       +
       

     

       5
       5
       +
       export default function About() {

     

       6
       6
       +
         return (

     

       7
       7
       +
           <>

     

       8
       8
       +
             <Head>

     

       9
       9
       +
               <title>About - knotbin</title>

     

       10
       10
       +
             </Head>

     

       11
       11
       +
             <Layout>

     

       12
       12
       +
               <div class="p-8 pb-20 gap-16 sm:p-20">

     

       13
       13
       +
                 <div class="max-w-[600px] mx-auto">

     

       14
       14
       +
                   <Title class="font-serif-italic text-`4xl sm:text-5xl lowercase mb-12">

     

       15
       15
       +
                     About

     

       16
       16
       +
                   </Title>

     

       17
       17
       +
       

     

       18
       18
       +
                   <div class="prose prose-slate dark:prose-invert space-y-8">

     

       19
       19
       +
                     <p>

     

       20
       20
       +
                       I'm a fifteen year-old developer. I'm experienced in iOS

     

       21
       21
       +
                       development, and a winner of the 2024 Apple Swift Student

     

       22
       22
       +
                       Challenge. I'm very interested in decentralized systems and AT

     

       23
       23
       +
                       Protocol in particular. I love designing and building beautiful

     

       24
       24
       +
                       interfaces, and learning about amazing systems.

     

       25
       25
       +
                     </p>

     

       26
       26
       +
       

     

       27
       27
       +
                     <p>

     

       28
       28
       +
                       Currently, I'm working with Spark to build a shortform video

     

       29
       29
       +
                       platform on the AT Protocol. I'm also working on my own

     

       30
       30
       +
                       projects, and always thinking about big ideas and small details.

     

       31
       31
       +
                     </p>

     

       32
       32
       +
                   </div>

     

       33
       33
       +
                 </div>

     

       34
       34
       +
               </div>

     

       35
       35
       +
             </Layout>

     

       36
       36
       +
           </>

     

       37
       37
       +
         );

     

       38
       38
       +
       }

+41

routes/api/atproto_images.ts

···

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

     

       2
       2
       +
       import { IdResolver } from "npm:@atproto/identity";

     

       3
       3
       +
       

     

       4
       4
       +
       const idResolver = new IdResolver();

     

       5
       5
       +
       

     

       6
       6
       +
       export const handler: Handlers = {

     

       7
       7
       +
         async GET(req) {

     

       8
       8
       +
           const url = new URL(req.url);

     

       9
       9
       +
           const did = url.searchParams.get("did") ?? "";

     

       10
       10
       +
           const cid = url.searchParams.get("cid") ?? "";

     

       11
       11
       +
       

     

       12
       12
       +
           if (!did || !cid) {

     

       13
       13
       +
             return new Response("Missing did or cid", { status: 404 });

     

       14
       14
       +
           }

     

       15
       15
       +
       

     

       16
       16
       +
           const identity = await idResolver.did.resolve(did);

     

       17
       17
       +
           const service = identity?.service?.find((f: any) =>

     

       18
       18
       +
             f.id === "#atproto_pds"

     

       19
       19
       +
           );

     

       20
       20
       +
           if (!service) {

     

       21
       21
       +
             return new Response("No PDS service found", { status: 404 });

     

       22
       22
       +
           }

     

       23
       23
       +
       

     

       24
       24
       +
           const blobUrl =

     

       25
       25
       +
             `${service.serviceEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`;

     

       26
       26
       +
           const response = await fetch(blobUrl);

     

       27
       27
       +
       

     

       28
       28
       +
           if (!response.ok) {

     

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

     

       30
       30
       +
           }

     

       31
       31
       +
       

     

       32
       32
       +
           // Clone the response to modify headers

     

       33
       33
       +
           const cachedResponse = new Response(response.body, response);

     

       34
       34
       +
           cachedResponse.headers.set(

     

       35
       35
       +
             "Cache-Control",

     

       36
       36
       +
             "public, max-age=31536000, immutable",

     

       37
       37
       +
           );

     

       38
       38
       +
       

     

       39
       39
       +
           return cachedResponse;

     

       40
       40
       +
         },

     

       41
       41
       +
       };

+12 -47

routes/index.tsx

···

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

     

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

     

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

     

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

     

       4
       4
       +
       import { Layout } from "../islands/layout.tsx";

     

       5
       5
        
       

     

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

     

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

     

       8
       8
       -
       

     

       9
       9
       -
       const stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware = [

     

       10
       10
       -
         "is looking into it",

     

       11
       11
       -
         "i think therefore imdb",

     

       12
       12
       -
         "isn't a real word",

     

       13
       13
       -
         "enjoys each protocol equally",

     

       14
       14
       -
         "is having a very semantic argument",

     

       15
       15
       -
         "fellas is it gay to write unit tests?",

     

       16
       16
       -
         "wrote these derivitive taglines",

     

       17
       17
       -
         "is way too into css animations",

     

       18
       18
       -
         "uses dark mode at noon",

     

       19
       19
       -
         "overthinks variable names",

     

       20
       20
       -
         "git pushes with -f",

     

       21
       21
       -
         "formats on save",

     

       22
       22
       -
         "is praising kier",

     

       23
       23
       -
         "pretends to understand monads",

     

       24
       24
       -
         "brags about their vim config",

     

       25
       25
       -
         "documents their code (lies)",

     

       26
       26
       -
         "isn't mysterious or important",

     

       27
       27
       -
         "wants to be included in discourse",

     

       28
       28
       -
         "is deeply offended by semicolons",

     

       29
       29
       -
         "is morraly opposed to touching grass",

     

       30
       30
       -
         "uses inline css (sue me)",

     

       31
       31
       -
       ];

     

       32
       32
       -
       

     

       33
       33
       -
       function getRandomTagline() {

     

       34
       34
       -
         return stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware[Math.floor(Math.random() * stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware.length)];

     

       35
       35
       -
       }

     

       36
       8
        
       

     

       37
       9
        
       export default async function Home() {

     

       38
       10
        
         const posts = await getPosts();

     

       39
       39
       -
         const tagline = getRandomTagline();

     

       40
       11
        
       

     

       41
       12
        
         return (

     

       42
       42
       -
           <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">

     

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

     

       44
       44
       -
               <div className="self-center flex flex-col">

     

       45
       45
       -
                   <div className="relative">

     

       46
       46
       -
                     <Title className="m-0 mb-6 font-serif-italic text-4xl sm:text-5xl lowercase">

     

       47
       47
       -
                     knotbin

     

       48
       48
       -
                     </Title>

     

       49
       49
       -
                       <span className="absolute bottom-3 -right-2 font-bold text-xs opacity-50 text-right whitespace-nowrap">

     

       50
       50
       -
                     {tagline}

     

       51
       51
       -
                     </span>

     

       52
       52
       -
                   </div>

     

       53
       53
       -
               </div>

     

       13
       13
       +
           <Layout>

     

       14
       14
       +
             <div class="p-8 pb-20 gap-16 sm:p-20">

     

       15
       15
       +
               <div class="max-w-[600px] mx-auto">

     

       16
       16
       +
                 <Title class="font-serif-italic text-4xl sm:text-5xl lowercase mb-12">

     

       17
       17
       +
                   Knotbin

     

       18
       18
       +
                 </Title>

     

       54
       19
        
       

     

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

     

       56
       56
       -
                 <PostList posts={posts} />

     

       20
       20
       +
                 <div class="space-y-4 w-full">

     

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

     

       22
       22
       +
                 </div>

     

       57
       23
        
               </div>

     

       58
       58
       -
             </main>

     

       59
       59
       -
             <Footer />

     

       60
       60
       -
           </div>

     

       24
       24
       +
             </div>

     

       25
       25
       +
           </Layout>

     

       61
       26
        
         );

     

       62
       27
        
       }

+208 -114

routes/post/[slug].tsx

···

       1
       1
       -
       /** @jsxImportSource preact */

     

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

     

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

     

       4
       4
       -
       

     

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

     

       2
       2
       +
       import { Layout } from "../../islands/layout.tsx";

     

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

     

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

     

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

     

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

     

       10
       10
       -
       import { BlueskyComments } from "npm:bluesky-comments";

     

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

     

       8
       8
       +
       import {

     

       9
       9
       +
         PubLeafletBlocksHeader,

     

       10
       10
       +
         PubLeafletBlocksImage,

     

       11
       11
       +
         PubLeafletBlocksText,

     

       12
       12
       +
         PubLeafletBlocksUnorderedList,

     

       13
       13
       +
         PubLeafletPagesLinearDocument,

     

       14
       14
       +
       } from "npm:@atcute/leaflet";

     

       15
       15
       +
       import { h } from "preact";

     

       11
       16
        
       

     

       12
       17
        
       interface Post {

     

       13
       18
        
         uri: string;

     

       14
       19
        
         value: {

     

       15
       15
       -
           title: string;

     

       16
       16
       -
           content: string;

     

       17
       17
       -
           createdAt: string;

     

       20
       20
       +
           title?: string;

     

       21
       21
       +
           description?: string;

     

       22
       22
       +
           pages?: PubLeafletPagesLinearDocument.Main[];

     

       23
       23
       +
           publishedAt?: string;

     

       18
       24
        
         };

     

       19
       25
        
       }

     

       20
       26
        
       

     

       21
       21
       -
       // Only override backgrounds in dark mode to make them transparent

     

       22
       22
       -
       const transparentDarkModeCSS = `

     

       23
       23
       -
       @media (prefers-color-scheme: dark) {

     

       24
       24
       -
         .markdown-body {

     

       25
       25
       -
           color: white;

     

       26
       26
       -
           background-color: transparent;

     

       27
       27
       -
         }

     

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

     

       28
       28
       +
         async GET(_req, ctx) {

     

       29
       29
       +
           try {

     

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

     

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

     

       32
       32
       +
             return ctx.render(post);

     

       33
       33
       +
           } catch (error) {

     

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

     

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

     

       36
       36
       +
           }

     

       37
       37
       +
         },

     

       38
       38
       +
       };

     

       39
       39
       +
       

     

       40
       40
       +
       function Block({

     

       41
       41
       +
         block,

     

       42
       42
       +
         did,

     

       43
       43
       +
         isList,

     

       44
       44
       +
       }: {

     

       45
       45
       +
         block: PubLeafletPagesLinearDocument.Block;

     

       46
       46
       +
         did: string;

     

       47
       47
       +
         isList?: boolean;

     

       48
       48
       +
       }) {

     

       49
       49
       +
         let b = block;

     

       28
       50
        
       

     

       29
       29
       -
         .markdown-body a {

     

       30
       30
       -
           color: #58a6ff;

     

       51
       51
       +
         let className = `

     

       52
       52
       +
           postBlockWrapper

     

       53
       53
       +
           pt-1

     

       54
       54
       +
           ${

     

       55
       55
       +
           isList

     

       56
       56
       +
             ? "isListItem pb-0 "

     

       57
       57
       +
             : "pb-2 last:pb-3 last:sm:pb-4 first:pt-2 sm:first:pt-3"

     

       31
       58
        
         }

     

       59
       59
       +
           ${

     

       60
       60
       +
           b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight"

     

       61
       61
       +
             ? "text-right"

     

       62
       62
       +
             : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter"

     

       63
       63
       +
             ? "text-center"

     

       64
       64
       +
             : ""

     

       65
       65
       +
         }

     

       66
       66
       +
           `;

     

       32
       67
        
       

     

       33
       33
       -
         .markdown-body blockquote {

     

       34
       34
       -
           border-left-color: #30363d;

     

       35
       35
       -
           background-color: transparent;

     

       68
       68
       +
         if (b.block.$type === "pub.leaflet.blocks.unorderedList") {

     

       69
       69
       +
           return (

     

       70
       70
       +
             <ul className="-ml-[1px] sm:ml-[9px] pb-2">

     

       71
       71
       +
               {b.block.children.map((child, index) => (

     

       72
       72
       +
                 <ListItem item={child} did={did} key={index} className={className} />

     

       73
       73
       +
               ))}

     

       74
       74
       +
             </ul>

     

       75
       75
       +
           );

     

       36
       76
        
         }

     

       37
       77
        
       

     

       38
       38
       -
         .markdown-body pre,

     

       39
       39
       -
         .markdown-body code {

     

       40
       40
       -
           background-color: transparent;

     

       41
       41
       -
           color: #c9d1d9;

     

       78
       78
       +
         if (b.block.$type === "pub.leaflet.blocks.image") {

     

       79
       79
       +
           const imageBlock = b.block as PubLeafletBlocksImage.Main;

     

       80
       80
       +
           const image = imageBlock.image as { ref: { $link: string } };

     

       81
       81
       +
           const alt = imageBlock.alt || "";

     

       82
       82
       +
           const aspect = imageBlock.aspectRatio;

     

       83
       83
       +
           let width = aspect?.width;

     

       84
       84
       +
           let height = aspect?.height;

     

       85
       85
       +
           // Fallback to default size if not provided

     

       86
       86
       +
           if (!width) width = 600;

     

       87
       87
       +
           if (!height) height = 400;

     

       88
       88
       +
           return (

     

       89
       89
       +
             <img

     

       90
       90
       +
               src={`/api/atproto_images?did=${did}&cid=${image.ref.$link}`}

     

       91
       91
       +
               alt={alt}

     

       92
       92
       +
               width={width}

     

       93
       93
       +
               height={height}

     

       94
       94
       +
               className={`!pt-3 sm:!pt-4 ${className}`}

     

       95
       95
       +
               style={{

     

       96
       96
       +
                 aspectRatio: width && height ? `${width} / ${height}` : undefined,

     

       97
       97
       +
               }}

     

       98
       98
       +
             />

     

       99
       99
       +
           );

     

       42
       100
        
         }

     

       43
       101
        
       

     

       44
       44
       -
         .markdown-body table td,

     

       45
       45
       -
         .markdown-body table th {

     

       46
       46
       -
           border-color: #30363d;

     

       47
       47
       -
           background-color: transparent;

     

       102
       102
       +
         if (b.block.$type === "pub.leaflet.blocks.text") {

     

       103
       103
       +
           return (

     

       104
       104
       +
             <div className={` ${className}`}>

     

       105
       105
       +
               <TextBlock facets={b.block.facets} plaintext={b.block.plaintext} />

     

       106
       106
       +
             </div>

     

       107
       107
       +
           );

     

       48
       108
        
         }

     

       49
       49
       -
       }

     

       50
       50
       -
       

     

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

     

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

     

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

     

       54
       109
        
       

     

       55
       55
       -
       .markdown-body h1 {

     

       56
       56
       -
         font-family: var(--font-serif);

     

       57
       57
       -
         text-transform: uppercase;

     

       58
       58
       -
         font-size: 2.25rem;

     

       59
       59
       -
       }

     

       60
       60
       -
       

     

       61
       61
       -
       .markdown-body h2 {

     

       62
       62
       -
         font-family: var(--font-serif);

     

       63
       63
       -
         text-transform: uppercase;

     

       64
       64
       -
         font-size: 1.75rem;

     

       65
       65
       -
       }

     

       66
       66
       -
       

     

       67
       67
       -
       .markdown-body h3 {

     

       68
       68
       -
         font-family: var(--font-serif);

     

       69
       69
       -
         text-transform: uppercase;

     

       70
       70
       -
         font-size: 1.5rem;

     

       71
       71
       -
       }

     

       72
       72
       -
       

     

       73
       73
       -
       .markdown-body h4 {

     

       74
       74
       -
         font-family: var(--font-serif);

     

       75
       75
       -
         text-transform: uppercase;

     

       76
       76
       -
         font-size: 1.25rem;

     

       77
       77
       -
       }

     

       110
       110
       +
         if (b.block.$type === "pub.leaflet.blocks.header") {

     

       111
       111
       +
           const header = b.block as PubLeafletBlocksHeader.Main;

     

       112
       112
       +
           const level = header.level || 1;

     

       113
       113
       +
           const Tag = `h${Math.min(level + 1, 6)}` as keyof h.JSX.IntrinsicElements;

     

       114
       114
       +
           // Add heading styles based on level

     

       115
       115
       +
           let headingStyle =

     

       116
       116
       +
             "font-serif font-bold tracking-wide uppercase mt-8 break-words text-wrap ";

     

       117
       117
       +
           switch (level) {

     

       118
       118
       +
             case 1:

     

       119
       119
       +
               headingStyle += "text-3xl lg:text-4xl";

     

       120
       120
       +
               break;

     

       121
       121
       +
             case 2:

     

       122
       122
       +
               headingStyle += "text-3xl border-b pb-2 mb-6";

     

       123
       123
       +
               break;

     

       124
       124
       +
             case 3:

     

       125
       125
       +
               headingStyle += "text-2xl";

     

       126
       126
       +
               break;

     

       127
       127
       +
             case 4:

     

       128
       128
       +
               headingStyle += "text-xl";

     

       129
       129
       +
               break;

     

       130
       130
       +
             case 5:

     

       131
       131
       +
               headingStyle += "text-lg";

     

       132
       132
       +
               break;

     

       133
       133
       +
             case 6:

     

       134
       134
       +
               headingStyle += "text-base";

     

       135
       135
       +
               break;

     

       136
       136
       +
             default:

     

       137
       137
       +
               headingStyle += "text-2xl";

     

       138
       138
       +
           }

     

       139
       139
       +
           return (

     

       140
       140
       +
             <Tag className={headingStyle + " " + className}>

     

       141
       141
       +
               <TextBlock plaintext={header.plaintext} facets={header.facets} />

     

       142
       142
       +
             </Tag>

     

       143
       143
       +
           );

     

       144
       144
       +
         }

     

       78
       145
        
       

     

       79
       79
       -
       .markdown-body h5 {

     

       80
       80
       -
         font-family: var(--font-serif);

     

       81
       81
       -
         text-transform: uppercase;

     

       82
       82
       -
         font-size: 1rem;

     

       146
       146
       +
         return null;

     

       83
       147
        
       }

     

       84
       148
        
       

     

       85
       85
       -
       .markdown-body h6 {

     

       86
       86
       -
         font-family: var(--font-serif);

     

       87
       87
       -
         text-transform: uppercase;

     

       88
       88
       -
         font-size: 0.875rem;

     

       149
       149
       +
       function ListItem(props: {

     

       150
       150
       +
         item: PubLeafletBlocksUnorderedList.Main["children"][number];

     

       151
       151
       +
         did: string;

     

       152
       152
       +
         className?: string;

     

       153
       153
       +
       }) {

     

       154
       154
       +
         return (

     

       155
       155
       +
           <li className={`!pb-0 flex flex-row gap-2`}>

     

       156
       156
       +
             <div

     

       157
       157
       +
               className={`listMarker shrink-0 mx-2 z-[1] mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}

     

       158
       158
       +
             />

     

       159
       159
       +
             <div className="flex flex-col">

     

       160
       160
       +
               <Block block={{ block: props.item.content }} did={props.did} isList />

     

       161
       161
       +
               {props.item.children?.length

     

       162
       162
       +
                 ? (

     

       163
       163
       +
                   <ul className="-ml-[7px] sm:ml-[7px]">

     

       164
       164
       +
                     {props.item.children.map((child, index) => (

     

       165
       165
       +
                       <ListItem

     

       166
       166
       +
                         item={child}

     

       167
       167
       +
                         did={props.did}

     

       168
       168
       +
                         key={index}

     

       169
       169
       +
                         className={props.className}

     

       170
       170
       +
                       />

     

       171
       171
       +
                     ))}

     

       172
       172
       +
                   </ul>

     

       173
       173
       +
                 )

     

       174
       174
       +
                 : null}

     

       175
       175
       +
             </div>

     

       176
       176
       +
           </li>

     

       177
       177
       +
         );

     

       89
       178
        
       }

     

       90
       90
       -
       `;

     

       91
       91
       -
       

     

       92
       92
       -
       export const handler: Handlers<Post> = {

     

       93
       93
       -
         async GET(_req, ctx) {

     

       94
       94
       -
           try {

     

       95
       95
       -
             const { slug } = ctx.params;

     

       96
       96
       -
             const post = await getPost(slug);

     

       97
       97
       -
             return ctx.render(post);

     

       98
       98
       -
           } catch (error) {

     

       99
       99
       -
             console.error("Error fetching post:", error);

     

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

     

       101
       101
       -
           }

     

       102
       102
       -
         },

     

       103
       103
       -
       };

     

       104
       179
        
       

     

       105
       180
        
       export default function BlogPage({ data: post }: PageProps<Post>) {

     

       106
       181
        
         if (!post) {

     

       107
       182
        
           return <div>Post not found</div>;

     

       108
       183
        
         }

     

       109
       184
        
       

     

       185
       185
       +
         const firstPage = post.value.pages?.[0];

     

       186
       186
       +
         let blocks: PubLeafletPagesLinearDocument.Block[] = [];

     

       187
       187
       +
         if (firstPage?.$type === "pub.leaflet.pages.linearDocument") {

     

       188
       188
       +
           blocks = firstPage.blocks || [];

     

       189
       189
       +
         }

     

       190
       190
       +
         // Deduplicate blocks by $type and plaintext

     

       191
       191
       +
         const seen = new Set();

     

       192
       192
       +
         const uniqueBlocks = blocks.filter((b) => {

     

       193
       193
       +
           const key = b.block.$type + "|" + ((b.block as any).plaintext || "");

     

       194
       194
       +
           if (seen.has(key)) return false;

     

       195
       195
       +
           seen.add(key);

     

       196
       196
       +
           return true;

     

       197
       197
       +
         });

     

       198
       198
       +
       

     

       199
       199
       +
         const content = uniqueBlocks

     

       200
       200
       +
           .filter((b) => b.block.$type === "pub.leaflet.blocks.text")

     

       201
       201
       +
           .map((b) => (b.block as PubLeafletBlocksText.Main).plaintext)

     

       202
       202
       +
           .join(" ");

     

       203
       203
       +
       

     

       110
       204
        
         return (

     

       111
       205
        
           <>

     

       112
       206
        
             <Head>

     

       113
       207
        
               <title>{post.value.title} — knotbin</title>

     

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

     

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

     

       116
       116
       -
               <style

     

       117
       117
       -
                 dangerouslySetInnerHTML={{ __html: CSS + transparentDarkModeCSS }}

     

       208
       208
       +
               <meta

     

       209
       209
       +
                 name="description"

     

       210
       210
       +
                 content={post.value.description || "by Roscoe Rubin-Rottenberg"}

     

       118
       211
        
               />

     

       119
       212
        
             </Head>

     

       120
       213
        
       

     

       121
       121
       -
             <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">

     

       122
       122
       -
               <link rel="alternate" href={post.uri} />

     

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

     

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

     

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

     

       126
       126
       -
                     <a

     

       127
       127
       -
                       href="/"

     

       128
       128
       -
                       className="hover:underline hover:underline-offset-4 font-medium"

     

       129
       129
       -
                     >

     

       130
       130
       -
                       Back

     

       131
       131
       -
                     </a>

     

       132
       132
       -
                     <Title>{post.value.title}</Title>

     

       133
       133
       -
                     <PostInfo

     

       134
       134
       -
                       content={post.value.content}

     

       135
       135
       -
                       createdAt={post.value.createdAt}

     

       136
       136
       -
                       includeAuthor

     

       137
       137
       -
                       className="text-sm"

     

       138
       138
       -
                     />

     

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

     

       140
       140
       -
                   </div>

     

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

     

       142
       142
       -
                     {/* Render GFM HTML via dangerouslySetInnerHTML */}

     

       143
       143
       -
                     <div

     

       144
       144
       -
                       class="mt-8 markdown-body"

     

       145
       145
       -
                       dangerouslySetInnerHTML={{ __html: render(post.value.content) }}

     

       146
       146
       -
                     />

     

       147
       147
       -
                   </div>

     

       148
       148
       -
                 </article>

     

       149
       149
       -
                 

     

       150
       150
       -
               </main>

     

       151
       151
       -
               <Footer />

     

       152
       152
       -
             </div>

     

       214
       214
       +
             <Layout>

     

       215
       215
       +
               <div class="p-8 pb-20 gap-16 sm:p-20">

     

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

     

       217
       217
       +
                 <div class="max-w-[600px] mx-auto">

     

       218
       218
       +
                   <article class="w-full space-y-8">

     

       219
       219
       +
                     <div class="space-y-4 w-full">

     

       220
       220
       +
                       <Title>{post.value.title || "Untitled"}</Title>

     

       221
       221
       +
                       {post.value.description && (

     

       222
       222
       +
                         <p class="text-xl italic md:text-2xl font-serif leading-relaxed max-w-prose">

     

       223
       223
       +
                           {post.value.description}

     

       224
       224
       +
                         </p>

     

       225
       225
       +
                       )}

     

       226
       226
       +
                       <PostInfo

     

       227
       227
       +
                         content={content}

     

       228
       228
       +
                         createdAt={post.value.publishedAt || new Date().toISOString()}

     

       229
       229
       +
                         includeAuthor

     

       230
       230
       +
                         className="text-sm"

     

       231
       231
       +
                       />

     

       232
       232
       +
                       <div class="diagonal-pattern w-full h-3" />

     

       233
       233
       +
                     </div>

     

       234
       234
       +
                     <div class="postContent flex flex-col">

     

       235
       235
       +
                       {uniqueBlocks.map((block, index) => (

     

       236
       236
       +
                         <Block

     

       237
       237
       +
                           block={block}

     

       238
       238
       +
                           did={post.uri.split("/")[2]}

     

       239
       239
       +
                           key={index}

     

       240
       240
       +
                         />

     

       241
       241
       +
                       ))}

     

       242
       242
       +
                     </div>

     

       243
       243
       +
                   </article>

     

       244
       244
       +
                 </div>

     

       245
       245
       +
               </div>

     

       246
       246
       +
             </Layout>

     

       153
       247
        
           </>

     

       154
       248
        
         );

     

       155
       249
        
       }

+17 -7

routes/rss.ts

···

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

     

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

     

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

     

       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()

     

       24
       24
       +
           const description = post.value.subtitle

     

       25
       25
       +
             ? `${post.value.subtitle}\n\n${await unified()

     

       27
       26
        
               .use(remarkParse)

     

       28
       27
        
               .use(remarkRehype)

     

       29
       28
        
               .use(rehypeFormat)

     

       30
       29
        
               .use(rehypeStringify)

     

       31
       30
        
               .process(post.value.content)

     

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

     

       33
       33
       -
             url: `https://knotbin.xyz/post/${post.uri.split("/").pop()}`,

     

       31
       31
       +
               .then((v) => v.toString())}`

     

       32
       32
       +
             : await unified()

     

       33
       33
       +
               .use(remarkParse)

     

       34
       34
       +
               .use(remarkRehype)

     

       35
       35
       +
               .use(rehypeFormat)

     

       36
       36
       +
               .use(rehypeStringify)

     

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

     

       38
       38
       +
               .then((v) => v.toString());

     

       39
       39
       +
       

     

       40
       40
       +
           rss.item({

     

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

     

       42
       42
       +
             description,

     

       43
       43
       +
             url: `https://knotbin.com/post/${post.uri.split("/").pop()}`,

     

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

     

       35
       45
        
           });

     

       36
       46
        
         }

+51

routes/work.tsx

···

       1
       1
       +
       import ProjectList from "../islands/project-list.tsx";

     

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

     

       3
       3
       +
       import { Layout } from "../islands/layout.tsx";

     

       4
       4
       +
       

     

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

     

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

     

       7
       7
       +
       

     

       8
       8
       +
       interface Project {

     

       9
       9
       +
         id: string;

     

       10
       10
       +
         title: string;

     

       11
       11
       +
         description: string;

     

       12
       12
       +
         technologies: string[];

     

       13
       13
       +
         url: string;

     

       14
       14
       +
         demo?: string;

     

       15
       15
       +
         year: string;

     

       16
       16
       +
         status: "active" | "completed" | "maintained" | "archived";

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       // Mock project data - replace with your actual projects

     

       20
       20
       +
       const projects: Project[] = [

     

       21
       21
       +
         {

     

       22
       22
       +
           id: "1",

     

       23
       23
       +
           title: "ATP Airport",

     

       24
       24
       +
           description: `The first ever graphical PDS migration tool for AT Protocol.

     

       25
       25
       +
             Allows users to migrate their data from one PDS to another without any

     

       26
       26
       +
             experience or technical knowledge.`,

     

       27
       27
       +
           technologies: ["AT Protocol", "Fresh", "Deno", "TypeScript"],

     

       28
       28
       +
           url: "https://github.com/knotbin/airport",

     

       29
       29
       +
           demo: "https://atpairport.com",

     

       30
       30
       +
           year: "2025",

     

       31
       31
       +
           status: "active",

     

       32
       32
       +
         },

     

       33
       33
       +
       ];

     

       34
       34
       +
       

     

       35
       35
       +
       export default function Work() {

     

       36
       36
       +
         return (

     

       37
       37
       +
           <Layout>

     

       38
       38
       +
             <div class="p-8 pb-20 gap-16 sm:p-20">

     

       39
       39
       +
               <div class="max-w-[600px] mx-auto">

     

       40
       40
       +
                 <Title class="font-serif-italic text-4xl sm:text-5xl lowercase mb-12">

     

       41
       41
       +
                   Work

     

       42
       42
       +
                 </Title>

     

       43
       43
       +
       

     

       44
       44
       +
                 <div class="space-y-4 w-full">

     

       45
       45
       +
                   <ProjectList projects={projects} />

     

       46
       46
       +
                 </div>

     

       47
       47
       +
               </div>

     

       48
       48
       +
             </div>

     

       49
       49
       +
           </Layout>

     

       50
       50
       +
         );

     

       51
       51
       +
       }

+26 -1

static/logo.svg

···

       1
       1
       -
       <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1100 1100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="Artboard2" x="0" y="0" width="1100" height="1100" style="fill:none;"/><g id="Artboard1"><path d="M560.559,44.229l0,1011.54c-279.329,0 -505.77,-226.442 -505.77,-505.772c-0,-279.329 226.441,-505.77 505.77,-505.77Z"/><path d="M452.068,136.085c-0,-0 39.262,-7.156 89.518,-16.317c52.805,-9.624 107.159,4.689 148.376,39.072c41.219,34.383 65.045,85.29 65.045,138.966l-0,5.46c-0,0.445 -0.043,0.889 -0.131,1.325c-25.984,129.009 -77.417,115.769 -131.96,85.146c-5.579,-3.122 -10.012,-7.948 -12.648,-13.772c-0.004,0.002 -0.004,0.002 -0.006,0c-13.723,-30.312 -12.6,-65.276 3.039,-94.645c15.64,-29.37 44.025,-49.815 76.836,-55.347c20.106,-3.39 39.323,-6.629 55.114,-9.29c25.333,-4.27 51.346,1.093 72.924,15.033c1.046,0.676 1.969,1.273 2.736,1.77c1.566,1.011 2.64,2.629 2.964,4.464c2.815,15.938 16.57,93.813 22.277,126.134c1.658,9.377 2.392,18.895 2.195,28.416c-0.027,1.356 -0.058,2.788 -0.088,4.293c-1.596,77.216 -58.387,142.146 -134.703,154.008c-11.491,1.785 -22.571,3.507 -32.665,5.077c-31.366,4.875 -63.384,-2.913 -89.006,-21.65l-0.003,0c-14.304,-10.461 -20.422,-28.829 -15.244,-45.777c5.176,-16.949 20.514,-28.763 38.221,-29.446c15.114,-0.581 25.915,-0.997 27.447,-1.056c0.124,-0.004 0.249,-0.003 0.374,0.003c1.559,0.083 12.706,0.679 26.741,1.427c39.26,2.096 73.01,28.537 84.441,66.155c6.722,22.122 14.4,47.39 21.6,71.082c16.23,53.412 4.481,111.406 -31.259,154.288c-6.864,8.237 -13.839,16.605 -20.607,24.725c-30.676,36.809 -81.028,50.621 -126.191,34.619c-21.907,-7.764 -41.227,-14.608 -45.769,-16.218c-0.666,-0.236 -1.291,-0.576 -1.85,-1.007c-2.828,-2.178 -12.462,-9.599 -24.654,-18.989c-42.016,-32.366 -53.852,-90.695 -27.772,-136.876c4.685,-8.297 8.332,-14.755 9.964,-17.645c0.619,-1.095 1.405,-2.086 2.333,-2.935c4.632,-4.247 20.294,-18.605 39.803,-36.489c18.89,-17.315 46.227,-21.833 69.683,-11.516c23.457,10.319 38.599,33.523 38.599,59.148l-0,3.721c-0,0.448 0.046,0.895 0.134,1.333c1.138,5.606 9.314,45.902 16.552,81.572c7.403,36.478 0.596,74.408 -19.028,106.037c-11.626,18.738 -24.407,39.336 -34.147,55.036c-9.934,16.009 -27.352,25.839 -46.19,26.066c-10.593,0.129 -22.873,0.278 -34.963,0.423c-13.789,0.167 -26.868,-6.099 -35.379,-16.947c-8.511,-10.85 -11.482,-25.045 -8.038,-38.396c0.209,-0.81 0.419,-1.624 0.63,-2.441c19.604,-75.988 95.757,-122.898 172.442,-106.223c24.631,5.357 46.594,10.132 59.654,12.973c13.246,2.88 25.807,8.302 36.988,15.966c38.709,26.525 44.277,66.301 26.505,134.808c-1.573,6.073 -2.859,12.218 -3.851,18.415c-12.505,79.426 -78.466,91.846 -155.676,81.98c-31.011,-3.935 -58.763,-21.202 -75.996,-47.283c-17.233,-26.081 -22.232,-58.382 -13.689,-88.452c0.309,-1.096 0.53,-1.872 0.646,-2.279c0.061,-0.221 0.143,-0.436 0.242,-0.643c2.126,-4.451 26.585,-55.66 42.172,-88.296c8.467,-17.726 20.832,-33.307 36.172,-45.579c9.997,-7.996 22.364,-17.889 35.374,-28.298c54.278,-43.42 128.076,-53.37 191.914,-25.873c4.808,2.07 8.089,3.483 9.155,3.942c0.25,0.108 0.506,0.201 0.768,0.277c3.641,1.066 31.707,9.282 46.839,13.712c5.974,1.749 10.634,6.441 12.342,12.427c3.118,10.928 8.483,29.74 13.94,48.866c9.987,35.012 -10.111,71.533 -45.036,81.829c-0.002,0.002 -0.006,0.002 -0.009,0.003c-24.131,7.115 -50.031,-2.885 -63.119,-24.371c-13.09,-21.485 -10.096,-49.085 7.294,-67.266c12.614,-13.188 22.604,-23.632 27.884,-29.151c2.692,-2.815 6.153,-4.776 9.951,-5.638c6.53,-1.481 18.223,-4.134 33.371,-7.573c27.679,-6.28 47.153,-31.119 46.647,-59.497c-0.505,-28.378 -20.852,-52.508 -48.736,-57.8c-8.352,-1.585 -13.84,-2.626 -15.542,-2.949c-0.375,-0.071 -0.756,-0.111 -1.139,-0.117c-6.117,-0.102 -59.681,-0.993 -91.289,-1.517c-14.816,-0.247 -29.158,5.212 -40.061,15.245c-0.632,0.581 -1.271,1.17 -1.915,1.763c-16.532,15.215 -18.76,40.516 -5.141,58.387c8.688,11.4 18.516,24.298 27.302,35.826c16.388,21.504 39.178,37.247 65.089,44.963c4.177,1.244 8.071,2.403 11.31,3.368c5.979,1.781 12.184,2.684 18.421,2.684l49.674,0c21.022,0 41.126,-8.612 55.629,-23.83c5.307,-5.57 11.185,-11.737 17.219,-18.07c31.95,-33.528 37.873,-84.146 14.527,-124.143c-6.599,-11.306 -13.223,-22.653 -19.156,-32.819c-12.673,-21.712 -38.649,-31.814 -62.662,-24.366c-5.375,1.666 -9.885,3.065 -12.39,3.842c-1.382,0.428 -2.587,1.291 -3.438,2.461c-3.547,4.879 -13.862,19.062 -25.419,34.957c-26.192,36.018 -70.209,54.526 -114.271,48.047c-28.023,-4.12 -54.585,-8.025 -59.062,-8.683c-0.441,-0.066 -0.881,-0.133 -1.321,-0.202c-7.434,-1.169 -75.783,-11.922 -108.172,-17.018c-11.096,-1.744 -21.626,-6.072 -30.742,-12.631c-1.614,-1.161 -3.324,-2.391 -5.105,-3.673c-29.14,-20.966 -37.625,-60.615 -19.619,-91.671c5.84,-10.07 11.036,-19.032 14.039,-24.21c1.779,-3.069 4.261,-5.674 7.242,-7.602c4.567,-2.952 12.305,-7.953 21.946,-14.185c25.175,-16.274 57.318,-17.17 83.362,-2.327c26.042,14.843 41.652,42.956 40.479,72.909c-0.103,2.646 -0.181,4.646 -0.23,5.871c-0.035,0.924 -0.209,1.839 -0.515,2.713c-2.137,6.119 -11.319,32.397 -19.064,54.561c-7.423,21.244 -22.065,39.208 -41.375,50.762c-14.704,8.798 -31.07,18.589 -39.626,23.709c-3.962,2.372 -8.104,4.427 -12.388,6.149c-2.33,0.938 -5.171,2.079 -8.31,3.341c-26.083,10.485 -55.952,2.882 -73.849,-18.798c-0.901,-1.092 -1.808,-2.189 -2.716,-3.29c-22.169,-26.857 -22.993,-65.424 -1.991,-93.205c0.423,-0.558 0.749,-0.989 0.964,-1.275c0.2,-0.264 0.432,-0.502 0.688,-0.711c3.682,-2.977 32.787,-26.517 52.11,-42.144c11.292,-9.133 19.87,-21.18 24.806,-34.837c1.622,-4.488 3.406,-9.427 5.25,-14.528c11.282,-31.22 -0.104,-66.115 -27.629,-84.671c-13.012,-8.772 -25.837,-17.419 -34.141,-23.018c-6.063,-4.087 -13.236,-6.21 -20.547,-6.08c-5.716,0.101 -13.163,0.234 -21.266,0.377c-35.992,0.639 -65.882,27.967 -69.736,63.758l-0,0.003c-1.587,14.733 3.646,29.383 14.206,39.776c10.56,10.394 25.29,15.394 39.995,13.575c5.615,-0.695 10.599,-1.312 14.373,-1.779c4.61,-0.57 8.673,-3.302 10.942,-7.355c5.904,-10.554 17.572,-31.407 23.565,-42.12c2.43,-4.344 3.349,-9.37 2.615,-14.292c-2.539,-17.026 -8.882,-59.554 -14.179,-95.074c-5.104,-34.221 -28.31,-63.008 -60.667,-75.261c-0.435,-0.164 -0.668,-0.252 -0.668,-0.252c-0,0 -26.059,-12.597 -47.404,-22.915c-6.21,-3.003 -10.552,-8.86 -11.617,-15.676c-1.066,-6.814 1.282,-13.719 6.28,-18.472c-0,-0.001 0.001,-0.003 0.002,-0.003c13.361,-12.709 31.532,-19.076 49.905,-17.482c18.371,1.593 35.175,10.993 46.149,25.812c2.085,2.816 4.13,5.578 6.106,8.246c0.828,1.119 0.653,2.687 -0.401,3.595c-1.055,0.908 -2.631,0.851 -3.615,-0.134c-0.007,-0.008 -0.015,-0.014 -0.023,-0.022c-6.839,-6.841 -10.606,-16.166 -10.437,-25.837c0.17,-9.672 4.261,-18.858 11.334,-25.456c12.691,-11.834 26.596,-24.802 33.837,-31.554c3.322,-3.098 7.137,-5.621 11.288,-7.465c0.001,-0.001 0.003,-0.003 0.004,-0.003c33.279,-14.79 72.202,-7.931 98.421,17.345c26.217,25.275 34.497,63.921 20.935,97.719c-1.254,3.124 -1.944,4.845 -1.946,4.85c-0.044,0.109 -0.088,0.22 -0.133,0.329c-10.112,24.6 -22.136,42.409 -34.88,54.706c-18.975,18.232 -48.766,18.846 -68.474,1.411c-19.709,-17.434 -22.734,-47.079 -6.954,-68.135c2.773,-3.711 5.454,-7.289 7.917,-10.577c6.515,-8.691 16.639,-13.936 27.497,-14.244c13.166,-0.339 25.563,-9.686 37.384,-23.926c21.63,-26.04 55.012,-39.302 88.616,-35.204c33.603,4.096 62.822,24.988 77.564,55.462c1.373,2.835 2.392,4.942 2.989,6.174c0.402,0.832 0.678,1.719 0.82,2.631c1.12,7.204 6.491,41.771 12.829,82.569c3.732,24.014 -8.005,47.788 -29.338,59.427c-21.334,11.64 -47.676,8.643 -65.85,-7.491c-4.078,-3.62 -7.66,-6.8 -10.593,-9.405c-5.545,-4.923 -8.889,-11.859 -9.283,-19.264c-0.886,-16.594 -2.529,-47.379 -3.61,-67.626c-0.649,-12.17 5.463,-23.707 15.897,-30.006c10.519,-6.348 22.575,-13.625 25.52,-15.402c0.444,-0.269 0.937,-0.449 1.45,-0.533c7.072,-1.152 60.584,-9.868 84.851,-13.82c7.803,-1.271 15.8,-0.516 23.227,2.192c3.841,1.4 8.488,3.094 13.667,4.982c20.848,7.6 36.493,25.15 41.66,46.728c5.167,21.58 -0.832,44.313 -15.975,60.531c-2.276,2.436 -4.385,4.697 -6.283,6.729c-6.196,6.635 -8.326,16.098 -5.573,24.748c0.926,2.91 1.963,6.169 3.079,9.673c5.116,16.075 2.584,33.607 -6.871,47.578c-9.455,13.97 -24.79,22.838 -41.615,24.064c-30.34,2.128 -59.679,12.528 -74.531,38.972c-5.427,9.71 -14.426,16.92 -25.085,20.1c-5.66,1.699 -12.29,3.678 -19.461,5.818c-19.596,5.845 -40.822,0.671 -55.53,-13.538c-14.708,-14.209 -20.613,-35.244 -15.445,-55.031c1.935,-7.413 3.816,-14.617 5.572,-21.344c6.596,-25.261 27.232,-44.412 52.914,-49.106c31.363,-5.733 75.516,-13.803 115.654,-21.14c58.409,-10.676 116.621,19.623 141.385,73.589c1.496,3.259 2.842,6.191 3.991,8.694c2.644,5.766 2.375,12.45 -0.727,17.984c-7.217,12.875 -20.953,37.382 -31.677,56.513c-9.342,16.667 -26.792,27.159 -45.891,27.595c-8.375,0.192 -17.759,0.408 -27.226,0.623c-14.654,0.336 -28.579,-6.373 -37.448,-18.042c-8.87,-11.669 -11.608,-26.881 -7.365,-40.911c0.23,-0.76 0.435,-1.439 0.614,-2.027c0.441,-1.46 1.369,-2.726 2.629,-3.588c21.719,-14.652 -16.221,-111.701 65.038,-53.7c7.872,5.622 16.285,10.449 25.113,14.407c14.282,6.405 36.836,16.52 57.452,25.765c29.334,13.156 48.122,42.403 47.888,74.551c-0.008,1.177 -0.017,2.324 -0.025,3.439c-0.073,10.098 -6.873,18.909 -16.623,21.539c-22.991,6.201 -63.65,17.167 -79.742,21.506c-4.499,1.215 -9.21,1.428 -13.8,0.626c-3.053,-0.534 -6.953,-1.214 -11.384,-1.989c-14.889,-2.601 -30.062,2.69 -40.106,13.982c-10.044,11.295 -13.528,26.982 -9.205,41.465c-0,0.002 -0,0.004 0.001,0.006c6.683,22.398 22.61,40.877 43.779,50.789c21.167,9.913 45.56,10.314 67.044,1.104c8.832,-3.785 15.105,-6.475 16.407,-7.033c0.167,-0.073 0.339,-0.133 0.515,-0.182c2.849,-0.791 28.33,-7.872 52.899,-14.7c26.462,-7.353 42.335,-34.355 35.887,-61.052c-0.34,-1.413 -0.632,-2.621 -0.861,-3.569c-0.363,-1.5 -1.233,-2.83 -2.462,-3.765c-8.626,-6.552 -44.667,-33.933 -67.746,-51.466c-13.079,-9.936 -28.144,-16.942 -44.172,-20.541c-9.671,-2.173 -20.631,-4.634 -29.698,-6.67c-12.443,-2.795 -25.393,-2.373 -37.627,1.225c-10.469,3.08 -24.206,7.121 -38.179,11.231c-39.733,11.687 -71.326,41.926 -84.74,81.11c-1.541,4.5 -3.117,9.106 -4.714,13.768c-22.782,66.554 -4.712,140.281 46.264,188.755c3.288,3.127 5.957,5.666 7.78,7.399c1.781,1.695 3.962,2.912 6.34,3.538c20.638,5.433 122.423,32.231 122.423,32.231c0,-0 0.35,0.114 0.994,0.323c14.123,4.598 25.773,14.732 32.284,28.08c6.512,13.349 7.325,28.768 2.257,42.728c-2.265,6.234 -4.576,12.599 -6.842,18.84c-12.545,34.542 -37.649,63.085 -70.307,79.935c-2.583,1.333 -5.169,2.667 -7.732,3.99c-28.525,14.717 -61.841,17.083 -92.16,6.542c-11.175,-3.884 -23.232,-8.076 -34.882,-12.126c-38.357,-13.334 -69.454,-42.001 -85.86,-79.147c-0.482,-1.095 -0.832,-1.883 -1.016,-2.301c-0.101,-0.229 -0.18,-0.466 -0.238,-0.707c-0.469,-1.98 -2.802,-11.826 -5.82,-24.555c-10.276,-43.345 8.959,-88.319 47.399,-110.831c1.96,-1.146 3.863,-2.261 5.691,-3.332c13.991,-8.193 29.663,-13.087 45.829,-14.311c12.107,-0.916 27.248,-2.061 41.999,-3.177c35.044,-2.653 66.147,-23.443 81.997,-54.81c3.458,-6.839 6.946,-13.746 10.243,-20.269c11.211,-22.186 8.683,-48.839 -6.496,-68.523c-18,-23.338 -42.08,-54.562 -59.201,-76.762c-13.949,-18.088 -22.835,-39.561 -25.747,-62.216c-1.894,-14.734 -4.167,-32.417 -6.35,-49.408c-4.401,-34.253 -23.696,-64.817 -52.727,-83.524c-29.029,-18.706 -64.835,-23.646 -97.846,-13.501c-23.095,7.183 -45.961,18.729 -67.538,32.903c-24.624,16.129 -57.5,10.7 -75.633,-12.489c-8.376,-10.667 -16.818,-21.463 -23.5,-30.008c-7.948,-10.165 -8.605,-24.242 -1.637,-35.102c0.737,-1.15 1.504,-2.344 2.295,-3.578c18.294,-28.513 49.544,-46.089 83.412,-46.91c33.867,-0.822 65.933,15.218 85.588,42.811c16.176,22.868 32.46,45.325 48.838,67.331c8.773,11.692 10.124,27.36 3.485,40.382c-6.641,13.023 -20.115,21.129 -34.73,20.897c-0.006,0.01 -0.01,0.01 -0.013,0.01c-15.831,-0.252 -30.539,8.149 -38.362,21.911c-7.826,13.764 -7.521,30.7 0.794,44.174c13.158,21.323 27.652,44.812 40.634,65.85c23.498,38.079 20.715,86.78 -6.967,121.934c-8.473,10.759 -17.397,22.093 -26.105,33.153c-11.64,14.781 -30.183,22.37 -48.845,19.988c-18.663,-2.38 -34.707,-14.382 -42.261,-31.613c-0.001,-0.003 -0.003,-0.006 -0.004,-0.008c-6.004,-13.695 -3.173,-29.658 7.175,-40.451c10.347,-10.794 26.176,-14.296 40.111,-8.875c28.797,11.202 60.829,23.662 88.7,34.504c43.558,16.945 71.991,59.183 71.297,105.916c-0.492,33.068 -1.073,72.095 -1.599,107.479c-0.302,20.322 -11.734,38.836 -29.766,48.21c-18.032,9.375 -39.756,8.093 -56.561,-3.335c-0.003,-0 -0.004,-0.002 -0.005,-0.003c-14.721,-10.01 -22.101,-27.8 -18.788,-45.29c3.312,-17.492 16.687,-31.351 34.049,-35.284c33.306,-7.545 68.523,-15.524 94.687,-21.451c24.849,-5.63 50.715,3.585 66.407,23.656l0.001,-0c19.202,24.559 23.185,57.748 10.339,86.152c-12.847,28.405 -40.398,47.332 -71.522,49.13c-8.913,0.517 -17.668,1.023 -26.095,1.509c-40.269,2.33 -75.325,28.317 -89.259,66.172c-11.886,32.237 -36.114,38.372 -61.567,27.812c-21.988,-9.158 -38.8,-27.57 -45.927,-50.298c-9.465,-30.157 -26.592,-84.776 -36.519,-116.43c-4.884,-15.576 -16.214,-28.308 -31.117,-34.967c0,-0 -0.001,-0 -0.001,-0.001c-5.963,-2.664 -12.777,-2.661 -18.735,0.01c-5.959,2.67 -10.497,7.754 -12.476,13.977c-1.695,5.33 -3.59,11.288 -5.603,17.617c-7.33,23.049 -2.966,48.224 11.691,67.462c14.66,19.239 37.775,30.124 61.943,29.172c3.268,-0.129 5.523,-0.217 6.437,-0.254c0.302,-0.011 0.602,-0.056 0.894,-0.135c110.799,-29.663 255.406,-36.913 336.27,-80.04c23.721,-12.652 40.197,-35.629 44.569,-62.156c4.371,-26.527 -3.86,-53.576 -22.269,-73.171c-56.064,-59.676 -153.855,-163.769 -153.855,-163.769" style="fill-opacity:0;stroke:#000;stroke-width:24px;"/></g></svg>
     

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8" standalone="no"?>

     

       2
       2
       +
       <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg

     

       3
       3
       +
         width="100%"

     

       4
       4
       +
         height="100%"

     

       5
       5
       +
         viewBox="0 0 1100 1100"

     

       6
       6
       +
         version="1.1"

     

       7
       7
       +
         xmlns="http://www.w3.org/2000/svg"

     

       8
       8
       +
         xmlns:xlink="http://www.w3.org/1999/xlink"

     

       9
       9
       +
         xml:space="preserve"

     

       10
       10
       +
         xmlns:serif="http://www.serif.com/"

     

       11
       11
       +
         style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5"

     

       12
       12
       +
       >

     

       13
       13
       +
         <rect

     

       14
       14
       +
           id="Artboard2"

     

       15
       15
       +
           x="0"

     

       16
       16
       +
           y="0"

     

       17
       17
       +
           width="1100"

     

       18
       18
       +
           height="1100"

     

       19
       19
       +
           style="fill: none"

     

       20
       20
       +
         /><g id="Artboard1"><path

     

       21
       21
       +
             d="M560.559,44.229l0,1011.54c-279.329,0 -505.77,-226.442 -505.77,-505.772c-0,-279.329 226.441,-505.77 505.77,-505.77Z"

     

       22
       22
       +
           /><path

     

       23
       23
       +
             d="M452.068,136.085c-0,-0 39.262,-7.156 89.518,-16.317c52.805,-9.624 107.159,4.689 148.376,39.072c41.219,34.383 65.045,85.29 65.045,138.966l-0,5.46c-0,0.445 -0.043,0.889 -0.131,1.325c-25.984,129.009 -77.417,115.769 -131.96,85.146c-5.579,-3.122 -10.012,-7.948 -12.648,-13.772c-0.004,0.002 -0.004,0.002 -0.006,0c-13.723,-30.312 -12.6,-65.276 3.039,-94.645c15.64,-29.37 44.025,-49.815 76.836,-55.347c20.106,-3.39 39.323,-6.629 55.114,-9.29c25.333,-4.27 51.346,1.093 72.924,15.033c1.046,0.676 1.969,1.273 2.736,1.77c1.566,1.011 2.64,2.629 2.964,4.464c2.815,15.938 16.57,93.813 22.277,126.134c1.658,9.377 2.392,18.895 2.195,28.416c-0.027,1.356 -0.058,2.788 -0.088,4.293c-1.596,77.216 -58.387,142.146 -134.703,154.008c-11.491,1.785 -22.571,3.507 -32.665,5.077c-31.366,4.875 -63.384,-2.913 -89.006,-21.65l-0.003,0c-14.304,-10.461 -20.422,-28.829 -15.244,-45.777c5.176,-16.949 20.514,-28.763 38.221,-29.446c15.114,-0.581 25.915,-0.997 27.447,-1.056c0.124,-0.004 0.249,-0.003 0.374,0.003c1.559,0.083 12.706,0.679 26.741,1.427c39.26,2.096 73.01,28.537 84.441,66.155c6.722,22.122 14.4,47.39 21.6,71.082c16.23,53.412 4.481,111.406 -31.259,154.288c-6.864,8.237 -13.839,16.605 -20.607,24.725c-30.676,36.809 -81.028,50.621 -126.191,34.619c-21.907,-7.764 -41.227,-14.608 -45.769,-16.218c-0.666,-0.236 -1.291,-0.576 -1.85,-1.007c-2.828,-2.178 -12.462,-9.599 -24.654,-18.989c-42.016,-32.366 -53.852,-90.695 -27.772,-136.876c4.685,-8.297 8.332,-14.755 9.964,-17.645c0.619,-1.095 1.405,-2.086 2.333,-2.935c4.632,-4.247 20.294,-18.605 39.803,-36.489c18.89,-17.315 46.227,-21.833 69.683,-11.516c23.457,10.319 38.599,33.523 38.599,59.148l-0,3.721c-0,0.448 0.046,0.895 0.134,1.333c1.138,5.606 9.314,45.902 16.552,81.572c7.403,36.478 0.596,74.408 -19.028,106.037c-11.626,18.738 -24.407,39.336 -34.147,55.036c-9.934,16.009 -27.352,25.839 -46.19,26.066c-10.593,0.129 -22.873,0.278 -34.963,0.423c-13.789,0.167 -26.868,-6.099 -35.379,-16.947c-8.511,-10.85 -11.482,-25.045 -8.038,-38.396c0.209,-0.81 0.419,-1.624 0.63,-2.441c19.604,-75.988 95.757,-122.898 172.442,-106.223c24.631,5.357 46.594,10.132 59.654,12.973c13.246,2.88 25.807,8.302 36.988,15.966c38.709,26.525 44.277,66.301 26.505,134.808c-1.573,6.073 -2.859,12.218 -3.851,18.415c-12.505,79.426 -78.466,91.846 -155.676,81.98c-31.011,-3.935 -58.763,-21.202 -75.996,-47.283c-17.233,-26.081 -22.232,-58.382 -13.689,-88.452c0.309,-1.096 0.53,-1.872 0.646,-2.279c0.061,-0.221 0.143,-0.436 0.242,-0.643c2.126,-4.451 26.585,-55.66 42.172,-88.296c8.467,-17.726 20.832,-33.307 36.172,-45.579c9.997,-7.996 22.364,-17.889 35.374,-28.298c54.278,-43.42 128.076,-53.37 191.914,-25.873c4.808,2.07 8.089,3.483 9.155,3.942c0.25,0.108 0.506,0.201 0.768,0.277c3.641,1.066 31.707,9.282 46.839,13.712c5.974,1.749 10.634,6.441 12.342,12.427c3.118,10.928 8.483,29.74 13.94,48.866c9.987,35.012 -10.111,71.533 -45.036,81.829c-0.002,0.002 -0.006,0.002 -0.009,0.003c-24.131,7.115 -50.031,-2.885 -63.119,-24.371c-13.09,-21.485 -10.096,-49.085 7.294,-67.266c12.614,-13.188 22.604,-23.632 27.884,-29.151c2.692,-2.815 6.153,-4.776 9.951,-5.638c6.53,-1.481 18.223,-4.134 33.371,-7.573c27.679,-6.28 47.153,-31.119 46.647,-59.497c-0.505,-28.378 -20.852,-52.508 -48.736,-57.8c-8.352,-1.585 -13.84,-2.626 -15.542,-2.949c-0.375,-0.071 -0.756,-0.111 -1.139,-0.117c-6.117,-0.102 -59.681,-0.993 -91.289,-1.517c-14.816,-0.247 -29.158,5.212 -40.061,15.245c-0.632,0.581 -1.271,1.17 -1.915,1.763c-16.532,15.215 -18.76,40.516 -5.141,58.387c8.688,11.4 18.516,24.298 27.302,35.826c16.388,21.504 39.178,37.247 65.089,44.963c4.177,1.244 8.071,2.403 11.31,3.368c5.979,1.781 12.184,2.684 18.421,2.684l49.674,0c21.022,0 41.126,-8.612 55.629,-23.83c5.307,-5.57 11.185,-11.737 17.219,-18.07c31.95,-33.528 37.873,-84.146 14.527,-124.143c-6.599,-11.306 -13.223,-22.653 -19.156,-32.819c-12.673,-21.712 -38.649,-31.814 -62.662,-24.366c-5.375,1.666 -9.885,3.065 -12.39,3.842c-1.382,0.428 -2.587,1.291 -3.438,2.461c-3.547,4.879 -13.862,19.062 -25.419,34.957c-26.192,36.018 -70.209,54.526 -114.271,48.047c-28.023,-4.12 -54.585,-8.025 -59.062,-8.683c-0.441,-0.066 -0.881,-0.133 -1.321,-0.202c-7.434,-1.169 -75.783,-11.922 -108.172,-17.018c-11.096,-1.744 -21.626,-6.072 -30.742,-12.631c-1.614,-1.161 -3.324,-2.391 -5.105,-3.673c-29.14,-20.966 -37.625,-60.615 -19.619,-91.671c5.84,-10.07 11.036,-19.032 14.039,-24.21c1.779,-3.069 4.261,-5.674 7.242,-7.602c4.567,-2.952 12.305,-7.953 21.946,-14.185c25.175,-16.274 57.318,-17.17 83.362,-2.327c26.042,14.843 41.652,42.956 40.479,72.909c-0.103,2.646 -0.181,4.646 -0.23,5.871c-0.035,0.924 -0.209,1.839 -0.515,2.713c-2.137,6.119 -11.319,32.397 -19.064,54.561c-7.423,21.244 -22.065,39.208 -41.375,50.762c-14.704,8.798 -31.07,18.589 -39.626,23.709c-3.962,2.372 -8.104,4.427 -12.388,6.149c-2.33,0.938 -5.171,2.079 -8.31,3.341c-26.083,10.485 -55.952,2.882 -73.849,-18.798c-0.901,-1.092 -1.808,-2.189 -2.716,-3.29c-22.169,-26.857 -22.993,-65.424 -1.991,-93.205c0.423,-0.558 0.749,-0.989 0.964,-1.275c0.2,-0.264 0.432,-0.502 0.688,-0.711c3.682,-2.977 32.787,-26.517 52.11,-42.144c11.292,-9.133 19.87,-21.18 24.806,-34.837c1.622,-4.488 3.406,-9.427 5.25,-14.528c11.282,-31.22 -0.104,-66.115 -27.629,-84.671c-13.012,-8.772 -25.837,-17.419 -34.141,-23.018c-6.063,-4.087 -13.236,-6.21 -20.547,-6.08c-5.716,0.101 -13.163,0.234 -21.266,0.377c-35.992,0.639 -65.882,27.967 -69.736,63.758l-0,0.003c-1.587,14.733 3.646,29.383 14.206,39.776c10.56,10.394 25.29,15.394 39.995,13.575c5.615,-0.695 10.599,-1.312 14.373,-1.779c4.61,-0.57 8.673,-3.302 10.942,-7.355c5.904,-10.554 17.572,-31.407 23.565,-42.12c2.43,-4.344 3.349,-9.37 2.615,-14.292c-2.539,-17.026 -8.882,-59.554 -14.179,-95.074c-5.104,-34.221 -28.31,-63.008 -60.667,-75.261c-0.435,-0.164 -0.668,-0.252 -0.668,-0.252c-0,0 -26.059,-12.597 -47.404,-22.915c-6.21,-3.003 -10.552,-8.86 -11.617,-15.676c-1.066,-6.814 1.282,-13.719 6.28,-18.472c-0,-0.001 0.001,-0.003 0.002,-0.003c13.361,-12.709 31.532,-19.076 49.905,-17.482c18.371,1.593 35.175,10.993 46.149,25.812c2.085,2.816 4.13,5.578 6.106,8.246c0.828,1.119 0.653,2.687 -0.401,3.595c-1.055,0.908 -2.631,0.851 -3.615,-0.134c-0.007,-0.008 -0.015,-0.014 -0.023,-0.022c-6.839,-6.841 -10.606,-16.166 -10.437,-25.837c0.17,-9.672 4.261,-18.858 11.334,-25.456c12.691,-11.834 26.596,-24.802 33.837,-31.554c3.322,-3.098 7.137,-5.621 11.288,-7.465c0.001,-0.001 0.003,-0.003 0.004,-0.003c33.279,-14.79 72.202,-7.931 98.421,17.345c26.217,25.275 34.497,63.921 20.935,97.719c-1.254,3.124 -1.944,4.845 -1.946,4.85c-0.044,0.109 -0.088,0.22 -0.133,0.329c-10.112,24.6 -22.136,42.409 -34.88,54.706c-18.975,18.232 -48.766,18.846 -68.474,1.411c-19.709,-17.434 -22.734,-47.079 -6.954,-68.135c2.773,-3.711 5.454,-7.289 7.917,-10.577c6.515,-8.691 16.639,-13.936 27.497,-14.244c13.166,-0.339 25.563,-9.686 37.384,-23.926c21.63,-26.04 55.012,-39.302 88.616,-35.204c33.603,4.096 62.822,24.988 77.564,55.462c1.373,2.835 2.392,4.942 2.989,6.174c0.402,0.832 0.678,1.719 0.82,2.631c1.12,7.204 6.491,41.771 12.829,82.569c3.732,24.014 -8.005,47.788 -29.338,59.427c-21.334,11.64 -47.676,8.643 -65.85,-7.491c-4.078,-3.62 -7.66,-6.8 -10.593,-9.405c-5.545,-4.923 -8.889,-11.859 -9.283,-19.264c-0.886,-16.594 -2.529,-47.379 -3.61,-67.626c-0.649,-12.17 5.463,-23.707 15.897,-30.006c10.519,-6.348 22.575,-13.625 25.52,-15.402c0.444,-0.269 0.937,-0.449 1.45,-0.533c7.072,-1.152 60.584,-9.868 84.851,-13.82c7.803,-1.271 15.8,-0.516 23.227,2.192c3.841,1.4 8.488,3.094 13.667,4.982c20.848,7.6 36.493,25.15 41.66,46.728c5.167,21.58 -0.832,44.313 -15.975,60.531c-2.276,2.436 -4.385,4.697 -6.283,6.729c-6.196,6.635 -8.326,16.098 -5.573,24.748c0.926,2.91 1.963,6.169 3.079,9.673c5.116,16.075 2.584,33.607 -6.871,47.578c-9.455,13.97 -24.79,22.838 -41.615,24.064c-30.34,2.128 -59.679,12.528 -74.531,38.972c-5.427,9.71 -14.426,16.92 -25.085,20.1c-5.66,1.699 -12.29,3.678 -19.461,5.818c-19.596,5.845 -40.822,0.671 -55.53,-13.538c-14.708,-14.209 -20.613,-35.244 -15.445,-55.031c1.935,-7.413 3.816,-14.617 5.572,-21.344c6.596,-25.261 27.232,-44.412 52.914,-49.106c31.363,-5.733 75.516,-13.803 115.654,-21.14c58.409,-10.676 116.621,19.623 141.385,73.589c1.496,3.259 2.842,6.191 3.991,8.694c2.644,5.766 2.375,12.45 -0.727,17.984c-7.217,12.875 -20.953,37.382 -31.677,56.513c-9.342,16.667 -26.792,27.159 -45.891,27.595c-8.375,0.192 -17.759,0.408 -27.226,0.623c-14.654,0.336 -28.579,-6.373 -37.448,-18.042c-8.87,-11.669 -11.608,-26.881 -7.365,-40.911c0.23,-0.76 0.435,-1.439 0.614,-2.027c0.441,-1.46 1.369,-2.726 2.629,-3.588c21.719,-14.652 -16.221,-111.701 65.038,-53.7c7.872,5.622 16.285,10.449 25.113,14.407c14.282,6.405 36.836,16.52 57.452,25.765c29.334,13.156 48.122,42.403 47.888,74.551c-0.008,1.177 -0.017,2.324 -0.025,3.439c-0.073,10.098 -6.873,18.909 -16.623,21.539c-22.991,6.201 -63.65,17.167 -79.742,21.506c-4.499,1.215 -9.21,1.428 -13.8,0.626c-3.053,-0.534 -6.953,-1.214 -11.384,-1.989c-14.889,-2.601 -30.062,2.69 -40.106,13.982c-10.044,11.295 -13.528,26.982 -9.205,41.465c-0,0.002 -0,0.004 0.001,0.006c6.683,22.398 22.61,40.877 43.779,50.789c21.167,9.913 45.56,10.314 67.044,1.104c8.832,-3.785 15.105,-6.475 16.407,-7.033c0.167,-0.073 0.339,-0.133 0.515,-0.182c2.849,-0.791 28.33,-7.872 52.899,-14.7c26.462,-7.353 42.335,-34.355 35.887,-61.052c-0.34,-1.413 -0.632,-2.621 -0.861,-3.569c-0.363,-1.5 -1.233,-2.83 -2.462,-3.765c-8.626,-6.552 -44.667,-33.933 -67.746,-51.466c-13.079,-9.936 -28.144,-16.942 -44.172,-20.541c-9.671,-2.173 -20.631,-4.634 -29.698,-6.67c-12.443,-2.795 -25.393,-2.373 -37.627,1.225c-10.469,3.08 -24.206,7.121 -38.179,11.231c-39.733,11.687 -71.326,41.926 -84.74,81.11c-1.541,4.5 -3.117,9.106 -4.714,13.768c-22.782,66.554 -4.712,140.281 46.264,188.755c3.288,3.127 5.957,5.666 7.78,7.399c1.781,1.695 3.962,2.912 6.34,3.538c20.638,5.433 122.423,32.231 122.423,32.231c0,-0 0.35,0.114 0.994,0.323c14.123,4.598 25.773,14.732 32.284,28.08c6.512,13.349 7.325,28.768 2.257,42.728c-2.265,6.234 -4.576,12.599 -6.842,18.84c-12.545,34.542 -37.649,63.085 -70.307,79.935c-2.583,1.333 -5.169,2.667 -7.732,3.99c-28.525,14.717 -61.841,17.083 -92.16,6.542c-11.175,-3.884 -23.232,-8.076 -34.882,-12.126c-38.357,-13.334 -69.454,-42.001 -85.86,-79.147c-0.482,-1.095 -0.832,-1.883 -1.016,-2.301c-0.101,-0.229 -0.18,-0.466 -0.238,-0.707c-0.469,-1.98 -2.802,-11.826 -5.82,-24.555c-10.276,-43.345 8.959,-88.319 47.399,-110.831c1.96,-1.146 3.863,-2.261 5.691,-3.332c13.991,-8.193 29.663,-13.087 45.829,-14.311c12.107,-0.916 27.248,-2.061 41.999,-3.177c35.044,-2.653 66.147,-23.443 81.997,-54.81c3.458,-6.839 6.946,-13.746 10.243,-20.269c11.211,-22.186 8.683,-48.839 -6.496,-68.523c-18,-23.338 -42.08,-54.562 -59.201,-76.762c-13.949,-18.088 -22.835,-39.561 -25.747,-62.216c-1.894,-14.734 -4.167,-32.417 -6.35,-49.408c-4.401,-34.253 -23.696,-64.817 -52.727,-83.524c-29.029,-18.706 -64.835,-23.646 -97.846,-13.501c-23.095,7.183 -45.961,18.729 -67.538,32.903c-24.624,16.129 -57.5,10.7 -75.633,-12.489c-8.376,-10.667 -16.818,-21.463 -23.5,-30.008c-7.948,-10.165 -8.605,-24.242 -1.637,-35.102c0.737,-1.15 1.504,-2.344 2.295,-3.578c18.294,-28.513 49.544,-46.089 83.412,-46.91c33.867,-0.822 65.933,15.218 85.588,42.811c16.176,22.868 32.46,45.325 48.838,67.331c8.773,11.692 10.124,27.36 3.485,40.382c-6.641,13.023 -20.115,21.129 -34.73,20.897c-0.006,0.01 -0.01,0.01 -0.013,0.01c-15.831,-0.252 -30.539,8.149 -38.362,21.911c-7.826,13.764 -7.521,30.7 0.794,44.174c13.158,21.323 27.652,44.812 40.634,65.85c23.498,38.079 20.715,86.78 -6.967,121.934c-8.473,10.759 -17.397,22.093 -26.105,33.153c-11.64,14.781 -30.183,22.37 -48.845,19.988c-18.663,-2.38 -34.707,-14.382 -42.261,-31.613c-0.001,-0.003 -0.003,-0.006 -0.004,-0.008c-6.004,-13.695 -3.173,-29.658 7.175,-40.451c10.347,-10.794 26.176,-14.296 40.111,-8.875c28.797,11.202 60.829,23.662 88.7,34.504c43.558,16.945 71.991,59.183 71.297,105.916c-0.492,33.068 -1.073,72.095 -1.599,107.479c-0.302,20.322 -11.734,38.836 -29.766,48.21c-18.032,9.375 -39.756,8.093 -56.561,-3.335c-0.003,-0 -0.004,-0.002 -0.005,-0.003c-14.721,-10.01 -22.101,-27.8 -18.788,-45.29c3.312,-17.492 16.687,-31.351 34.049,-35.284c33.306,-7.545 68.523,-15.524 94.687,-21.451c24.849,-5.63 50.715,3.585 66.407,23.656l0.001,-0c19.202,24.559 23.185,57.748 10.339,86.152c-12.847,28.405 -40.398,47.332 -71.522,49.13c-8.913,0.517 -17.668,1.023 -26.095,1.509c-40.269,2.33 -75.325,28.317 -89.259,66.172c-11.886,32.237 -36.114,38.372 -61.567,27.812c-21.988,-9.158 -38.8,-27.57 -45.927,-50.298c-9.465,-30.157 -26.592,-84.776 -36.519,-116.43c-4.884,-15.576 -16.214,-28.308 -31.117,-34.967c0,-0 -0.001,-0 -0.001,-0.001c-5.963,-2.664 -12.777,-2.661 -18.735,0.01c-5.959,2.67 -10.497,7.754 -12.476,13.977c-1.695,5.33 -3.59,11.288 -5.603,17.617c-7.33,23.049 -2.966,48.224 11.691,67.462c14.66,19.239 37.775,30.124 61.943,29.172c3.268,-0.129 5.523,-0.217 6.437,-0.254c0.302,-0.011 0.602,-0.056 0.894,-0.135c110.799,-29.663 255.406,-36.913 336.27,-80.04c23.721,-12.652 40.197,-35.629 44.569,-62.156c4.371,-26.527 -3.86,-53.576 -22.269,-73.171c-56.064,-59.676 -153.855,-163.769 -153.855,-163.769"

     

       24
       24
       +
             style="fill-opacity: 0; stroke: #000; stroke-width: 24px"

     

       25
       25
       +
           /></g>

     

       26
       26
       +
       </svg>

+107 -97

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:ital,wght@0,400;0,700;1,400&display=swap');

     

       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:ital,wght@0,400..700;1,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;

     

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

     

       5
       5
       +
           src:

     

       6
       6
       +
               url("/path/to/local/fonts/BerkeleyMono-Regular.woff2") format("woff2"),

     

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

     

       8
       8
       +
           font-weight: 400;

     

       9
       9
       +
           font-style: normal;

     

       9
       10
        
       }

     

       10
       11
        
       

     

       11
       12
        
       @tailwind base;

     
···

       13
       14
        
       @tailwind utilities;

     

       14
       15
        
       

     

       15
       16
        
       @theme inline {

     

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

     

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

     

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

     

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

     

       18
       19
        
       }

     

       19
       20
        
       

     

       20
       21
        
       :root {

     

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

     

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

     

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

     

       22
       22
       +
           --font-sans: "Inter", sans-serif;

     

       23
       23
       +
           --font-serif: "Libre Bodoni", serif;

     

       24
       24
       +
           --font-mono: "Berkeley Mono", monospace;

     

       24
       25
        
       }

     

       25
       26
        
       

     

       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
       -
       .font-serif-italic { font-family: var(--font-serif); font-style: italic;}

     

       27
       27
       +
       .font-sans {

     

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

     

       29
       29
       +
       }

     

       30
       30
       +
       .font-serif {

     

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

     

       32
       32
       +
       }

     

       33
       33
       +
       .font-mono {

     

       34
       34
       +
           font-family: var(--font-mono);

     

       35
       35
       +
       }

     

       36
       36
       +
       .font-serif-italic {

     

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

     

       38
       38
       +
           font-style: italic;

     

       39
       39
       +
       }

     

       30
       40
        
       

     

       31
       41
        
       /*

     

       32
       42
        
         The default border color has changed to `currentColor` in Tailwind CSS v4,

     
···

       37
       47
        
         color utility to any element that depends on these defaults.

     

       38
       48
        
       */

     

       39
       49
        
       @layer base {

     

       40
       40
       -
         *,

     

       41
       41
       -
         ::after,

     

       42
       42
       -
         ::before,

     

       43
       43
       -
         ::backdrop,

     

       44
       44
       -
         ::file-selector-button {

     

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

     

       46
       46
       -
         }

     

       50
       50
       +
           *,

     

       51
       51
       +
           ::after,

     

       52
       52
       +
           ::before,

     

       53
       53
       +
           ::backdrop,

     

       54
       54
       +
           ::file-selector-button {

     

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

     

       56
       56
       +
           }

     

       47
       57
        
       }

     

       48
       58
        
       

     

       49
       59
        
       @utility text-balance {

     

       50
       50
       -
         text-wrap: balance;

     

       60
       60
       +
           text-wrap: balance;

     

       51
       61
        
       }

     

       52
       62
        
       

     

       53
       63
        
       @layer utilities {

     

       54
       54
       -
         :root {

     

       55
       55
       -
           --background: #ffffff;

     

       56
       56
       -
           --foreground: #171717;

     

       57
       57
       -
         }

     

       58
       58
       -
       

     

       59
       59
       -
         @media (prefers-color-scheme: dark) {

     

       60
       64
        
           :root {

     

       61
       61
       -
             --background: #0a0a0a;

     

       62
       62
       -
             --foreground: #ededed;

     

       65
       65
       +
               --background: #ffffff;

     

       66
       66
       +
               --foreground: #171717;

     

       63
       67
        
           }

     

       64
       64
       -
         }

     

       65
       68
        
       

     

       66
       66
       -
         body {

     

       67
       67
       -
           color: var(--foreground);

     

       68
       68
       -
           background: var(--background);

     

       69
       69
       -
           font-family: var(--font-sans);

     

       70
       70
       -
         }

     

       71
       71
       -
       

     

       72
       72
       -
         @keyframes marquee {

     

       73
       73
       -
           0% {

     

       74
       74
       -
             opacity: 0;

     

       75
       75
       -
             transform: translateX(0px);

     

       76
       76
       -
           }

     

       77
       77
       -
           2% {

     

       78
       78
       -
             opacity: 0.075;

     

       79
       79
       -
           }

     

       80
       80
       -
           98% {

     

       81
       81
       -
             opacity: 0.075;

     

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

     

       70
       70
       +
               :root {

     

       71
       71
       +
                   --background: #0a0a0a;

     

       72
       72
       +
                   --foreground: #ededed;

     

       73
       73
       +
               }

     

       82
       74
        
           }

     

       83
       83
       -
           100% {

     

       84
       84
       -
             opacity: 0;

     

       85
       85
       -
             transform: translateX(-4000px);

     

       86
       86
       -
           }

     

       87
       87
       -
         }

     

       88
       75
        
       

     

       89
       89
       -
         @keyframes fadeIn {

     

       90
       90
       -
           0% {

     

       91
       91
       -
             opacity: 0;

     

       76
       76
       +
           body {

     

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

     

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

     

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

     

       92
       80
        
           }

     

       93
       93
       -
           100% {

     

       94
       94
       -
             opacity: 1;

     

       81
       81
       +
       

     

       82
       82
       +
           @keyframes marquee {

     

       83
       83
       +
               0% {

     

       84
       84
       +
                   opacity: 0;

     

       85
       85
       +
                   transform: translateX(0px);

     

       86
       86
       +
               }

     

       87
       87
       +
               2% {

     

       88
       88
       +
                   opacity: 0.075;

     

       89
       89
       +
               }

     

       90
       90
       +
               98% {

     

       91
       91
       +
                   opacity: 0.075;

     

       92
       92
       +
               }

     

       93
       93
       +
               100% {

     

       94
       94
       +
                   opacity: 0;

     

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

     

       96
       96
       +
               }

     

       95
       97
        
           }

     

       96
       96
       -
         }

     

       97
       98
        
       

     

       98
       98
       -
         @keyframes fadeOut {

     

       99
       99
       -
           0% {

     

       100
       100
       -
             opacity: 1;

     

       99
       99
       +
           @keyframes fadeIn {

     

       100
       100
       +
               0% {

     

       101
       101
       +
                   opacity: 0;

     

       102
       102
       +
               }

     

       103
       103
       +
               100% {

     

       104
       104
       +
                   opacity: 1;

     

       105
       105
       +
               }

     

       101
       106
        
           }

     

       102
       102
       -
           100% {

     

       103
       103
       -
             opacity: 0;

     

       107
       107
       +
       

     

       108
       108
       +
           @keyframes fadeOut {

     

       109
       109
       +
               0% {

     

       110
       110
       +
                   opacity: 1;

     

       111
       111
       +
               }

     

       112
       112
       +
               100% {

     

       113
       113
       +
                   opacity: 0;

     

       114
       114
       +
               }

     

       104
       115
        
           }

     

       105
       105
       -
         }

     

       106
       116
        
       

     

       107
       107
       -
         .animate-marquee {

     

       108
       108
       -
           animation: marquee 30s linear infinite;

     

       109
       109
       -
           font-size: 100vh;

     

       110
       110
       -
           line-height: 0.8;

     

       111
       111
       -
           height: 100vh;

     

       112
       112
       -
           display: flex;

     

       113
       113
       -
           align-items: center;

     

       114
       114
       -
         }

     

       117
       117
       +
           .animate-marquee {

     

       118
       118
       +
               animation: marquee 30s linear infinite;

     

       119
       119
       +
               font-size: 100vh;

     

       120
       120
       +
               line-height: 0.8;

     

       121
       121
       +
               height: 100vh;

     

       122
       122
       +
               display: flex;

     

       123
       123
       +
               align-items: center;

     

       124
       124
       +
           }

     

       115
       125
        
       

     

       116
       116
       -
         .animate-fade-in {

     

       117
       117
       -
           animation: fadeIn 0.3s ease-in-out forwards;

     

       118
       118
       -
         }

     

       126
       126
       +
           .animate-fade-in {

     

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

     

       128
       128
       +
           }

     

       119
       129
        
       

     

       120
       120
       -
         .animate-fade-out {

     

       121
       121
       -
           animation: fadeOut 0.3s ease-in-out forwards;

     

       122
       122
       -
         }

     

       130
       130
       +
           .animate-fade-out {

     

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

     

       132
       132
       +
           }

     

       123
       133
        
       }

     

       124
       134
        
       

     

       125
       135
        
       .diagonal-pattern {

     

       126
       126
       -
         background-color: transparent;

     

       127
       127
       -
         background: repeating-linear-gradient(

     

       128
       128
       -
           -45deg,

     

       129
       129
       -
           #000000,

     

       130
       130
       -
           #000000 4px,

     

       131
       131
       -
           transparent 4px,

     

       132
       132
       -
           transparent 10px

     

       133
       133
       -
         );

     

       136
       136
       +
           background-color: transparent;

     

       137
       137
       +
           background: repeating-linear-gradient(

     

       138
       138
       +
               -45deg,

     

       139
       139
       +
               #000000,

     

       140
       140
       +
               #000000 4px,

     

       141
       141
       +
               transparent 4px,

     

       142
       142
       +
               transparent 10px

     

       143
       143
       +
           );

     

       134
       144
        
       }

     

       135
       145
        
       

     

       136
       146
        
       @media (prefers-color-scheme: dark) {

     

       137
       137
       -
         .diagonal-pattern {

     

       138
       138
       -
           background: repeating-linear-gradient(

     

       139
       139
       -
             -45deg,

     

       140
       140
       -
             #ffffff,

     

       141
       141
       -
             #ffffff 4px,

     

       142
       142
       -
             transparent 4px,

     

       143
       143
       -
             transparent 10px

     

       144
       144
       -
           );

     

       145
       145
       -
         }

     

       147
       147
       +
           .diagonal-pattern {

     

       148
       148
       +
               background: repeating-linear-gradient(

     

       149
       149
       +
                   -45deg,

     

       150
       150
       +
                   #ffffff,

     

       151
       151
       +
                   #ffffff 4px,

     

       152
       152
       +
                   transparent 4px,

     

       153
       153
       +
                   transparent 10px

     

       154
       154
       +
               );

     

       155
       155
       +
           }

     

       146
       156
        
       }

Compare changes