reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 20:01:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update various code copy button and toc styles

Browse source 
- Removed the old copy-action SVG icon and replaced it with a new copy-button SVG icon.
- Added a new copy-success SVG icon for visual feedback on copy actions.
- Updated Waline component comments for clarity and improved code readability.
- Enhanced BackButton component with fallback navigation to homepage.
- Improved CodeCopyButton component by refining icon handling and timeout management.
- Adjusted GithubCard component's intersection observer root margin for better visibility.
- Updated GsapAnimation component variable names for consistency and clarity.
- Removed unnecessary styles from PhotoSwipe component.
- Modified TOC component styles for better spacing and layout.
- Updated multiple theme guide markdown files to correct image hosting URL comments.
- Cleaned up extend.css by removing commented-out styles and organizing code.
- Added PhotoSwipe background color and KaTeX overflow fixes to global.css.
- Enhanced markdown.css with video styling for better responsiveness.
- Improved transition.css comments for better understanding of GSAP animation states.
This commit is contained in:
radishzzz 2025-05-27 12:45:30 +01:00
parent 5116ebcaaa
commit a5839a2dd1
22 changed files with 268 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/Widgets/CodeCopyButton.astro
View file

@ -1,14 +1,22 @@
<script>
const copyIcons = {
copy: `<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>`,
success: `<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>`,
copy:
`<svg
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>`,
success:
`<svg
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>`,
}
// Store active timeouts to prevent memory leaks
// Track timeout references for each button to manage icon state transitions
const activeTimeouts = new WeakMap<HTMLButtonElement, ReturnType<typeof setTimeout>>()
async function handleCopy(button: HTMLButtonElement) {
@ -18,32 +26,37 @@ async function handleCopy(button: HTMLButtonElement) {
try {
await navigator.clipboard.writeText(code)
// Clear existing timeout to prevent visual glitches on multiple clicks
// Clear existing timeout to prevent icon state conflicts on multiple clicks
const existingTimeout = activeTimeouts.get(button)
if (existingTimeout) {
clearTimeout(existingTimeout)
}
button.innerHTML = copyIcons.success
button.classList.add('copy-success')
// Set timeout to revert to copy icon after 2 seconds
// Set timeout to revert to copy icon after 1.5s
const timeoutId = setTimeout(() => {
button.innerHTML = copyIcons.copy
button.classList.remove('copy-success')
activeTimeouts.delete(button)
}, 1000)
}, 1500)
activeTimeouts.set(button, timeoutId)
}
catch {
}
}
// Initialize copy buttons with icons and mark them to prevent duplicate initialization
function setupCodeCopyButtons() {
// Only initialize buttons that haven't been initialized yet
document.querySelectorAll<HTMLButtonElement>('.code-copy-button:not([data-initialized])').forEach((button) => {
button.innerHTML = copyIcons.copy
button.setAttribute('data-initialized', 'true')
})
document
.querySelectorAll<HTMLButtonElement>('.code-copy-button:not([data-initialized])')
.forEach((button) => {
button.innerHTML = copyIcons.copy
button.setAttribute('data-initialized', 'true')
})
}
// Use event delegation for better performance