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

2
src/components/BaseHead.astro
View File

@@ -10,6 +10,7 @@ export interface Props {
const { title, description, image = "/placeholder-social.jpg" } = Astro.props; const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
--- ---
<head>
<!-- Global Metadata --> <!-- Global Metadata -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -43,3 +44,4 @@ const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
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;