Add mirror credentials section to API page

src/routes/about.page.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 
 import Header from '../utils/jsx/header.tsx';
+import Section from '../utils/jsx/section.tsx';
 import sponsors from '../utils/sponsors.ts';
 import theme from '../utils/theme.ts';
 
@@ -44,43 +45,6 @@ const styles = {
             font-weight: ${theme.font.large.weight};
         }
     `,
-    heading: css`
-        font-size: ${theme.font.large.size};
-        font-weight: ${theme.font.large.weight};
-        display: flex;
-        align-items: center;
-        gap: ${theme.spacing(2)};
-        margin: 0;
-
-        &::after {
-            content: '';
-            flex-grow: 1;
-            height: ${theme.spacing(0.125)};
-            background: ${theme.text.primary};
-            margin: ${theme.spacing(0.25, 0, 0)};
-            opacity: 0.125;
-        }
-    `,
-    section: css`
-        margin: ${theme.spacing(4, 0, 0)};
-
-        p {
-            color: ${theme.text.secondary};
-            font-size: ${theme.font.body.size};
-            font-weight: ${theme.font.body.weight};
-            margin: ${theme.spacing(2, 0, 0)};
-
-            a {
-                color: ${theme.text.brand};
-                text-decoration: underline;
-
-                &:hover,
-                &:focus {
-                    text-decoration: none;
-                }
-            }
-        }
-    `,
     split: css`
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -313,11 +277,7 @@ export default () => {
                 </ul>
             </Header>
 
-            <div className={styles.section}>
-                <h2 className={styles.heading} id="what-is-cdnjs">
-                    What is cdnjs?
-                </h2>
-
+            <Section id="what-is-cdnjs" title="What is cdnjs?">
                 <div className={styles.split}>
                     <div>
                         <p>
@@ -359,13 +319,9 @@ export default () => {
                         </p>
                     </div>
                 </div>
-            </div>
-
-            <div className={styles.section}>
-                <h2 className={styles.heading} id="adding-a-library">
-                    Adding a library
-                </h2>
+            </Section>
 
+            <Section id="adding-a-library" title="Adding a library">
                 <div className={styles.split}>
                     <div>
                         <p>
@@ -406,13 +362,9 @@ export default () => {
                         </pre>
                     </div>
                 </div>
-            </div>
-
-            <div className={styles.section}>
-                <h2 className={styles.heading} id="team">
-                    Team
-                </h2>
+            </Section>
 
+            <Section id="team" title="Team">
                 <div className={styles.team}>
                     <p>Maintained by</p>
                     <div />
@@ -469,13 +421,9 @@ export default () => {
                         </li>
                     </ul>
                 </div>
-            </div>
-
-            <div className={styles.section}>
-                <h2 className={styles.heading} id="sponsors">
-                    Sponsors
-                </h2>
+            </Section>
 
+            <Section id="sponsors" title="Sponsors">
                 <p>
                     cdnjs is free to use because of the generosity of these
                     organisations. Their support covers infrastructure, tooling,
@@ -501,7 +449,7 @@ export default () => {
                         </li>
                     ))}
                 </ul>
-            </div>
+            </Section>
         </div>
     );
 };

src/routes/api.page.tsx

@@ -2,11 +2,18 @@ import { css } from '@emotion/css';
 
 import Header from '../utils/jsx/header.tsx';
 import Swagger from '../utils/jsx/islands/swagger.tsx';
+import Section from '../utils/jsx/section.tsx';
 import theme from '../utils/theme.ts';
 
 import type { OpenApiResponse } from './api.schema.ts';
 
 const styles = {
+    container: css`
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: ${theme.spacing(0, 0, 2)};
+    `,
     header: css`
         display: flex;
         align-items: center;
@@ -45,7 +52,7 @@ const styles = {
  */
 export default ({ data }: { data: OpenApiResponse }) => {
     return (
-        <>
+        <div className={styles.container}>
             <Header
                 title={
                     <>
@@ -62,6 +69,18 @@ export default ({ data }: { data: OpenApiResponse }) => {
             </Header>
 
             <Swagger spec={data} />
-        </>
+
+            <Section id="operating-a-mirror" title="Operating a mirror?">
+                <p>
+                    If you run a mirror of cdnjs and would like read-only S3
+                    credentials to our Cloudflare R2 bucket for faster syncing,
+                    please open an issue in the{' '}
+                    <a href="https://github.com/cdnjs/cdnjs" rel="noopener">
+                        cdnjs/cdnjs repository
+                    </a>{' '}
+                    and we'll be happy to help.
+                </p>
+            </Section>
+        </div>
     );
 };

src/utils/jsx/islands/swagger.tsx

@@ -6,6 +6,7 @@ import swaggerStyles from 'swagger-ui-react/swagger-ui.css';
 
 import theme from '../../theme.ts';
 import createIsland from '../island.tsx';
+import { styles as sectionStyles } from '../section.tsx';
 
 const mixins = {
     pre: css`
@@ -43,7 +44,9 @@ const mixins = {
 
 const styles = {
     container: css`
-        margin: ${theme.spacing(2, 0, 0)};
+        position: relative;
+        min-height: ${theme.spacing(5)};
+        margin: ${theme.spacing(2, 0, -2)};
 
         .swagger-ui {
             pre {
@@ -235,19 +238,16 @@ const styles = {
         }
     `,
     header: css`
-        display: flex;
-        align-items: center;
-        gap: ${theme.spacing(1)};
-        font-size: ${theme.font.large.size};
-        font-weight: bold;
-        padding: ${theme.spacing(1.25, 2, 1.25, 1.25)};
+        ${sectionStyles.heading};
+        padding: ${theme.spacing(1.25, 2, 1.25, 0)};
         margin: 0 0 ${theme.spacing(0.625)};
         cursor: pointer;
         color: inherit;
 
         > svg:last-child {
             margin-left: auto;
             flex-shrink: 0;
+            order: 1;
         }
     `,
     path: css`
@@ -665,12 +665,12 @@ const Swagger = ({ spec }: { spec: object }) => {
                     tryItOutEnabled
                     displayRequestDuration
                 />
+                {loading && (
+                    <div className={styles.loader}>
+                        Loading OpenAPI specification...
+                    </div>
+                )}
             </div>
-            {loading && (
-                <div className={styles.loader}>
-                    Loading OpenAPI specification...
-                </div>
-            )}
         </>
     );
 };

src/utils/jsx/section.tsx

@@ -0,0 +1,70 @@
+import { css } from '@emotion/css';
+import type { ReactNode } from 'react';
+
+import theme from '../theme.ts';
+
+export const styles = {
+    section: css`
+        margin: ${theme.spacing(4, 0, 0)};
+
+        p {
+            color: ${theme.text.secondary};
+            font-size: ${theme.font.body.size};
+            font-weight: ${theme.font.body.weight};
+            margin: ${theme.spacing(2, 0, 0)};
+
+            a {
+                color: ${theme.text.brand};
+                text-decoration: underline;
+
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                }
+            }
+        }
+    `,
+    heading: css`
+        font-size: ${theme.font.large.size};
+        font-weight: ${theme.font.large.weight};
+        display: flex;
+        align-items: center;
+        gap: ${theme.spacing(2)};
+        margin: 0;
+
+        &::after {
+            content: '';
+            flex-grow: 1;
+            height: ${theme.spacing(0.125)};
+            background: ${theme.text.primary};
+            margin: ${theme.spacing(0.25, 0, 0)};
+            opacity: 0.125;
+        }
+    `,
+};
+
+/**
+ * Styled section component with heading and underline.
+ *
+ * @param props Section props.
+ * @param props.id Optional ID for the heading.
+ * @param props.title Section title.
+ * @param props.children Section content.
+ */
+export default ({
+    id,
+    title,
+    children,
+}: {
+    id?: string;
+    title: string;
+    children: ReactNode;
+}) => (
+    <div className={styles.section}>
+        <h2 className={styles.heading} id={id}>
+            {title}
+        </h2>
+
+        {children}
+    </div>
+);