Improve blog template (withastro#217)

examples/blog/README.md

@@ -1,23 +1,30 @@
 # Astro Blog Example
 
+Features:
+
+- ✅ SEO-friendly setup with canonical URLs and OpenGraph data
+- ✅ Full Markdown support
+- ✅ RSS 2.0 generation
+- ✅ Sitemap.xml generation
+
 ## Setup
 
 ```
-npm install
+yarn
 ```
 
 ## Dev
 
 ```
-npm start
+yarn start
 ```
 
 Preview at `http://localhost:3000`
 
 ## Build
 
 ```
-npm build
+yarn build
 ```
 
 Will output static site at `./dist`

examples/blog/astro.config.mjs

@@ -2,9 +2,9 @@ export default {
   projectRoot: '.',
   public: './public',
   dist: './dist',
-  buildOptions:{
+  buildOptions: {
     sitemap: true,
-    site: 'https://muppet-blog.github.io/',
+    site: 'https://mysite.dev/', // change
   },
   astroRoot: './src',
 };

examples/blog/public/global.scss

@@ -1,9 +1,23 @@
 body {
-  font-family: sans-serif;
+  font-family: 'Spectral', serif;
+  line-height: 1.4;
+}
+
+p {
+  line-height: 2;
+}
+
+a {
+  color: crimson;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
 }
 
 .wrapper {
-  max-width: 1400px;
+  max-width: 60rem;
   margin-left: auto;
   margin-right: auto;
   padding-left: 2rem;

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}>)}

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>

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>

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>

examples/blog/src/data/authors.json

@@ -1,27 +1,10 @@
 {
-  "animal": {
-    "name": "Animal",
-    "email": "[email protected]",
-    "img": "/images/animal.jpg"
+  "don": {
+    "name": "Don Quixote",
+    "image": "/authors/don.jpg"
   },
-  "kermit": {
-    "name": "Kermit the Frog",
-    "email": "[email protected]",
-    "img": "/images/kermit.jpg"
-  },
-  "ms-piggy": {
-    "name": "Animal",
-    "email": "[email protected]",
-    "img": "/images/ms-piggy.jpg"
-  },
-  "gonzo": {
-    "name": "Gonzo",
-    "email": "[email protected]",
-    "img": "/images/gonzo.jpg"
-  },
-  "rizzo": {
-    "name": "Rizzo the Rat",
-    "email": "[email protected]",
-    "img": "/images/rizzo.jpg"
+  "sancho": {
+    "name": "Sancho Panza",
+    "image": "/authors/sancho.jpg"
   }
 }