Update: blog template (#4283)

* add new blog template

* update placeholder images

* use svg favicon

* Update examples/blog/src/pages/blog/using-mdx.mdx

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* fred pass

* more fred pass

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

8 files changed, 61 insertions, 171 deletions

diff --git a/examples/blog/src/components/Author.astro b/examples/blog/src/components/Author.astro
deleted file mode 100644
index 3b29e0e76..000000000
--- a/examples/blog/src/components/Author.astro
+++ /dev/null
@@ -1,18 +0,0 @@
----
-export interface Props {
-	name: string;
-	href: string;
-}
-
-const { name, href } = Astro.props;
----
-
-<div class="author">
-	<p><a {href}>{name}</a></p>
-</div>
-
-<style>
-	.author {
-		margin-bottom: 0.75rem;
-	}
-</style>
diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
index af6fd380b..9c4c8fcdf 100644
--- a/examples/blog/src/components/BaseHead.astro
+++ b/examples/blog/src/components/BaseHead.astro
@@ -1,19 +1,21 @@
 ---
-import '../styles/blog.css';
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+import '../styles/global.css';
 
 export interface Props {
 	title: string;
 	description: string;
+	image?: string;
 }
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { title, description } = Astro.props;
+const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
 ---
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" type="image/svg+xml" href="/astro.svg" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Primary Meta Tags -->
@@ -23,21 +25,14 @@ const { title, description } = Astro.props;
 
 <!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
-<meta property="og:url" content={canonicalURL} />
+<meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content="https://astro.build/social.png" />
+<meta property="og:image" content={new URL(image, Astro.url)} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={canonicalURL} />
+<meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content="https://astro.build/social.png" />
-
-<!-- Fonts -->
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link
-	rel="stylesheet"
-	href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap"
-/>
+<meta property="twitter:image" content={new URL(image, Astro.url)} />
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro
deleted file mode 100644
index 865eeeb7f..000000000
--- a/examples/blog/src/components/BlogPostPreview.astro
+++ /dev/null
@@ -1,43 +0,0 @@
----
-export interface Props {
-	title: string;
-	description: string;
-	publishDate: string;
-	url: string;
-}
-
-const { title, description, publishDate, url } = Astro.props as Props;
----
-
-<article class="post-preview">
-	<header>
-		<time>{publishDate}</time>
-		<a href={url}><h1 class="title">{title}</h1></a>
-	</header>
-	<p>{description}</p>
-	<a href={url}>Read more</a>
-</article>
-
-<style>
-	.post-preview {
-		padding-bottom: 2rem;
-		margin-bottom: 2rem;
-		border-bottom: 4px solid var(--theme-divider);
-	}
-
-	.title,
-	time {
-		margin: 0;
-	}
-
-	time {
-		font-size: 1.25rem;
-		color: var(--theme-text-lighter);
-	}
-
-	.title {
-		font-size: 2.25rem;
-		font-weight: 700;
-		color: var(--theme-text);
-	}
-</style>
diff --git a/examples/blog/src/components/FollowMe.astro b/examples/blog/src/components/FollowMe.astro
deleted file mode 100644
index 093391147..000000000
--- a/examples/blog/src/components/FollowMe.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
-export interface Props {
-	username: string;
-	href: string;
-}
-
-const { username, href } = Astro.props as Props;
----
-
-<p>Follow me <a {href} target="_blank" rel="noreferrer">@{username}</a></p>
diff --git a/examples/blog/src/components/Footer.astro b/examples/blog/src/components/Footer.astro
new file mode 100644
index 000000000..08395a4d1
--- /dev/null
+++ b/examples/blog/src/components/Footer.astro
@@ -0,0 +1,13 @@
+---
+const today = new Date();
+---
+
+<footer>
+	&copy; {today.getFullYear()} YOUR NAME HERE. All rights reserved.
+</footer>
+<style>
+	footer {
+		padding: 25px;
+		text-align: center;
+	}
+</style>
diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro
index 4d68f524b..75577e6bc 100644
--- a/examples/blog/src/components/Header.astro
+++ b/examples/blog/src/components/Header.astro
@@ -1,57 +1,25 @@
-<header class="wrapper">
+---
+import HeaderLink from './HeaderLink.astro';
+import { SITE_TITLE } from '../config';
+---
+
+<header>
+	<h2>
+		{SITE_TITLE}
+	</h2>
 	<nav>
-		<a href="/">
-			<svg
-				width="32"
-				height="32"
-				viewBox="0 0 256 256"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<style>
-					#flame {
-						fill: #ff5d01;
-					}
-					#a {
-						fill: #000014;
-					}
-				</style>
-				<path
-					id="a"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
-				></path>
-				<path
-					id="flame"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
-				></path>
-			</svg>
-			<span>My Blog</span>
-		</a>
+		<HeaderLink href="/">Home</HeaderLink>
+		<HeaderLink href="/blog">Blog</HeaderLink>
+		<HeaderLink href="/about">About</HeaderLink>
+		<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
+		<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
 	</nav>
 </header>
-
 <style>
 	header {
-		padding-top: 1rem;
-		padding-bottom: 1rem;
-		height: 5rem;
-	}
-	nav {
-		display: flex;
-		justify-content: space-between;
+		margin: 0em 0 2em;
 	}
-
-	svg {
-		width: 2.5rem;
-		height: 2.5rem;
-	}
-
-	a {
-		text-decoration: none;
-		display: inline-flex;
+	h2 {
+		margin: 0.5em 0;
 	}
 </style>
diff --git a/examples/blog/src/components/HeaderLink.astro b/examples/blog/src/components/HeaderLink.astro
new file mode 100644
index 000000000..41e19de84
--- /dev/null
+++ b/examples/blog/src/components/HeaderLink.astro
@@ -0,0 +1,20 @@
+---
+export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
+
+const { href, class: className, ...props } = Astro.props as Props;
+const isActive = href === Astro.url.pathname;
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+	<slot />
+</a>
+<style>
+	a {
+		display: inline-block;
+		text-decoration: none;
+	}
+	a.active {
+		font-weight: bolder;
+		text-decoration: underline;
+	}
+</style>
diff --git a/examples/blog/src/components/LikeButton.tsx b/examples/blog/src/components/LikeButton.tsx
deleted file mode 100644
index 23d8518de..000000000
--- a/examples/blog/src/components/LikeButton.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState } from 'preact/hooks';
-
-interface Props {
-	pageUrl: string;
-}
-
-export default function LikeButton({ pageUrl }: Props) {
-	const persistedLike = localStorage.getItem(`liked-${pageUrl}`);
-	const [liked, setLiked] = useState(persistedLike ? JSON.parse(persistedLike) : false);
-
-	function toggleLike() {
-		const toggled = !liked;
-		setLiked(toggled);
-		// preserve your likes as you navigate the site
-		localStorage.setItem(`liked-${pageUrl}`, JSON.stringify(toggled));
-	}
-
-	return (
-		<button onClick={toggleLike}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				xmlnsXlink="http://www.w3.org/1999/xlink"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-			>
-				{/* fill the heart when liked ♥ */}
-				<path
-					fill={liked ? 'red' : '#ccc'}
-					d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
-				></path>
-			</svg>
-		</button>
-	);
-}