TenantAtlas/apps/website/src/components/ui/starlight/Head.astro

58 lines
1.6 KiB
Plaintext

---
import type { Props } from '@astrojs/starlight/props';
import { getImage } from 'astro:assets';
import StarlightHead from '@astrojs/starlight/components/Head.astro';
import VtbotStarlight from 'astro-vtbot/components/starlight/Base.astro';
import { OG } from '@data/constants';
const canonical = new URL(Astro.url.pathname, Astro.site || Astro.url.origin)
.href;
const socialImageRes = await getImage({
src: OG.image,
width: 1200,
height: 600,
format: 'png',
});
const socialImage = new URL(socialImageRes.src, Astro.site || Astro.url.origin)
.href;
---
<VtbotStarlight {...Astro.props} viewTransitionsFallback="animate">
<StarlightHead {...Astro.props}>
<slot />
</StarlightHead>
<meta property="og:url" content={canonical} />
<meta property="og:image" content={socialImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:type" content="image/png" />
<meta property="twitter:url" content={canonical} />
<meta name="twitter:image" content={socialImage} />
<script>
import '@scripts/lenisSmoothScroll.js';
</script>
</VtbotStarlight>
<style is:global>
/* Slow down Chrome's default animation */
::view-transition-group(root) {
animation-duration: 250ms;
}
/* Do not slide over the sidebars */
::view-transition-group(*) {
overflow: hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const siteSearch = document.querySelector(
'site-search'
) as HTMLElement | null;
if (siteSearch) {
siteSearch.setAttribute('data-lenis-prevent', '');
}
});
</script>