Fork of Chiri for Astro for my blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(ui): tweak transition & favicon theme logic

the3ash 282ddd1e e50ac229

+28 -20
+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
··· 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
··· 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;` : ''}