From 834ac6633ceae7eef048d5b710b893e560e98467 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Wed, 26 Aug 2026 18:48:24 +0100 Subject: [PATCH 1/3] Abstract section component from about page --- src/routes/about.page.tsx | 70 +++++---------------------------------- src/utils/jsx/section.tsx | 70 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 61 deletions(-) create mode 100644 src/utils/jsx/section.tsx diff --git a/src/routes/about.page.tsx b/src/routes/about.page.tsx index f24a043..e748271 100644 --- a/src/routes/about.page.tsx +++ b/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 () => { -
-

- What is cdnjs? -

- +

@@ -359,13 +319,9 @@ export default () => {

-
- -
-

- Adding a library -

+ +

@@ -406,13 +362,9 @@ export default () => {

-
- -
-

- Team -

+ +

Maintained by

@@ -469,13 +421,9 @@ export default () => {
-
- -
-

- Sponsors -

+
+

cdnjs is free to use because of the generosity of these organisations. Their support covers infrastructure, tooling, @@ -501,7 +449,7 @@ export default () => { ))} -

+ ); }; diff --git a/src/utils/jsx/section.tsx b/src/utils/jsx/section.tsx new file mode 100644 index 0000000..52a5e04 --- /dev/null +++ b/src/utils/jsx/section.tsx @@ -0,0 +1,70 @@ +import { css } from '@emotion/css'; +import type { ReactNode } from 'react'; + +import theme from '../theme.ts'; + +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; +}) => ( +
+

+ {title} +

+ + {children} +
+); From 81abc0191e543dc1f0e0bb540796b66f7a0a1598 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Wed, 26 Aug 2026 18:52:38 +0100 Subject: [PATCH 2/3] Add mirror credentials section to API page --- src/routes/api.page.tsx | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/routes/api.page.tsx b/src/routes/api.page.tsx index c8c6654..020529a 100644 --- a/src/routes/api.page.tsx +++ b/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 ( - <> +
@@ -62,6 +69,18 @@ export default ({ data }: { data: OpenApiResponse }) => {
- + +
+

+ 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{' '} + + cdnjs/cdnjs repository + {' '} + and we'll be happy to help. +

+
+
); }; From 5839d1f4e4141bb95adafb4361f5fadc746041a5 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Wed, 26 Aug 2026 19:05:56 +0100 Subject: [PATCH 3/3] Use section header styles for swagger --- src/utils/jsx/islands/swagger.tsx | 24 ++++++++++++------------ src/utils/jsx/section.tsx | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/utils/jsx/islands/swagger.tsx b/src/utils/jsx/islands/swagger.tsx index 3ff8464..143eb44 100644 --- a/src/utils/jsx/islands/swagger.tsx +++ b/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,12 +238,8 @@ 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; @@ -248,6 +247,7 @@ const styles = { > 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 && ( +
+ Loading OpenAPI specification... +
+ )} - {loading && ( -
- Loading OpenAPI specification... -
- )} ); }; diff --git a/src/utils/jsx/section.tsx b/src/utils/jsx/section.tsx index 52a5e04..cd4999c 100644 --- a/src/utils/jsx/section.tsx +++ b/src/utils/jsx/section.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from 'react'; import theme from '../theme.ts'; -const styles = { +export const styles = { section: css` margin: ${theme.spacing(4, 0, 0)};