Add styled JSX banner to layout

MattIPv4 · MattIPv4 · commit 694ffd01dc87 · 2026-04-06T01:23:17.000+01:00
diff --git a/src/utils/jsx/banner.tsx b/src/utils/jsx/banner.tsx
@@ -0,0 +1,95 @@
+import { css, cx } from 'hono/css';
+
+import theme from '../theme.ts';
+
+const styles = {
+    banner: css`
+        color: ${theme.text.inverted};
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        position: relative;
+        isolation: isolate;
+        padding-top: ${theme.spacing(1)};
+        padding-bottom: ${theme.spacing(1)};
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 100vw;
+            left: 50%;
+            transform: translateX(-50%);
+            background: ${theme.background.brand};
+            top: 0;
+            bottom: 0;
+            z-index: -1;
+        }
+    `,
+    intro: css`
+        border-right: ${theme.spacing(0.25)} solid currentColor;
+        margin: 0 ${theme.spacing(1)} 0 0;
+        padding: 0 ${theme.spacing(1)} 0 0;
+        font-size: ${theme.font.large.size};
+        font-weight: ${theme.font.large.weight};
+    `,
+    text: css`
+        margin: 0;
+    `,
+    link: css`
+        color: currentColor;
+        text-decoration: underline;
+
+        &:hover {
+            text-decoration: none;
+        }
+    `,
+};
+
+/**
+ * Standard cdnjs HTML layout for the page pre-footer banner.
+ *
+ * @param props Component props.
+ * @param props.class Optional additional class name(s) to apply to the banner.
+ */
+export default ({ class: className }: { class?: string | Promise<string> }) => (
+    <div class={cx(styles.banner, className)}>
+        <p class={styles.intro}>Help support cdnjs</p>
+        <p class={styles.text}>
+            You can{' '}
+            <a
+                href="https://github.com/cdnjs/packages/issues"
+                rel="noopener"
+                class={styles.link}
+            >
+                contribute on GitHub
+            </a>{' '}
+            to get involved with cdnjs! Or, help fund the maintenance of cdnjs
+            via{' '}
+            <a
+                href="https://github.com/cdnjs/packages?sponsor"
+                rel="noopener"
+                class={styles.link}
+            >
+                GitHub Sponsors
+            </a>
+            ,{' '}
+            <a
+                href="https://opencollective.com/cdnjs"
+                rel="noopener"
+                class={styles.link}
+            >
+                Open Collective
+            </a>
+            , or{' '}
+            <a
+                href="https://www.patreon.com/cdnjs"
+                rel="noopener"
+                class={styles.link}
+            >
+                Patreon
+            </a>
+            .
+        </p>
+    </div>
+);
diff --git a/src/utils/jsx/layout.tsx b/src/utils/jsx/layout.tsx
@@ -3,13 +3,11 @@ import type { Child } from 'hono/jsx';
 
 import theme from '../theme.ts';
 
+import Banner from './banner.tsx';
 import Footer from './footer.tsx';
 
 const styles = {
     body: css`
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
         font-size: ${theme.font.body.size};
         font-weight: ${theme.font.body.weight};
         overflow-x: hidden;
@@ -19,7 +17,12 @@ const styles = {
         color: ${theme.text.primary};
     `,
     main: css`
-        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    `,
+    content: css`
+        flex-grow: 1;
     `,
     container: css`
         margin: 0 auto;
@@ -57,7 +60,12 @@ export default ({ children }: { children?: Child }) => (
             />
         </head>
         <body class={cx(styles.body, styles.background)}>
-            <main class={cx(styles.main, styles.container)}>{children}</main>
+            <main class={styles.main}>
+                <div class={cx(styles.content, styles.container)}>
+                    {children}
+                </div>
+                <Banner class={styles.container} />
+            </main>
             <Footer class={styles.container} />
             <script
                 defer
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -4,18 +4,24 @@ const breakpoint = (value: number) =>
 export default {
     text: {
         primary: '#ebebeb',
+        inverted: '#141515',
         secondary: '#a6a6a6',
         brand: '#d9643a',
     },
     background: {
         body: '#454647',
+        brand: '#d9643a',
         footer: '#242525',
     },
     spacing: (value: number) => `${value * 8}px`,
     breakpoints: {
         medium: breakpoint(96),
     },
     font: {
+        large: {
+            size: '1.25rem',
+            weight: 400,
+        },
         body: {
             size: '1rem',
             weight: 400,
