Add styled JSX footer to layout

src/utils/jsx/footer.tsx

@@ -0,0 +1,157 @@
+import { css, cx } from 'hono/css';
+
+import theme from '../theme.ts';
+
+const styles = {
+    outer: css`
+        background: ${theme.background.footer};
+    `,
+    inner: css`
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: ${theme.spacing(4)};
+    `,
+    list: css`
+        flex-grow: 1;
+    `,
+    title: css`
+        color: ${theme.text.secondary};
+        text-transform: uppercase;
+        margin: 0 0 ${theme.spacing(2)};
+
+        &:not(:first-of-type) {
+            margin-top: ${theme.spacing(4)};
+        }
+    `,
+    item: css`
+        margin: 0 0 ${theme.spacing(1)};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    `,
+    link: css`
+        color: ${theme.text.primary};
+        text-decoration: none;
+
+        &:hover {
+            color: ${theme.text.brand};
+            text-decoration: underline;
+        }
+    `,
+};
+
+interface Section {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+
+const sections: Section[][] = [
+    [
+        {
+            title: 'About',
+            links: [
+                { label: 'About Us', href: 'https://cdnjs.com/about' },
+                { label: 'Swag Store', href: 'https://swag.cdnjs.com' },
+                {
+                    label: 'Community Discussions',
+                    href: 'https://github.com/cdnjs/cdnjs/discussions',
+                },
+                {
+                    label: 'OpenCollective',
+                    href: 'https://opencollective.com/cdnjs',
+                },
+                { label: 'Patreon', href: 'https://www.patreon.com/cdnjs' },
+                {
+                    label: 'CDN Network Map',
+                    href: 'https://www.cloudflare.com/network',
+                },
+            ],
+        },
+    ],
+    [
+        {
+            title: 'Libraries',
+            links: [
+                {
+                    label: 'Search Libraries',
+                    href: 'https://cdnjs.com/libraries',
+                },
+                { label: 'API Documentation', href: 'https://cdnjs.com/api' },
+            ],
+        },
+        {
+            title: 'Status',
+            links: [
+                { label: 'Status Page', href: 'https://status.cdnjs.com' },
+                {
+                    label: 'cdnjsStatus on Twitter',
+                    href: 'https://twitter.com/cdnjsStatus',
+                },
+            ],
+        },
+    ],
+    [
+        {
+            title: 'Sponsors',
+            links: [],
+        },
+    ],
+];
+
+/**
+ * Standard cdnjs HTML layout for the page footer.
+ *
+ * @param props Component props.
+ * @param props.class Optional additional class name(s) to apply to the footer's inner container.
+ */
+export default ({ class: className }: { class?: string | Promise<string> }) => (
+    <footer class={styles.outer}>
+        <div class={cx(styles.inner, className)}>
+            <dl class={styles.list}>
+                <dt>
+                    <a href="https://cdnjs.com" rel="noopener">
+                        cdnjs
+                    </a>
+                </dt>
+                <dd class={styles.item}>
+                    <span>&copy; {new Date().getFullYear()} cdnjs.</span>
+                    <a
+                        href="https://github.com/cdnjs"
+                        rel="noopener"
+                        class={styles.link}
+                    >
+                        GitHub
+                    </a>
+                </dd>
+            </dl>
+
+            {sections.map((group, i) => (
+                <dl key={i} class={styles.list}>
+                    {group.map((section) => (
+                        <>
+                            <dt key={section.title} class={styles.title}>
+                                {section.title}
+                            </dt>
+                            {section.links.map((link) => (
+                                <dd key={link.href} class={styles.item}>
+                                    <a
+                                        href={link.href}
+                                        rel="noopener"
+                                        class={styles.link}
+                                    >
+                                        {link.label}
+                                    </a>
+                                </dd>
+                            ))}
+                        </>
+                    ))}
+                </dl>
+            ))}
+        </div>
+    </footer>
+);

src/utils/jsx/json.tsx

@@ -1,3 +1,16 @@
+import { css, cx } from 'hono/css';
+
+import theme from '../theme.ts';
+
+const styles = {
+    pre: css`
+        margin: 0;
+    `,
+    code: css`
+        border-radius: ${theme.radius};
+    `,
+};
+
 /**
  * Standard cdnjs HTML layout for pretty-printing JSON data.
  *
@@ -14,8 +27,10 @@ export default ({ json }: { json: unknown }) => (
             referrerpolicy="no-referrer"
         />
 
-        <pre>
-            <code class="language-json">{JSON.stringify(json, null, 2)}</code>
+        <pre class={styles.pre}>
+            <code class={cx(styles.code, 'language-json')}>
+                {JSON.stringify(json, null, 2)}
+            </code>
         </pre>
 
         <script

src/utils/jsx/layout.tsx

@@ -1,22 +1,61 @@
+import { Style, css, cx } from 'hono/css';
 import type { Child } from 'hono/jsx';
 
+import theme from '../theme.ts';
+
+import Footer from './footer.tsx';
+
+const styles = {
+    body: css`
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    `,
+    background: css`
+        background: ${theme.background.body};
+        color: ${theme.text.primary};
+    `,
+    main: css`
+        flex: 1;
+    `,
+    container: css`
+        margin: 0 auto;
+        width: 100%;
+        max-width: ${theme.spacing(192)};
+        padding: ${theme.spacing(2)};
+
+        @media screen and (max-width: ${theme.spacing(96)}) {
+            padding: ${theme.spacing(1)};
+        }
+    `,
+};
+
 /**
  * Standard cdnjs HTML layout.
  *
  * @param props Component props.
  * @param props.children Content to be included in the body of the page.
  */
 export default ({ children }: { children?: Child }) => (
-    <html>
+    <html lang="en" class={styles.background}>
         <head>
+            <link
+                rel="stylesheet"
+                href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"
+                integrity="sha512-q6WgHqiHlKyOqslT/lgBgodhd03Wp4BEqKeW6nNtlOY4quzyG3VoQKFrieaCeSnuVseNKRGpGeDU3qPmabCANg=="
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+            />
+            <Style />
             <meta name="robots" content="noindex" />
         </head>
-        <body>
-            {children}
+        <body class={cx(styles.body, styles.background)}>
+            <main class={cx(styles.main, styles.container)}>{children}</main>
+            <Footer class={styles.container} />
             <script
                 defer
                 dangerouslySetInnerHTML={{
-                    __html: 'console.log("%cThanks for using cdnjs! 😊", "font-size: 5em; font-family: ui-sans-serif, system-ui, sans-serif; color: #e95420;");',
+                    __html: 'console.log("%cThanks for using cdnjs! 😊", "font-size: 5em; color: #e95420;");',
                 }}
             />
         </body>

src/utils/theme.ts

@@ -0,0 +1,13 @@
+export default {
+    text: {
+        primary: '#ebebeb',
+        secondary: '#a6a6a6',
+        brand: '#d9643a',
+    },
+    background: {
+        body: '#454647',
+        footer: '#242525',
+    },
+    spacing: (value: number) => `${value * 8}px`,
+    radius: '4px',
+};