mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 04:14:41 +00:00
feat(tailwind): port blog TOC sidebar
This commit is contained in:
George Cushen committed
1 parent
0d12bd1d28
commit
de03f3f22d
19 files changed
+421
-130
No files matched your search
@@ -1,3 +1,5 @@
|
||||
@import "page.css";
|
||||
@import "task-list.css";
|
||||
@import "copy.css";
|
||||
@import "sidebar.css";
|
||||
@import "charts.css";
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Mermaid.js diagram div */
|
||||
div.mermaid {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plotly chart */
|
||||
div.chart {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
/* Add horizontal scroll on mobile since Plotly */
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@media (max-width: 767px) {
|
||||
.hb-sidebar-container {
|
||||
@apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain bg-white dark:bg-slate-700;
|
||||
contain: layout style;
|
||||
backface-visibility: hidden;
|
||||
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-sidebar-container {
|
||||
li > div {
|
||||
@apply h-0;
|
||||
}
|
||||
li.open > div {
|
||||
@apply h-auto pt-1;
|
||||
}
|
||||
li.open > a > span > svg > path {
|
||||
@apply rotate-90;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-3 h-3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply rounded-[10px];
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;-webkit-font-feature-settings:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;Line truncated
|
||||
/*! Hugo Blox Components | https://hugoblox.com */:root{--color-neutral-50:250 250 250;--color-neutral-100:245 245 245;--color-neutral-200:229 229 229;--color-neutral-300:212 212 212;--color-neutral-400:163 163 163;--color-neutral-500:115 115 115;--color-neutral-600:82 82 82;--color-neutral-700:64 64 64;--color-neutral-800:38 38 38;--color-neutral-900:23 23 23;--color-neutral-950:10 10 10;--color-secondary-50:250 250 250;--color-secondary-100:244 244 245;--color-secondary-200:228 228 231;--color-secondary-300:212 212 216;--color-secondary-400:161 161 170;--color-secondary-500:113 113 122;--color-secondary-600:82 82 91;--color-secondary-700:63 63 70;--color-secondary-800:39 39 42;--color-secondary-900:24 24 27;--color-secondary-950:9 9 11}.hbb-section{margin-bottom:2.5rem}.hbb-section:last-child{margin-bottom:0}.home-section-bg{position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1}.home-section-bg.bg-image{background-position:50%;background-repeat:no-repeat;background-size:cover}.bg-video{position:absolute;top:0;max-height:none}.bg-video.flip{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.parallax{background-attachment:fixed}.navbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{font-size:1.25rem;line-height:1.75rem;font-weight:600;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .navbar-brand){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.navbar-brand svg{height:1em;max-width:100%}.navbar-brand img,.navbar-brand svg{display:inline-block;max-height:100%;width:auto}input#nav-toggle:checked+label #show-button{display:none}input#nav-toggle:checked+label #hide-button,input#nav-toggle:checked~#nav-menu{display:block}#site-header.header{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-top:.75rem;padding-bottom:.75rem;--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:is(.dark #site-header.header){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.navbar-nav{text-align:center}@media (min-width:1024px){.navbar-nav{text-align:left}}.nav-link{display:block;padding:.75rem;font-weight:600;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform,-webkit-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-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.15s;transition-duration:.15s}.nav-link:hover{--tw-text-opacity:1;color:rgb(var(--color-primary-700)/var(--tw-text-opacity))}:is(.dark .nav-link){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .nav-link:hover){--tw-text-opacity:1;color:rgb(var(--color-primary-300)/var(--tw-text-opacity))}@media (min-width:1024px){.nav-link{padding:.75rem .5rem}}.nav-dropdown{margin-right:0}.nav-dropdown>svg{pointer-events:none}.nav-dropdown.active .nav-dropdown-list{display:block}.nav-dropdown-list{z-index:10;display:none;min-width:180px;border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-top:1rem;padding-bottom:1rem;--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:is(.dark .nav-dropdown-list){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}@media (min-width:1024px){.nav-dropdown-list{visibility:hidden;position:absolute;display:block;opacity:0}}.nav-dropdown-item{padding-left:1rem;padding-right:1rem}:is(.dark .nav-dropdown-item:hover){--tw-bg-opacity:1;background-color:rgb(var(--color-primary-500)/var(--tw-bg-opacity))}.nav-dropdown-item:not(:last-child){margin-bottom:.5rem}.nav-drLine truncated
|
||||
/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;-webkit-font-feature-settings:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;Line truncated
|
||||
/*! Hugo Blox Components | https://hugoblox.com */:root{--color-neutral-50:250 250 250;--color-neutral-100:245 245 245;--color-neutral-200:229 229 229;--color-neutral-300:212 212 212;--color-neutral-400:163 163 163;--color-neutral-500:115 115 115;--color-neutral-600:82 82 82;--color-neutral-700:64 64 64;--color-neutral-800:38 38 38;--color-neutral-900:23 23 23;--color-neutral-950:10 10 10;--color-secondary-50:250 250 250;--color-secondary-100:244 244 245;--color-secondary-200:228 228 231;--color-secondary-300:212 212 216;--color-secondary-400:161 161 170;--color-secondary-500:113 113 122;--color-secondary-600:82 82 91;--color-secondary-700:63 63 70;--color-secondary-800:39 39 42;--color-secondary-900:24 24 27;--color-secondary-950:9 9 11}.hbb-section{margin-bottom:2.5rem}.hbb-section:last-child{margin-bottom:0}.home-section-bg{position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1}.home-section-bg.bg-image{background-position:50%;background-repeat:no-repeat;background-size:cover}.bg-video{position:absolute;top:0;max-height:none}.bg-video.flip{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.parallax{background-attachment:fixed}.navbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{font-size:1.25rem;line-height:1.75rem;font-weight:600;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .navbar-brand){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.navbar-brand svg{height:1em;max-width:100%}.navbar-brand img,.navbar-brand svg{display:inline-block;max-height:100%;width:auto}input#nav-toggle:checked+label #show-button{display:none}input#nav-toggle:checked+label #hide-button,input#nav-toggle:checked~#nav-menu{display:block}#site-header.header{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-top:.75rem;padding-bottom:.75rem;--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:is(.dark #site-header.header){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.navbar-nav{text-align:center}@media (min-width:1024px){.navbar-nav{text-align:left}}.nav-link{display:block;padding:.75rem;font-weight:600;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform,-webkit-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-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.15s;transition-duration:.15s}.nav-link:hover{--tw-text-opacity:1;color:rgb(var(--color-primary-700)/var(--tw-text-opacity))}:is(.dark .nav-link){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .nav-link:hover){--tw-text-opacity:1;color:rgb(var(--color-primary-300)/var(--tw-text-opacity))}@media (min-width:1024px){.nav-link{padding:.75rem .5rem}}.nav-dropdown{margin-right:0}.nav-dropdown>svg{pointer-events:none}.nav-dropdown.active .nav-dropdown-list{display:block}.nav-dropdown-list{z-index:10;display:none;min-width:180px;border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-top:1rem;padding-bottom:1rem;--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:is(.dark .nav-dropdown-list){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}@media (min-width:1024px){.nav-dropdown-list{visibility:hidden;position:absolute;display:block;opacity:0}}.nav-dropdown-item{padding-left:1rem;padding-right:1rem}:is(.dark .nav-dropdown-item:hover){--tw-bg-opacity:1;background-color:rgb(var(--color-primary-500)/var(--tw-bg-opacity))}.nav-dropdown-item:not(:last-child){margin-bottom:.5rem}.nav-drLine truncated
|
||||
@@ -1,65 +1,55 @@
|
||||
# Hugo Blox
|
||||
# Social sharing buttons
|
||||
# Social sharing links
|
||||
# Docs: https://docs.hugoblox.com/reference/page-sharer/
|
||||
|
||||
buttons:
|
||||
- id: twitter
|
||||
links:
|
||||
- id: x
|
||||
url: 'https://twitter.com/intent/tweet?url={url}&text={title}'
|
||||
title: Twitter
|
||||
icon_pack: fab
|
||||
icon: twitter
|
||||
title: X
|
||||
icon: brands/x
|
||||
enable: true
|
||||
- id: facebook
|
||||
url: 'https://www.facebook.com/sharer.php?u={url}&t={title}'
|
||||
title: Facebook
|
||||
icon_pack: fab
|
||||
icon: facebook
|
||||
icon: brands/facebook
|
||||
enable: true
|
||||
- id: email
|
||||
url: 'mailto:?subject={title}&body={url}'
|
||||
title: Email
|
||||
icon_pack: fas
|
||||
icon: envelope
|
||||
icon: hero/at-symbol
|
||||
enable: true
|
||||
- id: linkedin
|
||||
url: 'https://www.linkedin.com/shareArticle?url={url}&title={title}'
|
||||
title: LinkedIn
|
||||
icon_pack: fab
|
||||
icon: linkedin-in
|
||||
icon: brands/linkedin
|
||||
enable: true
|
||||
- id: whatsapp
|
||||
url: 'whatsapp://send?text={title}%20{url}'
|
||||
title: WhatsApp
|
||||
icon_pack: fab
|
||||
icon: whatsapp
|
||||
icon: brands/whatsapp
|
||||
enable: true
|
||||
- id: weibo
|
||||
url: 'https://service.weibo.com/share/share.php?url={url}&title={title}'
|
||||
title: Weibo
|
||||
icon_pack: fab
|
||||
icon: weibo
|
||||
enable: true
|
||||
- id: reddit
|
||||
url: 'https://reddit.com/submit?url={url}&title={title}'
|
||||
title: Reddit
|
||||
icon_pack: fab
|
||||
icon: reddit-alien
|
||||
enable: false
|
||||
- id: pinterest
|
||||
url: 'https://pinterest.com/pin/create/link/?url={url}&description={title}'
|
||||
title: Pinterest
|
||||
icon_pack: fab
|
||||
icon: pinterest
|
||||
enable: false
|
||||
- id: xing
|
||||
url: 'https://www.xing.com/spi/shares/new?url={url}&title={title}'
|
||||
title: Xing
|
||||
icon_pack: fab
|
||||
icon: xing
|
||||
enable: false
|
||||
- id: tumblr
|
||||
url: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}&title={title}'
|
||||
title: Tumblr
|
||||
icon_pack: fab
|
||||
icon: tumblr
|
||||
enable: false
|
||||
# - id: weibo
|
||||
# url: 'https://service.weibo.com/share/share.php?url={url}&title={title}'
|
||||
# title: Weibo
|
||||
# icon: weibo
|
||||
# enable: true
|
||||
# - id: reddit
|
||||
# url: 'https://reddit.com/submit?url={url}&title={title}'
|
||||
# title: Reddit
|
||||
# icon: reddit-alien
|
||||
# enable: false
|
||||
# - id: pinterest
|
||||
# url: 'https://pinterest.com/pin/create/link/?url={url}&description={title}'
|
||||
# title: Pinterest
|
||||
# icon: pinterest
|
||||
# enable: false
|
||||
# - id: xing
|
||||
# url: 'https://www.xing.com/spi/shares/new?url={url}&title={title}'
|
||||
# title: Xing
|
||||
# icon: xing
|
||||
# enable: false
|
||||
# - id: tumblr
|
||||
# url: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}&title={title}'
|
||||
# title: Tumblr
|
||||
# icon: tumblr
|
||||
# enable: false
|
||||
@@ -7,7 +7,7 @@
|
||||
translation: Table of Contents
|
||||
|
||||
- id: on_this_page
|
||||
translation: Contents
|
||||
translation: On this page
|
||||
|
||||
- id: back_to_top
|
||||
translation: Back to top
|
||||
|
||||
@@ -1,52 +1,94 @@
|
||||
{{ define "main" }}
|
||||
<div class="flex flex-col justify-center">
|
||||
<article class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert">
|
||||
{{/* Check whether to show breadcrumb navigation. */}}
|
||||
{{ $show_breadcrumb := .Params.show_breadcrumb }}
|
||||
{{ if $show_breadcrumb }}
|
||||
<div class="mb-3">
|
||||
{{ partial "components/breadcrumb" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="mx-auto flex max-w-screen-xl">
|
||||
{{ partial "components/sidebar.html" (dict "context" . "disable" true "empty" true) }}
|
||||
{{ partial "components/toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
|
||||
<h1 class="lg:text-6xl">{{ .Title }}</h1>
|
||||
|
||||
{{ $featured := partial "functions/get_featured_image.html" . }}
|
||||
{{/* Featured image layout */}}
|
||||
{{ if and $featured (not .Params.image.preview_only) }}
|
||||
{{/* Fit image within max size. */}}
|
||||
{{ $image := $featured }}
|
||||
|
||||
{{/* Determine image placement. */}}
|
||||
{{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
|
||||
{{/* Fit image to container's max width */}}
|
||||
{{ $image_container := "" }}
|
||||
{{ if eq $placement 2}}
|
||||
{{ $image_container = "container" }}
|
||||
{{ $image = $featured.Fit "1200x2500" }}
|
||||
{{else if eq $placement 3}}
|
||||
{{ $image_container = "container-fluid" }}
|
||||
{{ $image := $featured.Fit "2560x2560" }}
|
||||
{{else}}
|
||||
{{ $image_container = "article-container" }}
|
||||
{{ $image = $featured.Fit "720x2500" }}
|
||||
{{end}}
|
||||
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
|
||||
{{/* Featured image */}}
|
||||
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
|
||||
<div style="position: relative">
|
||||
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
|
||||
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
|
||||
{{ if .Params.show_breadcrumb }}
|
||||
<div class="mb-4">
|
||||
{{ partial "components/breadcrumb.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
|
||||
{{ .Content }}
|
||||
<h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
{{- .Title -}}
|
||||
</h1>
|
||||
|
||||
<div class="mt-4 mb-16 text-gray-500 dark:text-gray-300 text-sm flex items-center flex-wrap gap-y-2">
|
||||
{{- if .Date | and (not .Params.hide_date) }}<span class="mr-1">{{- .Date | time.Format (site.Params.locale.date_format | default ":date_long") -}}</span>{{ end -}}
|
||||
{{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
|
||||
|
||||
{{ $taxonomy := "authors" }}
|
||||
{{ range $i, $author_obj := (.GetTerms $taxonomy) }}
|
||||
{{ $author_page := $author_obj.Page }}
|
||||
{{ $avatar := ($author_page.Resources.ByType "image").GetMatch "*avatar*" }}
|
||||
{{- if and $i (not $avatar) }}<span class="mr-1">,</span>{{ end -}}
|
||||
{{ with $author_page.Params.website }}
|
||||
<a href="{{.}}" target="_blank" rel="noreferrer">
|
||||
{{ end }}
|
||||
<div class="group inline-flex items-center text-current gap-x-1.5 mx-1">
|
||||
{{ with $avatar }}
|
||||
{{ $avatar = $avatar.Process "Fill 50x50 Center webp" }}
|
||||
<img src="{{ $avatar.RelPermalink }}" alt="{{ $author_page.Title }}" class="inline-block h-4 w-4 rounded-full border border-current" loading="lazy" />
|
||||
{{ end }}
|
||||
<div {{if $author_page.Params.website}}class="group-hover:underline"{{end}}>{{ $author_page.Title }}</div>
|
||||
</div>
|
||||
{{ with $author_page.Params.website }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if ne .Params.reading_time false }}
|
||||
<span class="mx-1">·</span>
|
||||
<span class="mx-1">
|
||||
{{ .ReadingTime }} {{ i18n "minute_read" }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ $featured := partial "functions/get_featured_image.html" . }}
|
||||
{{/* Featured image layout */}}
|
||||
{{ if and $featured (not .Params.image.preview_only) }}
|
||||
{{/* Fit image within max size. */}}
|
||||
{{ $image := $featured }}
|
||||
|
||||
{{/* Determine image placement. */}}
|
||||
{{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
|
||||
{{/* Fit image to container's max width */}}
|
||||
{{ $image_container := "" }}
|
||||
{{ if eq $placement 2}}
|
||||
{{ $image_container = "container" }}
|
||||
{{ $image = $featured.Fit "1200x2500" }}
|
||||
{{else if eq $placement 3}}
|
||||
{{ $image_container = "container-fluid" }}
|
||||
{{ $image := $featured.Fit "2560x2560" }}
|
||||
{{else}}
|
||||
{{ $image_container = "article-container" }}
|
||||
{{ $image = $featured.Fit "720x2500" }}
|
||||
{{end}}
|
||||
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
|
||||
{{/* Featured image */}}
|
||||
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-16" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
|
||||
<div style="position: relative">
|
||||
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
|
||||
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="prose prose-slate lg:prose-xl dark:prose-invert">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "components/last-edited.html" . }}
|
||||
|
||||
<div class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert mt-5">
|
||||
{{ .Scratch.Set "invert_pager" true }}
|
||||
{{ partial "page_footer" . }}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</article>
|
||||
|
||||
<div class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert mt-5">
|
||||
{{ partial "page_footer" . }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,11 @@
|
||||
{{- $last_updated := T "last_updated" -}}
|
||||
|
||||
{{- if .Params.show_date_updated | and .Lastmod -}}
|
||||
{{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .Lastmod) }}
|
||||
<time class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400" datetime="{{ $datetime }}">
|
||||
<span>{{ $last_updated }}</span>
|
||||
{{ .Lastmod | time.Format (site.Params.locale.date_format | default ":date_long") -}}
|
||||
</time>
|
||||
{{- else -}}
|
||||
<div class="mt-16"></div>
|
||||
{{- end -}}
|
||||
@@ -2,14 +2,14 @@
|
||||
{{ if or .NextInSection .PrevInSection }}
|
||||
{{ $next := .NextInSection }}
|
||||
{{ $prev := .PrevInSection }}
|
||||
{{ if .Params.invert_pager | default false }}
|
||||
{{ if (eq (.Scratch.Get "invert_pager") true) | default .Params.invert_pager | default false }}
|
||||
{{ $next = .PrevInSection }}
|
||||
{{ $prev = .NextInSection }}
|
||||
{{ end }}
|
||||
<div class="pt-1">
|
||||
<div class="pt-1 no-prose">
|
||||
<hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
|
||||
<div class="flex justify-between pt-2">
|
||||
<span>
|
||||
<div class="flex flex-col md:flex-row flex-nowrap justify-between gap-5 pt-2">
|
||||
<div class="flex-1 flex-grow">
|
||||
{{ if $prev }}
|
||||
<a class="group flex no-underline" href="{{ $prev.RelPermalink }}">
|
||||
<span
|
||||
@@ -27,8 +27,8 @@
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</span>
|
||||
<span>
|
||||
</div>
|
||||
<span class="flex-1 flex-grow">
|
||||
{{ if $next }}
|
||||
<a class="group flex text-right no-underline" href="{{ $next.RelPermalink }}">
|
||||
<span class="flex flex-col">
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
{{ if ne .Params.share false }}
|
||||
<div class="share-box">
|
||||
<ul class="share">
|
||||
{{ range where site.Data.page_sharer.buttons "enable" true }}
|
||||
{{ $pack := or .icon_pack "fas" }}
|
||||
{{ $pack_prefix := $pack }}
|
||||
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
|
||||
{{ $pack_prefix = "fa" }}
|
||||
{{ end }}
|
||||
{{/* Utilise `urlquery` over `htmlEscape` to encode sharing URL */}}
|
||||
{{/* See https://github.com/HugoBlox/hugo-blox-builder/pull/2726 */}}
|
||||
{{ $link := replace .url "{url}" ($.Permalink | urlquery) }}
|
||||
{{ $link = replace $link "{title}" ($.Title | urlquery) }}
|
||||
{{/* Workaround `urlquery` encoding for mailto as `urlquery` encodes `+` as `%2B` and ` ` (space) as `+` */}}
|
||||
{{ if eq (urls.Parse $link).Scheme "mailto" }}
|
||||
{{ $link = replace $link "+" "%20" }}
|
||||
{{ end }}
|
||||
<li>
|
||||
<a href="{{$link|safeURL}}" target="_blank" rel="noopener" class="share-btn-{{.id}}" aria-label="{{.icon}}">
|
||||
<i class="{{$pack}} {{$pack_prefix}}-{{.icon}}"></i>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
{{ range where site.Data.page_sharer.links "enable" true }}
|
||||
|
||||
{{/* Utilise `urlquery` over `htmlEscape` to encode sharing URL */}}
|
||||
{{/* See https://github.com/HugoBlox/hugo-blox-builder/pull/2726 */}}
|
||||
{{ $link := replace .url "{url}" ($.Permalink | urlquery) }}
|
||||
{{ $link = replace $link "{title}" ($.Title | urlquery) }}
|
||||
{{/* Workaround `urlquery` encoding for mailto as `urlquery` encodes `+` as `%2B` and ` ` (space) as `+` */}}
|
||||
{{ if eq (urls.Parse $link).Scheme "mailto" }}
|
||||
{{ $link = replace $link "+" "%20" }}
|
||||
{{ end }}
|
||||
<a
|
||||
target="_blank" rel="noopener"
|
||||
class="m-1 rounded-md bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral-300 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="{{$link|safeURL}}"
|
||||
title="{{ .title }}"
|
||||
aria-label="{{ .title }}"
|
||||
id="share-link-{{.id}}"
|
||||
>
|
||||
{{ partial "functions/get_icon" (dict "name" .icon "attributes" "style=\"height: 1em;\"") }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,12 @@
|
||||
{{- $is_disabled := .disable | default false -}}
|
||||
{{- $is_empty := .empty | default false -}}
|
||||
|
||||
{{- $sidebar_class := cond $is_disabled (cond $is_empty "md:hidden xl:block" "md:hidden") "md:sticky" -}}
|
||||
|
||||
<div class="hidden mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60"></div>
|
||||
|
||||
<aside class="hb-sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebar_class }}">
|
||||
<div class="hb-scrollbar overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
|
||||
<div class="max-xl:hidden h-0 w-64 shrink-0"></div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,72 @@
|
||||
{{/* Table of Contents */}}
|
||||
|
||||
{{- $toc := .Params.toc | default true -}}
|
||||
|
||||
{{/* UI Text */}}
|
||||
{{- $on_this_page := T "on_this_page" }}
|
||||
{{- $edit_this_page := T "edit_page" }}
|
||||
|
||||
<nav class="hb-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
|
||||
{{ partial "functions/get_hook" (dict "hook" "toc-start" "context" .) }}
|
||||
{{- if $toc }}
|
||||
<div class="hb-scrollbar text-sm [hyphens:auto] sticky top-16 overflow-y-auto pr-4 pt-6 max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] -mr-4 rtl:-ml-4">
|
||||
{{- with .Fragments.Headings -}}
|
||||
<p class="mb-4 font-semibold tracking-tight">{{ $on_this_page }}</p>
|
||||
{{- range . -}}
|
||||
<ul>
|
||||
{{- with .Headings -}}{{ template "toc-headings" (dict "headings" . "level" 0) }}{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $class := "" -}}
|
||||
{{- if .Fragments.Headings -}}
|
||||
{{- $class = "mt-8 border-t dark:border-neutral-700 pt-8" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{/* Page Features */}}
|
||||
{{- if site.Params.features.repository.url | and .Params.editable -}}
|
||||
<div class="{{ $class }} sticky bottom-0 flex flex-col items-start gap-2 pb-8">
|
||||
|
||||
{{ $edit_url := site.Params.features.repository.url | default "" }}
|
||||
{{ $branch := site.Params.features.repository.branch | default "main" }}
|
||||
{{ $dir := site.Params.features.repository.content_dir | default "content" }}
|
||||
{{- with .File -}}{{ $edit_url = urls.JoinPath $edit_url "edit" $branch $dir (replace .Path "\\" "/") }}{{- end -}}
|
||||
{{- with .Params.edit_url -}}{{ $edit_url = . }}{{- end -}}
|
||||
<a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $edit_url }}" target="_blank" rel="noreferer">{{ $edit_this_page }}</a>
|
||||
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{ partial "functions/get_hook" (dict "hook" "toc-end" "context" .) }}
|
||||
|
||||
</div>
|
||||
{{ end -}}
|
||||
</nav>
|
||||
|
||||
{{/* Render Headings */}}
|
||||
{{- define "toc-headings" -}}
|
||||
{{- $headings := .headings -}}
|
||||
{{- $level := .level -}}
|
||||
{{- if ge $level 5 -}}
|
||||
{{ return }}
|
||||
{{- end -}}
|
||||
|
||||
{{- $padding := (mul $level 4) -}}{{/* Requires inclusion in Tailwind safelist!! */}}
|
||||
{{- $class := cond (eq $level 0) "font-semibold" (printf "pl-%d rtl:pr-%d" $padding $padding) -}}
|
||||
|
||||
{{- range $headings }}
|
||||
{{- if .Title }}
|
||||
<li class="my-2 scroll-my-6 scroll-py-6">
|
||||
<a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 w-full break-words" href="#{{ anchorize .ID }}">
|
||||
{{- .Title | plainify | htmlUnescape -}}
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
||||
{{- with .Headings -}}
|
||||
{{ template "toc-headings" (dict "headings" . "level" (add $level 1)) }}
|
||||
{{- end -}}
|
||||
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
@@ -13,7 +13,7 @@
|
||||
{{ $avatar := ($author_page.Resources.ByType "image").GetMatch "*avatar*" }}
|
||||
{{ $avatar_shape := site.Params.features.avatar.shape | default "circle" }}
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex pt-12 pb-4">
|
||||
{{ if $avatar }}
|
||||
{{ $authorImage := $avatar.Fill "192x192 Center" }}
|
||||
<img
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<div class="max-w-prose print:hidden">
|
||||
{{ partial "page_edit" . }}
|
||||
{{/* Moved to TOC sidebar */}}
|
||||
{{/* partial "page_edit" . */}}
|
||||
|
||||
{{ partial "tags" . }}
|
||||
{{/* partial "components/page_sharer" . */}}
|
||||
{{ partial "components/page_sharer" . }}
|
||||
{{ partial "page_author" . }}
|
||||
{{ partial "components/next-in-series" . }}
|
||||
{{/* partial "page_related" . */}}
|
||||
{{ partial "page_related" . }}
|
||||
{{ partial "comments" . }}
|
||||
</div>
|
||||
@@ -2,7 +2,8 @@
|
||||
{{ if .Params.show_related }}
|
||||
{{ $related := site.RegularPages.Related . | first 5 }}
|
||||
{{ with $related }}
|
||||
<div class="article-widget content-widget-hr">
|
||||
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
|
||||
<div class="text-sm">
|
||||
<h3>{{ i18n "related" }}</h3>
|
||||
<ul>
|
||||
{{ range . }}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{{ if .Param $taxonomy }}
|
||||
<div class="flex justify-center">
|
||||
{{ range $index, $value := (.GetTerms $taxonomy) }}
|
||||
<a class="no-underline bg-primary-100 text-primary-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-primary-900 dark:text-primary-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
<a class="no-underline bg-primary-100 hover:bg-primary-300 text-primary-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-primary-900 dark:hover:bg-primary-700 dark:text-primary-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
|
||||
"dotenv": "^16.3.1",
|
||||
"katex": "^0.16.9",
|
||||
"markmap-autoloader": "^0.15.4",
|
||||
"mermaid": "^10.6.0",
|
||||
|
||||
Generated
+8
@@ -8,6 +8,9 @@ dependencies:
|
||||
'@tailwindcss/nesting':
|
||||
specifier: 0.0.0-insiders.565cd3e
|
||||
version: 0.0.0-insiders.565cd3e(postcss@8.4.31)
|
||||
dotenv:
|
||||
specifier: ^16.3.1
|
||||
version: 16.3.1
|
||||
katex:
|
||||
specifier: ^0.16.9
|
||||
version: 0.16.9
|
||||
@@ -1302,6 +1305,11 @@ packages:
|
||||
resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
|
||||
dev: false
|
||||
|
||||
/dotenv@16.3.1:
|
||||
resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/draw-svg-path@1.0.0:
|
||||
resolution: {integrity: sha512-P8j3IHxcgRMcY6sDzr0QvJDLzBnJJqpTG33UZ2Pvp8rw0apCHhJCWqYprqrXjrgHnJ6tuhP1iTJSAodPDHxwkg==}
|
||||
dependencies:
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
import 'dotenv/config'
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
const content_extra = process.env.HB_TW_CONTENT ? process.env.HB_TW_CONTENT.split(', ') : '';
|
||||
|
||||
console.log('Current directory: ' + process.cwd());
|
||||
console.log(`content_extra: ${content_extra}`);
|
||||
// console.log('../../starters/'+process.env.HB_TPL+'/hugo_stats.json')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./hugo_stats.json', './layouts/**/*.html'],
|
||||
content: [
|
||||
// './hugo_stats.json',
|
||||
'./layouts/**/*.html',
|
||||
'**/libs/chroma/*.css',
|
||||
'./**/*.svg',
|
||||
...content_extra,
|
||||
// ...(process.env.HB_TPL ? '../../starters/'+process.env.HB_TPL+'/hugo_stats.json' : './hugo_stats.json'),
|
||||
],
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
safelist: [
|
||||
'task-list', /* As it's added via JS */
|
||||
'task-list', /* As it's added via JS */
|
||||
'pl-4', 'pl-8', 'pl-12', /* TOC indents */
|
||||
],
|
||||
// whitelistPatterns: [/^pl-/],
|
||||
darkMode: ['class'],
|
||||
theme: {
|
||||
extend: {
|
||||
@@ -53,6 +70,73 @@ module.exports = {
|
||||
fontFamily: {
|
||||
'sans': ['"Inter var"', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
typography: ({ theme }) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
"--tw-prose-body": theme("colors.neutral.700 / 1"),
|
||||
"--tw-prose-headings": theme("colors.neutral.800 / 1"),
|
||||
"--tw-prose-lead": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-links": theme("colors.primary.600 / 1"),
|
||||
"--tw-prose-bold": theme("colors.neutral.900 / 1"),
|
||||
"--tw-prose-counters": theme("colors.neutral.800 / 1"),
|
||||
"--tw-prose-bullets": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-hr": theme("colors.neutral.200 / 1"),
|
||||
"--tw-prose-quotes": theme("colors.neutral.700 / 1"),
|
||||
"--tw-prose-quote-borders": theme("colors.primary.200 / 1"),
|
||||
"--tw-prose-captions": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-code": theme("colors.secondary.700 / 1"),
|
||||
"--tw-prose-pre-code": theme("colors.neutral.700 / 1"),
|
||||
"--tw-prose-pre-bg": theme("colors.neutral.50 / 1"),
|
||||
"--tw-prose-th-borders": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-td-borders": theme("colors.neutral.300 / 1"),
|
||||
"--tw-prose-invert-body": theme("colors.neutral.300 / 1"),
|
||||
"--tw-prose-invert-headings": theme("colors.neutral.50 / 1"),
|
||||
"--tw-prose-invert-lead": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-invert-links": theme("colors.primary.400 / 1"),
|
||||
"--tw-prose-invert-bold": theme("colors.neutral.DEFAULT / 1"),
|
||||
"--tw-prose-invert-counters": theme("colors.neutral.400 / 1"),
|
||||
"--tw-prose-invert-bullets": theme("colors.neutral.600 / 1"),
|
||||
"--tw-prose-invert-hr": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-invert-quotes": theme("colors.neutral.200 / 1"),
|
||||
"--tw-prose-invert-quote-borders": theme("colors.primary.900 / 1"),
|
||||
"--tw-prose-invert-captions": theme("colors.neutral.400 / 1"),
|
||||
"--tw-prose-invert-code": theme("colors.secondary.400 / 1"),
|
||||
"--tw-prose-invert-pre-code": theme("colors.neutral.200 / 1"),
|
||||
"--tw-prose-invert-pre-bg": theme("colors.neutral.700 / 1"),
|
||||
"--tw-prose-invert-th-borders": theme("colors.neutral.500 / 1"),
|
||||
"--tw-prose-invert-td-borders": theme("colors.neutral.700 / 1"),
|
||||
a: {
|
||||
textDecoration: "underline",
|
||||
textDecorationColor: theme("colors.primary.300 / 1"),
|
||||
fontWeight: "500",
|
||||
"&:hover": {
|
||||
color: theme("colors.primary.600 / 1"),
|
||||
textDecoration: "none",
|
||||
borderRadius: "0.09rem",
|
||||
},
|
||||
},
|
||||
mark: {
|
||||
color: theme("colors.neutral.100 / 1"),
|
||||
backgroundColor: theme("colors.primary.600 / 1"),
|
||||
padding: "0.1rem 0.2rem",
|
||||
borderRadius: "0.25rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
invert: {
|
||||
css: {
|
||||
a: {
|
||||
textDecorationColor: theme("colors.neutral.600 / 1"),
|
||||
"&:hover": {
|
||||
color: theme("colors.primary.400 / 1"),
|
||||
},
|
||||
},
|
||||
mark: {
|
||||
backgroundColor: theme("colors.primary.400 / 1"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user