docs: move docs.css to StackBlitz

diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
index 60a9b935c3718ec4720c567ce6728a6f1983c0c8..e473da80a5a8c317c94935356c3fa0c968d5c301 100644 (file)
--- a/site/assets/js/stackblitz.js
+++ b/site/assets/js/stackblitz.js
@@ -14,7 +14,7 @@
 import sdk from '@stackblitz/sdk'
 // https://gohugo.io/hugo-pipes/js/#options
 import {
-  cssCdn, cssCdnHash, docsVersion, jsBundleCdn, jsBundleCdnHash, jsSnippetFile, isNetlify
+  cssCdn, cssCdnHash, docsCss, jsBundleCdn, jsBundleCdnHash, jsSnippetFile, isNetlify
 } from '@params' // eslint-disable-line import/no-unresolved
 
 // Open in StackBlitz logic
@@ -39,7 +39,7 @@ const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="${cssCdn}" rel="stylesheet"${!isNetlify ? `integrity="${cssCdnHash}" crossorigin="anonymous"` : ''}>
-    <link href="https://getbootstrap.com/docs/${docsVersion}/assets/css/docs.css" rel="stylesheet">
+    <link href="docs.css" rel="stylesheet">
     <title>Bootstrap Example</title>
     <${'script'} defer src="${jsBundleCdn}"${!isNetlify ? `integrity="${jsBundleCdnHash}" crossorigin="anonymous"` : ''}></${'script'}>
   </head>
@@ -54,7 +54,8 @@ ${htmlSnippet.trimStart().replace(/^/gm, '    ').replace(/^ {4}$/gm, '').trimEnd
   const project = {
     files: {
       'index.html': indexHtml,
-      ...(jsSnippet && { 'index.js': jsSnippetFile })
+      ...(jsSnippet && { 'index.js': jsSnippetFile }),
+      'docs.css': docsCss
     },
     title: 'Bootstrap Example',
     description: `Official example from ${window.location.href}`,

diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index 2f00c93e2529cf37194aed8520c8f2868bcf9858..08758ee75b7ef198de824ea633d56e87969a88b3 100644 (file)
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -7,8 +7,12 @@
 {{- $esbuildOptions := dict "target" "es2019" -}}
 {{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}}
 
+{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}}
+{{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
+
 {{- if hugo.IsProduction -}}
   {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}}
+  {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
 {{- end }}
 
 {{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
@@ -26,14 +30,16 @@
 {{- end -}}
 
 {{ if eq .Page.Layout "docs" -}}
+{{- $docsCss := resources.Get "scss/docs.scss" | toCSS $sassOptions | postCSS $postcssOptions -}}
 {{- $snippetsFile := resources.Get "js/snippets.js" | js.Build $esbuildOptions -}}
+
 {{- $esbuildParams := dict
   "isNetlify" (eq (getenv "NETLIFY") "true")
   "cssCdn" .Site.Params.cdn.css
   "cssCdnHash" .Site.Params.cdn.css_hash
+  "docsCss" $docsCss.Content
   "jsBundleCdn" .Site.Params.cdn.js_bundle
   "jsBundleCdnHash" .Site.Params.cdn.js_bundle_hash
-  "docsVersion" .Site.Params.docs_version
   "jsSnippetFile" $snippetsFile.Content
 -}}
 {{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}