diff --git a/assets/css/main.css b/assets/css/main.css index 02f45244f..4f810b9f1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -574,3 +574,257 @@ ul { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } + +.tw-m-1 { + margin: 0.25rem; +} + +.tw-my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.tw-mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.tw-mr-1 { + margin-right: 0.25rem; +} + +.tw-translate-y-1 { + --tw-translate-y: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.tw-translate-y-\[-1\] { + --tw-translate-y: -1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.tw-translate-y-\[-1px\] { + --tw-translate-y: -1px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.tw-border-t-2 { + border-top-width: 2px; +} + +.tw-border-t { + border-top-width: 1px; +} + +.tw-border-\[\] { + border-color: ; +} + +.tw-border-\[\$\] { + border-color: $; +} + +.tw-border-\[\#\#363636\] { + border-color: ##363636; +} + +.tw-border-\[\#363636\] { + --tw-border-opacity: 1; + border-color: rgb(54 54 54 / var(--tw-border-opacity)); +} + +.tw-border-\[\#f0f0f0\] { + --tw-border-opacity: 1; + border-color: rgb(240 240 240 / var(--tw-border-opacity)); +} + +.tw-bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.tw-bg-transparent { + background-color: transparent; +} + +.tw-p-4 { + padding: 1rem; +} + +.tw-px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.tw-py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.tw-shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.tw-shadow-black { + --tw-shadow-color: #000; + --tw-shadow: var(--tw-shadow-colored); +} + +.tw-outline { + outline-style: solid; +} + +.tw-outline-offset-1 { + outline-offset: 1px; +} + +.tw-transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.tw-duration-300 { + transition-duration: 300ms; +} + +.tw-ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\] { + text-shadow: 0 1px 0 rgb(0 0 0 / 40%); +} + +.hover\:tw-bg-gray-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.hover\:tw-bg-\[\]:hover { + background-color: ; +} + +.hover\:tw-bg-\[\#f0f0f0\]:hover { + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.hover\:tw-font-semibold:hover { + font-weight: 600; +} + +.hover\:tw-font-medium:hover { + font-weight: 500; +} + +.hover\:tw-shadow-sm:hover { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:tw-shadow:hover { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:tw-shadow-inner:hover { + --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:tw-shadow-xl:hover { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:tw-shadow-md:hover { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\]:hover { + text-shadow: 0 1px 0 rgb(0 0 0 / 40%); +} + +.aria-selected\:tw-border-b-4[aria-selected="true"] { + border-bottom-width: 4px; +} + +.aria-selected\:tw-border-doit-blue-light[aria-selected="true"] { + --tw-border-opacity: 1; + border-color: rgb(45 150 189 / var(--tw-border-opacity)); +} + +.aria-selected\:tw-font-bold[aria-selected="true"] { + font-weight: 700; +} + +.aria-selected\:tw-text-doit-blue-light[aria-selected="true"] { + --tw-text-opacity: 1; + color: rgb(45 150 189 / var(--tw-text-opacity)); +} + +:is(.tw-dark .dark\:tw-border-doit-grey-700) { + --tw-border-opacity: 1; + border-color: rgb(67 80 91 / var(--tw-border-opacity)); +} + +:is(.tw-dark .dark\:tw-border-doit-grey-600) { + --tw-border-opacity: 1; + border-color: rgb(77 95 109 / var(--tw-border-opacity)); +} + +:is(.tw-dark .dark\:tw-border-doit-grey-950) { + --tw-border-opacity: 1; + border-color: rgb(32 37 43 / var(--tw-border-opacity)); +} + +:is(.tw-dark .dark\:tw-border-doit-grey-800) { + --tw-border-opacity: 1; + border-color: rgb(60 69 78 / var(--tw-border-opacity)); +} + +:is(.tw-dark .dark\:tw-border-\[\#363636\]) { + --tw-border-opacity: 1; + border-color: rgb(54 54 54 / var(--tw-border-opacity)); +} + +:is(.tw-dark .dark\:tw-bg-doit-grey-800) { + --tw-bg-opacity: 1; + background-color: rgb(60 69 78 / var(--tw-bg-opacity)); +} + +:is(.tw-dark .dark\:tw-shadow-white) { + --tw-shadow-color: #fff; + --tw-shadow: var(--tw-shadow-colored); +} + +:is(.tw-dark .dark\:hover\:tw-bg-gray-800:hover) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +:is(.tw-dark .dark\:hover\:tw-bg-doit-grey-950:hover) { + --tw-bg-opacity: 1; + background-color: rgb(32 37 43 / var(--tw-bg-opacity)); +} + +:is(.tw-dark .dark\:aria-selected\:tw-bg-doit-grey-950[aria-selected="true"]) { + --tw-bg-opacity: 1; + background-color: rgb(32 37 43 / var(--tw-bg-opacity)); +} + +:is(.tw-dark .dark\:aria-selected\:tw-text-doit-blue-400[aria-selected="true"]) { + --tw-text-opacity: 1; + color: rgb(85 189 226 / var(--tw-text-opacity)); +} diff --git a/assets/js/theme.js b/assets/js/theme.js index ff5deb477..bc0cc7bfd 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -90,15 +90,8 @@ function initMenuMobile () { * @param {string} theme */ function setColorTheme (theme) { - // set body attribute for CSS selector - document.body.setAttribute('theme', theme) - // set root color scheme - // https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme - document.documentElement.style.setProperty('color-scheme', theme === 'light' ? 'light' : 'dark') - // save to local storage - window.localStorage && localStorage.setItem('theme', theme) - // set window.isDark for js - window.isDark = !(theme === 'light') + window.setTheme(theme) + window.saveTheme(theme) } /** diff --git a/assets/lib/tabs/tabs.min.js b/assets/lib/tabs/tabs.min.js new file mode 100644 index 000000000..b8f1c575d --- /dev/null +++ b/assets/lib/tabs/tabs.min.js @@ -0,0 +1,8 @@ +/** + * Minified by jsDelivr using Terser v5.19.2. + * Original file: /npm/@github/tab-container-element@4.5.0/dist/bundle.js + * + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +var _a,_TabContainerChangeEvent_tabIndex,_TabContainerChangeEvent_panel,_TabContainerChangeEvent_tab,_TabContainerElement_instances,_TabContainerElement_onTabContainerChange,_TabContainerElement_onTabContainerChanged,_TabContainerElement_tabList_get,_TabContainerElement_tabListTabWrapper_get,_TabContainerElement_beforeTabsSlot_get,_TabContainerElement_afterTabsSlot_get,_TabContainerElement_afterPanelsSlot_get,_TabContainerElement_tabListSlot_get,_TabContainerElement_panelSlot_get,_TabContainerElement_tabs_get,_TabContainerElement_setupComplete,_TabContainerElement_internals,_TabContainerElement_handleKeydown,_TabContainerElement_handleClick,_TabContainerElement_reflectAttributeToShadow,__defProp=Object.defineProperty,__name=(e,t)=>__defProp(e,"name",{value:t,configurable:!0}),__classPrivateFieldSet=function(e,t,a,n,i){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?i.call(e,a):i?i.value=a:t.set(e,a),a},__classPrivateFieldGet=function(e,t,a,n){if("a"===a&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===a?n:"a"===a?n.call(e):n?n.value:t.get(e)},__rest=function(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);ie.matches("[aria-selected=true]")))}set selectedTabIndex(e){this.selectTab(e)}get defaultTabIndex(){return Number(this.getAttribute("default-tab")||-1)}set defaultTabIndex(e){this.setAttribute("default-tab",String(e))}selectTab(e){if(!__classPrivateFieldGet(this,_TabContainerElement_setupComplete,"f")){const t=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListSlot_get),a=this.querySelector("[role=tablist]");if(a&&a.closest(this.tagName)===this)manualSlotsSupported?t.assign(a):a.setAttribute("slot","tablist");else if(__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListTabWrapper_get).role="tablist",manualSlotsSupported)t.assign(...[...this.children].filter((e=>e.matches("[role=tab]"))));else for(const e of this.children)e.matches("[role=tab]")&&e.setAttribute("slot","tablist");const n=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabList_get);__classPrivateFieldGet(this,_TabContainerElement_instances,"m",_TabContainerElement_reflectAttributeToShadow).call(this,"aria-description",n),__classPrivateFieldGet(this,_TabContainerElement_instances,"m",_TabContainerElement_reflectAttributeToShadow).call(this,"aria-label",n),this.vertical&&__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabList_get).setAttribute("aria-orientation","vertical");const i=[],r=[],s=[];let l=i;for(const e of this.children)"tab"!==e.getAttribute("role")&&"tablist"!==e.getAttribute("role")?"tabpanel"!==e.getAttribute("role")?"before-tabs"===e.getAttribute("slot")?i.push(e):"after-tabs"===e.getAttribute("slot")?r.push(e):l.push(e):l=s:l=r;if(manualSlotsSupported)__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_beforeTabsSlot_get).assign(...i),__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_afterTabsSlot_get).assign(...r),__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_afterPanelsSlot_get).assign(...s);else{for(const e of i)e.setAttribute("slot","before-tabs");for(const e of r)e.setAttribute("slot","after-tabs");for(const e of s)e.setAttribute("slot","after-panels")}const o=this.defaultTabIndex,_=o>=0?o:this.selectedTabIndex;e=e>=0?e:Math.max(0,_)}const t=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabs_get),a=Array.from(this.querySelectorAll('[role="tabpanel"]')).filter((e=>e.closest(this.tagName)===this));if(e>t.length-1)throw new RangeError(`Index "${e}" out of bounds`);const n=t[e],i=a[e];if(__classPrivateFieldGet(this,_TabContainerElement_setupComplete,"f")){if(!this.dispatchEvent(new TabContainerChangeEvent("tab-container-change",{tabIndex:e,bubbles:!0,cancelable:!0,tab:n,panel:i})))return}for(const e of t)e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1");for(const e of a)e.hasAttribute("tabindex")||e.hasAttribute("data-tab-container-no-tabstop")||e.setAttribute("tabindex","0"),!manualSlotsSupported&&e.hasAttribute("slot")&&e.removeAttribute("slot");n.setAttribute("aria-selected","true"),n.setAttribute("tabindex","0"),manualSlotsSupported?__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_panelSlot_get).assign(i):i.setAttribute("slot","panel"),i.hidden=!1,__classPrivateFieldGet(this,_TabContainerElement_setupComplete,"f")&&(n.focus(),this.dispatchEvent(new TabContainerChangeEvent("tab-container-changed",{tabIndex:e,bubbles:!0,tab:n,panel:i})))}},TabContainerElement=_TabContainerElement;__name(_TabContainerElement,"TabContainerElement"),_TabContainerElement_onTabContainerChange=new WeakMap,_TabContainerElement_onTabContainerChanged=new WeakMap,_TabContainerElement_setupComplete=new WeakMap,_TabContainerElement_internals=new WeakMap,_TabContainerElement_instances=new WeakSet,_TabContainerElement_tabList_get=__name((function(){const e=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListSlot_get);return __classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListTabWrapper_get).hasAttribute("role")?__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListTabWrapper_get):e.assignedNodes()[0]}),"_TabContainerElement_tabList_get"),_TabContainerElement_tabListTabWrapper_get=__name((function(){return this.shadowRoot.querySelector('div[part="tablist-tab-wrapper"]')}),"_TabContainerElement_tabListTabWrapper_get"),_TabContainerElement_beforeTabsSlot_get=__name((function(){return this.shadowRoot.querySelector('slot[part="before-tabs"]')}),"_TabContainerElement_beforeTabsSlot_get"),_TabContainerElement_afterTabsSlot_get=__name((function(){return this.shadowRoot.querySelector('slot[part="after-tabs"]')}),"_TabContainerElement_afterTabsSlot_get"),_TabContainerElement_afterPanelsSlot_get=__name((function(){return this.shadowRoot.querySelector('slot[part="after-panels"]')}),"_TabContainerElement_afterPanelsSlot_get"),_TabContainerElement_tabListSlot_get=__name((function(){return this.shadowRoot.querySelector('slot[part="tablist"]')}),"_TabContainerElement_tabListSlot_get"),_TabContainerElement_panelSlot_get=__name((function(){return this.shadowRoot.querySelector('slot[part="panel"]')}),"_TabContainerElement_panelSlot_get"),_TabContainerElement_tabs_get=__name((function(){var e;return __classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListTabWrapper_get).matches("[role=tablist]")?__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabListSlot_get).assignedNodes():Array.from((null===(e=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabList_get))||void 0===e?void 0:e.querySelectorAll('[role="tab"]'))||[]).filter((e=>e instanceof HTMLElement&&e.closest(this.tagName)===this))}),"_TabContainerElement_tabs_get"),_TabContainerElement_handleKeydown=__name((function(e){var t,a,n;const i=null===(a=null===(t=e.target)||void 0===t?void 0:t.closest)||void 0===a?void 0:a.call(t,'[role="tab"]');if(!i)return;const r=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabs_get);if(!r.includes(i))return;const s=this.selectedTabIndex,l="vertical"===(null===(n=i.closest('[role="tablist"]'))||void 0===n?void 0:n.getAttribute("aria-orientation")),o="ArrowLeft"===e.code||l&&"ArrowUp"===e.code;if("ArrowRight"===e.code||l&&"ArrowDown"===e.code){let e=s+1;e>=r.length&&(e=0),this.selectTab(e)}else if(o){let e=s-1;e<0&&(e=r.length-1),this.selectTab(e)}else"Home"===e.code?(this.selectTab(0),e.preventDefault()):"End"===e.code&&(this.selectTab(r.length-1),e.preventDefault())}),"_TabContainerElement_handleKeydown"),_TabContainerElement_handleClick=__name((function(e){var t,a;const n=null===(a=null===(t=e.target)||void 0===t?void 0:t.closest)||void 0===a?void 0:a.call(t,"[role=tab]");if(!n)return;const i=__classPrivateFieldGet(this,_TabContainerElement_instances,"a",_TabContainerElement_tabs_get).indexOf(n);i>=0&&this.selectTab(i)}),"_TabContainerElement_handleClick"),_TabContainerElement_reflectAttributeToShadow=__name((function(e,t){this.hasAttribute(e)&&(t.setAttribute(e,this.getAttribute(e)),this.removeAttribute(e))}),"_TabContainerElement_reflectAttributeToShadow"),TabContainerElement.observedAttributes=["vertical"];var root="undefined"!=typeof globalThis?globalThis:window;try{root.TabContainerElement=TabContainerElement.define()}catch(e){if(!(root.DOMException&&e instanceof DOMException&&"NotSupportedError"===e.name||e instanceof ReferenceError))throw e}var dist_default=TabContainerElement;export{TabContainerChangeEvent,TabContainerElement,dist_default as default}; +//# sourceMappingURL=/sm/79fbb1757fa59a94ada2a32407ba433cf1fd2bfac0d3963326379f912e0c1f85.map \ No newline at end of file diff --git a/exampleSite/config/_default/params.en.toml b/exampleSite/config/_default/params.en.toml index febf9d650..40f9fa84d 100644 --- a/exampleSite/config/_default/params.en.toml +++ b/exampleSite/config/_default/params.en.toml @@ -89,7 +89,7 @@ keywords = ["Theme", "Hugo"] subtitle = "A Clean, Elegant but Advanced Hugo Theme" # whether to use typeit animation for subtitle # 是否为副标题显示打字机动画 - typeit = true + typeit = false # whether to show social links # 是否显示社交账号 social = true diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 792657e24..509565762 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -67,7 +67,7 @@ srcsetLargeResizeMethod = "2000x webp Lanczos q75" post = "" # whether to use typeit animation for title name # 是否为标题显示打字机动画 - typeit = true + typeit = false # Footer config # 页面底部信息配置 diff --git a/exampleSite/config/_default/params.zh-cn.toml b/exampleSite/config/_default/params.zh-cn.toml index 83acb42c5..ebde376f4 100644 --- a/exampleSite/config/_default/params.zh-cn.toml +++ b/exampleSite/config/_default/params.zh-cn.toml @@ -89,7 +89,7 @@ keywords = ["Theme", "Hugo"] subtitle = "一个简洁、优雅且高效的 Hugo 主题" # whether to use typeit animation for subtitle # 是否为副标题显示打字机动画 - typeit = true + typeit = false # whether to show social links # 是否显示社交账号 social = true diff --git a/exampleSite/content/posts/tests/tab-tests/index.en.md b/exampleSite/content/posts/tests/tab-tests/index.en.md new file mode 100644 index 000000000..562d0bf0c --- /dev/null +++ b/exampleSite/content/posts/tests/tab-tests/index.en.md @@ -0,0 +1,218 @@ +--- +title: "Tab Tests" +date: 2023-05-20T17:50:43+01:00 +lastmod: 2023-05-20T17:50:43+01:00 +draft: true +description: "Tab Tests" +categories: [Tests] +authors: [PCloud] +hiddenFromHomePage: true +hiddenFromSearch: true +sponsor: + enable: false +--- + + + +## Tabs + +{{< tabs defaultTab="1" >}} + +{{% tab title="Tab 1" %}} + +Content 1 + +{{% /tab %}} + +{{% tab title="Tab 2" %}} + +Content 2 + +{{% /tab %}} + +{{< /tabs >}} + +## Tabs with Markdown + +{{< tabs >}} + +{{% tab title="Tab 1" %}} + +## Markdown Content 1 + +### Markdown Content 2 + +``` +code +``` + +{{% /tab %}} + +{{% tab title="Tab 2" select=true %}} + +Content 2 + +{{% /tab %}} + +{{< /tabs >}} + +## Single Tab + +{{< tabs >}} + +{{% tab title="Tab 1" %}} + +Content 1 + +{{% /tab %}} + +{{< /tabs >}} + +## Nested Tabs + +{{< tabs >}} + +{{< tab title="Tab 1" >}} + +SubTab 1 + +{{< tabs >}} + +{{< tab title="Tab 1" >}} + +Content 1 + +{{< /tab >}} + +{{< tab title="Tab 2" >}} + +Content 2 + +{{< /tab >}} + +{{< /tabs >}} + +{{< /tab >}} + +{{< tab title="Tab 2" >}} + +SubTab 2 + +{{< tabs >}} + +{{< tab title="Tab 1" >}} + +Content 1 + +{{< /tab >}} + +{{< tab title="Tab 2" >}} + +Content 2 + +{{< /tab >}} + +{{< /tabs >}} + +{{< /tab >}} + +{{< /tabs >}} + +## Overflow Tabs + +{{< tabs >}} + +{{% tab title="Tab 1" %}} + +Content 1 + +{{% /tab %}} + +{{% tab title="Tab 2" %}} + +Content 2 + +{{% /tab %}} + +{{% tab title="Tab 3" %}} + +Content 3 + +{{% /tab %}} + +{{% tab title="Tab 4" %}} + +Content 4 + +{{% /tab %}} + +{{% tab title="Tab 5" %}} + +Content 5 + +{{% /tab %}} + +{{% tab title="Tab 6" %}} + +Content 6 + +{{% /tab %}} + +{{% tab title="Tab 7" %}} + +Content 7 + +{{% /tab %}} + +{{% tab title="Tab 8" %}} + +Content 8 + +{{% /tab %}} + +{{% tab title="Tab 9" %}} + +Content 9 + +{{% /tab %}} + +{{% tab title="Tab 10" %}} + +Content 10 + +{{% /tab %}} + +{{% tab title="Tab 11" %}} + +Content 11 + +{{% /tab %}} + +{{% tab title="Tab 12" %}} + +Content 12 + +{{% /tab %}} + +{{< /tabs >}} + +--- + +## Tab with super long name + +{{< tabs >}} + +{{% tab title="Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab Tab " %}} + +Content 1 + +{{% /tab %}} + +{{% tab title="Tab 2" %}} + +Content 2 + +{{% /tab %}} + +{{< /tabs >}} + diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md index d93de3ad6..a920b6886 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md @@ -1469,3 +1469,63 @@ The rendered output looks like this: {{< math >}} $$\|\boldsymbol{x}\|_{0}=\sqrt[0]{\sum_{i} x_{i}^{0}}$$ {{< /math >}} + +## tabs and tab + +`tabs` and `tab` are two shortcodes, when used together, can create a tab component for your content. + +Example `tabs` and `tab` input: + +````markdown +{{}} + +{{%/* tab title="Tab 1" */%}} + +### Title 1 + +Hi there! + +#### Title 2 + +```py +print("Hello world!") +``` + +{{%/* /tab */%}} + +{{%/* tab title="Tab 2" */%}} + +Yet another tab + +{{%/* /tab */%}} + +{{}} +```` + +The rendered output looks like this: + +{{< tabs >}} + +{{% tab title="Tab 1" %}} + +### Title 1 + +Hi there! + +#### Title 2 + +```py +print("Hello world!") +``` + +{{% /tab %}} + +{{% tab title="Tab 2" %}} + +Yet another tab + +{{% /tab %}} + +{{< /tabs >}} + +Due to limitations in the Hugo shortcode system, nested tabs may not work as expected. diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md index d76767827..105f7ecf3 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md @@ -1473,3 +1473,62 @@ $$\|\boldsymbol{x}\|_{0}=\sqrt[0]{\sum_{i} x_{i}^{0}}$$ {{< math >}} $$\|\boldsymbol{x}\|_{0}=\sqrt[0]{\sum_{i} x_{i}^{0}}$$ {{< /math >}} + +## tabs 和 tab + +`tabs` 和 `tab` 是两个 shortcodes, 当一起使用时, 可以为你的内容创建一个选项卡组件。 + +一个 `tabs` 和 `tab` 示例: + +````markdown +{{}} + +{{%/* tab title="选项卡 1" */%}} + +### 标题 1 + +你好👋 + +#### 标题 2 + +```py +print("Hello world!") +``` + +{{%/* /tab */%}} + +{{%/* tab title="选项卡 2" */%}} + +另一个选项卡 + +{{%/* /tab */%}} + +{{}} +```` +呈现的输出效果如下： + +{{< tabs >}} + +{{% tab title="选项卡 1" %}} + +### 标题 1 + +你好👋 + +#### 标题 2 + +```py +print("Hello world!") +``` + +{{% /tab %}} + +{{% tab title="选项卡 2" %}} + +另一个选项卡 + +{{% /tab %}} + +{{< /tabs >}} + +由于 Hugo shortcode 系统的限制，嵌套的选项卡可能无法正常工作。 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index de3a05603..a188efbf1 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -35,7 +35,17 @@ {{- /* Check theme isDark before body rendering */ -}} {{- $theme := .Site.Params.defaulttheme -}} */ -}} + {{- $source := $cdn.tabsjs | default "lib/tabs/tabs.min.js" -}} + {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true "Module" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} +{{- end -}} + {{- /* Music */ -}} {{- if (.Scratch.Get "this").aplayer | or (.Scratch.Get "this").music -}} {{- /* APlayer */ -}} @@ -231,18 +237,18 @@ {{- end -}} {{- range $params.library.js -}} - {{- /* Check if it is string for compatibility */ -}} - {{- /* somejs = "src" */ -}} - {{- /* [params.page.library.js.somejs] */ -}} - {{- /* src = "src" */ -}} - {{- /* async = true */ -}} - {{- /* defer = true */ -}} - {{- /* attr = "attr" */ -}} - {{- if eq (printf "%T" . ) "string" -}} - {{- dict "Source" . "Fingerprint" $fingerprint | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}} - {{- else -}} - {{- dict "Source" .src "Fingerprint" $fingerprint "Defer" .defer "Async" .async "Attr" .attr| dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}} - {{- end -}} + {{- /* Check if it is string for compatibility */ -}} + {{- /* somejs = "src" */ -}} + {{- /* [params.page.library.js.somejs] */ -}} + {{- /* src = "src" */ -}} + {{- /* async = true */ -}} + {{- /* defer = true */ -}} + {{- /* attr = "attr" */ -}} + {{- if eq (printf "%T" . ) "string" -}} + {{- dict "Source" . "Fingerprint" $fingerprint | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}} + {{- else -}} + {{- dict "Source" .src "Fingerprint" $fingerprint "Defer" .defer "Module" .module "Async" .async "Attr" .attr| dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}} + {{- end -}} {{- end -}} {{/* Custom style */}} diff --git a/layouts/partials/plugin/script.html b/layouts/partials/plugin/script.html index 5f1e48da3..ce1cd5d88 100644 --- a/layouts/partials/plugin/script.html +++ b/layouts/partials/plugin/script.html @@ -23,8 +23,16 @@ {{- $src = $resource.RelPermalink -}} {{- end -}} {{- end -}} - {{- with .Link -}} - {{- $src = . -}} - {{- end -}} - + {{- end -}} + {{- with .Link -}} + {{- $src = . -}} + {{- end -}} + {{- end -}} diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html new file mode 100644 index 000000000..d417de2a6 --- /dev/null +++ b/layouts/shortcodes/tab.html @@ -0,0 +1,21 @@ +{{ if (not .IsNamedParams) }} + {{- errorf "Only named params is supported: %s" .Position -}} +{{ end }} +{{ $title := .Get "title" }} +{{ $id := dict "Content" "tab" "Scratch" .Page.Scratch | partial "function/id.html" }} +{{ .Parent.Scratch.Add "tabs" (slice (dict "title" $title "id" $id)) }} +
+ {{ if .Get "markdown" }} + {{ .Inner | markdownify }} + {{ else }} + {{ .Inner }} + {{ end }} +
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html new file mode 100644 index 000000000..b68bc7bbc --- /dev/null +++ b/layouts/shortcodes/tabs.html @@ -0,0 +1,49 @@ +{{/* Update the global config map so the JavaScript dependency will be loaded */}} +{{- .Page.Scratch.SetInMap "this" "tabs" true -}} +{{/* Get all children tabs */}} +{{- $tabs := .Scratch.Get "tabs" -}} +{{ if not $tabs -}} + {{- errorf "No tabs found. Please add at least one tab to the tabs shortcode. See %s %s" .Name .Position -}} +{{- end -}} +{{/* Get the number of tabs */}} +{{- $lenTabs := len $tabs -}} +{{/* Load the defaultTab config */}} +{{- $defaultTab := .Get "defaultTab" | default 0 -}} +{{- if ge $defaultTab $lenTabs -}} + {{- errorf "defaultTab index out of range. The number of tabs is %d, but got index %s. The index should be between 0 and length - 1. See %s %s" $lenTabs $defaultTab .Name .Position -}} +{{- end -}} + + + {{- range $index, $tab := $tabs -}} + {{- $title := $tab.title -}} + {{- $id := $tab.id -}} + {{- $tabindex := 0 -}} + {{- if ne $index 0 -}} + {{- $tabindex = -1 -}} + {{- end -}} + + {{ end }} + {{- .Inner -}} + diff --git a/package-lock.json b/package-lock.json index b405869fa..2a973f64d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,8 @@ "eslint-plugin-promise": "^6.1.1", "prettier": "^3.2.5", "prettier-plugin-go-template": "^0.0.15", - "tailwindcss": "^3.4.1" + "tailwindcss": "^3.4.1", + "tailwindcss-aria-attributes": "^2.0.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -6839,6 +6840,18 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-aria-attributes": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tailwindcss-aria-attributes/-/tailwindcss-aria-attributes-2.0.1.tgz", + "integrity": "sha512-MbU3dempvd2T1cTs4y6qSK4fxkj3TcN764PNWgVzOwBsn57OZmeYxUUzkVKLMV0xhlSLISvG+PdVbtzgVtfxQw==", + "dev": true, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "tailwindcss": ">=2.2" + } + }, "node_modules/tailwindcss/node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", diff --git a/package.json b/package.json index fe72fdfec..ca24e736e 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "DoIt theme source file", "private": true, "scripts": { - "dev": "concurrently \"npm run server\" \"npm run build:tailwind --watch\"", + "dev": "concurrently \"npm run server\" \"npm run server:tailwind --watch\"", "build": "hugo --logLevel info --source=exampleSite --themesDir ../.. --gc", "build:preview": "hugo --logLevel info --source=exampleSite --themesDir ../.. -D --gc", "server": "hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender", @@ -50,6 +50,7 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-n": "^16.6.2", "eslint-plugin-promise": "^6.1.1", - "tailwindcss": "^3.4.1" + "tailwindcss": "^3.4.1", + "tailwindcss-aria-attributes": "^2.0.1" } -} +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 5d870eaa0..838b4a7fb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,8 +2,42 @@ module.exports = { prefix: 'tw-', content: ['./layouts/**/*.html'], + darkMode: 'class', theme: { - extend: {} + extend: { + colors: { + "doit-blue": { + '50': '#f2f9fd', + '100': '#e4f2fa', + '200': '#c2e5f5', + '300': '#8cd2ed', + '400': '#55bde2', + '500': '#28a2cf', + '600': '#1a83af', + '700': '#16688e', + '800': '#165876', + '900': '#184a62', + '950': '#102f41', + 'light': '#2d96bd', + 'dark': '#55bde2', + }, + 'doit-grey': { + '50': '#f4f6f7', + '100': '#e2e8eb', + '200': '#c8d3d9', + '300': '#a2b3be', + '400': '#758c9b', + '500': '#5a7180', + '600': '#4d5f6d', + '700': '#43505b', + '800': '#3c454e', + '900': '#353c44', + '950': '#20252b', + }, + }, + } }, - plugins: [] + plugins: [ + require('tailwindcss-aria-attributes') + ] }