5 files changed, 84 insertions, 96 deletions
diff --git a/examples/blog/src/components/AuthorCard.astro b/examples/blog/src/components/AuthorCard.astro
deleted file mode 100644
index 46ff504f7..000000000
--- a/examples/blog/src/components/AuthorCard.astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-export let author;
----
-
-<style lang="scss">
-.card {
-  display: flex;
-  align-items: center;
-}
-
-.avatar {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 0.5rem;
-  object-fit: cover;
-  border-radius: 50%;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
-
-<div class="card">
-  <div class="avatar">
-    <img class="avatar" src={author.img} alt={author.name} />
-  </div>
-  {author.name}
-</div>
diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro
index dfeb9dfb4..86f750ddc 100644
--- a/examples/blog/src/components/MainHead.astro
+++ b/examples/blog/src/components/MainHead.astro
@@ -7,33 +7,33 @@ export let type: string | undefined;
 export let next: string | undefined;
 export let prev: string | undefined;
 export let canonicalURL: string | undefined;
-
-// internal data
-const OG_TYPES = {
-  'movie': 'video.movie',
-  'television': 'video.tv_show'
-}
 ---
 
 <!-- Common -->
-<meta charset="UTF-8" />
+<meta charset="UTF-8">
 <title>{title}</title>
-<meta name="description" content={description} />
-<link rel="stylesheet" href="/global.css" />
-<link rel="sitemap" href="/sitemap.xml" />
-<link rel="canonical" href={canonicalURL} />
-{next && <link rel="next" href={next} />}
-{prev && <link rel="prev" href={prev} />}
+<meta name="description" content={description}>
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/global.css">
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap.xml">
+<!-- RSS -->
+<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml">
+
+<!-- SEO -->
+<link rel="canonical" href={canonicalURL}>
+{next && <link rel="next" href={new URL(next, canonicalURL).href}>}
+{prev && <link rel="prev" href={new URL(prev, canonicalURL).href}>}
 
 <!-- OpenGraph -->
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-{image && (<meta property="og:image" content={image} />)}
-{OG_TYPES[type] && (<meta property="og:type" content={OG_TYPES[type]} />)}
+<meta property="og:title" content={title}>
+<meta property="og:description" content={description}>
+{image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)}
 
 <!-- Twitter -->
-<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
-<meta name="twitter:site" content="@astro" />
-<meta name="twitter:title" content={title} />
-<meta name="twitter:description" content={description} />
-{image && (<meta name="twitter:image" content={image} />)}
+<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'}>
+<meta name="twitter:site" content="@astro">
+<meta name="twitter:title" content={title}>
+<meta name="twitter:description" content={description}>
+{image && (<meta name="twitter:image" content={image}>)}
diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro
index f1ac28c98..86919ac4d 100644
--- a/examples/blog/src/components/Nav.astro
+++ b/examples/blog/src/components/Nav.astro
@@ -1,3 +1,7 @@
+---
+export let title;
+---
+
 <style lang="scss">
 .header {
   display: flex;
@@ -7,8 +11,10 @@
 
 .title {
   margin: 0;
-  font-size: 1em;
-  margin-right: 2rem;
+  font-size: 1.2em;
+  letter-spacing: -0.03em;
+  font-weight: 400;
+  margin-right: 1em;
 }
 
 .nav {
@@ -28,17 +34,19 @@ li {
 
 a {
   display: block;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  font-size: 1.2em;
+  letter-spacing: -0.02em;
+  margin-left: 0.75em;
+  margin-right: 0.75em;
 }
 </style>
 
 <nav class="header">
-  <h1 class="title">Muppet Blog</h1>
+  <h1 class="title">Don’s Blog</h1>
   <ul class="nav">
     <li><a href="/">All Posts</a></li>
-    <li><a href="/tag/movie/1">Movies</a></li>
-    <li><a href="/tag/television/1">Television</a></li>
+    <li><a href="/author/don">Author: Don</a></li>
+    <li><a href="/author/sancho">Author: Sancho</a></li>
     <li><a href="/about">About</a></li>
   </ul>
 </nav>
diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro
index 8e033c668..7b01e59b5 100644
--- a/examples/blog/src/components/Pagination.astro
+++ b/examples/blog/src/components/Pagination.astro
@@ -6,17 +6,21 @@ export let nextUrl: string;
 <style lang="scss">
 .nav {
   display: flex;
-  max-width: 600px;
-  width: 100%;
-  margin-left: auto;
   margin-right: auto;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  margin-left: auto;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
 }
 
 .prev,
 .next {
   display: block;
+  text-transform: uppercase;
+  font-size: 0.8em;
+
+  &[href="#"] {
+    display: none;
+  }
 }
 
 .prev {
@@ -28,7 +32,9 @@ export let nextUrl: string;
 }
 </style>
 
-<nav class="nav">
-  <a class="prev" href={prevUrl || '#'}>Prev</a>
-  <a class="next" href={nextUrl || '#'}>Next</a>
-</nav>
+<div class="wrapper">
+  <nav class="nav">
+    <a class="prev" href={prevUrl || '#'}>Prev</a>
+    <a class="next" href={nextUrl || '#'}>Next</a>
+  </nav>
+</div>
diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro
index e4e39143a..59c54e8fa 100644
--- a/examples/blog/src/components/PostPreview.astro
+++ b/examples/blog/src/components/PostPreview.astro
@@ -2,57 +2,62 @@
 export let post;
 export let author;
 
-import AuthorCard from './AuthorCard.astro';
-
 function formatDate(date) {
-  return new Date(date).toUTCString();
+  return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY
 }
 ---
 
 <style lang="scss">
 .post {
-  display: grid;
-  grid-template-columns: 8rem auto;
-  grid-gap: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  border-bottom: 1px solid rgba(black, 0.25);
+  text-align: center;
+}
+
+.author {
+  text-transform: uppercase;
+}
+
+.date {
+  font-style: italic;
 }
 
-.thumb {
-  width: 8rem;
-  height: 8rem;
-  object-fit: cover;
-  border-radius: 0.25rem;
-  overflow: hidden;
+.description {
+  font-size: 1.25em;
+}
 
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.link {
+  text-transform: uppercase;
+  font-size: 0.8em;
+  margin-left: 1em;
 }
 
 h1 {
   font-weight: 700;
-  font-size: 1em;
+  font-size: 2.75em;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  margin-top: 0;
   margin-bottom: 0;
 }
 
 time {
   display: block;
-  margin-top: 0.5em;
+  margin-top: 0.25rem;
   margin-bottom: 0.5em;
 }
 </style>
 
 <article class="post">
-  <div class="thumb">
-    <img src={post.image} alt={post.title} />
-  </div>
+
   <div class="data">
     <h1>{post.title}</h1>
-    <AuthorCard author={author} />
-    <time>{formatDate(post.date)}</time>
-    <p>{post.description}</p>
-    <a href={post.url}>Read</a>
+    <a class="author" href={`/author/${post.author}`}>{author.name}</a>
+    <time class="date" datetime={post.date}>{formatDate(post.date)}</time>
+    <p class="description">
+      {post.description}
+      <a class="link" href={post.url}>Read</a>
+    </p>
   </div>
 </article>