Skip to content

ci: run editorconfig-checker #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dangreen merged 3 commits into from
Oct 19, 2026
Merged

ci: run editorconfig-checker #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6360ad
style(website): write multi-line CSS comments in JSDoc style
dangreen Oct 18, 2026
d1cb583
style(website): move markdown indentation to even columns
dangreen Oct 18, 2026
da706bf
ci: run editorconfig-checker
dangreen Oct 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .github/workflows/checks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
36 changes: 18 additions & 18 deletions website/src/content/docs/getting-started/complete-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,30 +299,30 @@ export function Hero() {

<Steps>

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.

<Tabs syncKey="bundler">
<TabItem label="Vite">
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.
</TabItem>
<TabItem label="Webpack and Rspack">
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`.
</TabItem>
</Tabs>
<Tabs syncKey="bundler">
<TabItem label="Vite">
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.
</TabItem>
<TabItem label="Webpack and Rspack">
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`.
</TabItem>
</Tabs>

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 `<picture>` with one `<source>` per format and an `<img>` with a `srcset` of the fallback format, or - without the components - an `<img>` whose `srcset` lists every width.
3. **Check the rendered markup**: a `<picture>` with one `<source>` per format and an `<img>` with a `srcset` of the fallback format, or - without the components - an `<img>` 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.

</Steps>
24 changes: 12 additions & 12 deletions website/src/content/docs/proxies/cloudflare.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,25 +148,25 @@ This is the part that breaks first, and none of it lives in the code.

<Steps>

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'
})
```

</Steps>

Expand Down
52 changes: 33 additions & 19 deletions website/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand All @@ -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);
Expand Down Expand Up @@ -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%);
Expand All @@ -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);
Expand All @@ -150,27 +158,33 @@
}

.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 {
background-color: var(--sl-color-accent);
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;
}
Expand Down
Loading