From 67d5156507acdf66cc132d3a1d59f2bb92486c8f Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Sun, 30 Jan 2022 10:57:16 +0100 Subject: [PATCH 01/57] fix: disqus dark mode (#478) * fix: disqus dark mode * remove color-scheme add custom chrome scrollbar style (removed in https://github.com/CaiJimmy/hugo-theme-stack/pull/428) --- assets/scss/partials/base.scss | 14 ++++++++++++++ assets/scss/variables.scss | 3 +-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss index 408629e..e7aefe6 100644 --- a/assets/scss/partials/base.scss +++ b/assets/scss/partials/base.scss @@ -22,3 +22,17 @@ body { 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/variables.scss b/assets/scss/variables.scss index 8e371d6..323f2b7 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -8,7 +8,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; } [data-scheme="dark"] { - color-scheme: dark; --pre-text-color: #f8f8f2; --pre-background-color: #272822; @import "partials/highlight/dark.scss"; @@ -46,7 +45,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --accent-color-darker: #bdc3c7; --accent-color-text: #000; --body-text-color: rgba(255, 255, 255, 0.7); - --scrollbar-thumb: #424242; + --scrollbar-thumb: hsl(0, 0%, 40%); --scrollbar-track: var(--body-background); } } From 88beecd1017829346863d5d3f1f8fabe38843a30 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Sun, 6 Feb 2022 19:58:10 +0100 Subject: [PATCH 02/57] fix: hyperlinked image (#485) * fix: hyperlinked image closes https://github.com/CaiJimmy/hugo-theme-stack/issues/410 * feat: add support to inline images * Remove unused code * Remove data-alt-html --- assets/ts/gallery.ts | 52 +++++++++++++++++++ .../content/post/markdown-syntax/index.md | 4 ++ layouts/_default/_markup/render-image.html | 27 ++++------ 3 files changed, 67 insertions(+), 16 deletions(-) diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts index 5de13a2..ec7c02d 100644 --- a/assets/ts/gallery.ts +++ b/assets/ts/gallery.ts @@ -57,6 +57,58 @@ class StackGallery { } public static createGallery(container: HTMLElement) { + /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook + /// because it can not detect whether image is being wrapped by a link or not + /// and it lead to a invalid HTML construction (
) + + const images = container.querySelectorAll('img'); + for (const img of Array.from(images)) { + /// Images are wrapped with figure tag if the paragraph has only images without texts + /// This is done to allow inline images within paragraphs + const paragraph = img.closest('p'); + + if (paragraph.textContent.trim() == '') { + /// Once we insert figcaption, this check no longer works + /// So we add a class to paragraph to mark it + paragraph.classList.add('no-text'); + } + + let isNewLineImage = paragraph.classList.contains('no-text'); + if (!isNewLineImage) continue; + + const hasLink = img.parentElement.tagName == 'A'; + + let el: HTMLElement = img; + /// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes + const figure = document.createElement('figure'); + figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1'); + figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0'); + if (hasLink) { + /// Wrap if it exists + el = img.parentElement; + } + el.parentElement.insertBefore(figure, el); + figure.appendChild(el); + + /// Add figcaption if it exists + if (img.hasAttribute('alt')) { + const figcaption = document.createElement('figcaption'); + figcaption.innerText = img.getAttribute('alt'); + figure.appendChild(figcaption); + } + + /// Wrap img tag with tag if image was not wrapped by tag + if (!hasLink) { + figure.className = 'gallery-image'; + + const a = document.createElement('a'); + a.href = img.src; + a.setAttribute('target', '_blank'); + img.parentNode.insertBefore(a, img); + a.appendChild(img); + } + } + const figuresEl = container.querySelectorAll('figure.gallery-image'); let currentGallery = []; diff --git a/exampleSite/content/post/markdown-syntax/index.md b/exampleSite/content/post/markdown-syntax/index.md index be381a0..0254cca 100644 --- a/exampleSite/content/post/markdown-syntax/index.md +++ b/exampleSite/content/post/markdown-syntax/index.md @@ -162,3 +162,7 @@ Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. + +## Hyperlinked image + +[![Google](https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png)](https://google.com) \ No newline at end of file diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 0325458..0ed5584 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -25,22 +25,17 @@ {{- end -}} {{- end -}} -
- - - - {{ with $alt }} -
{{ . | markdownify }}
+ data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}" + data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px" {{ end }} -
\ No newline at end of file +> \ No newline at end of file From d75dbe2b6e7ec92f83a5b3866d6e809173be5da3 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Sun, 6 Feb 2022 20:32:37 +0100 Subject: [PATCH 03/57] fix: copy code button does not work when line number is enabled (#487) * fix: copy code button does not work when line number is enabled * fix pre style * Add gist shortcode to exampleSite --- assets/scss/partials/layout/article.scss | 63 +++++++++++-------- assets/ts/main.ts | 13 ++-- exampleSite/config.yaml | 32 ++++++---- .../content/post/rich-content/index.md | 4 ++ 4 files changed, 66 insertions(+), 46 deletions(-) diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 78ed81c..af5f7bb 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -123,7 +123,6 @@ } .article-page.has-toc { - .left-sidebar { display: none; } @@ -395,6 +394,41 @@ } } + .highlight { + background-color: var(--pre-background-color); + padding: var(--card-padding); + position: relative; + + &:hover { + .copyCodeButton { + opacity: 1; + } + } + + pre { + margin: initial; + padding: 0; + margin: 0; + width: auto; + } + } + + .copyCodeButton { + position: absolute; + top: calc(var(--card-padding)); + right: calc(var(--card-padding)); + background: var(--card-background); + border: none; + box-shadow: var(--shadow-l2); + border-radius: var(--tag-border-radius); + padding: 8px 16px; + color: var(--card-text-color-main); + cursor: pointer; + font-size: 14px; + opacity: 0; + transition: opacity 0.3s ease; + } + .table-wrapper { padding: 0 var(--card-padding); overflow-x: auto; @@ -449,6 +483,7 @@ /// Negative margins blockquote, figure, + .highlight, pre, .gallery, .video-wrapper, @@ -458,30 +493,4 @@ margin-right: calc((var(--card-padding)) * -1); width: calc(100% + var(--card-padding) * 2); } - - .highlight { - position: relative; - - &:hover { - .copyCodeButton { - opacity: 1; - } - } - } - - .copyCodeButton { - position: absolute; - top: calc(var(--card-padding)); - right: 0; - background: var(--card-background); - border: none; - box-shadow: var(--shadow-l2); - border-radius: var(--tag-border-radius); - padding: 8px 16px; - color: var(--card-text-color-main); - cursor: pointer; - font-size: 14px; - opacity: 0; - transition: opacity 0.3s ease; - } } diff --git a/assets/ts/main.ts b/assets/ts/main.ts index 20de18c..f3160ae 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -62,20 +62,21 @@ let Stack = { /** * Add copy button to code block */ - const codeBlocks = document.querySelectorAll('.article-content > div.highlight'); + const highlights = document.querySelectorAll('.article-content div.highlight'); const copyText = `Copy`, copiedText = `Copied!`; - codeBlocks.forEach(codeBlock => { + + highlights.forEach(highlight => { const copyButton = document.createElement('button'); copyButton.innerHTML = copyText; copyButton.classList.add('copyCodeButton'); - codeBlock.appendChild(copyButton); + highlight.appendChild(copyButton); - const pre = codeBlock.getElementsByTagName('pre'); - const code = pre[0].textContent; + const codeBlock = highlight.querySelector('code[data-lang]'); + if (!codeBlock) return; copyButton.addEventListener('click', () => { - navigator.clipboard.writeText(code) + navigator.clipboard.writeText(codeBlock.textContent) .then(() => { copyButton.textContent = copiedText; diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index a67b4aa..d449fc9 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -109,7 +109,7 @@ params: defaultHomeserverUrl: "https://matrix.cactus.chat:8448" serverName: "cactus.chat" siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site) - + giscus: repo: repoID: @@ -122,15 +122,15 @@ params: emitMetadata: 0 gitalk: - owner: - admin: - repo: - clientID: - clientSecret: - + owner: + admin: + repo: + clientID: + clientSecret: + cusdis: - host: - id: + host: + id: widgets: enabled: - search @@ -183,19 +183,19 @@ menu: ### For demonstration purpose, the home link will be open in a new tab newTab: true icon: home - + social: - identifier: github name: GitHub url: https://github.com/CaiJimmy/hugo-theme-stack params: - icon: brand-github - + icon: brand-github + - identifier: twitter name: Twitter url: https://twitter.com params: - icon: brand-twitter + icon: brand-twitter related: includeNewer: true @@ -219,3 +219,9 @@ markup: startLevel: 2 highlight: noClasses: false + codeFences: true + guessSyntax: true + lineNoStart: 1 + lineNos: true + lineNumbersInTable: true + tabWidth: 4 diff --git a/exampleSite/content/post/rich-content/index.md b/exampleSite/content/post/rich-content/index.md index af8a390..f2b45db 100644 --- a/exampleSite/content/post/rich-content/index.md +++ b/exampleSite/content/post/rich-content/index.md @@ -36,3 +36,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme ## bilibilibi Shortcode {{< bilibili av498363026 >}} + +## Gist Shortcode + +{{< gist spf13 7896402 >}} \ No newline at end of file From 9f36a956ca3f6f34bad58f73c159ea2e0e3daee0 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Sun, 6 Feb 2022 19:36:10 +0000 Subject: [PATCH 04/57] release: 3.8.0 --- layouts/partials/footer/footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html index d367b25..072465c 100644 --- a/layouts/partials/footer/footer.html +++ b/layouts/partials/footer/footer.html @@ -1,4 +1,4 @@ -{{- $ThemeVersion := "3.7.0" -}} +{{- $ThemeVersion := "3.8.0" -}}