From 455239feb823cb80a6f63c66ff7322f26abe5863 Mon Sep 17 00:00:00 2001 From: fershad <27988517+fershad@users.noreply.github.com> Date: Sun, 1 Dec 2024 20:37:55 +0800 Subject: [PATCH 1/4] update seven-minutes-tabs --- public/js/seven-minute-tabs.js | 633 +++++++++++++++++++-------------- 1 file changed, 371 insertions(+), 262 deletions(-) diff --git a/public/js/seven-minute-tabs.js b/public/js/seven-minute-tabs.js index e694c6f..b55214e 100644 --- a/public/js/seven-minute-tabs.js +++ b/public/js/seven-minute-tabs.js @@ -4,296 +4,405 @@ * Heavily modified to web component by Zach Leatherman */ class SevenMinuteTabs extends HTMLElement { - constructor() { - super(); - - this._init = this._init.bind(this); - this._observer = new MutationObserver(this._init); - } - - get keys() { - return { - end: 35, - home: 36, - left: 37, - up: 38, - right: 39, - down: 40 - }; - } - - // Add or substract depending on key pressed - get direction() { - return { - 37: -1, - 38: -1, - 39: 1, - 40: 1 - }; - } - - connectedCallback() { - if (this.children.length) { - this._init(); - } - this._observer.observe(this, { childList: true }); - } - - _init() { - this.tablist = this.querySelector('[role="tablist"]'); - this.buttons = this.querySelectorAll('[role="tab"]'); - this.panels = this.querySelectorAll('[role="tabpanel"]'); - this.delay = this.determineDelay(); - - if(!this.tablist || !this.buttons.length || !this.panels.length) { - return; - } - - // This order is important - this.initButtons(); - this.initPanels(); + static tagName = "seven-minute-tabs"; + + static attrs = { + persist: "persist", + persistGroupKey: "data-tabs-persist", + prune: "prune", + sync: "sync", + }; + + static props = { + groupStorageKey: "seven-minute-tabs-persist-tabs", + }; + + static keys = { + end: 35, + home: 36, + left: 37, + up: 38, + right: 39, + down: 40 + }; + + // Add or substract depending on key pressed + static direction = { + 37: -1, + 38: -1, + 39: 1, + 40: 1 + }; + + constructor() { + super(); + + this._init = this._init.bind(this); + this._observer = new MutationObserver(this._init); + } + + get storage() { + if(this.persistSelection === "session") { + return sessionStorage; + } else if(this.persistSelection) { + return localStorage; } - - getTabIdFromHref(hash) { - let index = hash.indexOf("#"); - if(index > -1) { - return hash.substr(index + 1); + + // noop + return { + getItem() {}, + setItem() {}, + }; + } + + get persistSelection() { + if(!("_persist" in this)) { + this._persist = false; + if(this.hasAttribute(SevenMinuteTabs.attrs.persist)) { + this._persist = this.getAttribute(SevenMinuteTabs.attrs.persist) || true; } - return hash; } - - getButtonIdFromTabId(tabId) { - return `${tabId}-btn`; + return this._persist; + } + + connectedCallback() { + if (this.children.length) { + this._init(); } - - initButtons() { - let count = 0; - let hasASelectedButton = Array.from(this.buttons).filter(btn => btn.getAttribute("aria-selected") === "true").length > 0; - + this._observer.observe(this, { childList: true }); + } + + _init() { + this.tablist = this.querySelector('[role="tablist"]'); + this.buttons = this.querySelectorAll('[role="tab"]'); + this.panels = this.querySelectorAll('[role="tabpanel"]'); + this.delay = this.determineDelay(); + + if(this.hasAttribute(SevenMinuteTabs.attrs.prune)) { for(let button of this.buttons) { - let isSelected = button.getAttribute("aria-selected") === "true"; - if(!hasASelectedButton && count === 0) { - isSelected = true; - } - - // Attributes - if(!button.hasAttribute("aria-selected")) { - button.setAttribute("aria-selected", isSelected); - } - button.setAttribute("tabindex", isSelected ? "0" : "-1"); - - let tabId = this.getTabIdFromHref(button.getAttribute("href")); - if(!button.hasAttribute("aria-controls")) { - button.setAttribute("aria-controls", tabId); + if(!this.querySelector(button.getAttribute("href"))) { + (button.closest("li") || button)?.remove(); } - if(!button.hasAttribute("id")) { - button.setAttribute("id", this.getButtonIdFromTabId(tabId)); - } - - // Events - button.addEventListener('click', this.clickEventListener.bind(this)); - button.addEventListener('keydown', this.keydownEventListener.bind(this)); - button.addEventListener('keyup', this.keyupEventListener.bind(this)); - - button.index = count++; } } - - initPanels() { - let selectedPanelId = this.querySelector('[role="tab"][aria-selected="true"]').getAttribute("aria-controls"); - for(let panel of this.panels) { - if(panel.getAttribute("id") !== selectedPanelId) { - panel.setAttribute("hidden", ""); - } - panel.setAttribute("tabindex", "0"); - - if(!panel.hasAttribute("aria-labelledby")) { - let tabId = panel.getAttribute("id"); - panel.setAttribute("aria-labelledby", this.getButtonIdFromTabId(tabId)); + + if(!this.tablist || !this.buttons.length || !this.panels.length) { + return; + } + + // This order is important + this.initButtons(); + this.initPanels(); + } + + getTabIdFromHref(hash) { + let index = hash.indexOf("#"); + if(index > -1) { + return hash.substr(index + 1); + } + return hash; + } + + getButtonIdFromTabId(tabId) { + return `${tabId}-btn`; + } + + initButtons() { + let count = 0; + let hasASelectedButton = false; + + if(this.persistSelection) { + let persisted = JSON.parse(this.storage.getItem(SevenMinuteTabs.props.groupStorageKey)); + if(persisted) { + for(let button of this.buttons) { + let [key, value] = this.getStorageValues(button); + if(key && value && value == persisted[key]) { + button.setAttribute("aria-selected", "true"); + hasASelectedButton = true; + break; + } } } } - - clickEventListener(event) { - let button = event.target; - if(button.tagName === "A" || button.tagName === "BUTTON" && button.getAttribute("type") === "submit") { - event.preventDefault(); + + if(!hasASelectedButton) { + hasASelectedButton = Array.from(this.buttons).filter(btn => btn.getAttribute("aria-selected") === "true").length > 0; + } + + for(let button of this.buttons) { + let isSelected = button.getAttribute("aria-selected") === "true"; + if(!hasASelectedButton && count === 0) { + isSelected = true; } - - this.activateTab(button, false); + + // Attributes + if(!button.hasAttribute("aria-selected")) { + button.setAttribute("aria-selected", isSelected); + } + button.setAttribute("tabindex", isSelected ? "0" : "-1"); + + let tabId = this.getTabIdFromHref(button.getAttribute("href")); + if(!button.hasAttribute("aria-controls")) { + button.setAttribute("aria-controls", tabId); + } + if(!button.hasAttribute("id")) { + button.setAttribute("id", this.getButtonIdFromTabId(tabId)); + } + + // Events + button.addEventListener('click', this.clickEventListener.bind(this)); + button.addEventListener('keydown', this.keydownEventListener.bind(this)); + button.addEventListener('keyup', this.keyupEventListener.bind(this)); + + button.index = count++; } - - // Handle keydown on tabs - keydownEventListener(event) { - var key = event.keyCode; - - switch (key) { - case this.keys.end: - event.preventDefault(); - // Activate last tab - this.activateTab(this.buttons[this.buttons.length - 1]); - break; - case this.keys.home: - event.preventDefault(); - // Activate first tab - this.activateTab(this.buttons[0]); - break; - - // Up and down are in keydown - // because we need to prevent page scroll >:) - case this.keys.up: - case this.keys.down: - this.determineOrientation(event); - break; - }; + } + + initPanels() { + let selectedPanelId = this.querySelector('[role="tab"][aria-selected="true"]').getAttribute("aria-controls"); + for(let panel of this.panels) { + if(panel.getAttribute("id") !== selectedPanelId) { + panel.setAttribute("hidden", ""); + } + panel.setAttribute("tabindex", "0"); + + if(!panel.hasAttribute("aria-labelledby")) { + let tabId = panel.getAttribute("id"); + panel.setAttribute("aria-labelledby", this.getButtonIdFromTabId(tabId)); + } } - - // Handle keyup on tabs - keyupEventListener(event) { - var key = event.keyCode; - - switch (key) { - case this.keys.left: - case this.keys.right: - this.determineOrientation(event); - break; - }; + } + + clickEventListener(event) { + let button = event.target; + if(button.tagName === "A" || button.tagName === "BUTTON" && button.getAttribute("type") === "submit") { + event.preventDefault(); } - - // When a tablist’s aria-orientation is set to vertical, - // only up and down arrow should function. - // In all other cases only left and right arrow function. - determineOrientation(event) { - var key = event.keyCode; - var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical'; - var proceed = false; - - if (vertical) { - if (key === this.keys.up || key === this.keys.down) { - event.preventDefault(); - proceed = true; - }; - } - else { - if (key === this.keys.left || key === this.keys.right) { - proceed = true; - }; - }; - - if (proceed) { - this.switchTabOnArrowPress(event); + + this.activateTab(button, false); + } + + // Handle keydown on tabs + keydownEventListener(event) { + var key = event.keyCode; + + switch (key) { + case SevenMinuteTabs.keys.end: + event.preventDefault(); + // Activate last tab + this.activateTab(this.buttons[this.buttons.length - 1]); + break; + case SevenMinuteTabs.keys.home: + event.preventDefault(); + // Activate first tab + this.activateTab(this.buttons[0]); + break; + + // Up and down are in keydown + // because we need to prevent page scroll >:) + case SevenMinuteTabs.keys.up: + case SevenMinuteTabs.keys.down: + this.determineOrientation(event); + break; + }; + } + + // Handle keyup on tabs + keyupEventListener(event) { + var key = event.keyCode; + + switch (key) { + case SevenMinuteTabs.keys.left: + case SevenMinuteTabs.keys.right: + this.determineOrientation(event); + break; + }; + } + + // When a tablist’s aria-orientation is set to vertical, + // only up and down arrow should function. + // In all other cases only left and right arrow function. + determineOrientation(event) { + var key = event.keyCode; + var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical'; + var proceed = false; + + if (vertical) { + if (key === SevenMinuteTabs.keys.up || key === SevenMinuteTabs.keys.down) { + event.preventDefault(); + proceed = true; }; } - - // Either focus the next, previous, first, or last tab - // depending on key pressed - switchTabOnArrowPress(event) { - var pressed = event.keyCode; - - for (let button of this.buttons) { - button.addEventListener('focus', this.focusEventHandler.bind(this)); + else { + if (key === SevenMinuteTabs.keys.left || key === SevenMinuteTabs.keys.right) { + proceed = true; }; - - if (this.direction[pressed]) { - var target = event.target; - if (target.index !== undefined) { - if (this.buttons[target.index + this.direction[pressed]]) { - this.buttons[target.index + this.direction[pressed]].focus(); - } - else if (pressed === this.keys.left || pressed === this.keys.up) { - this.focusLastTab(); - } - else if (pressed === this.keys.right || pressed == this.keys.down) { - this.focusFirstTab(); - } + }; + + if (proceed) { + this.switchTabOnArrowPress(event); + }; + } + + // Either focus the next, previous, first, or last tab + // depending on key pressed + switchTabOnArrowPress(event) { + var pressed = event.keyCode; + + for (let button of this.buttons) { + button.addEventListener('focus', this.focusEventHandler.bind(this)); + }; + + if (SevenMinuteTabs.direction[pressed]) { + var target = event.target; + if (target.index !== undefined) { + if (this.buttons[target.index + SevenMinuteTabs.direction[pressed]]) { + this.buttons[target.index + SevenMinuteTabs.direction[pressed]].focus(); + } + else if (pressed === SevenMinuteTabs.keys.left || pressed === SevenMinuteTabs.keys.up) { + this.focusLastTab(); + } + else if (pressed === SevenMinuteTabs.keys.right || pressed == SevenMinuteTabs.keys.down) { + this.focusFirstTab(); } } } - - // Activates any given tab panel - activateTab (tab, setFocus) { - if(tab.getAttribute("role") !== "tab") { - tab = tab.closest('[role="tab"]'); - } - - setFocus = setFocus || true; - - // Deactivate all other tabs - this.deactivateTabs(); - - // Remove tabindex attribute - tab.removeAttribute('tabindex'); - - // Set the tab as selected - tab.setAttribute('aria-selected', 'true'); - - // Get the value of aria-controls (which is an ID) - var controls = tab.getAttribute('aria-controls'); - - // Remove hidden attribute from tab panel to make it visible - document.getElementById(controls).removeAttribute('hidden'); - - // Set focus when required - if (setFocus) { - tab.focus(); - } + } + + getStorageValues(tab) { + let [key, value] = (tab.getAttribute(SevenMinuteTabs.attrs.persistGroupKey) || "").split(":"); + if(key && value) { + return [key, value]; } - - // Deactivate all tabs and tab panels - deactivateTabs() { - for (let button of this.buttons) { - button.setAttribute('tabindex', '-1'); - button.setAttribute('aria-selected', 'false'); - button.removeEventListener('focus', this.focusEventHandler.bind(this)); - } - - for (let panel of this.panels) { - panel.setAttribute('hidden', 'hidden'); + if(key) { + return ["__global", key] + } + // let href = tab.getAttribute("href"); + // if(href) { + // return ["__global", this.getTabIdFromHref(href)]; + // } + return [,]; + } + + syncRelatedTabs(activatedTab) { + if(!this.hasAttribute(SevenMinuteTabs.attrs.sync)) { + return; + } + + let persistGroupKey = activatedTab.getAttribute(SevenMinuteTabs.attrs.persistGroupKey); + let tabs = Array.from(document.querySelectorAll(`[${SevenMinuteTabs.attrs.persistGroupKey}="${persistGroupKey}"]`)).filter(tab => tab !== activatedTab); + for(let tab of tabs) { + // work with `is-land--seven-minute-tabs` rename, undefined components will be set when they’re activated + let tabGroup = tab.closest(`[${SevenMinuteTabs.attrs.sync}]:defined`); + if(tabGroup) { + tabGroup.activateTab(tab, false, true); } } - - focusFirstTab() { - this.buttons[0].focus(); + } + + // Activates any given tab panel + activateTab (tab, setFocus = true, viaSync = false) { + if(tab.getAttribute("role") !== "tab") { + tab = tab.closest('[role="tab"]'); } - - focusLastTab() { - this.buttons[this.buttons.length - 1].focus(); + + if(!viaSync) { + this.syncRelatedTabs(tab); } - - // Determine whether there should be a delay - // when user navigates with the arrow keys - determineDelay() { - var hasDelay = this.tablist.hasAttribute('data-delay'); - var delay = 0; - - if (hasDelay) { - var delayValue = this.tablist.getAttribute('data-delay'); - if (delayValue) { - delay = delayValue; + + // Deactivate all other tabs + this.deactivateTabs(); + + // Remove tabindex attribute + tab.removeAttribute('tabindex'); + + // Set the tab as selected + tab.setAttribute('aria-selected', 'true'); + + // Get the value of aria-controls (which is an ID) + var controls = tab.getAttribute('aria-controls'); + + // Remove hidden attribute from tab panel to make it visible + var panel = document.getElementById(controls); + if(panel) { + panel.removeAttribute('hidden'); + + if(this.persistSelection) { // panel must exist to persist + let obj = JSON.parse(this.storage.getItem(SevenMinuteTabs.props.groupStorageKey)); + if(!obj) { + obj = {}; } - else { - // If no value is specified, default to 300ms - delay = 300; - }; - }; - - return delay; + + let [key, value] = this.getStorageValues(tab); + if(key && value) { + obj[key] = value; + } + + this.storage.setItem(SevenMinuteTabs.props.groupStorageKey, JSON.stringify(obj)); + } } - - focusEventHandler(event) { - var target = event.target; - - setTimeout(this.checkTabFocus.bind(this), this.delay, target); - }; - - // Only activate tab on focus if it still has focus after the delay - checkTabFocus(target) { - let focused = document.activeElement; - - if (target === focused) { - this.activateTab(target, false); + + // Set focus when required + if (setFocus) { + tab.focus(); + } + } + + // Deactivate all tabs and tab panels + deactivateTabs() { + for (let button of this.buttons) { + button.setAttribute('tabindex', '-1'); + button.setAttribute('aria-selected', 'false'); + button.removeEventListener('focus', this.focusEventHandler.bind(this)); + } + + for (let panel of this.panels) { + panel.setAttribute('hidden', 'hidden'); + } + } + + focusFirstTab() { + this.buttons[0].focus(); + } + + focusLastTab() { + this.buttons[this.buttons.length - 1].focus(); + } + + // Determine whether there should be a delay + // when user navigates with the arrow keys + determineDelay() { + var hasDelay = this.tablist.hasAttribute('data-delay'); + var delay = 0; + + if (hasDelay) { + var delayValue = this.tablist.getAttribute('data-delay'); + if (delayValue) { + delay = delayValue; } + else { + // If no value is specified, default to 300ms + delay = 300; + }; + }; + + return delay; + } + + focusEventHandler(event) { + var target = event.target; + + setTimeout(this.checkTabFocus.bind(this), this.delay, target); + }; + + // Only activate tab on focus if it still has focus after the delay + checkTabFocus(target) { + let focused = document.activeElement; + + if (target === focused) { + this.activateTab(target, false); } } - - window.customElements.define("seven-minute-tabs", SevenMinuteTabs); \ No newline at end of file +} + +window.customElements.define(SevenMinuteTabs.tagName, SevenMinuteTabs); \ No newline at end of file From e402573be7d41c4b1e711f4915546e56f76e8b28 Mon Sep 17 00:00:00 2001 From: fershad <27988517+fershad@users.noreply.github.com> Date: Sun, 1 Dec 2024 21:27:02 +0800 Subject: [PATCH 2/4] create snippet and filter for code blocks --- .eleventy.js | 14 ++++++++++++++ src/_includes/snippets/esmCjsTabs.njk | 27 +++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/_includes/snippets/esmCjsTabs.njk diff --git a/.eleventy.js b/.eleventy.js index 74c2bb2..9cade73 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -78,6 +78,20 @@ let markdownItAnchorOptions = { ); }); + eleventyConfig.addFilter("esmToCjs", async (sourceCode) => { + const { ImportTransformer } = await import('esm-import-transformer'); + try { + let it = new ImportTransformer(sourceCode); + let outputCode = it.transformToRequire(); + + // lol + return outputCode.replace("export default ", "module.exports = "); + } catch(e) { + console.log( sourceCode ); + throw e; + } + }); + eleventyConfig.addNunjucksFilter("getDocumentsFromCollection", function (collection, value) { const docs = collection.filter(doc => doc.data.repo === value) return docs diff --git a/src/_includes/snippets/esmCjsTabs.njk b/src/_includes/snippets/esmCjsTabs.njk new file mode 100644 index 0000000..256911b --- /dev/null +++ b/src/_includes/snippets/esmCjsTabs.njk @@ -0,0 +1,27 @@ +{# This code is borrowed from the 11ty docs website #} + +
    +
  1. + ESM +
    2. +
  2. + CommonJS +
    3. +
+
+ {% highlight "js" %} + {%- if codeContent %} + {{ codeContent | safe }} + {% endif %} + {% endhighlight %} +
+
+ {% highlight "js" %} + {%- if codeContentCjs %} + {{ codeContentCjs | safe }} + {%- else if codeContent %} + {{ codeContent | esmToCjs | safe }} + {% endif %} + {% endhighlight %} +
+ \ No newline at end of file From 7ac6ca3518861a269677e9e0305420b4a49a3b04 Mon Sep 17 00:00:00 2001 From: fershad <27988517+fershad@users.noreply.github.com> Date: Sun, 1 Dec 2024 21:27:11 +0800 Subject: [PATCH 3/4] move deps to devDeps --- package-lock.json | 39 ++++++++++++++++++++++++++++++--------- package.json | 8 +++++--- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index e2c5270..a272410 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,21 +8,20 @@ "name": "docs", "version": "1.0.0", "license": "ISC", - "dependencies": { - "@octokit/core": "^6.1.2", - "dotenv": "^16.4.5" - }, "devDependencies": { "@11ty/eleventy": "^3.0.0-alpha.10", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", + "@octokit/core": "^6.1.2", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@tailwindcss/typography": "^0.5.13", "autoprefixer": "^10.4.19", "cssnano": "^7.0.1", "daisyui": "^2.15.3", + "dotenv": "^16.4.5", "eleventy-plugin-img2picture": "^5.0.1", "eleventy-plugin-metagen": "^1.8.3", + "esm-import-transformer": "^3.0.2", "markdown-it": "^14.1.0", "markdown-it-anchor": "^9.0.1", "postcss": "^8.4.38", @@ -448,6 +447,7 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.1.tgz", "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==", + "dev": true, "license": "MIT", "engines": { "node": ">= 18" @@ -457,6 +457,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz", "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/auth-token": "^5.0.0", @@ -475,6 +476,7 @@ "version": "10.1.1", "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-10.1.1.tgz", "integrity": "sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/types": "^13.0.0", @@ -488,6 +490,7 @@ "version": "8.1.1", "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-8.1.1.tgz", "integrity": "sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/request": "^9.0.0", @@ -502,12 +505,14 @@ "version": "22.2.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz", "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==", + "dev": true, "license": "MIT" }, "node_modules/@octokit/request": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/@octokit/request/-/request-9.1.3.tgz", "integrity": "sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/endpoint": "^10.0.0", @@ -523,6 +528,7 @@ "version": "6.1.5", "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-6.1.5.tgz", "integrity": "sha512-IlBTfGX8Yn/oFPMwSfvugfncK2EwRLjzbrpifNaMY8o/HTEAFqCA1FZxjD9cWvSKBHgrIhc4CSBIzMxiLsbzFQ==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/types": "^13.0.0" @@ -535,6 +541,7 @@ "version": "13.6.1", "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.1.tgz", "integrity": "sha512-PHZE9Z+kWXb23Ndik8MKPirBPziOc0D2/3KH1P+6jK5nGWe96kadZuE4jev2/Jq7FvIfTlT2Ltg8Fv2x1v0a5g==", + "dev": true, "license": "MIT", "dependencies": { "@octokit/openapi-types": "^22.2.0" @@ -991,6 +998,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-3.0.2.tgz", "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==", + "dev": true, "license": "Apache-2.0" }, "node_modules/binary-extensions": { @@ -1765,6 +1773,7 @@ "version": "16.4.5", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=12" @@ -5946,6 +5955,7 @@ "version": "7.0.2", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.2.tgz", "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==", + "dev": true, "license": "ISC" }, "node_modules/unpipe": { @@ -6488,12 +6498,14 @@ "@octokit/auth-token": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.1.tgz", - "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==" + "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==", + "dev": true }, "@octokit/core": { "version": "6.1.2", "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz", "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==", + "dev": true, "requires": { "@octokit/auth-token": "^5.0.0", "@octokit/graphql": "^8.0.0", @@ -6508,6 +6520,7 @@ "version": "10.1.1", "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-10.1.1.tgz", "integrity": "sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==", + "dev": true, "requires": { "@octokit/types": "^13.0.0", "universal-user-agent": "^7.0.2" @@ -6517,6 +6530,7 @@ "version": "8.1.1", "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-8.1.1.tgz", "integrity": "sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==", + "dev": true, "requires": { "@octokit/request": "^9.0.0", "@octokit/types": "^13.0.0", @@ -6526,12 +6540,14 @@ "@octokit/openapi-types": { "version": "22.2.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz", - "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==" + "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==", + "dev": true }, "@octokit/request": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/@octokit/request/-/request-9.1.3.tgz", "integrity": "sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==", + "dev": true, "requires": { "@octokit/endpoint": "^10.0.0", "@octokit/request-error": "^6.0.1", @@ -6543,6 +6559,7 @@ "version": "6.1.5", "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-6.1.5.tgz", "integrity": "sha512-IlBTfGX8Yn/oFPMwSfvugfncK2EwRLjzbrpifNaMY8o/HTEAFqCA1FZxjD9cWvSKBHgrIhc4CSBIzMxiLsbzFQ==", + "dev": true, "requires": { "@octokit/types": "^13.0.0" } @@ -6551,6 +6568,7 @@ "version": "13.6.1", "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.1.tgz", "integrity": "sha512-PHZE9Z+kWXb23Ndik8MKPirBPziOc0D2/3KH1P+6jK5nGWe96kadZuE4jev2/Jq7FvIfTlT2Ltg8Fv2x1v0a5g==", + "dev": true, "requires": { "@octokit/openapi-types": "^22.2.0" } @@ -6884,7 +6902,8 @@ "before-after-hook": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-3.0.2.tgz", - "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==" + "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==", + "dev": true }, "binary-extensions": { "version": "2.2.0", @@ -7428,7 +7447,8 @@ "dotenv": { "version": "16.4.5", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", - "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==" + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true }, "duplexer": { "version": "0.1.1", @@ -10493,7 +10513,8 @@ "universal-user-agent": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.2.tgz", - "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==" + "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==", + "dev": true }, "unpipe": { "version": "1.0.0", diff --git a/package.json b/package.json index 72bd28c..7d43085 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "keywords": [], "author": "", "license": "ISC", - "dependencies": { + "devDependencies": { "@11ty/eleventy": "^3.0.0-alpha.10", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", @@ -26,6 +26,8 @@ "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "@octokit/core": "^6.1.2", - "dotenv": "^16.4.5" - } + "dotenv": "^16.4.5", + "esm-import-transformer": "^3.0.2" + }, + "dependencies": {} } \ No newline at end of file From 964e5685009b60d4942f759d181f8568136900ec Mon Sep 17 00:00:00 2001 From: fershad <27988517+fershad@users.noreply.github.com> Date: Sun, 1 Dec 2024 21:27:16 +0800 Subject: [PATCH 4/4] initial code block test --- src/docs/co2js/installation.md | 13 ++++++++++--- src/styles/index.css | 8 ++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/docs/co2js/installation.md b/src/docs/co2js/installation.md index f171be1..df49712 100644 --- a/src/docs/co2js/installation.md +++ b/src/docs/co2js/installation.md @@ -1,6 +1,7 @@ --- title: Installation description: This guide will show you how to quickly get started with CO2.js in a variety of ways. +hasTabs: true eleventyNavigation: key: install title: Installation @@ -27,9 +28,15 @@ You can get the latest version of CO2.js using one of the content delivery netwo To get started with CO2.js quickly in the browser, you can import the library using esm.sh. -```js -import tgwf from "https://esm.sh/@tgwf/co2"; -``` + + +{% set codeContent %} +import tgwf from 'https://esm.sh/@tgwf/co2@latest'; +{% endset %} +{% set tabId = "install" %} +{% include "snippets/esmCjsTabs.njk" %} + + ### Unpkgd diff --git a/src/styles/index.css b/src/styles/index.css index 08b3f59..14bd2ea 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -290,6 +290,14 @@ seven-minute-tabs [role="tabpanel"] pre:last-child { margin-bottom: 0; } +seven-minute-tabs pre code a { + color: inherit !important; +} + +seven-minute-tabs pre code p { + margin: 0; +} + .alert > p { display: block; }