txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move head tag to BaseHead

Browse Source
This commit is contained in:
Cassidy Williams
2022-11-27 22:29:55 -06:00
parent 0eba426c6e
commit dc4d1c392c
6 changed files with 46 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/BaseHead.astro
View File

@@ -10,36 +10,38 @@ export interface Props {
const { title, description, image = "/placeholder-social.jpg" } = Astro.props; const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
--- ---
<!-- Global Metadata --> <head>
<meta charset="utf-8" /> <!-- Global Metadata -->
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content={Astro.generator} /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<!-- Web Monetization --> <!-- Web Monetization -->
<meta name="monetization" content="$ilp.uphold.com/rEgHHBQGDUDP" /> <meta name="monetization" content="$ilp.uphold.com/rEgHHBQGDUDP" />
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>{title}</title> <title>{title}</title>
<meta name="title" content={title} /> <meta name="title" content={title} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} /> <meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} /> <meta property="og:image" content={new URL(image, Astro.url)} />
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} /> <meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} /> <meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} /> <meta property="twitter:description" content={description} />
<meta name="twitter:creator" content="@cassidoo" /> <meta name="twitter:creator" content="@cassidoo" />
<meta name="twitter:image" content="http://cassidoo.co/img/headshot.png" /> <meta name="twitter:image" content="http://cassidoo.co/img/headshot.png" />
<link <link
href="https://fonts.googleapis.com/css?family=Roboto+Mono" href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet" rel="stylesheet"
/> />
</head>

26
src/layouts/BlogPost.astro
View File

@@ -4,42 +4,20 @@ import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import ColorScript from "../components/ColorScript.astro"; import ColorScript from "../components/ColorScript.astro";
export interface Props {
content: {
title: string;
description: string;
added?: string;
updatedDate?: string;
heroImage?: string;
};
}
const { const {
content: { title, description, added, updatedDate, heroImage }, content: { title, description, added, updatedDate, heroImage },
} = Astro.props as Props; } = Astro.props;
--- ---
<html> <html>
<head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
<style>
.title {
font-size: 2em;
margin: 0.25em 0 0;
}
hr {
border-top: 1px solid #ddd;
margin: 1rem 0;
}
</style>
</head>
<body> <body>
<Header /> <Header />
<main> <main>
<article> <article>
{heroImage && <img width={720} height={360} src={heroImage} alt="" />} {heroImage && <img width={720} height={360} src={heroImage} alt="" />}
<h1 class="title">{title}</h1> <h1 class="article-title">{title}</h1>
{added && <time>{added}</time>} {added && <time>{added}</time>}
{ {
updatedDate && ( updatedDate && (

2
src/pages/index.astro
View File

@@ -31,9 +31,7 @@ let tags = [...new Set(getTags)];
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body> <body>
<Header title={SITE_TITLE} /> <Header title={SITE_TITLE} />
<main> <main>

7
src/pages/posts.astro
View File

@@ -17,14 +17,7 @@ const posts = (await Astro.glob("../posts/*.md")).sort(
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
ul li {
display: flex;
}
</style>
</head>
<body> <body>
<Header /> <Header />
<main> <main>

7
src/pages/tag/[tag].astro
View File

@@ -37,14 +37,7 @@ const { tag: currentTag } = Astro.params;
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
ul li {
display: flex;
}
</style>
</head>
<body> <body>
<Header /> <Header />
<main> <main>

10
src/style/global.css
View File

@@ -69,6 +69,11 @@ nav a:not(:last-child) {
padding: 0 12px 0 0; padding: 0 12px 0 0;
} }
hr {
border-top: 1px solid #ddd;
margin: 1rem 0;
}
ul { ul {
list-style-type: none; list-style-type: none;
padding: unset; padding: unset;
@@ -159,6 +164,11 @@ h3 {
max-width: 350px; max-width: 350px;
} }
.article-title {
font-size: 2em;
margin: 0.25em 0 0;
}
ul li time { ul li time {
flex: 0 0 130px; flex: 0 0 130px;
font-style: italic; font-style: italic;