Docs: add integrity to importmap configuration

Author: julien-deramond

build/generate-sri.mjs

@@ -36,6 +36,14 @@ const files = [
   {
     file: 'dist/js/bootstrap.bundle.min.js',
     configPropertyName: 'js_bundle_hash'
+  },
+  {
+    file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js',
+    configPropertyName: 'floating_ui_esm_hash'
+  },
+  {
+    file: 'node_modules/vanilla-calendar-pro/index.mjs',
+    configPropertyName: 'vanilla_calendar_pro_esm_hash'
   }
 ]
 

config.yml

@@ -34,14 +34,16 @@ download:
 
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes
-  css:                  "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/css/bootstrap.min.css"
-  css_hash:             "sha384-TDmpFhAO5TwSQwPF95I/odgwpTUuv0aaVm9/0fL7b+kKe7hFBp/+9cBCMkydgGOi"
-  js:                   "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.min.js"
-  js_hash:              "sha384-Php492snRLTR5p+hMyxpV6gYwp1avWXn4AaX31MgANrvsjr9Dpodl3Nw60L7Pewl"
-  js_bundle:            "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
-  js_bundle_hash:       "sha384-I2J4jlw924JZXHU9un9Mcuixq/rKhd5A8/B1NQ6ifPAiBFacZjwNcec8d6L38jQv"
-  floating_ui_esm:      "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/dist/floating-ui.dom.esm.min.js"
-  vanilla_calendar_pro_esm: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.mjs"
+  css:                           "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/css/bootstrap.min.css"
+  css_hash:                      "sha384-TDmpFhAO5TwSQwPF95I/odgwpTUuv0aaVm9/0fL7b+kKe7hFBp/+9cBCMkydgGOi"
+  js:                            "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.min.js"
+  js_hash:                       "sha384-Php492snRLTR5p+hMyxpV6gYwp1avWXn4AaX31MgANrvsjr9Dpodl3Nw60L7Pewl"
+  js_bundle:                     "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
+  js_bundle_hash:                "sha384-I2J4jlw924JZXHU9un9Mcuixq/rKhd5A8/B1NQ6ifPAiBFacZjwNcec8d6L38jQv"
+  floating_ui_esm:               "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/dist/floating-ui.dom.esm.js"
+  floating_ui_esm_hash:          "sha384-xovEHHpm3FhkiFUAGz5wPlJL39EW6cK9oRkwHaIjtGaw0nF5RtjHWV6oJB+tNbc2"
+  vanilla_calendar_pro_esm:      "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.mjs"
+  vanilla_calendar_pro_esm_hash: "sha384-5quhKh5ILxed/sN+sno/4zf+ksFY5P4ekIM5SnguE49mgszu8obwGevh7IUEV3rm"
 
 anchors:
   min:                  2

site/src/content/docs/customize/rtl.mdx

@@ -99,6 +99,10 @@ Here's a modified RTL starter template:
       "imports": {
         "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
         "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]"
+      },
+      "integrity": {
+        "[[config:cdn.floating_ui_esm]]": "[[config:floating_ui_esm_hash]]",
+        "[[config:cdn.vanilla_calendar_pro_esm]]": "[[config:vanilla_calendar_pro_esm_hash]]"
       }
     }
     </script>

site/src/content/docs/getting-started/install.mdx

@@ -97,6 +97,10 @@ If you prefer to include Floating UI and Vanilla Calendar Pro separately instead
   "imports": {
     "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
     "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]"
+  },
+  "integrity": {
+    "[[config:cdn.floating_ui_esm]]": "[[config:cdn.floating_ui_esm_hash]]",
+    "[[config:cdn.vanilla_calendar_pro_esm]]": "[[config:cdn.vanilla_calendar_pro_esm_hash]]"
   }
 }
 </script>
@@ -108,8 +112,14 @@ If you prefer to include Floating UI and Vanilla Calendar Pro separately instead
 | --- | --- |
 | CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) |
 | JS bundle (with Floating UI and Vanilla Calendar Pro) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
+| Floating UI ESM | [`[[config:cdn.floating_ui_esm]]`]([[config:cdn.floating_ui_esm]]) |
+| Vanilla Calendar Pro ESM | [`[[config:cdn.vanilla_calendar_pro_esm]]`]([[config:cdn.vanilla_calendar_pro_esm]]) |
 </BsTable>
 
+<Callout>
+JS Delivr also provides a minified ESM version of Floating UI, but it can't be used with the integrity attribute.
+</Callout>
+
 ### Using CDNs
 
 You can also use the CDN to fetch any of our additional builds.

site/src/content/docs/getting-started/javascript.mdx

@@ -84,7 +84,12 @@ Using ESM in the browser requires full paths or an [import map](https://develope
       "imports": {
         "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
         "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]",
-        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@[[config:current_version]]/dist/js/bootstrap.min.js"
+        "bootstrap": "[[config:cdn.js]]"
+      },
+      "integrity": {
+        "[[config:cdn.floating_ui_esm]]": "[[config:cdn.floating_ui_esm_hash]]",
+        "[[config:cdn.vanilla_calendar_pro_esm]]": "[[config:cdn.vanilla_calendar_pro_esm_hash]]"
+        "[[config:cdn.js]]": "[[config:cdn.js_hash]]"
       }
     }
     </script>

site/src/content/docs/guides/quickstart.mdx

@@ -51,6 +51,10 @@ Get started using Bootstrap in seconds by including our production-ready CSS and
      "imports": {
        "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
        "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]"
+     },
+     "integrity": {
+       "[[config:cdn.floating_ui_esm]]": "[[config:cdn.floating_ui_esm_hash]]",
+       "[[config:cdn.vanilla_calendar_pro_esm]]": "[[config:cdn.vanilla_calendar_pro_esm_hash]]"
      }
    }
    </script>

site/src/libs/config.ts

@@ -28,7 +28,9 @@ const configSchema = z.object({
     js_bundle: z.string().url(),
     js_bundle_hash: z.string(),
     floating_ui_esm: z.string().url(),
-    vanilla_calendar_pro_esm: z.string().url()
+    floating_ui_esm_hash: z.string(),
+    vanilla_calendar_pro_esm: z.string().url(),
+    vanilla_calendar_pro_esm_hash: z.string()
   }),
   current_version: zVersionSemver,
   current_ruby_version: zVersionSemver,