Skip to content

Commit a4bc293

Browse files
committed
fix: remove third-party cdns
The theme and its defaults were pulling several assets off-origin: - Zensical 0.0.35 added a GLightbox extension that lazy-loads glightbox.min.js and glightbox.min.css from unpkg.com whenever window.GLightbox is undefined (pp() in the theme bundle). - The theme unconditionally injects a <link> to fonts.googleapis.com and a preconnect to fonts.gstatic.com when [project.theme].font is not disabled. - CI ran `pip install zensical` unpinned, so upgrades like 0.0.34 to 0.0.35 silently introduced new off-origin loads without a review signal. Changes: - Add scripts/vendor_glightbox.py and scripts/vendor_glightbox.toml, mirroring the existing Mermaid vendoring. The script downloads the pinned glightbox build from cdn.jsdelivr.net and verifies SHA-256 for both the JS and CSS. - Vendor glightbox@3.3.1 into docs/assets/javascripts/glightbox.min.js and docs/assets/stylesheets/glightbox.min.css. Loading the UMD via extra_javascript defines window.GLightbox before the theme checks for it, short-circuiting the unpkg fetch. The CSS ships via extra_css. - Disable the theme's default Google Fonts by setting `font = false` in [project.theme]. The site falls back to the system font stack already wired into the theme CSS. - Pin zensical==0.0.40 in .github/workflows/docs.yml with a comment warning reviewers to audit for new unbundled js/css before bumping. - Extend .gitattributes so docs/assets/stylesheets/** is binary, symmetric with the existing docs/assets/javascripts/** rule. - Add a "Verify vendored GLightbox" step to the docs workflow so drift between the committed files and the pinned SHA-256 values fails CI. - Document the new vendored dependency and its upgrade procedure in CONTRIBUTING.md, next to the existing Mermaid entry.
1 parent 032bdb2 commit a4bc293

8 files changed

Lines changed: 355 additions & 24 deletions

File tree

.gitattributes

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
# Vendored third-party JavaScript under docs/assets/javascripts/ is treated
2-
# as binary so PR diffs stay readable. See CONTRIBUTING.md for the convention.
1+
# Vendored third-party assets under docs/assets/ are treated as binary so
2+
# PR diffs stay readable. See CONTRIBUTING.md for the convention.
33
docs/assets/javascripts/** binary
4+
docs/assets/stylesheets/** binary

.github/workflows/docs.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,14 @@ jobs:
2626
python-version: 3.x
2727

2828
- name: Install dependencies
29-
run: pip install zensical
29+
# don't bump this without checking if there are new unbundled js/css in the theme
30+
run: pip install zensical==0.0.40
3031

3132
- name: Verify vendored Mermaid
3233
run: python3 scripts/vendor_mermaid.py --check
34+
35+
- name: Verify vendored GLightbox
36+
run: python3 scripts/vendor_glightbox.py --check
3337

3438
- name: Build documentation
3539
run: zensical build --clean

CONTRIBUTING.md

Lines changed: 67 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,21 @@ zensical build --clean
2424

2525
## Vendored dependencies
2626

27-
The file `docs/assets/javascripts/mermaid.tiny.js` is a pinned copy of the
28-
`@mermaid-js/tiny` UMD build. We self-host it because the Content Security
29-
Policy on `docs.aws.amazon.com` blocks Zensical's default CDN load of Mermaid
30-
from `unpkg.com`.
27+
The Zensical theme lazy-loads a few third-party assets (Mermaid for diagrams,
28+
GLightbox for image zoom) from `unpkg.com` by default.
3129

32-
Mermaid's tiny build supports flowcharts and sequence, state, class, and
33-
entity-relationship diagrams. It does not support mindmap or architecture
34-
diagrams, or KaTeX math rendering.
30+
For the Content Security Policy on `docs.aws.amazon.com`, we self-host pinned
31+
copies under `docs/assets/`. Each vendored asset exposes a `window.*` global
32+
(`window.mermaid`, `window.GLightbox`) that the theme's lazy-loaders check
33+
before hitting the CDN, so preloading our local copy short-circuits the
34+
unpkg fetch.
35+
36+
### Mermaid
37+
38+
`docs/assets/javascripts/mermaid.tiny.js` is a pinned copy of the
39+
`@mermaid-js/tiny` UMD build. The tiny build supports flowcharts and
40+
sequence, state, class, and entity-relationship diagrams. It does not
41+
support mindmap or architecture diagrams, or KaTeX math rendering.
3542

3643
Upgrade procedure:
3744

@@ -51,23 +58,63 @@ zensical serve
5158
# together in the same commit.
5259
```
5360

54-
CI verifies the committed file matches the pinned SHA-256. If you hand-edit the
55-
vendored file or forget to update the SHA on upgrade, the build fails.
61+
### GLightbox
5662

57-
### Directory convention
63+
`docs/assets/javascripts/glightbox.min.js` and
64+
`docs/assets/stylesheets/glightbox.min.css` are pinned copies of the
65+
`glightbox` npm package. Zensical's GLightbox Markdown extension wraps
66+
images in `<a class="glightbox">` and, when a user opens one, calls a
67+
lazy-loader that pulls the JS and CSS from unpkg unless
68+
`window.GLightbox` is already defined. We register the vendored copies
69+
via `extra_javascript` and `extra_css` in `zensical.toml` so the
70+
lazy-loader short-circuits and no unpkg request is made.
71+
72+
Upgrade procedure:
73+
74+
```bash
75+
# 1. Show the pinned version and the latest on npm
76+
python3 scripts/vendor_glightbox.py --latest
77+
78+
# 2. Edit scripts/vendor_glightbox.toml. Bump `version`. Run the script.
79+
# It will fail and print the new SHA-256s for both files. Paste those
80+
# values into `sha256_js` and `sha256_css` in the TOML, then re-run.
81+
python3 scripts/vendor_glightbox.py
5882

59-
JavaScript under `docs/` is split by ownership:
83+
# 3. Preview locally and open a page with an image. Click the image: the
84+
# lightbox should open and DevTools Network should show no unpkg.com
85+
# requests.
86+
zensical serve
6087

61-
- `docs/assets/javascripts/` holds vendored third-party bundles. Treat these
62-
as read-only outputs of the vendoring scripts under `scripts/`. Do not
63-
hand-edit them. Upgrade by bumping the version pin in the corresponding
64-
script and re-running it. Files in this directory are marked `binary` in
65-
`.gitattributes` so PR diffs do not try to render minified code.
66-
- `docs/javascripts/` holds first-party scripts we author and maintain, such
67-
as `mermaid-init.js`, which initializes the vendored Mermaid build.
88+
# 4. Commit scripts/vendor_glightbox.toml together with
89+
# docs/assets/javascripts/glightbox.min.js and
90+
# docs/assets/stylesheets/glightbox.min.css.
91+
```
92+
93+
CI verifies the committed files match the pinned SHA-256 values for both
94+
Mermaid and GLightbox. If you hand-edit a vendored file or forget to update
95+
the SHA on upgrade, the build fails.
96+
97+
### Directory convention
6898

69-
Both directories are served from the same origin and register through
70-
`extra_javascript` in `zensical.toml`.
99+
Vendored third-party assets live under `docs/assets/` and are owned by the
100+
scripts under `scripts/`:
101+
102+
- `docs/assets/javascripts/` holds vendored JS (`mermaid.tiny.js`,
103+
`glightbox.min.js`).
104+
- `docs/assets/stylesheets/` holds vendored CSS alongside our own
105+
`extra.css`. The vendored `glightbox.min.css` lives here.
106+
107+
Treat all vendored files as read-only outputs of the vendoring scripts.
108+
Do not hand-edit them. Upgrade by bumping the version pin in the
109+
corresponding script's TOML and re-running the script. Vendored files are
110+
marked `binary` in `.gitattributes` so PR diffs do not try to render
111+
minified code.
112+
113+
First-party scripts we author and maintain live under `docs/javascripts/`,
114+
for example `mermaid-init.js`, which initializes the vendored Mermaid
115+
build. Both `docs/assets/javascripts/` and `docs/javascripts/` are served
116+
from the same origin and register through `extra_javascript` in
117+
`zensical.toml`.
71118

72119
## Formatting
73120

docs/assets/javascripts/glightbox.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/assets/stylesheets/glightbox.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)