1 files changed, 34 insertions, 10 deletions
diff --git a/examples/blog/src/pages/$posts.astro b/examples/blog/src/pages/$posts.astro
index ebb20705d..8ca4214a1 100644
--- a/examples/blog/src/pages/$posts.astro
+++ b/examples/blog/src/pages/$posts.astro
@@ -5,22 +5,26 @@ import PostPreview from '../components/PostPreview.astro';
 import Pagination from '../components/Pagination.astro';
 
 // page
-let title = 'Muppet Blog: Home';
+let title = 'Don’s Blog';
 let description = 'An example blog on Astro';
+let canonicalURL = Astro.request.canonicalURL;
 
 // collection
 import authorData from '../data/authors.json';
 export let collection: any;
 export async function createCollection() {
   return {
+    /** Load posts, sort newest -> oldest */
     async data() {
       let allPosts = Astro.fetchContent('./post/*.md');
       allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
       return allPosts;
     },
-    pageSize: 3,
+    /** Set page size */
+    pageSize: 2,
+    /** Generate RSS feed (only for main /posts/ feed) */
     rss: {
-      title: 'Muppet Blog',
+      title: 'Don’s Blog',
       description: 'An example blog on Astro',
       customData: `<language>en-us</language>`,
       item: (item) => ({
@@ -37,18 +41,38 @@ export async function createCollection() {
 <html>
   <head>
     <title>{title}</title>
-    <MainHead title={title} description={description} />
-    <link rel="canonical" href={'https://mysite.dev' + collection.url.current} />
-    {collection.url.next && <link rel="next" href={'https://mysite.dev' + collection.url.next} />}
-    {collection.url.prev && <link rel="prev" href={'https://mysite.dev' + collection.url.prev} />}
+    <MainHead
+      title={title}
+      description={description}
+      image={collection.data[0].image}
+      canonicalURL={canonicalURL}
+      prev={collection.url.prev}
+      next={collection.url.next}
+    />
+
+    <style lang="scss">
+      .title {
+        font-size: 3em;
+        letter-spacing: -0.04em;
+        margin-top: 2rem;
+        margin-bottom: 0;
+        text-align: center;
+      }
+
+      .count {
+        font-size: 1em;
+        display: block;
+        text-align: center;
+      }
+    </style>
   </head>
 
   <body>
-    <Nav />
+    <Nav title={title} />
 
     <main class="wrapper">
-      <h1>All Posts</h1>
-      <small>{collection.start + 1}–{collection.end + 1} of {collection.total}</small><br />
+      <h1 class="title">All Posts</h1>
+      <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
       {collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
     </main>