mirror of
https://codeberg.org/alicia/web-check.git
synced 2024-06-08 03:22:16 +02:00
Builds base layout, and head tags
This commit is contained in:
Alicia Sykes
parent
9f82e19957
commit
37f711d95b
55
src/layouts/Base.astro
Normal file
55
src/layouts/Base.astro
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
import { ViewTransitions } from 'astro:transitions'
|
||||
import MetaTags from '@layouts/MetaTags.astro';
|
||||
// import NavBar from '@components/scafold/NavBar.astro';
|
||||
// import Footer from '@components/scafold/Footer.astro';
|
||||
// import config from '../site-config';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
keywords?: string;
|
||||
customSchemaJson?: any;
|
||||
breadcrumbs?: Array<{
|
||||
name: string;
|
||||
item: string;
|
||||
}>
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<ViewTransitions />
|
||||
<MetaTags {...Astro.props } />
|
||||
<slot name="head" />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
/* @import '../styles/values.css';
|
||||
@import '../styles/typography.css'; */
|
||||
</style>
|
||||
|
||||
|
||||
<style is:global>
|
||||
|
||||
html {
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
</style>
|
||||
103
src/layouts/MetaTags.astro
Normal file
103
src/layouts/MetaTags.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
keywords?: string;
|
||||
customSchemaJson?: any;
|
||||
breadcrumbs?: Array<{
|
||||
name: string;
|
||||
item: string;
|
||||
}>
|
||||
}
|
||||
|
||||
// Default meta tag values
|
||||
const siteInfo = {
|
||||
title: 'Web Check',
|
||||
description: '',
|
||||
keywords: '',
|
||||
author: 'Alicia Sykes',
|
||||
twitter: '@Lissy_Sykes',
|
||||
site: import.meta.env.SITE_URL || 'https://web-check.xyz',
|
||||
analytics: {
|
||||
enable: import.meta.env.ENABLE_ANALYTICS,
|
||||
domain: 'web-check.xyz',
|
||||
script: 'https://no-track.as93.net/js/script.js',
|
||||
},
|
||||
};
|
||||
|
||||
// Set values for the meta tags, from props or defaults
|
||||
const {
|
||||
title = siteInfo.title,
|
||||
description = siteInfo.description,
|
||||
keywords = siteInfo.keywords,
|
||||
breadcrumbs,
|
||||
customSchemaJson,
|
||||
} = Astro.props;
|
||||
|
||||
// Set non-customizable values for meta tags, from the siteInfo
|
||||
const { site, author, twitter, analytics } = siteInfo;
|
||||
|
||||
// Given a map of breadcrumbs, return the JSON-LD for the BreadcrumbList schema
|
||||
const makeBreadcrumbs = () => {
|
||||
if (!breadcrumbs) return null;
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": breadcrumbs.map((breadcrumb, index) => ({
|
||||
"@type": "ListItem",
|
||||
"position": index + 1,
|
||||
"name": breadcrumb.name,
|
||||
"item": `${site}/${breadcrumb.item}`
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<!-- Core info -->
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description}>
|
||||
<meta name="keywords" content={keywords}>
|
||||
<meta name="author" content={author}>
|
||||
|
||||
<!-- Page info, viewport, Astro credit -->
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Icons and colors -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="/favicon.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
|
||||
<!-- Social media meta tags (Open Graphh + Twitter) -->
|
||||
<meta property="og:site_name" content={title}>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content={site}>
|
||||
<meta property="og:title" content={title}>
|
||||
<meta property="og:description" content={description}>
|
||||
<meta property="og:image" content={`${site}/banner.png`}>
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content={site}>
|
||||
<meta name="twitter:title" content={title}>
|
||||
<meta name="twitter:description" content={description}>
|
||||
<meta name="twitter:image" content=`${site}/banner.png`}>
|
||||
<link rel="twitter:image" sizes="180x180" href={`${site}/apple-touch-icon.png`}>
|
||||
<meta name="twitter:site" content={twitter}>
|
||||
<meta name="twitter:creator" content={twitter}>
|
||||
|
||||
<!-- Non-tracking hit counter -->
|
||||
{analytics.enable && (
|
||||
<script defer is:inline type="text/partytown"
|
||||
data-domain={analytics.domain} src={analytics.script}></script>
|
||||
)}
|
||||
|
||||
<!-- Schema.org markup for Google -->
|
||||
{breadcrumbs && (
|
||||
<script type="application/ld+json" set:html={JSON.stringify(makeBreadcrumbs())} />
|
||||
)}
|
||||
{customSchemaJson && (
|
||||
<script type="application/ld+json" set:html={JSON.stringify(customSchemaJson)} />
|
||||
)}
|
||||
Loading…
Reference in a new issue