forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
refactor(ui): tweak transition & favicon theme logic
+28
-20
+2
-1
src/components/layout/TransitionWrapper.astro
+2
-1
src/components/layout/TransitionWrapper.astro
···
5
5
type Props = TransitionProps
6
6
7
7
const { type, class: className = '' } = Astro.props
8
+
const fadeAnimation = themeConfig.general.fadeAnimation
8
9
const transitionName = type === 'post' ? 'post-content' : 'page-content'
9
10
---
10
11
11
12
{
12
-
themeConfig.general.fadeAnimation ? (
13
+
fadeAnimation ? (
13
14
<div transition:name={transitionName} transition:animate="initial" class={className}>
14
15
<slot />
15
16
</div>
+22
-14
src/components/ui/FaviconThemeSwitcher.astro
+22
-14
src/components/ui/FaviconThemeSwitcher.astro
···
15
15
this.currentColor = null
16
16
this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
17
17
18
+
// SVG template
19
+
this.svgTemplate = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
20
+
<path
21
+
id="favicon-path"
22
+
d="M12.3785 2C16.2799 2.0001 15.793 5.9958 15.3053 7.99414C16.7687 6.99515 19.8498 5.92943 21.6451 8.99414C23.1079 11.4917 19.6947 14.3221 17.7437 14.9883C19.2069 15.9875 21.3523 18.5847 18.231 20.9824C15.1095 23.3803 12.7031 20.983 11.8902 19.4844C10.9146 20.983 8.28152 23.3801 5.55039 20.9824C2.81905 18.5846 4.41233 16.3199 5.55039 15.4873C3.76201 14.9878 0.672689 12.0909 2.62363 8.49414C3.85202 6.22947 7.01339 6.66254 7.98886 7.49512C7.6637 5.66344 8.47661 2 12.3785 2ZM12.3121 9.49316C8.42708 9.49327 7.3044 16.1247 12.3121 15.4375C15.6222 14.9833 15.6814 9.49316 12.3121 9.49316Z"
23
+
fill="{{color}}"
24
+
/>
25
+
</svg>`
26
+
18
27
// Listen for system theme changes
19
28
this.mediaQuery.addEventListener('change', () => this.updateFavicon())
20
29
···
31
40
}
32
41
}
33
42
34
-
async updateFaviconColor(color) {
43
+
updateFaviconColor(color) {
35
44
try {
36
-
const response = await fetch(this.faviconLink.href)
37
-
if (!response.ok) throw new Error(`HTTP ${response.status}`)
45
+
// Replace color placeholder in SVG template
46
+
const svgContent = this.svgTemplate.replace(/\{\{color\}\}/g, color)
38
47
39
-
const svgText = await response.text()
40
-
const parser = new DOMParser()
41
-
const svgDoc = parser.parseFromString(svgText, 'image/svg+xml')
42
-
const path = svgDoc.getElementById('favicon-path')
48
+
// Create blob URL from the SVG content
49
+
const blob = new Blob([svgContent], { type: 'image/svg+xml' })
50
+
const blobUrl = URL.createObjectURL(blob)
43
51
44
-
if (path) {
45
-
path.setAttribute('fill', color)
46
-
const updatedSvg = new XMLSerializer().serializeToString(svgDoc)
47
-
const blob = new Blob([updatedSvg], { type: 'image/svg+xml' })
48
-
this.faviconLink.href = URL.createObjectURL(blob)
49
-
} else {
50
-
console.warn('Favicon path element not found in SVG')
52
+
// Update favicon href
53
+
this.faviconLink.href = blobUrl
54
+
55
+
// Clean up previous blob URL if it exists
56
+
if (this.previousBlobUrl) {
57
+
URL.revokeObjectURL(this.previousBlobUrl)
51
58
}
59
+
this.previousBlobUrl = blobUrl
52
60
} catch (error) {
53
61
console.warn('Failed to update favicon color:', error)
54
62
}
+4
-5
src/layouts/BaseLayout.astro
+4
-5
src/layouts/BaseLayout.astro
···
11
11
const { type = 'page' } = Astro.props
12
12
const language = themeConfig.site.language || 'en-US'
13
13
const contentWidth = themeConfig.general.contentWidth
14
+
const fadeAnimation = themeConfig.general.fadeAnimation
14
15
const widthValue = Math.min(parseFloat(contentWidth), 50)
15
16
const shouldUseCustomWidth = widthValue > 25
16
17
const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
···
18
19
19
20
<html
20
21
lang={language}
21
-
class={themeConfig.general.fadeAnimation
22
-
? 'view-transitions-enabled'
23
-
: 'view-transitions-disabled'}
24
-
{...themeConfig.general.fadeAnimation ? { 'transition:animate': 'initial' } : {}}
22
+
class={fadeAnimation ? 'view-transitions-enabled' : 'view-transitions-disabled'}
23
+
{...fadeAnimation ? { 'transition:animate': 'initial' } : {}}
25
24
>
26
25
<head>
27
26
<TransitionInit />
···
29
28
</head>
30
29
<body
31
30
data-centered={themeConfig.general.centeredLayout}
32
-
class={!themeConfig.general.fadeAnimation ? 'no-fade' : ''}
31
+
class={!fadeAnimation ? 'no-fade' : ''}
33
32
style={`
34
33
max-width: ${finalWidth};
35
34
${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}