Add page for index human output

src/routes/index.page.tsx

@@ -0,0 +1,128 @@
+import { css } from '@emotion/css';
+
+import Grid from '../utils/jsx/grid.tsx';
+import Typeahead from '../utils/jsx/islands/typeahead.tsx';
+import theme from '../utils/theme.ts';
+
+const styles = {
+    background: css`
+        color: ${theme.background.brand};
+        position: absolute;
+        width: 100vw;
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+    `,
+    content: css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: ${theme.spacing(4)};
+        margin: auto;
+        max-width: 100%;
+        background: radial-gradient(
+            ellipse at center,
+            rgb(from ${theme.background.body} r g b / 0.9) 0%,
+            rgb(from ${theme.background.body} r g b / 0) 100%
+        );
+        padding: ${theme.spacing(4, 2)};
+    `,
+    badge: css`
+        display: flex;
+        align-items: center;
+        gap: ${theme.spacing(1.5)};
+        background: rgb(from ${theme.background.brand} r g b / 0.125);
+        border: ${theme.spacing(0.125)} solid
+            rgb(from ${theme.background.brand} r g b / 0.75);
+        border-radius: ${theme.spacing(4)};
+        color: ${theme.text.brand};
+        font-family: ${theme.font.families.mono};
+        font-size: ${theme.font.tiny.size};
+        font-weight: ${theme.font.tiny.weight};
+        line-height: 1;
+        text-transform: uppercase;
+        padding: ${theme.spacing(1, 1.75)};
+        margin: 0;
+
+        &::before {
+            content: ' ';
+            display: block;
+            width: ${theme.spacing(0.75)};
+            height: ${theme.spacing(0.75)};
+            margin: 0 ${theme.spacing(-0.25)};
+            border-radius: 50%;
+            background: ${theme.text.brand};
+            box-shadow: 0 0 ${theme.spacing(0.75)} ${theme.text.brand};
+        }
+    `,
+    title: css`
+        font-family: ${theme.font.families.home};
+        line-height: 1.125;
+        margin: 0;
+
+        &,
+        strong {
+            font-size: ${theme.font.heading.size};
+            font-weight: ${theme.font.heading.weight};
+        }
+
+        strong {
+            color: ${theme.text.brand};
+        }
+    `,
+    prose: css`
+        color: ${theme.text.secondary};
+        line-height: 1.5;
+        margin: 0;
+
+        &,
+        strong {
+            font-size: ${theme.font.small.size};
+            font-weight: ${theme.font.small.weight};
+        }
+
+        strong {
+            color: ${theme.text.primary};
+        }
+    `,
+    search: css`
+        width: ${theme.spacing(80)};
+        max-width: 100%;
+        border-radius: ${theme.radius};
+        box-shadow: 0 0 ${theme.spacing(2)} ${theme.background.footer};
+    `,
+};
+
+/**
+ * / page component.
+ */
+export default () => {
+    return (
+        <>
+            <Grid className={styles.background} />
+
+            <div className={styles.content}>
+                <p className={styles.badge}>Powered by Cloudflare</p>
+
+                <h1 className={styles.title}>
+                    The free CDN for
+                    <br /> <strong>open source libraries.</strong>
+                </h1>
+
+                <p className={styles.prose}>
+                    JavaScript, CSS, and font resources, globally cached on
+                    Cloudflare's network.
+                    <br /> Trusted by <strong>12.5% of all websites</strong>,
+                    serving <strong>250 billion requests per month</strong>.
+                </p>
+
+                <Typeahead className={styles.search} />
+            </div>
+        </>
+    );
+};

src/routes/index.ts

@@ -2,14 +2,24 @@ import type { OpenAPIRegistry } from '@asteasolutions/zod-to-openapi';
 import { env } from 'cloudflare:workers';
 import type { Context, Hono } from 'hono';
 
-import { withCache } from '../utils/respond.ts';
+import respond, { isHuman, withCache } from '../utils/respond.ts';
+
+import IndexPage from './index.page.tsx';
 
 /**
  * Handle GET / requests.
  *
  * @param ctx Request context.
  */
 const handleGet = (ctx: Context) => {
+    // Render a human-readable page
+    if (isHuman(ctx)) {
+        // Set a 6 hour life on this response
+        withCache(ctx, 6 * 60 * 60);
+
+        return respond<undefined>(ctx, undefined, IndexPage);
+    }
+
     // Set a 355 day (same as CDN) life on this response
     // This is also immutable
     withCache(ctx, 355 * 24 * 60 * 60, true);

src/routes/libraries.page.tsx

@@ -33,9 +33,5 @@ export default ({
         throw new Error('Results data is missing required fields');
     }
 
-    return (
-        <>
-            <Libraries initial={{ results: data.results, search }} />
-        </>
-    );
+    return <Libraries initial={{ results: data.results, search }} />;
 };