chore: add blog-with-router example

examples/blog-with-router/.gitignore

@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/blog-with-router/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @astrojs/example-blog
+
+## 0.0.2
+
+### Patch Changes
+
+- e711668: Improved accessibility of the example blog

examples/blog-with-router/README.md

@@ -0,0 +1,47 @@
+# Astro Blog Example
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+Features:
+
+- ✅ SEO-friendly setup with canonical URLs and OpenGraph data
+- ✅ Full Markdown support
+- ✅ RSS 2.0 generation
+- ✅ Sitemap.xml generation
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   ├── robots.txt
+│   └── favicon.ico
+├── src/
+│   ├── components/
+│   │   └── Tour.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command         | Action                                      |
+|:----------------|:--------------------------------------------|
+| `npm install`   | Installs dependencies                       |
+| `npm run start` | Starts local dev server at `localhost:3000` |
+| `npm run build` | Build your production site to `./dist/`     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).

examples/blog-with-router/astro.config.mjs

@@ -0,0 +1,14 @@
+export default {
+  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
+  // pages: './src/pages',   // Path to Astro components, pages, and data
+  // dist: './dist',       // When running `astro build`, path to final static output
+  // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
+  buildOptions: {
+    site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    // sitemap: true,      // Generate sitemap (set to "false" to disable)
+  },
+  devOptions: {
+    // port: 3000,         // The port to run the dev server on.
+    // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
+  },
+};

examples/blog-with-router/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@astrojs/example-blog-with-router",
+  "version": "0.0.2",
+  "private": true,
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.13.10",
+    "@astrojs/router": "^0.1.0"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}

examples/blog-with-router/public/favicon.svg

@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </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 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" />
+</svg>

examples/blog-with-router/public/global.scss

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

examples/blog-with-router/public/index.js

@@ -0,0 +1 @@
+import '@astrojs/router';

examples/blog-with-router/src/components/MainHead.astro

@@ -0,0 +1,41 @@
+---
+// props
+export let title: string;
+export let description: string;
+export let image: string | undefined;
+export let type: string | undefined;
+export let next: string | undefined;
+export let prev: string | undefined;
+export let canonicalURL: string | undefined;
+---
+
+<!-- Common -->
+<meta charset="UTF-8">
+<title>{title}</title>
+<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" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
+{prev && <link rel="prev" aria-label="Next Page" 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={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}>)}
+
+<script type="module" src="/index.js" />

examples/blog-with-router/src/components/Nav.astro

@@ -0,0 +1,60 @@
+---
+export let title;
+---
+
+<style lang="scss">
+.header {
+  text-align: center;
+
+  @media (min-width: 600px) {
+    display: flex;
+    align-items: center;
+    padding: 2rem;
+  }
+}
+
+.title {
+  margin: 0;
+  font-size: 1.2em;
+  letter-spacing: -0.03em;
+  font-weight: 400;
+  margin-right: 1em;
+}
+
+.nav {
+  text-align: center;
+
+  @media (min-width: 600px) {
+    display: flex;
+  }
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin: 0;
+}
+
+a {
+  display: block;
+  font-size: 1.2em;
+  letter-spacing: -0.02em;
+  margin-left: 0.75em;
+  margin-right: 0.75em;
+}
+</style>
+
+<nav class="header">
+  <h1 class="title">Don’s Blog</h1>
+  <ul class="nav">
+    <li><a href="/">Home</a></li>
+    <li><a href="/posts">All Posts</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-with-router/src/components/Pagination.astro

@@ -0,0 +1,40 @@
+---
+export let prevUrl: string;
+export let nextUrl: string;
+---
+
+<style lang="scss">
+.nav {
+  display: flex;
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.prev,
+.next {
+  display: block;
+  text-transform: uppercase;
+  font-size: 0.8em;
+
+  &[href="#"] {
+    display: none;
+  }
+}
+
+.prev {
+  margin-right: auto;
+}
+
+.next {
+  margin-left: auto;
+}
+</style>
+
+<div class="wrapper">
+  <nav class="nav">
+    <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
+    <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
+  </nav>
+</div>

examples/blog-with-router/src/components/PostPreview.astro

@@ -0,0 +1,63 @@
+---
+export let post;
+export let author;
+
+function formatDate(date) {
+  return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY
+}
+---
+
+<style lang="scss">
+.post {
+  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;
+}
+
+.description {
+  font-size: 1.25em;
+}
+
+.link {
+  text-transform: uppercase;
+  font-size: 0.8em;
+  margin-left: 1em;
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 2.75em;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+time {
+  display: block;
+  margin-top: 0.25rem;
+  margin-bottom: 0.5em;
+}
+</style>
+
+<article class="post">
+
+  <div class="data">
+    <h2>{post.title}</h2>
+    <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} aria-label={`Read ${post.title}`}>Read</a>
+    </p>
+  </div>
+</article>

examples/blog-with-router/src/data/authors.json

@@ -0,0 +1,10 @@
+{
+  "don": {
+    "name": "Don Quixote",
+    "image": "/authors/don.jpg"
+  },
+  "sancho": {
+    "name": "Sancho Panza",
+    "image": "/authors/sancho.jpg"
+  }
+}

examples/blog-with-router/src/layouts/post.astro

@@ -0,0 +1,81 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+
+export let content;
+
+import authorData from '../data/authors.json';
+---
+
+<html>
+  <head>
+    <title>{content.title}</title>
+    <MainHead title={content.title} description={content.description} image={content.image} canonicalURL={Astro.request.canonicalURL} />
+    <style lang="scss">
+      .title {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+        font-size: 3em;
+        letter-spacing: -0.04em;
+        text-align: center;
+      }
+
+      .description {
+        margin-bottom: 4rem;
+        font-size: 1.4em;
+        font-weight: 400;
+        text-align: justify;
+        text-transform: uppercase;
+      }
+
+      .img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .article {
+        margin-top: 4rem;
+        margin-bottom: 6rem;
+
+        :global(p) {
+          font-size: 1.3em;
+          line-height: 2;
+          margin-top: 2em;
+          margin-bottom: 2em;
+        }
+      }
+
+      .posts {
+        text-transform: uppercase;
+      }
+
+      .footer {
+        margin-top: 6rem;
+        padding-bottom: 6rem;
+        text-align: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <Nav />
+
+    <astro-router>
+      <main class="wrapper">
+        <h2 class="title">{content.title}</h2>
+        <p class="description">{content.description}</p>
+        <img class="img" src={content.image} alt="">
+        <article class="article">
+          <slot />
+        </article>
+        <footer class="footer">
+          <a class="posts" href="/posts">All Posts</a>
+        </footer>
+      </main>
+
+      <footer>
+      </footer>
+    </astro-router>
+  </body>
+</html>

examples/blog-with-router/src/pages/$author.astro

@@ -0,0 +1,110 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Don’s Blog';
+let description = 'An example blog on Astro';
+let canonicalURL = Astro.request.canonicalURL;
+const author = authorData[collection.params.author];
+
+// collection
+import authorData from '../data/authors.json';
+export let collection: any;
+export async function createCollection() {
+  /** Load posts */
+  let allPosts = Astro.fetchContent('./post/*.md');
+  let allAuthors = new Set();
+
+  /** Loop through all posts, gather all authors */
+  let routes = [];
+  for (const post of allPosts) {
+    if (!allAuthors.has(post.author)) {
+      allAuthors.add(post.author);
+      routes.push({ author: post.author });
+    }
+  }
+
+  return {
+    /** Sort posts newest -> oldest, filter by params.author */
+    async data({ params }) {
+      allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+      return allPosts.filter((post) => post.author === params.author);
+    },
+    /** Set page size */
+    pageSize: 3,
+    /** Set permalink URL */
+    permalink: ({ params }) => `/author/${params.author}`,
+    /** Pass back all routes so Astro can generate the static build */
+    routes,
+  };
+}
+---
+
+<html>
+  <head>
+    <title>{title}</title>
+    <MainHead
+      title={title}
+      description={description}
+      image={collection.data[0].image}
+      canonicalURL={canonicalURL}
+      prev={collection.url.prev}
+      next={collection.url.next}
+    />
+
+    <style lang="scss">
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 3em;
+        letter-spacing: -0.04em;
+        margin-top: 2rem;
+        margin-bottom: 0;
+      }
+
+      .avatar {
+        width: 1em;
+        height: 1em;
+        margin-right: 0.5em;
+        border-radius: 50%;
+        overflow:hidden;
+
+        &-img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .count {
+        font-size: 1em;
+        display: block;
+        text-align: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <Nav title={title} />
+
+    <astro-router>
+      <main class="wrapper">
+        <h2 class="title">
+          <div class="avatar"><img class="avatar-img" src={author.image} alt=""}></div>
+          {author.name}
+        </h2>
+        <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
+        {collection.data.map((post) => <PostPreview post={post} author={author} />)}
+      </main>
+
+      <footer>
+        <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+      </footer>
+    </astro-router>
+  </body>
+</html>

examples/blog-with-router/src/pages/$posts.astro

@@ -0,0 +1,85 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+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;
+    },
+    /** Set page size */
+    pageSize: 2,
+    /** Generate RSS feed (only for main /posts/ feed) */
+    rss: {
+      title: 'Don’s Blog',
+      description: 'An example blog on Astro',
+      customData: `<language>en-us</language>`,
+      item: (item) => ({
+        title: item.title,
+        description: item.description,
+        link: item.url,
+        pubDate: item.date,
+      }),
+    }
+  };
+}
+---
+
+<html>
+  <head>
+    <title>{title}</title>
+    <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 title={title} />
+
+    <astro-router>
+      <main class="wrapper">
+        <h2 class="title">All Posts</h2>
+        <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>
+
+      <footer>
+        <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+      </footer>
+    </astro-router>
+  </body>
+</html>

examples/blog-with-router/src/pages/about.astro

@@ -0,0 +1,65 @@
+---
+// import PreactCounter from '../components/PreactCounter.tsx';
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+
+let title = "About";
+---
+<html>
+  <head>
+    <MainHead
+      title={title}
+      canonicalURL={Astro.request.canonicalURL}
+    />
+    <style lang="scss">
+
+      .text {
+        padding-bottom: 6rem;
+
+        p {
+          font-size: 1.2em;
+          line-height: 2;
+          margin-top: 2em;
+          margin-bottom: 2em;
+        }
+      }
+
+      .hero {
+        display: block;
+        height: 16rem;
+        overflow: hidden;
+        margin: 4rem 0;
+
+        &-img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .title {
+        font-size: 3em;
+        letter-spacing: -0.04em;
+        margin-top: 2rem;
+        margin-bottom: 0;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <Nav title={title} />
+
+    <astro-router>
+      <main class="wrapper">
+        <h2 class="title">{title}</h2>
+        <div class="hero">
+          <img class="hero-img" src="/images/chapter-01.jpg" alt="">
+        </div>
+        <div class="text">
+          <p>The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections from Motteaux.”</p>
+          <p>See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these woodcuts and steel engravings well match Quixote’s dreams.</p>
+        </div>
+      </main>
+    </astro-router>
+  </body>
+</html>

examples/blog-with-router/src/pages/index.astro

@@ -0,0 +1,46 @@
+---
+// import PreactCounter from '../components/PreactCounter.tsx';
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Don’s Blog';
+let description = 'An example blog on Astro';
+
+// collection
+// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc.
+// so we show a preview of posts here, but actually paginate from $posts.astro
+import authorData from '../data/authors.json';
+
+let allPosts = Astro.fetchContent('./post/*.md');
+allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+let firstPage = allPosts.slice(0, 2);
+---
+
+<html>
+  <head>
+    <title>{title}</title>
+    <MainHead
+      title={title}
+      description={description}
+      image={firstPage[0].image}
+      canonicalURL={Astro.request.canonicalURL.href}
+    />
+  </head>
+
+  <body>
+    <Nav />
+
+    <astro-router>
+      <main class="wrapper">
+        {firstPage.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+      </main>
+
+      <footer>
+        <Pagination nextUrl="/posts/2" />
+      </footer>
+    </astro-router>
+  </body>
+</html>

examples/blog-with-router/src/pages/post/chapter-i.md

@@ -0,0 +1,13 @@
+---
+layout: ../../layouts/post.astro
+title: Chapter I
+tag: movie
+date: 2021-05-17
+image: /images/chapter-01.jpg
+author: don
+description: Which Treats of the Character and Pursuits of the Famous Gentleman Don Quixote of La Mancha
+---
+
+In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing. An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays, lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income. The rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays, while on week-days he made a brave figure in his best homespun. He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place, who used to saddle the hack as well as handle the bill-hook. The age of this gentleman of ours was bordering on fifty; he was of a hardy habit, spare, gaunt-featured, a very early riser and a great sportsman. They will have it his surname was Quixada or Quesada (for here there is some difference of opinion among the authors who write on the subject), although from reasonable conjectures it seems plain that he was called Quexana. This, however, is of but little importance to our tale; it will be enough not to stray a hair’s breadth from the truth in the telling of it.
+
+You must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get. But of all there were none he liked so well as those of the famous Feliciano de Silva’s composition, for their lucidity of style and complicated conceits were as pearls in his sight, particularly when in his reading he came upon courtships and cartels, where he often found passages like “the reason of the unreason with which my reason is afflicted so weakens my reason that with reason I murmur at your beauty;” or again, “the high heavens, that of your divinity divinely fortify you with the stars, render you deserving of the desert your greatness deserves.” Over conceits of this sort the poor gentleman lost his wits, and used to lie awake striving to understand them and worm the meaning out of them; what Aristotle himself could not have made out or extracted had he come to life again for that special purpose. He was not at all easy about the wounds which Don Belianis gave and took, because it seemed to him that, great as were the surgeons who had cured him, he must have had his face and body covered all over with seams and scars. He commended, however, the author’s way of ending his book with the promise of that interminable adventure, and many a time was he tempted to take up his pen and finish it properly as is there proposed, which no doubt he would have done, and made a successful piece of work of it too, had not greater and more absorbing thoughts prevented him.

examples/blog-with-router/src/pages/post/chapter-ii.md

@@ -0,0 +1,15 @@
+---
+layout: ../../layouts/post.astro
+title: Chapter II
+tag: movie
+date: 2021-05-18
+image: /images/chapter-02.jpg
+author: sancho
+description: Which Treats of the First Sally the Ingenious Don Quixote Made From Home
+---
+
+These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge. So, without giving notice of his intention to anyone, and without anybody seeing him, one morning before the dawning of the day (which was one of the hottest of the month of July) he donned his suit of armour, mounted Rocinante with his patched-up helmet on, braced his buckler, took his lance, and by the back door of the yard sallied forth upon the plain in the highest contentment and satisfaction at seeing with what ease he had made a beginning with his grand purpose. But scarcely did he find himself upon the open plain, when a terrible thought struck him, one all but enough to make him abandon the enterprise at the very outset. It occurred to him that he had not been dubbed a knight, and that according to the law of chivalry he neither could nor ought to bear arms against any knight; and that even if he had been, still he ought, as a novice knight, to wear white armour, without a device upon the shield until by his prowess he had earned one. These reflections made him waver in his purpose, but his craze being stronger than any reasoning, he made up his mind to have himself dubbed a knight by the first one he came across, following the example of others in the same case, as he had read in the books that brought him to this pass. As for white armour, he resolved, on the first opportunity, to scour his until it was whiter than an ermine; and so comforting himself he pursued his way, taking that which his horse chose, for in this he believed lay the essence of adventures.
+
+Thus setting out, our new-fledged adventurer paced along, talking to himself and saying, “Who knows but that in time to come, when the veracious history of my famous deeds is made known, the sage who writes it, when he has to set forth my first sally in the early morning, will do it after this fashion? ‘Scarce had the rubicund Apollo spread o’er the face of the broad spacious earth the golden threads of his bright hair, scarce had the little birds of painted plumage attuned their notes to hail with dulcet and mellifluous harmony the coming of the rosy Dawn, that, deserting the soft couch of her jealous spouse, was appearing to mortals at the gates and balconies of the Manchegan horizon, when the renowned knight Don Quixote of La Mancha, quitting the lazy down, mounted his celebrated steed Rocinante and began to traverse the ancient and famous Campo de Montiel;’” which in fact he was actually traversing. “Happy the age, happy the time,” he continued, “in which shall be made known my deeds of fame, worthy to be moulded in brass, carved in marble, limned in pictures, for a memorial for ever. And thou, O sage magician, whoever thou art, to whom it shall fall to be the chronicler of this wondrous history, forget not, I entreat thee, my good Rocinante, the constant companion of my ways and wanderings.” Presently he broke out again, as if he were love-stricken in earnest, “O Princess Dulcinea, lady of this captive heart, a grievous wrong hast thou done me to drive me forth with scorn, and with inexorable obduracy banish me from the presence of thy beauty. O lady, deign to hold in remembrance this heart, thy vassal, that thus in anguish pines for love of thee.”
+
+So he went on stringing together these and other absurdities, all in the style of those his books had taught him, imitating their language as well as he could; and all the while he rode so slowly and the sun mounted so rapidly and with such fervour that it was enough to melt his brains if he had any. Nearly all day he travelled without anything remarkable happening to him, at which he was in despair, for he was anxious to encounter someone at once upon whom to try the might of his strong arm.

examples/blog-with-router/src/pages/post/chapter-iii.md

@@ -0,0 +1,13 @@
+---
+layout: ../../layouts/post.astro
+title: Chapter III
+tag: movie
+date: 2021-05-19
+image: /images/chapter-03.jpg
+author: don
+description: Wheren is Related the Droll Way in which Don Quixote Had Himself Dubbed a Knight
+---
+
+Harassed by this reflection, he made haste with his scanty pothouse supper, and having finished it called the landlord, and shutting himself into the stable with him, fell on his knees before him, saying, “From this spot I rise not, valiant knight, until your courtesy grants me the boon I seek, one that will redound to your praise and the benefit of the human race.” The landlord, seeing his guest at his feet and hearing a speech of this kind, stood staring at him in bewilderment, not knowing what to do or say, and entreating him to rise, but all to no purpose until he had agreed to grant the boon demanded of him. “I looked for no less, my lord, from your High Magnificence,” replied Don Quixote, “and I have to tell you that the boon I have asked and your liberality has granted is that you shall dub me knight to-morrow morning, and that to-night I shall watch my arms in the chapel of this your castle; thus to-morrow, as I have said, will be accomplished what I so much desire, enabling me lawfully to roam through all the four quarters of the world seeking adventures on behalf of those in distress, as is the duty of chivalry and of knights-errant like myself, whose ambition is directed to such deeds.”
+
+The landlord, who, as has been mentioned, was something of a wag, and had already some suspicion of his guest’s want of wits, was quite convinced of it on hearing talk of this kind from him, and to make sport for the night he determined to fall in with his humour. So he told him he was quite right in pursuing the object he had in view, and that such a motive was natural and becoming in cavaliers as distinguished as he seemed and his gallant bearing showed him to be; and that he himself in his younger days had followed the same honourable calling, roaming in quest of adventures in various parts of the world, among others the Curing-grounds of Malaga, the Isles of Riaran, the Precinct of Seville, the Little Market of Segovia, the Olivera of Valencia, the Rondilla of Granada, the Strand of San Lucar, the Colt of Cordova, the Taverns of Toledo, and divers other quarters, where he had proved the nimbleness of his feet and the lightness of his fingers, doing many wrongs, cheating many widows, ruining maids and swindling minors, and, in short, bringing himself under the notice of almost every tribunal and court of justice in Spain; until at last he had retired to this castle of his, where he was living upon his property and upon that of others; and where he received all knights-errant of whatever rank or condition they might be, all for the great love he bore them and that they might share their substance with him in return for his benevolence. He told him, moreover, that in this castle of his there was no chapel in which he could watch his armour, as it had been pulled down in order to be rebuilt, but that in a case of necessity it might, he knew, be watched anywhere, and he might watch it that night in a courtyard of the castle, and in the morning, God willing, the requisite ceremonies might be performed so as to have him dubbed a knight, and so thoroughly dubbed that nobody could be more so. He asked if he had any money with him, to which Don Quixote replied that he had not a farthing, as in the histories of knights-errant he had never read of any of them carrying any. On this point the landlord told him he was mistaken; for, though not recorded in the histories, because in the author’s opinion there was no need to mention anything so obvious and necessary as money and clean shirts, it was not to be supposed therefore that they did not carry them, and he might regard it as certain and established that all knights-errant (about whom there were so many full and unimpeachable books) carried well-furnished purses in case of emergency, and likewise carried shirts and a little box of ointment to cure the wounds they received. For in those plains and deserts where they engaged in combat and came out wounded, it was not always that there was someone to cure them, unless indeed they had for a friend some sage magician to succour them at once by fetching through the air upon a cloud some damsel or dwarf with a vial of water of such virtue that by tasting one drop of it they were cured of their hurts and wounds in an instant and left as sound as if they had not received any damage whatever. But in case this should not occur, the knights of old took care to see that their squires were provided with money and other requisites, such as lint and ointments for healing purposes; and when it happened that knights had no squires (which was rarely and seldom the case) they themselves carried everything in cunning saddle-bags that were hardly seen on the horse’s croup, as if it were something else of more importance, because, unless for some such reason, carrying saddle-bags was not very favourably regarded among knights-errant. He therefore advised him (and, as his godson so soon to be, he might even command him) never from that time forth to travel without money and the usual requirements, and he would find the advantage of them when he least expected it.

yarn.lock

@@ -1483,6 +1483,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
   integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
 
+"@types/prettier@^2.2.1":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.0.tgz#2e8332cc7363f887d32ec5496b207d26ba8052bb"
+  integrity sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw==
+
 "@types/prompts@^2.0.12":
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/@types/prompts/-/prompts-2.0.12.tgz#5cc1557f88e4d69dad93230fff97a583006f858b"
@@ -6684,6 +6689,11 @@ moo@^0.5.1:
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
   integrity sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==
 
+morphdom@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/morphdom/-/morphdom-2.6.1.tgz#e868e24f989fa3183004b159aed643e628b4306e"
+  integrity sha512-Y8YRbAEP3eKykroIBWrjcfMw7mmwJfjhqdpSvoqinu8Y702nAwikpXcNFDiIkyvfCLxLM9Wu95RZqo4a9jFBaA==
+
 mri@^1.1.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"