diff options
author | Jimmy Cai <github@jimmycai.com> | 2022-10-29 18:02:24 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-29 18:02:24 +0300 |
commit | 8a597a5c9c861d2bce22a5e06c7667cd9c8e263a (patch) | |
tree | aa4d68efec6db197b9bb22479177aafe6fc4f91c /assets/ts/main.ts | |
parent | d60083e055dad5c5c4c0b07568b3df24df8daad7 (diff) |
Merge branch 'canary' into master (#711)
* refactor(i18n): simplify the structure of the translation file
* chore: prepare repository for v4.0.0-alpha
* chore: modify go.mod to v4
* refactor: migrate theme configuration to TOML
* fix: exampleSite not using correct theme
* feat: add favicon from assets folder
* refactor: drop linear grandient background feature
remove node-vibrant from dependencies
* feat: use Hugo's code block render hook to implement code copy button
Now it can have i18n support
* refactor: delete color.ts
* refactor: delete Emoji support post from example site
* refactor: drop support for `hidden` field in front matter
* feat: upgrade to PhotoSwipe v5
* chore: bump the required hugo version to 0.100.0
* refactor: remove PhotoSwipe from external.yaml
* fix: extra margin in search result
* fix: incorrect markdown heading level in example site
* refactor: remove some usages of `default` in template
No longer needed thanks to Hugo's configuration merge
* fix: one line codeblock style in firefox
closes https://github.com/CaiJimmy/hugo-theme-stack/issues/564
* feat: add style to new codeblock
* feat: i18n support for codeblock copy text
* fix(menu): jitter when closing menu
It's caused by flexbox gap property, which can't animate
* fix(search): long text overflows under the Search icon
closes https://github.com/CaiJimmy/hugo-theme-stack/issues/515
Diffstat (limited to 'assets/ts/main.ts')
-rw-r--r-- | assets/ts/main.ts | 69 |
1 files changed, 2 insertions, 67 deletions
diff --git a/assets/ts/main.ts b/assets/ts/main.ts index f3160ae..0668c7c 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -5,8 +5,7 @@ * @website: https://jimmycai.com * @link: https://github.com/CaiJimmy/hugo-theme-stack */ -import StackGallery from "ts/gallery"; -import { getColor } from 'ts/color'; +import StackCodeBlock from "ts/codeblock"; import menu from 'ts/menu'; import createElement from 'ts/createElement'; import StackColorScheme from 'ts/colorScheme'; @@ -22,76 +21,12 @@ let Stack = { const articleContent = document.querySelector('.article-content') as HTMLElement; if (articleContent) { - new StackGallery(articleContent); setupSmoothAnchors(); setupScrollspy(); } - /** - * Add linear gradient background to tile style article - */ - const articleTile = document.querySelector('.article-list--tile'); - if (articleTile) { - let observer = new IntersectionObserver(async (entries, observer) => { - entries.forEach(entry => { - if (!entry.isIntersecting) return; - observer.unobserve(entry.target); - - const articles = entry.target.querySelectorAll('article.has-image'); - articles.forEach(async articles => { - const image = articles.querySelector('img'), - imageURL = image.src, - key = image.getAttribute('data-key'), - hash = image.getAttribute('data-hash'), - articleDetails: HTMLDivElement = articles.querySelector('.article-details'); - - const colors = await getColor(key, hash, imageURL); - - articleDetails.style.background = ` - linear-gradient(0deg, - rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, 0.5) 0%, - rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, 0.75) 100%)`; - }) - }) - }); - - observer.observe(articleTile) - } - - - /** - * Add copy button to code block - */ - const highlights = document.querySelectorAll('.article-content div.highlight'); - const copyText = `Copy`, - copiedText = `Copied!`; - - highlights.forEach(highlight => { - const copyButton = document.createElement('button'); - copyButton.innerHTML = copyText; - copyButton.classList.add('copyCodeButton'); - highlight.appendChild(copyButton); - - const codeBlock = highlight.querySelector('code[data-lang]'); - if (!codeBlock) return; - - copyButton.addEventListener('click', () => { - navigator.clipboard.writeText(codeBlock.textContent) - .then(() => { - copyButton.textContent = copiedText; - - setTimeout(() => { - copyButton.textContent = copyText; - }, 1000); - }) - .catch(err => { - alert(err) - console.log('Something went wrong', err); - }); - }); - }); - new StackColorScheme(document.getElementById('dark-mode-toggle')); + StackCodeBlock(); } } |