commit cffda79608030a19be242a28ec437606276ee080 · knotbin.com/blog

+37 -6

routes/index.tsx

···

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

     

       9
       37
        
       export default async function Home() {

     

       10
       38
        
         const posts = await getPosts();

     

       39
       39
       +
         const tagline = getRandomTagline();

     

       11
       40
        
       

     

       12
       41
        
         return (

     

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

     

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

     

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

     

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

     

       17
       17
       -
                   knotbin

     

       18
       18
       -
                 </Title>

     

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

     

       20
       20
       -
                   looking into it

     

       21
       21
       -
                 </span>

     

       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>

     

       22
       53
        
               </div>

     

       23
       54
        
       

     

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

routes/post/[slug].tsx

···

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

     

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

     

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

     

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

     

       10
       11
        
       

     

       11
       12
        
       interface Post {

     

       12
       13
        
         uri: string;

     
···

       145
       146
        
                     />

     

       146
       147
        
                   </div>

     

       147
       148
        
                 </article>

     

       149
       149
       +
                 

     

       148
       150
        
               </main>

     

       149
       151
        
               <Footer />

     

       150
       152
        
             </div>

+2 -1

static/styles.css

···

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

     

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

     

       2
       2
       +
       @import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&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'),

     
···

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

     

       29
       30
        
       

     

       30
       31
        
       /*

     

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