generate sri

.build/generate-sri.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import crypto from 'crypto'
+import { readFileSync, write, writeFileSync } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const configFile = path.join(__dirname, '../preview/_config.yml')
+
+const files = [
+	{
+		file: 'dist/css/tabler.min.css',
+		configPropertyName: 'css_hash'
+	},
+	{
+		file: 'dist/css/tabler.rtl.min.css',
+		configPropertyName: 'css_rtl_hash'
+	},
+	{
+		file: 'dist/css/tabler-flags.min.css',
+		configPropertyName: 'css_flags_hash'
+	},
+	{
+		file: 'dist/css/tabler-payments.min.css',
+		configPropertyName: 'css_payments_hash'
+	},
+	{
+		file: 'dist/css/tabler-social.min.css',
+		configPropertyName: 'css_social_hash'
+	},
+	{
+		file: 'dist/css/tabler-vendors.min.css',
+		configPropertyName: 'css_vendors_hash'
+	},
+	{
+		file: 'dist/js/tabler.min.js',
+		configPropertyName: 'js_hash'
+	},
+	{
+		file: 'dist/js/tabler.bundle.min.js',
+		configPropertyName: 'js_bundle_hash'
+	}
+]
+
+files.forEach((file) => {
+	const data = readFileSync(path.join(__dirname, '../core', file.file), 'utf8')
+
+	const algo = 'sha384'
+	const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64')
+	const integrity = `${algo}-${hash}`
+
+	console.log(`${file.configPropertyName}: ${integrity}`)
+
+	let config = readFileSync(configFile, 'utf8')
+
+	const regex = new RegExp(`${file.configPropertyName}\\:\\s+("|')(\\S+)(\\1)`, 'gm')
+	config = config.replace(regex, function() {
+		return `${file.configPropertyName}: ${arguments[1]}${integrity}${arguments[3]}`
+	})
+
+	writeFileSync(configFile, config, 'utf8')
+})

core/.build/rollup.config.mjs

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url'
 import { babel } from '@rollup/plugin-babel'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
-import banner from './banner.mjs'
+import banner from '../../.build/banner.mjs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 

core/package.json

@@ -3,10 +3,9 @@
   "version": "1.0.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
-    "dev": "",
+    "dev": "pnpm run watch",
+    "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run img",
     "clean": "rm -rf dist",
-    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "build": "pnpm run js && pnpm run css && pnpm run img",
     "js": "pnpm run js-compile && pnpm run js-minify",
     "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-bundle",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config .build/rollup.config.mjs --sourcemap",
@@ -22,8 +21,12 @@
     "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "watch": "pnpm run watch-css & pnpm run watch-js",
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile\"",
+    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
     "img": "rm -rf dist/img && cp -r img dist/img",
-    "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore ."
+    "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore .",
+    "bundlewatch": "bundlewatch --config .bundlewatch.config.json"
   },
   "main": "dist/js/tabler.js",
   "module": "dist/js/tabler.esm.js",
@@ -183,15 +186,5 @@
         "maxSize": "45 kB"
       }
     ]
-  },
-  "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "clean-css-cli": "^5.6.3",
-    "cross-env": "^7.0.3",
-    "postcss-cli": "^11.0.0",
-    "rollup": "^4.9.6",
-    "terser": "^5.27.0"
   }
 }

package.json

@@ -15,7 +15,8 @@
     "icons": "cd preview && ncu -u @tabler/icons && pnpm install && node .build/import-icons.mjs && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push",
     "download-images": "node .build/download-images.mjs",
     "change-version": "node .build/change-version.mjs",
-    "changelog": "node .build/changelog.mjs"
+    "changelog": "node .build/changelog.mjs",
+    "generate-sri": "node .build/generate-sri.mjs"
   },
   "repository": {
     "type": "git",
@@ -55,6 +56,17 @@
   "module": "dist/js/tabler.esm.js",
   "main": "dist/js/tabler.js",
   "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "clean-css-cli": "^5.6.3",
+    "cross-env": "^7.0.3",
+    "nodemon": "^3.0.3",
+    "postcss-cli": "^11.0.0",
+    "rollup": "^4.9.6",
+    "terser": "^5.27.0"
+  },
+  "_devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
     "@changesets/cli": "^2.27.1",

preview/.build/browser-sync.mjs

@@ -0,0 +1,16 @@
+import browserSync from 'browser-sync'
+
+browserSync({ 
+	server: {
+		baseDir: "./dist",
+		routes: {
+			"/static": "static",
+			"/dist": "node_modules/@tabler/core/dist",
+		}
+	},
+	port: 3000,
+	notify: false,
+	watch: true,
+	open: false,
+	// snippet: false,
+});

preview/.build/rollup.config.mjs

@@ -0,0 +1,40 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import banner from '../../.build/banner.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const ESM = process.env.ESM === 'true'
+
+let destinationFile = `demo${ESM ? '.esm' : ''}`
+const external = []
+const plugins = [
+	babel({
+		exclude: 'node_modules/**',
+		babelHelpers: 'bundled'
+	})
+]
+const globals = {
+}
+
+
+const rollupConfig = {
+	input: path.resolve(__dirname, `../js/index.js`), //${ESM ? 'esm' : 'umd'}.js`),
+	output: {
+		banner: banner(),
+		file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
+		format: ESM ? 'esm' : 'umd',
+		globals,
+		generatedCode: 'es2015'
+	},
+	external,
+	plugins
+}
+
+if (!ESM) {
+	rollupConfig.output.name = 'demo'
+}
+
+export default rollupConfig

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.5)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
     concurrent-ruby (1.2.2)
@@ -9,9 +9,9 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.16.2)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
-    google-protobuf (3.24.3)
+    google-protobuf (3.25.2-arm64-darwin)
     htmlbeautifier (1.4.2)
     htmlcompressor (0.4.0)
     http_parser.rb (0.8.0)
@@ -59,24 +59,22 @@ GEM
     mini_i18n (0.9.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.3)
-    rake (13.0.6)
+    public_suffix (5.0.4)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.6)
-    rouge (4.1.3)
+    rouge (4.2.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.68.0)
-      google-protobuf (~> 3.23)
-      rake (>= 13.0.0)
+    sass-embedded (1.69.7-arm64-darwin)
+      google-protobuf (~> 3.25)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.4.2)
+    unicode-display_width (2.5.0)
     webrick (1.8.1)
 
 PLATFORMS
-  ruby
+  arm64-darwin
 
 DEPENDENCIES
   jekyll (= 4.3.2)
@@ -86,4 +84,4 @@ DEPENDENCIES
   jekyll-timeago
 
 BUNDLED WITH
-   2.4.19
+   2.5.4

preview/_config.yml

@@ -1,15 +1,15 @@
 source: pages
-destination: tmp
+destination: dist
 
 version: 1.0.0
 
-keep_files:
-  - css
-  - js
-  - img
-  - dist
-  - static
-  - playground.html
+# keep_files:
+#   - css
+#   - js
+#   - img
+#   - dist
+#   - static
+#   - playground.html
 
 use-iconfont: false
 rtl: false
@@ -50,7 +50,12 @@ tabler-css-plugins:
   - tabler-payments
   - tabler-vendors
 
+imclude:
+  - node_modules/@tabler/core/
+
 exclude:
+  - .turbo
+  - .build
   - .jekyll-cache
   - redirects.json
 
@@ -80,62 +85,62 @@ defaults:
 colors:
   blue:
     class: blue
-    hex: '#0054a6'
+    hex: "#0054a6"
     title: Blue
   azure:
     class: azure
-    hex: '#45aaf2'
+    hex: "#45aaf2"
     title: Azure
   indigo:
     class: indigo
-    hex: '#6574cd'
+    hex: "#6574cd"
     title: Indigo
   purple:
     class: purple
-    hex: '#a55eea'
+    hex: "#a55eea"
     title: Purple
   pink:
     class: pink
-    hex: '#f66d9b'
+    hex: "#f66d9b"
     title: Pink
   red:
     class: red
-    hex: '#fa4654'
+    hex: "#fa4654"
     title: Red
   orange:
     class: orange
-    hex: '#fd9644'
+    hex: "#fd9644"
     title: Orange
   yellow:
     class: yellow
-    hex: '#f1c40f'
+    hex: "#f1c40f"
     title: Yellow
   lime:
     class: lime
-    hex: '#7bd235'
+    hex: "#7bd235"
     title: Lime
   green:
     class: green
-    hex: '#5eba00'
+    hex: "#5eba00"
     title: Green
   teal:
     class: teal
-    hex: '#2bcbba'
+    hex: "#2bcbba"
     title: Teal
   cyan:
     class: cyan
-    hex: '#17a2b8'
+    hex: "#17a2b8"
     title: Cyan
 
 colors-extra:
   white:
-    hex: '#ffffff'
+    hex: "#ffffff"
     title: White
   dark:
-    hex: '#303645'
+    hex: "#303645"
     title: Dark
   gray:
-    hex: '#868e96'
+    hex: "#868e96"
     title: Gray
 
 variants:
@@ -226,8 +231,8 @@ socials:
     icon: brand-tabler
     title: Tabler
 
-months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+months-short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+months-long: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
 
 icons:
   link: https://tabler-icons.io
@@ -236,3 +241,13 @@ emails:
   price: "$29"
   count: 54
   buy_link: https://tabler.io/buy-emails
+
+cdn:
+  css_hash: "sha384-k8E9RoPOQ6e0DYc412ZVCijxvlQgfyU/pWPo42waH02kRFWEmf7cQOkGqWT3GHGp"
+  css_rtl_hash: "sha384-16cbgXQEBjkPKcPx1h2ovXO6fWjs8ltetbHc0HOihyPAR54EiIqN7j4UgEL4fH96"
+  css_flags_hash: "sha384-DY4qpZRq8xF/FTUwHTSBpXUzWCgqIj/Ty+GyJhe4GDp6chbU7L3er8DFGeVW6zEF"
+  css_payments_hash: "sha384-5YPVYqtJCz0vsqPGh6L1Sq+2ci9r67MLLfVbTTSU0mklMLGgQTK2BvpCXyZAt0qn"
+  css_social_hash: "sha384-AWB9EuxVw3N1Afw6M1s0tCmsSJuI8BQ/8IFx2B7FfDL9X6wf1nuszXmP6xveGLDQ"
+  css_vendors_hash: "sha384-MQfYsoFoC7ivWOZF4f6LdPsjQXYTmPtSmhv9pEz/XYALPBAP+rIRSaBD/HgLbPYN"
+  js_hash: "sha384-y862gbiZBnmAMfikv7LSZmxUPyfyjV/BifQIExUqKlD1ugLOBrch1DwQYscxDv3J"
+  js_bundle_hash: "sha384-UrYaR20uBqeQrfypPQKq5RwzXxirM5/xif+ka3j0W/aMje1ejqe4+ARG/gOa7Wtx"

preview/js/demo-theme.js

@@ -0,0 +1,28 @@
+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+
+const themeStorageKey = "tablerTheme"
+const defaultTheme = "light"
+let selectedTheme
+
+// https://stackoverflow.com/a/901144
+const params = new Proxy(new URLSearchParams(window.location.search), {
+	get: (searchParams, prop) => searchParams.get(prop),
+})
+
+if (!!params.theme) {
+	localStorage.setItem(themeStorageKey, params.theme)
+	selectedTheme = params.theme
+} else {
+	const storedTheme = localStorage.getItem(themeStorageKey)
+	selectedTheme = storedTheme ? storedTheme : defaultTheme
+}
+
+if (selectedTheme === 'dark') {
+	document.body.setAttribute("data-bs-theme", selectedTheme)
+} else {
+	document.body.removeAttribute("data-bs-theme")
+}

preview/js/index.js

@@ -0,0 +1,83 @@
+// Setting items
+const items = {
+	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
+	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
+	"container-layout": {
+		localStorage: "tablerContainerLayout",
+		default: "boxed",
+	},
+}
+
+// Theme config
+const config = {}
+for (const [key, params] of Object.entries(items)) {
+	const lsParams = localStorage.getItem(params.localStorage)
+	config[key] = lsParams ? lsParams : params.default
+}
+
+// Parse url params
+const parseUrl = () => {
+	const search = window.location.search.substring(1)
+	const params = search.split("&")
+
+	for (let i = 0; i < params.length; i++) {
+		const arr = params[i].split("=")
+		const key = arr[0]
+		const value = arr[1]
+
+		if (!!items[key]) {
+			// Save to localStorage
+			localStorage.setItem(items[key].localStorage, value)
+
+			// Update local variables
+			config[key] = value
+		}
+	}
+}
+
+// Toggle form controls
+const toggleFormControls = (form) => {
+	for (const [key, params] of Object.entries(items)) {
+		const elem = form.querySelector(
+			`[name="settings-${key}"][value="${config[key]}"]`,
+		)
+
+		if (elem) {
+			elem.checked = true
+		}
+	}
+}
+
+// Submit form
+const submitForm = (form) => {
+	// Save data to localStorage
+	for (const [key, params] of Object.entries(items)) {
+		// Save to localStorage
+		const value = form.querySelector(`[name="settings-${key}"]:checked`).value
+		localStorage.setItem(params.localStorage, value)
+
+		// Update local variables
+		config[key] = value
+	}
+
+	window.dispatchEvent(new Event("resize"))
+
+	new bootstrap.Offcanvas(form).hide()
+}
+
+// Parse url
+parseUrl()
+
+// Elements
+const form = document.querySelector("#offcanvasSettings")
+
+// Toggle form controls
+if (form) {
+	form.addEventListener("submit", function (e) {
+		e.preventDefault()
+
+		submitForm(form)
+	})
+
+	toggleFormControls(form)
+}

preview/package.json

@@ -2,16 +2,25 @@
   "name": "@tabler/preview",
   "private": true,
   "scripts": {
-    "dev": "pnpm run serve",
+    "dev": "pnpm run watch",
+    "clean": "rm -rf dist && rm -rf pages/dist",
     "images": "for i in ./static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
-    "build": "bundle exec jekyll build --destination dist --trace --config _config.yml,_config_prod.yml",
-    "serve": "bundle exec jekyll serve --config _config.yml,_config_dev.yml",
-    "unused-files": "node .build/unused-files.mjs" 
+    "build": "pnpm run build-jekyll",
+    "build-jekyll": "JEKYLL_ENV=production bundle exec jekyll build --destination dist --trace --config _config.yml,_config_prod.yml",
+    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
+    "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
+    "watch": "pnpm run watch-jekyll & pnpm run watch-js & pnpm run watch-browsersync",
+    "watch-jekyll": "JEKYLL_ENV=development bundle exec jekyll build --watch --destination dist --config _config.yml",
+    "watch-browsersync": "node .build/browser-sync.mjs",
+    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
+    "unused-files": "node .build/unused-files.mjs"
   },
   "dependencies": {
     "@tabler/core": "workspace:*"
   },
   "devDependencies": {
+    "browser-sync": "^3.0.2",
     "glob": "^10.3.10"
   }
 }

preview/pages/_includes/layout/js.html

@@ -16,7 +16,7 @@
 
 <!-- Tabler Core -->
 
-<script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment != 'development' %}?{{ site.time | date: '%s' }}{% endif %}" defer></script>
+<script src="{{ site.base }}/dist/js/tabler.bundle{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment != 'development' %}?{{ site.time | date: '%s' }}{% endif %}" defer></script>
 <script src="{{ site.base }}/dist/js/demo{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment != 'development' %}?{{ site.time | date: '%s' }}{% endif %}" defer></script>
 
 
@@ -40,4 +40,4 @@
 
 {% endfor %}
 {% endif %}
-{% endfor %}
+{% endfor %}

preview/pages/_plugins/jekyll-node-modules.rb

@@ -0,0 +1,15 @@
+module Jekyll
+  class NodeModulesTag < Liquid::Tag
+    def initialize(tag, markup, tokens)
+      super
+
+      @file = File.join('node_modules', markup.strip)
+    end
+
+    def render(context)
+      File.read @file
+    end
+  end
+end
+
+Liquid::Template.register_tag('node_module', Jekyll::NodeModulesTag)

turbo.json

@@ -10,6 +10,12 @@
     },
     "lint": {
       "dependsOn": ["^lint"]
+    },
+    "clean": {
+      "dependsOn": ["^clean"]
+    },
+    "dev": {
+      
     }
   }
 }