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
This commit is contained in:
+2
-67
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user