Add SRI hashes to the CDN snippets in the docs (#3086)

docs/content/ui/getting-started/color-modes.mdx

@@ -5,8 +5,8 @@ description: Set up Tabler's light, dark, and auto color modes, and learn the th
 related: [/ui/getting-started/customize, /ui/plugins/theme-base-colors]
 ---
 
-import { site } from '@shared/lib/site.ts';
 import { Code } from 'astro:components';
+import { cdnThemeJsTag } from '@lib/cdn-snippets.ts';
 
 ## Overview
 
@@ -48,7 +48,7 @@ Load the theme script right after the opening `<body>` tag, and do not add `defe
 <Code
   lang="html"
   code={`<body>
-  <script src="${site.cdnUrl}/dist/js/tabler-theme.min.js"></script>
+  ${cdnThemeJsTag()}
   ...
 </body>`}
 />

docs/content/ui/getting-started/installation.mdx

@@ -64,6 +64,8 @@ Put the stylesheet in `<head>` and the script at the end of `<body>`. The file t
 
 That's the whole setup. The CSS covers the layout and components, and the script adds the interactive parts such as dropdowns and modals.
 
+The `integrity` attribute lets the browser check that the file it downloaded is the one Tabler published, and `crossorigin="anonymous"` is what makes that check possible on a CDN. Each hash belongs to one file of one version, so when you move to a newer Tabler, copy the tags from this page again instead of only changing the version number in the URL.
+
 If you'd rather not depend on a CDN, you can download the files and serve them from your own project. The [Download](/ui/getting-started/download) page explains how.
 
 ### Open in your browser

docs/lib/cdn-snippets.ts

@@ -2,15 +2,37 @@
 // re-renders them into the /llms.txt endpoints, and the installation page drops the two tags into
 // a full HTML example.
 import { site } from '@shared/lib/site.ts'
+import sri from '@data/sri.json'
+
+/**
+ * `integrity` and `crossorigin` for a file of the published core package, so the browser can
+ * verify what the CDN sent. The hashes in shared/data/sri.json come from `pnpm run generate:sri`;
+ * until that runs for the current version the tags are rendered without them, rather than with a
+ * hash that would make the browser block the file.
+ */
+const sriAttrs = (file: string): string => {
+  const hash = sri.version === site.version ? (sri.files as Record<string, string>)[file] : undefined
+
+  return hash ? ` integrity="${hash}" crossorigin="anonymous"` : ''
+}
+
+/** `<link>` for one stylesheet of the core package, by its path inside the package. */
+const cdnLinkTag = (file: string): string => `<link rel="stylesheet" href="${site.cdnUrl}/${file}"${sriAttrs(file)} />`
+
+/** `<script>` for one script of the core package, by its path inside the package. */
+const cdnScriptTag = (file: string): string => `<script src="${site.cdnUrl}/${file}"${sriAttrs(file)}></script>`
 
 /** `<link>` for the core stylesheet. */
-export const cdnCssTag = (): string => `<link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler.min.css" />`
+export const cdnCssTag = (): string => cdnLinkTag('dist/css/tabler.min.css')
 
 /** `<script>` for the core bundle. */
-export const cdnJsTag = (): string => `<script src="${site.cdnUrl}/dist/js/tabler.min.js"></script>`
+export const cdnJsTag = (): string => cdnScriptTag('dist/js/tabler.min.js')
+
+/** `<script>` for the color mode script, as shown on the Color modes page. */
+export const cdnThemeJsTag = (): string => cdnScriptTag('dist/js/tabler-theme.min.js')
 
 /** Both core tags, as shown by `<CdnImportPackage />`. */
 export const cdnPackageSnippet = (): string => `${cdnCssTag()}\n${cdnJsTag()}`
 
 /** `<link>` per plugin stylesheet, as shown by `<CdnImportPlugin />`. */
-export const cdnPluginSnippet = (plugins: string[]): string => plugins.map((plugin) => `<link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler-${plugin}.min.css" />`).join('\n')
+export const cdnPluginSnippet = (plugins: string[]): string => plugins.map((plugin) => cdnLinkTag(`dist/css/tabler-${plugin}.min.css`)).join('\n')

docs/lib/llms.ts

@@ -24,7 +24,7 @@ import { callouts } from '@components/callouts/index.ts'
 import docs from '@data/docs.json'
 import packageManagers from '@data/package-managers.json'
 import payments from '@data/payments.json'
-import { cdnCssTag, cdnJsTag, cdnPackageSnippet, cdnPluginSnippet } from './cdn-snippets.ts'
+import { cdnCssTag, cdnJsTag, cdnPackageSnippet, cdnPluginSnippet, cdnThemeJsTag } from './cdn-snippets.ts'
 
 // Lazy raw imports, same as CodeDocs.astro — node:fs paths break once this is
 // bundled into dist/.prerender.
@@ -41,6 +41,7 @@ function resolveCodeTokens(snippet: string): string {
   const tokens: Record<string, () => string> = {
     '${cdnCssTag()}': cdnCssTag,
     '${cdnJsTag()}': cdnJsTag,
+    '${cdnThemeJsTag()}': cdnThemeJsTag,
   }
 
   return Object.entries(tokens)