diff --git a/README.md b/README.md index c16389d..c1157a2 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ [![Netlify Status](https://api.netlify.com/api/v1/badges/a2d2807a-a905-4bcb-97da-8da8d847da3d/deploy-status)](https://app.netlify.com/sites/hugo-theme-stack/deploys) -## Documentation & more information +## Documentation -[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/v/zh-cn/) +[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/zh/) ## Introduction @@ -27,21 +27,17 @@ Stack is a simple card-style Hugo theme designed for bloggers, some of its featu - No CSS framework, keep it simple and minimal - Properly cropped thumbnails - Subsection support +- Table of contents ## Requirements -It's necessary to use **Hugo ≥ 0.78.0**. - -Use Hugo Extended version (recommended) if you want to: - -* Use the latest feature/fix from `master` branch -* Edit SCSS files - -**Compiled CSS are updated once per release.** +It's necessary to use **Hugo Extended ≥ 0.78.0**. ## Installation -Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.toml`. +Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.yaml`. + +*Note: Remove `config.toml` if there is one in the site folder.* Check [documentation](https://docs.stack.jimmycai.com/) for more details. @@ -63,13 +59,22 @@ Your support is greatly appreciated :) ## Thanks to - - [Vibrant-Colors/node-vibrant](https://github.com/Vibrant-Colors/node-vibrant) - - [Normalize.css](https://necolas.github.io/normalize.css/) - - [Tabler icons](https://tablericons.com/) - - [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6) - - [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers) - - [PhotoSwipe](https://photoswipe.com/) - - [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) - - [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) - - [lepture/yue.css](https://github.com/lepture/yue.css) - - Markdown gallery syntax from [Typlog](https://typlog.com/) +| Project | Description | Licence | +| ------- | ----------- | ------- | +| [PhotoSwipe](https://photoswipe.com/) | For the lightbox effect | [MIT](https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE) | +| [Normalize.css](https://github.com/necolas/normalize.css) | - | [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md) | +| [Node Vibrant](https://github.com/Vibrant-Colors/node-vibrant) | To extract the color from images | [MIT](https://github.com/Vibrant-Colors/node-vibrant/blob/master/LICENSE.md) +| [Tabler icons](https://github.com/tabler/tabler-icons) | Default menu icons | [MIT](https://github.com/tabler/tabler-icons/blob/master/LICENSE) | +| [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers) | Hamburger icon of menu | [MIT](https://github.com/jonsuh/hamburgers/blob/master/LICENSE) | +| [lepture/yue.css](https://github.com/lepture/yue.css) | Part of it is used for styling article content | MIT | +| [Typlog](https://typlog.com/) | Where the markdown gallery syntax is borrowed from | The author gave me the permission | +| [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6) | Used for image gallery | - | + +### References + +Some references that I took while building this theme: + +| Project | Licence| +| ------- | ------| +| [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) | [MIT](https://github.com/artchen/hexo-theme-element/blob/master/LICENSE) | +| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) | \ No newline at end of file diff --git a/assets/scss/breakpoints.scss b/assets/scss/breakpoints.scss index e97b3e5..e9e9de7 100644 --- a/assets/scss/breakpoints.scss +++ b/assets/scss/breakpoints.scss @@ -1,4 +1,17 @@ -$on-phone: 812px; -$on-tablet: 1024px; -$on-desktop: 1519px; -$on-desktop-large: 1920px; \ No newline at end of file +$breakpoints: ( + sm: 640px, + md: 768px, + lg: 1024px, + xl: 1280px, + 2xl: 1536px, +); + +@mixin respond($breakpoint) { + @if not map-has-key($breakpoints, $breakpoint) { + @warn "'#{$breakpoint}' is not a valid breakpoint"; + } @else { + @media (min-width: map-get($breakpoints, $breakpoint)) { + @content; + } + } +} diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss index f36ed34..a0eddca 100644 --- a/assets/scss/grid.scss +++ b/assets/scss/grid.scss @@ -2,67 +2,52 @@ margin-left: auto; margin-right: auto; + .left-sidebar { + max-width: var(--left-sidebar-max-width); + } + + .right-sidebar { + max-width: var(--right-sidebar-max-width); + + /// Display right sidebar when min-width: lg + @include respond(lg) { + display: block; + } + } + &.extended { - @media (min-width: $on-phone) { - max-width: 800px; - - .left-sidebar { - width: 25%; - } + @include respond(md) { + max-width: 1024px; + --left-sidebar-max-width: 25%; + --right-sidebar-max-width: 30%; } - @media (min-width: $on-tablet) { - max-width: 972px; - - .right-sidebar { - width: 25%; - } + @include respond(lg) { + max-width: 1280px; + --left-sidebar-max-width: 20%; + --right-sidebar-max-width: 30%; } - @media (min-width: $on-desktop) { - max-width: 1200px; - - .left-sidebar { - width: 20%; - } - - .right-sidebar { - width: 25%; - } - } - - @media (min-width: $on-desktop-large) { + @include respond(xl) { max-width: 1536px; - - .left-sidebar { - width: 15%; - } + --left-sidebar-max-width: 15%; + --right-sidebar-max-width: 25%; } } &.compact { - @media (min-width: $on-phone) { - max-width: 800px; - - .left-sidebar { - width: 25%; - } + @include respond(md) { + --left-sidebar-max-width: 25%; + max-width: 768px; } - @media (min-width: $on-tablet) { - max-width: 972px; + @include respond(lg) { + max-width: 1024px; + --left-sidebar-max-width: 20%; } - @media (min-width: $on-desktop) { - max-width: 1050px; - - .left-sidebar { - width: 20%; - } - } - - @media (min-width: $on-desktop-large) { - max-width: 1300px; + @include respond(xl) { + max-width: 1280px; } } } @@ -76,8 +61,9 @@ } &.on-phone--column { - @media (max-width: $on-phone) { - flex-direction: column; + flex-direction: column; + @include respond(md) { + flex-direction: unset; } } @@ -106,7 +92,6 @@ main.main { min-width: 0; - padding: 0 15px; max-width: 100%; flex-grow: 1; padding-top: var(--main-top-padding); @@ -114,4 +99,11 @@ main.main { .main-container { min-height: 100vh; -} \ No newline at end of file + align-items: flex-start; + padding: 0 15px; + column-gap: var(--section-separation); + + @include respond(md) { + padding: 0 20px; + } +} diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 2c42ec7..c71cab4 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -24,14 +24,14 @@ .article-image { img { width: 100%; - height: 200px; + height: 150px; object-fit: cover; - @media (max-width: $on-tablet) { - height: 150px; + @include respond(md) { + height: 200px; } - @media (min-width: $on-desktop-large) { + @include respond(xl) { height: 250px; } } @@ -62,7 +62,7 @@ color: var(--card-text-color-main); font-size: 2.2rem; - @media (min-width: $on-desktop-large) { + @include respond(xl) { font-size: 2.4rem; } @@ -86,7 +86,7 @@ line-height: 1.5; font-size: 1.75rem; - @media (min-width: $on-desktop-large) { + @include respond(xl) { font-size: 2rem; } } @@ -135,10 +135,10 @@ border-radius: var(--card-border-radius); box-shadow: var(--shadow-l1); background-color: var(--card-background); - --image-size: 60px; + --image-size: 50px; - @media (max-width: $on-tablet) { - --image-size: 50px; + @include respond(md) { + --image-size: 60px; } & + .pagination { @@ -165,10 +165,10 @@ .article-title { margin: 0; - font-size: 1.8rem; + font-size: 1.6rem; - @media (max-width: $on-tablet) { - font-size: 1.6rem; + @include respond(md) { + font-size: 1.8rem; } } @@ -242,20 +242,20 @@ flex-direction: column; justify-content: flex-end; z-index: 2; - padding: 20px; + padding: 15px; - @media (max-width: $on-phone) { - padding: 15px; + @include respond(sm) { + padding: 20px; } } .article-title { - font-size: 2.2rem; + font-size: 2rem; font-weight: 500; color: var(--card-text-color-main); - @media (max-width: $on-phone) { - font-size: 2rem; + @include respond(sm) { + font-size: 2.2rem; } } } diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss index 42e460e..ab3bf42 100644 --- a/assets/scss/partials/base.scss +++ b/assets/scss/partials/base.scss @@ -1,6 +1,7 @@ html { font-size: 62.5%; overflow-y: scroll; + scroll-behavior: smooth; } * { @@ -15,3 +16,24 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +/* scrollbar styles for Firefox */ +* { + scrollbar-width: auto; + scrollbar-color: var(--scrollbar-thumb) transparent; +} +/**/ + +/* scrollbar styles for Chromium */ +::-webkit-scrollbar { + height: auto; +} + +::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); +} + +::-webkit-scrollbar-track { + background-color: transparent; +} +/**/ diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 3dce3e6..ebf94a7 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -1,43 +1,9 @@ -.keep-sidebar { - @media (min-width: $on-phone) and (max-width: $on-tablet) { - --main-top-padding: 50px; - } -} - .article-page { - &.with-toolbar { - @media (max-width: $on-tablet) { - --main-top-padding: 0; - } - } + &.hide-sidebar-sm .left-sidebar { + display: none; - &:not(.keep-sidebar) .left-sidebar { - @media (max-width: $on-tablet) { - display: none; - } - } - - .article-sidebar { - position: sticky; - top: 50px; - flex-shrink: 0; - - @media (max-width: $on-tablet) { - display: none; - } - - @media (min-width: $on-tablet) { - padding-left: 15px; - margin-left: 1%; - } - - @media (min-width: $on-tablet) { - width: 25%; - margin-right: 1%; - } - - @media (min-width: $on-desktop) { - width: 30%; + @include respond(md) { + display: inherit; } } @@ -111,12 +77,9 @@ #article-toolbar { display: flex; align-items: center; + margin: 20px 0; - @media (max-width: $on-tablet) { - margin: 20px 0; - } - - @media (min-width: $on-tablet) { + @include respond(md) { display: none; } @@ -147,6 +110,115 @@ span { font-weight: 500; + white-space: nowrap; + } + } +} + +.article-page.has-toc { + scroll-behavior: smooth; + + .left-sidebar { + display: none; + } + + .right-sidebar { + width: 100%; + padding: 0; + display: none; + + @include respond(xl) { + display: block; + top: var(--main-top-padding); + } + } + + #article-toolbar { + display: block; + + @include respond(md) { + padding: 0; + } + + @include respond(xl) { + margin-top: 0; + position: sticky; + top: var(--main-top-padding); + flex-shrink: 1; + + a { + background: transparent; + box-shadow: none; + border: 1px solid var(--body-text-color); + width: 100%; + margin-right: 0; + + svg { + flex-shrink: 0; + } + } + } + } + + .main-container { + align-items: start; + flex-direction: column; + + @include respond(xl) { + flex-direction: row; + } + } + + .main { + padding-top: 0; + + @include respond(xl) { + padding-top: var(--main-top-padding); + } + } +} + +.widget--toc { + background-color: var(--card-background); + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + display: flex; + flex-direction: column; + color: var(--card-text-color-main); + + #TableOfContents { + ol { + counter-reset: item; + list-style-type: none; + padding: 0; + margin: 0; + } + + & > li { + padding: 0; + margin: 0; + } + + li { + margin: 15px 20px; + padding: 5px; + + &::before { + counter-increment: item; + content: counters(item, ".") ". "; + font-weight: bold; + margin-right: 5px; + } + + & > ol { + margin-top: 10px; + padding-left: 10px; + margin-bottom: -5px; + + & > li:last-child { + margin-bottom: 0; + } + } } } } diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 024b3a6..2c7ad74 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -106,9 +106,10 @@ z-index: 2; cursor: pointer; - @media (min-width: $on-phone + 1) { + @include respond(md) { display: none; } + outline: none; &.is-active { @@ -126,67 +127,59 @@ list-style: none; display: flex; flex-direction: column; - margin-top: var(--sidebar-element-separation); - margin-bottom: 0; overflow-y: auto; flex-grow: 1; - font-size: 1.5rem; + font-size: 1.4rem; - @media (min-width: $on-desktop-large) { - margin-top: 30px; + background-color: var(--card-background); + padding: 15px 0; + box-shadow: var(--shadow-l1); + display: none; + + margin: 0 -15px; + + &.show { + display: block; } - @media (max-width: $on-phone) { - background-color: var(--card-background); - margin-top: 0; - padding: 15px 0; - box-shadow: var(--shadow-l1); - display: none; - - &.show { - display: block; - } - } - - @media (min-width: $on-phone + 1) { + @include respond(md) { align-items: flex-end; + display: flex; + background-color: transparent; + padding: 0; + box-shadow: none; + margin: 0; + margin-top: var(--sidebar-element-separation); + } + + @include respond(xl) { + margin-top: 30px; } li { position: relative; vertical-align: middle; - padding: 10px 0; + padding: 10px 30px; &:not(:last-of-type) { margin-bottom: 15px; - @media (min-width: $on-desktop-large) { + @include respond(xl) { margin-bottom: 20px; } } - @media (max-width: $on-phone) { - padding: 10px 30px; - } - - @media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) { + @include respond(md) { + width: 100%; padding: 10px 0; } - @media (min-width: $on-phone + 1) { - width: 100%; - } - svg { - width: 25px; - height: 25px; stroke-width: 1.33; margin-right: 40px; - @media (max-width: $on-desktop-large) { - width: 20px; - height: 20px; - } + width: 20px; + height: 20px; } a { @@ -194,10 +187,6 @@ display: inline-flex; align-items: center; color: var(--body-text-color); - - @media (max-width: $on-desktop-large) { - font-size: 1.4rem; - } } span { diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index b6722a9..462729d 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -1,7 +1,6 @@ .sidebar { - padding: 0 15px; &.sticky { - @media (min-width: ($on-phone + 1)) { + @include respond(md) { position: sticky; } } @@ -11,45 +10,41 @@ display: flex; flex-direction: column; flex-shrink: 0; + align-self: stretch; - --sidebar-avatar-size: 150px; - --sidebar-element-separation: 25px; + width: 100%; + padding: 30px 0 15px 0; + max-width: none; - @media (max-width: $on-desktop-large) { - --sidebar-avatar-size: 120px; - --sidebar-element-separation: 20px; + --sidebar-avatar-size: 120px; + --sidebar-element-separation: 20px; + + @include respond(md) { + width: auto; + padding-top: var(--main-top-padding); + padding-bottom: var(--main-top-padding); + max-height: 100vh; } - @media (max-width: $on-phone) { - width: 100%; - padding: 30px 0; - max-width: none; + @include respond(2xl) { + --sidebar-avatar-size: 140px; + --sidebar-element-separation: 25px; } &.sticky { top: 0; } - - @media (min-width: $on-phone + 1) { - margin-right: 1%; - padding: var(--main-top-padding) 15px; - max-height: 100vh; - } } .right-sidebar { flex-shrink: 0; + display: none; &.sticky { top: 0; } - @media (max-width: $on-desktop - 1) { - display: none; - } - - @media (min-width: $on-tablet) { - margin-left: 1%; + @include respond(lg) { padding-top: var(--main-top-padding); } } @@ -58,8 +53,10 @@ z-index: 1; transition: box-shadow 0.5s ease; - @media (max-width: $on-phone) { - padding: 15px 30px; + padding: 15px; + + @include respond(md) { + padding: 0; } .site-avatar { @@ -79,9 +76,9 @@ .emoji { position: absolute; - width: 50px; - height: 50px; - line-height: 50px; + width: 40px; + height: 40px; + line-height: 40px; border-radius: 100%; bottom: 0; right: 0; @@ -90,20 +87,20 @@ background-color: var(--card-background); box-shadow: var(--shadow-l2); - @media (max-width: $on-desktop-large) { - width: 40px; - height: 40px; - line-height: 40px; + @include respond(2xl) { + width: 50px; + height: 50px; + line-height: 50px; } } } .site-name { color: var(--accent-color); - font-size: 2.4rem; margin: 0; + font-size: 1.8rem; - @media (max-width: $on-desktop-large) { + @include respond(2xl) { font-size: 2rem; } } @@ -112,10 +109,10 @@ color: var(--body-text-color); font-weight: normal; margin: 10px 0; - font-size: 1.8rem; + font-size: 1.6rem; - @media (max-width: $on-desktop-large) { - font-size: 1.6rem; + @include respond(2xl) { + font-size: 1.8rem; } } } diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index cba32e5..c75eb5c 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; * Global style */ :root { - @media (min-width: $on-phone + 1) { + @include respond(md) { --main-top-padding: 35px; } - @media (min-width: $on-desktop-large) { + @include respond(xl) { --main-top-padding: 50px; } @@ -36,12 +36,17 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --section-separation: 40px; - [data-scheme="dark"] { + --scrollbar-thumb: hsl(0, 0%, 85%); + --scrollbar-track: var(--body-background); + + &[data-scheme="dark"] { --body-background: #303030; --accent-color: #ecf0f1; --accent-color-darker: #bdc3c7; --accent-color-text: #000; --body-text-color: rgba(255, 255, 255, 0.7); + --scrollbar-thumb: #424242; + --scrollbar-track: var(--body-background); } } @@ -70,20 +75,23 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --card-border-radius: 10px; - --card-padding: 30px; - @media (max-width: $on-desktop-large) { + --card-padding: 20px; + + @include respond(md) { --card-padding: 25px; } - @media (max-width: $on-tablet) { - --card-padding: 20px; + + @include respond(xl) { + --card-padding: 30px; } - --small-card-padding: 25px; - @media (max-width: $on-tablet) { - --small-card-padding: 25px 20px; + --small-card-padding: 25px 20px; + + @include respond(md) { + --small-card-padding: 25px; } - [data-scheme="dark"] { + &[data-scheme="dark"] { --card-background: #424242; --card-background-selected: rgba(255, 255, 255, 0.16); --card-text-color-main: rgba(255, 255, 255, 0.9); @@ -98,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; */ :root { --article-font-family: var(--base-font-family); - --article-font-size: 1.7rem; - @media (max-width: $on-tablet) { - --article-font-size: 1.6rem; + --article-font-size: 1.6rem; + + @include respond(md) { + --article-font-size: 1.7rem; } + --article-line-height: 1.85; } @@ -127,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --table-border-color: #dadada; --tr-even-background-color: #efefee; - [data-scheme="dark"] { + &[data-scheme="dark"] { --code-background-color: #272822; --code-text-color: rgba(255, 255, 255, 0.9); diff --git a/assets/ts/colorScheme.ts b/assets/ts/colorScheme.ts index 7c4ff77..8cb8a20 100644 --- a/assets/ts/colorScheme.ts +++ b/assets/ts/colorScheme.ts @@ -9,7 +9,7 @@ class StackColorScheme { this.bindMatchMedia(); this.currentScheme = this.getSavedScheme(); - this.dispatchEvent(document.body.dataset.scheme as colorScheme); + this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme); if (toggleEl) this.bindClick(toggleEl); @@ -22,7 +22,7 @@ class StackColorScheme { localStorage.setItem(this.localStorageKey, this.currentScheme); } - private bindClick(toggleEl) { + private bindClick(toggleEl: HTMLElement) { toggleEl.addEventListener('click', (e) => { if (this.isDark()) { /// Disable dark mode @@ -56,13 +56,13 @@ class StackColorScheme { private setBodyClass() { if (this.isDark()) { - document.body.dataset.scheme = 'dark'; + document.documentElement.dataset.scheme = 'dark'; } else { - document.body.dataset.scheme = 'light'; + document.documentElement.dataset.scheme = 'light'; } - this.dispatchEvent(document.body.dataset.scheme as colorScheme); + this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme); } private getSavedScheme(): colorScheme { @@ -85,4 +85,4 @@ class StackColorScheme { } } -export default StackColorScheme; \ No newline at end of file +export default StackColorScheme; diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 2910cbb..de5d951 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -37,11 +37,13 @@ params: emoji: 🍥 subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. avatar: + enabled: true local: true src: img/avatar.png article: math: false + toc: true license: enabled: true default: Licensed under CC BY-NC-SA 4.0 @@ -66,6 +68,23 @@ params: repo: clientId: clientSecret: + autoCreateIssue: false + + # Waline client configuration see: https://waline.js.org/en/reference/client.html + waline: + serverURL: + lang: + visitor: + avatar: + emoji: + - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo + requiredMeta: + - name + - email + - url + placeholder: + locale: + admin: Admin widgets: enabled: @@ -129,5 +148,9 @@ related: weight: 200 markup: + tableOfContents: + endLevel: 4 + ordered: true + startLevel: 2 highlight: noClasses: false diff --git a/exampleSite/content/categories/Test/_index.md b/exampleSite/content/categories/Test/_index.md index 0b3cfa9..de42112 100644 --- a/exampleSite/content/categories/Test/_index.md +++ b/exampleSite/content/categories/Test/_index.md @@ -1,9 +1,9 @@ --- title: "Test" -description: "This is a example category" +description: "This is an example category" slug: "test" image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg" style: background: "#2a9d8f" color: "#fff" ---- \ No newline at end of file +--- diff --git a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/README.md b/exampleSite/plugins/netlify-plugin-hugo-cache-resources/README.md deleted file mode 100644 index a7c1ef2..0000000 --- a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/README.md +++ /dev/null @@ -1,27 +0,0 @@ -> Original Repo: https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources -> -# Netlify Build Plugin: Persist Hugo resources Between Builds - -Persist [Hugo](https://gohugo.io/) resources folder between Netlify builds for huge build speed improvements! ⚡️ - -This plugin caches the `resources` folder after build. If you are processing many images, this would improve build duration significantly. - -Note: Restoring cache only comes from the production branch. So once cache is saved on the production branch, the next preview build would use the cache. For example, when pushing to the same preview build, the latest preview build will not get the cache from the previous preview build, but will get it from master. - -## Usage - -To install, add the following lines to your `netlify.toml` file: - -```toml -[build] - publish = "public" - -[[plugins]] - package = "netlify-plugin-hugo-cache-resources" - - [plugins.inputs] - # If it should show more verbose logs (optional, default = true) - debug = true -``` - -Note: The `[[plugins]]` line is required for each plugin, even if you have other plugins in your `netlify.toml` file already. \ No newline at end of file diff --git a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/index.js b/exampleSite/plugins/netlify-plugin-hugo-cache-resources/index.js deleted file mode 100644 index fd8ffb6..0000000 --- a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/index.js +++ /dev/null @@ -1,39 +0,0 @@ -const getResourcesDir = () => { - return 'exampleSite/resources'; -} - -const printList = (items) => { - console.log('---'); - items.forEach((item, index) => { - console.log(`${index + 1}. ${item}`); - }); -} - -module.exports = { - - async onPreBuild({ utils, inputs }) { - const path = getResourcesDir(); - const success = await utils.cache.restore(path); - - if (success) { - const cachedFiles = await utils.cache.list(path); - console.log(`Restored cached resources folder. Total files: ${cachedFiles.length}`); - if (inputs.debug) printList(cachedFiles); - } else { - console.log(`No cache found for resources folder`); - } - }, - - async onPostBuild({ utils, inputs }) { - const path = getResourcesDir(); - const success = await utils.cache.save(path); - - if (success) { - const cachedFiles = await utils.cache.list(path); - console.log(`Saved resources folder to cache. Total files: ${cachedFiles.length}`); - if (inputs.debug) printList(cachedFiles); - } else { - console.log(`No resources folder cached`); - } - } -}; \ No newline at end of file diff --git a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/manifest.yml b/exampleSite/plugins/netlify-plugin-hugo-cache-resources/manifest.yml deleted file mode 100644 index d6a208f..0000000 --- a/exampleSite/plugins/netlify-plugin-hugo-cache-resources/manifest.yml +++ /dev/null @@ -1,5 +0,0 @@ -name: netlify-plugin-hugo-cache -inputs: - - name: debug - description: Show more verbose logs - default: true \ No newline at end of file diff --git a/i18n/en.yaml b/i18n/en.yaml index 99d34ce..21b1310 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -17,8 +17,15 @@ list: other: Subsections article: + back: + other: Back + + tableOfContents: + other: Table of contents + relatedContents: other: Related contents + lastUpdatedOn: other: Last updated on @@ -32,8 +39,10 @@ widget: archives: title: other: Archives + more: other: More + tagCloud: title: other: Tags @@ -41,13 +50,16 @@ widget: search: title: other: Search + placeholder: other: Type something... + resultTitle: other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)" footer: builtWith: other: Built with {{ .Generator }} + designedBy: other: Theme {{ .Theme }} designed by {{ .DesignedBy }} diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 59cc111..9217ea3 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -1,9 +1,31 @@ toggleMenu: other: Afficher le menu +darkMode: + other: Mode sombre + +list: + page: + one: "{{ .Count }} page" + other: "{{ .Count }} pages" + + section: + other: Section + + subsection: + one: Sous-section + other: Sous-sections + article: + back: + other: Retour + + tableOfContents: + other: Table des matières + relatedContents: other: Contenus liés + lastUpdatedOn: other: Dernière mise à jour le @@ -17,8 +39,10 @@ widget: archives: title: other: Archives + more: other: Autres + tagCloud: title: other: Mots clés @@ -26,13 +50,16 @@ widget: search: title: other: Rechercher + placeholder: other: Cherchez un article, une publication, etc. + resultTitle: other: "#PAGES_COUNT pages (#TIME_SECONDS secondes)" footer: builtWith: other: Généré avec {{ .Generator }} + designedBy: other: Thème {{ .Theme }} conçu par {{ .DesignedBy }} diff --git a/i18n/id.yaml b/i18n/id.yaml index 31cea39..35a7fab 100644 --- a/i18n/id.yaml +++ b/i18n/id.yaml @@ -1,24 +1,48 @@ toggleMenu: other: Tampilkan Menu +darkMode: + other: Mode Gelap + +list: + page: + one: "{{ .Count }} halaman" + other: "{{ .Count }} halaman" + + section: + other: Bagian + + subsection: + one: Subbagian + other: Subbagian + article: + back: + other: Kembali + + tableOfContents: + other: Daftar Isi + relatedContents: other: Konten terkait + lastUpdatedOn: other: Terakhir diperbarui pada notFound: title: - other: Not Found + other: Tidak ditemukan subtitle: - other: Halaman ini tidak ada. + other: Halaman yang Anda akses tidak ditemukan. widget: archives: title: other: Arsip + more: other: Lebih + tagCloud: title: other: Tag @@ -26,13 +50,16 @@ widget: search: title: other: Cari + placeholder: other: Ketik sesuatu... + resultTitle: other: "#PAGES_COUNT halaman (#TIME_SECONDS detik)" footer: builtWith: other: Dibangun dengan {{ .Generator }} + designedBy: other: Tema {{ .Theme }} dirancang oleh {{ .DesignedBy }} diff --git a/i18n/ja.yaml b/i18n/ja.yaml index e9744c2..1331fb1 100644 --- a/i18n/ja.yaml +++ b/i18n/ja.yaml @@ -5,8 +5,15 @@ darkMode: other: ダークモード article: + back: + other: 前のページ + + tableOfContents: + other: 目次 + relatedContents: other: 関連するコンテンツ + lastUpdatedOn: other: 最終更新 @@ -20,16 +27,20 @@ widget: archives: title: other: アーカイブ + more: other: さらに見る + tagCloud: title: other: タグ search: title: - other: サーチ + other: 検索 + placeholder: other: 入力... + resultTitle: other: "#PAGES_COUNT 件 （#TIME_SECONDS 秒）" diff --git a/i18n/pl.yaml b/i18n/pl.yaml new file mode 100644 index 0000000..455e682 --- /dev/null +++ b/i18n/pl.yaml @@ -0,0 +1,65 @@ +toggleMenu: + other: Przełącz Menu + +darkMode: + other: Tryb ciemny + +list: + page: + one: "{{ .Count }} strona" + other: "{{ .Count }} stron" + + section: + other: Sekcja + + subsection: + one: Podsekcja + other: Podsekcje + +article: + back: + other: Wróć + + tableOfContents: + other: Spis treści + + relatedContents: + other: Powiązane artykuły + + lastUpdatedOn: + other: Ostatnio zaktualizowany + +notFound: + title: + other: Nie znaleziono + subtitle: + other: Ta strona nie istnieje + +widget: + archives: + title: + other: Archiwum + + more: + other: Więcej + + tagCloud: + title: + other: Tagi + +search: + title: + other: Szukaj + + placeholder: + other: Wpisz coś... + + resultTitle: + other: "#PAGES_COUNT stron (#TIME_SECONDS sekund)" + +footer: + builtWith: + other: Zbudowano z {{ .Generator }} + + designedBy: + other: Motyw {{ .Theme }} zaprojektowany przez {{ .DesignedBy }} diff --git a/i18n/ru.yaml b/i18n/ru.yaml index f0c562f..863642e 100644 --- a/i18n/ru.yaml +++ b/i18n/ru.yaml @@ -21,10 +21,14 @@ list: other: Подразделы article: + back: + other: Назад relatedContents: other: Также рекомендуем lastUpdatedOn: other: Обновлено + tableOfContents: + other: Содержание notFound: title: diff --git a/i18n/zh-CN.yaml b/i18n/zh-CN.yaml index 9f1ac94..551e0a3 100644 --- a/i18n/zh-CN.yaml +++ b/i18n/zh-CN.yaml @@ -5,8 +5,15 @@ darkMode: other: 暗色模式 article: + back: + other: 返回 + + tableOfContents: + other: 目录 + relatedContents: other: 相关文章 + lastUpdatedOn: other: 最后更新于 @@ -20,8 +27,10 @@ widget: archives: title: other: 归档 + more: other: 更多 + tagCloud: title: other: 标签云 @@ -29,7 +38,9 @@ widget: search: title: other: 搜索 + placeholder: other: 输入关键词... + resultTitle: other: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ce0ddae..8a5ff95 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,8 +6,10 @@ {{- partial "head/colorScheme" . -}} -
- {{ partial "sidebar/left.html" . }} +
+ {{- block "left-sidebar" . -}} + {{ partial "sidebar/left.html" . }} + {{- end -}}
{{- block "main" . }}{{- end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4ae562e..040b547 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,7 +1,22 @@ -{{ define "body-class" }}article-page keep-sidebar{{ end }} +{{ define "body-class" }} + {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }} + {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}} + article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }} +{{ end }} + +{{ define "container-class" }} + {{ if (.Scratch.Get "hasTOC") }} + extended + {{ else }} + on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} + {{ end }} +{{ end }} + {{ define "main" }} {{ partial "article/article.html" . }} + {{ partial "article/components/related-contents" . }} + {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} {{ partial "comments/include" . }} {{ end }} @@ -9,4 +24,34 @@ {{ partialCached "footer/footer" . }} {{ partialCached "article/components/photoswipe" . }} +{{ end }} + +{{ define "left-sidebar" }} + {{ if (.Scratch.Get "hasTOC") }} +
+ + {{ (resources.Get "icons/back.svg").Content | safeHTML }} + {{ T "article.back" }} + +
+ {{ else }} + {{ partial "sidebar/left.html" . }} + {{ end }} +{{ end }} + +{{ define "right-sidebar" }} + {{ if (.Scratch.Get "hasTOC") }} + + {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/comments/provider/remark42.html b/layouts/partials/comments/provider/remark42.html index 9928825..97196c8 100644 --- a/layouts/partials/comments/provider/remark42.html +++ b/layouts/partials/comments/provider/remark42.html @@ -7,7 +7,7 @@ components: ['embed'], url: "{{ $.Permalink }}", max_shown_comments: {{ default 15 .max_shown_comments }}, - theme: document.body.dataset.scheme, + theme: document.documentElement.dataset.scheme, page_title: '{{ $.Title }}', locale: '{{ default "en" .locale }}', show_email_subscription: {{ default true .show_email_subscription }} @@ -26,4 +26,4 @@ window.REMARK42.changeTheme(e.detail); }) -{{- end -}} \ No newline at end of file +{{- end -}} diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html index a0c07a6..97a0a3a 100644 --- a/layouts/partials/comments/provider/utterances.html +++ b/layouts/partials/comments/provider/utterances.html @@ -31,10 +31,10 @@ addEventListener('message', event => { if (event.origin !== 'https://utteranc.es') return; - setUtterancesTheme(document.body.dataset.scheme) + setUtterancesTheme(document.documentElement.dataset.scheme) }); window.addEventListener('onColorSchemeChange', (e) => { setUtterancesTheme(e.detail) }) - \ No newline at end of file + diff --git a/layouts/partials/comments/provider/vssue.html b/layouts/partials/comments/provider/vssue.html index 7072778..0a9ea56 100644 --- a/layouts/partials/comments/provider/vssue.html +++ b/layouts/partials/comments/provider/vssue.html @@ -14,7 +14,7 @@ props: { title: "{{ $.Title }}", options: { - proxy: (url) => "https://cors-anywhere.azm.workers.dev/" + url, + autoCreateIssue: {{ default false .autoCreateIssue }}, owner: "{{ .owner }}", repo: "{{ .repo }}", clientId: "{{ .clientId }}", diff --git a/layouts/partials/comments/provider/waline.html b/layouts/partials/comments/provider/waline.html new file mode 100644 index 0000000..3b6eee8 --- /dev/null +++ b/layouts/partials/comments/provider/waline.html @@ -0,0 +1,32 @@ + +
+ + +{{- with .Site.Params.comments.waline -}} +{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}} +{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}} + +{{- range $key, $val := . -}} + {{- if $val -}} + {{- $replaceKey := index $replaceKeys $key -}} + {{- $k := default $key $replaceKey -}} + + {{- $config = merge $config (dict $k $val) -}} + {{- end -}} +{{- end -}} + + +{{- end -}} diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html index da41cdc..ecc22c5 100644 --- a/layouts/partials/footer/footer.html +++ b/layouts/partials/footer/footer.html @@ -1,4 +1,4 @@ -{{- $ThemeVersion := "2.3.0" -}} +{{- $ThemeVersion := "2.5.0" -}}