riseforever2026/Blog
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Masthead.astro

Browse Source
This commit is contained in:
riseforever2026
2026-09-11 21:20:41 +08:00
parent 3565e0f83e
commit c9f21533b6
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Masthead.astro
+6 -4
View File
@@ -22,19 +22,21 @@ interface Props {
textTone?: BannerTextTone; textTone?: BannerTextTone;
} }
const { article, banner, about = false } = Astro.props; const { article, banner, about = false, textTone: toneOverride } = Astro.props;
const enabled = Boolean(about || article || banner || siteConfig.banner.enabled); const enabled = Boolean(about || article || banner || siteConfig.banner.enabled);
const image = banner ? banner.image : article?.image ?? (about ? undefined : siteConfig.banner.image); const image = banner ? banner.image : article?.image ?? (about ? undefined : siteConfig.banner.image);
const title = about ? siteConfig.site.author.name : (banner?.title ?? article?.title ?? siteConfig.banner.title); const title = about ? siteConfig.site.author.name : (banner?.title ?? article?.title ?? siteConfig.banner.title);
const subtitle = banner?.subtitle ?? siteConfig.banner.subtitle; const subtitle = banner?.subtitle ?? siteConfig.banner.subtitle;
const position = banner?.position ?? siteConfig.banner.position; const position = banner?.position ?? siteConfig.banner.position;
const textTone = toneOverride ?? banner?.textTone ?? article?.textTone ?? siteConfig.banner.textTone ?? 'auto';
--- ---
{enabled && <section {enabled && <section
class:list={['relative top-0 flex min-h-50 items-center justify-center overflow-hidden bg-raised pt-16 text-center text-foreground md:pt-16', { 'about-masthead': about }]} class:list={['relative top-0 flex min-h-50 items-center justify-center overflow-hidden bg-raised pt-16 text-center text-foreground md:pt-16', { 'about-masthead': about }]}
style={`background-position: ${position}; --mobile-height: ${siteConfig.banner.mobileHeightVh}vh; --desktop-height: ${siteConfig.banner.desktopHeightVh}vh; --overlay: ${siteConfig.banner.overlay}`} style={`background-position: ${position}; --mobile-height: ${siteConfig.banner.mobileHeightVh}vh; --desktop-height: ${siteConfig.banner.desktopHeightVh}vh; --overlay: ${siteConfig.banner.overlay}`}
data-banner-image={image || undefined} data-banner-image={image || undefined}
data-banner-tone={image ? 'light' : undefined} data-banner-tone={image ? (textTone === 'auto' ? 'light' : textTone) : undefined}
data-banner-tone-mode={image ? textTone : undefined}
aria-labelledby="masthead-title" aria-labelledby="masthead-title"
data-pagefind-ignore="all" data-pagefind-ignore="all"
data-banner data-banner
@@ -67,9 +69,9 @@ const position = banner?.position ?? siteConfig.banner.position;
</div> </div>
</section>} </section>}
{enabled && image && <script> {enabled && image && textTone === 'auto' && <script>
const updateBannerTone = () => { const updateBannerTone = () => {
const masthead = document.querySelector<HTMLElement>('[data-banner][data-banner-image]'); const masthead = document.querySelector<HTMLElement>("[data-banner][data-banner-image][data-banner-tone-mode='auto']");
const imageUrl = masthead?.dataset.bannerImage; const imageUrl = masthead?.dataset.bannerImage;
if (!masthead || !imageUrl) return; if (!masthead || !imageUrl) return;