diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 969a2f7..f38a37f 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -31,8 +31,10 @@ jobs: steps: - name: Checkout the repository uses: actions/checkout@v7 - - name: Check editorconfig + - name: Install editorconfig-checker uses: editorconfig-checker/action-editorconfig-checker@main + - name: Check editorconfig + run: editorconfig-checker package-json: runs-on: ubuntu-latest name: package.json diff --git a/website/src/content/docs/getting-started/complete-guide.mdx b/website/src/content/docs/getting-started/complete-guide.mdx index df9a3b4..502eac0 100644 --- a/website/src/content/docs/getting-started/complete-guide.mdx +++ b/website/src/content/docs/getting-started/complete-guide.mdx @@ -299,30 +299,30 @@ export function Hero() { -1. **Build the project** and look at the emitted assets: the extra formats and widths have to be there, not just the originals. +1. **Build the project** and look at the emitted assets: the extra formats and widths have to be there, not just the originals. - - - They land in `dist/assets`. The second build is much faster - variants are cached on disk in `node_modules/.vite/srcset`, and the cache is on by default. - - - They land wherever `output.path` points, named by the loader's `name` template. Repeated builds ride the bundler's own persistent cache; the loader's disk cache is off by default and turned on with `cache: true`. - - + + + They land in `dist/assets`. The second build is much faster - variants are cached on disk in `node_modules/.vite/srcset`, and the cache is on by default. + + + They land wherever `output.path` points, named by the loader's `name` template. Repeated builds ride the bundler's own persistent cache; the loader's disk cache is off by default and turned on with `cache: true`. + + -2. **Log the variants** the module carries: +2. **Log the variants** the module carries: - ```ts - import { srcSet } from './photo.jpg' + ```ts + import { srcSet } from './photo.jpg' - console.log(srcSet.length, srcSet.map(variant => variant.id)) - // 6 [ 'jpg1600', 'jpg800', 'webp1600', 'webp800', 'avif1600', 'avif800' ] - ``` + console.log(srcSet.length, srcSet.map(variant => variant.id)) + // 6 [ 'jpg1600', 'jpg800', 'webp1600', 'webp800', 'avif1600', 'avif800' ] + ``` - The count is widths times formats - six for the rule above, here on a 1600px wide source. A `0` means no rule matched the image. + The count is widths times formats - six for the rule above, here on a 1600px wide source. A `0` means no rule matched the image. -3. **Check the rendered markup**: a `` with one `` per format and an `` with a `srcset` of the fallback format, or - without the components - an `` whose `srcset` lists every width. +3. **Check the rendered markup**: a `` with one `` per format and an `` with a `srcset` of the fallback format, or - without the components - an `` whose `srcset` lists every width. -4. **Type-check** with `tsc --noEmit`, so a missing ambient reference does not survive until the next build. +4. **Type-check** with `tsc --noEmit`, so a missing ambient reference does not survive until the next build. diff --git a/website/src/content/docs/proxies/cloudflare.mdx b/website/src/content/docs/proxies/cloudflare.mdx index 61c9634..d448547 100644 --- a/website/src/content/docs/proxies/cloudflare.mdx +++ b/website/src/content/docs/proxies/cloudflare.mdx @@ -148,25 +148,25 @@ This is the part that breaks first, and none of it lives in the code. -1. **Enable transformations on the zone.** +1. **Enable transformations on the zone.** - In the Cloudflare dashboard open the zone, go to **Images** and then **Transformations**, and turn them on. Until then `/cdn-cgi/image/...` is just a 404 path on the site. The urls also have to reach Cloudflare at all: the hostname serving them must be proxied, the orange cloud in DNS. + In the Cloudflare dashboard open the zone, go to **Images** and then **Transformations**, and turn them on. Until then `/cdn-cgi/image/...` is just a 404 path on the site. The urls also have to reach Cloudflare at all: the hostname serving them must be proxied, the orange cloud in DNS. -2. **Allow the external origins.** +2. **Allow the external origins.** - Out of the box a zone transforms only images from itself. Images on another hostname - a headless CMS, an object storage bucket, a separate asset CDN, which is exactly the case this package exists for - are refused until that hostname is listed among the zone's allowed origins in the same Transformations panel, or the zone is set to accept any origin. + Out of the box a zone transforms only images from itself. Images on another hostname - a headless CMS, an object storage bucket, a separate asset CDN, which is exactly the case this package exists for - are refused until that hostname is listed among the zone's allowed origins in the same Transformations panel, or the zone is set to accept any origin. - The alternative is to not have an external origin: serve the images through a path on the zone, with a route or a worker in front of the storage, and hand the adapter a `/media/...` path instead of an absolute url. + The alternative is to not have an external origin: serve the images through a path on the zone, with a route or a worker in front of the storage, and hand the adapter a `/media/...` path instead of an absolute url. -3. **Point the endpoint at the zone.** +3. **Point the endpoint at the zone.** - The default `/cdn-cgi/image` is relative, so it resolves against whatever host serves the page. That is right when the site is on the zone, and wrong everywhere else - a preview deployment on another host, a native app, an email. Give those an absolute endpoint on the zone: + The default `/cdn-cgi/image` is relative, so it resolves against whatever host serves the page. That is right when the site is on the zone, and wrong everywhere else - a preview deployment on another host, a native app, an email. Give those an absolute endpoint on the zone: - ```ts - export const cloudflare = new Cloudflare({ - endpoint: 'https://example.com/cdn-cgi/image' - }) - ``` + ```ts + export const cloudflare = new Cloudflare({ + endpoint: 'https://example.com/cdn-cgi/image' + }) + ``` diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 172b6ec..264d914 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -37,8 +37,10 @@ --sl-color-accent-high: hsl(var(--sl-hue-accent), 95%, 70%); --sl-color-text: var(--sl-color-white); - /* The gold is a surface, never text: it fills the button and underlines - links, while the link token itself stays a readable warm grey. */ + /** + * The gold is a surface, never text: it fills the button and underlines + * links, while the link token itself stays a readable warm grey. + */ --sl-color-text-accent: hsl(38, 10%, 76%); --sl-color-link-underline: hsl(var(--sl-hue-accent), 55%, 48%); --sl-color-link-underline-hover: hsl(var(--sl-hue-accent), 95%, 68%); @@ -57,9 +59,11 @@ & .expressive-code .frame { --code-background: var(--sl-color-bg-nav); - /* Retint Expressive Code's frame chrome (tab, title bar) to the warm theme - so the title tab blends with the code background instead of the stock - near-black GitHub tab. References --code-background so light mode follows. */ + /** + * Retint Expressive Code's frame chrome (tab, title bar) to the warm theme + * so the title tab blends with the code background instead of the stock + * near-black GitHub tab. References --code-background so light mode follows. + */ --ec-frm-edBg: var(--code-background); --ec-frm-edActTabBg: var(--code-background); --ec-frm-trmTtbBg: var(--code-background); @@ -107,9 +111,11 @@ --sl-color-accent: hsl(var(--sl-hue-accent), 97%, 56%); /* Gold accent */ --sl-color-accent-low: hsl(var(--sl-hue-accent), 90%, 88%); - /* The accent is a surface colour: bright gold under dark text. As text on - the paper it would have to drop to ~30% lightness to pass contrast, and - gold that dark is brown - so accented text stays ink instead. */ + /** + * The accent is a surface colour: bright gold under dark text. As text on + * the paper it would have to drop to ~30% lightness to pass contrast, and + * gold that dark is brown - so accented text stays ink instead. + */ --sl-color-text-accent: var(--sl-color-text); --sl-color-link-underline: hsl(38, 100%, 46%); --sl-color-link-underline-hover: hsl(45, 100%, 56%); @@ -136,9 +142,11 @@ } } -/* Option E: the gold is a surface, not a text colour. It fills the primary - button under dark text and underlines links, while the link text itself - keeps the readable graphite of --sl-color-text-accent. */ +/** + * Option E: the gold is a surface, not a text colour. It fills the primary + * button under dark text and underlines links, while the link text itself + * keeps the readable graphite of --sl-color-text-accent. + */ .sl-link-button.primary { background: var(--sl-color-accent); border-color: var(--sl-color-accent); @@ -150,18 +158,22 @@ } .sl-markdown-content a:not(:where(.not-content *)) { - /* The gold underline is the accent, so the link text stays the body text: - `--sl-color-text-accent` also paints the current sidebar item, and a value - dark enough to sit under cream there reads as dimmed grey in a paragraph. */ + /** + * The gold underline is the accent, so the link text stays the body text: + * `--sl-color-text-accent` also paints the current sidebar item, and a value + * dark enough to sit under cream there reads as dimmed grey in a paragraph. + */ color: var(--sl-color-text); text-decoration-color: var(--sl-color-link-underline); text-decoration-thickness: 2px; text-underline-offset: 3px; } -/* Starlight paints the current sidebar item from the link token under - `--sl-color-text-invert`. The accent is a surface in this theme, so the - item takes the bright accent and dark text, like the primary button. */ +/** + * Starlight paints the current sidebar item from the link token under + * `--sl-color-text-invert`. The accent is a surface in this theme, so the + * item takes the bright accent and dark text, like the primary button. + */ nav [aria-current='page'], nav [aria-current='page']:hover, nav [aria-current='page']:focus { @@ -169,8 +181,10 @@ nav [aria-current='page']:focus { color: var(--sl-color-button-text); } -/* The table of contents marks its current entry with the same token, and - there it is text - so it takes weight rather than colour. */ +/** + * The table of contents marks its current entry with the same token, and + * there it is text - so it takes weight rather than colour. + */ starlight-toc a[aria-current='true'] { font-weight: 600; }