add custom 404 page

README.md

@@ -31,6 +31,14 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Support for tags - each unique tag will be its own page
 - SEO friendly with RSS feed, sitemaps and more!
 
+## Sample posts
+
+- [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide)
+- [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs)
+- [A tour of math typesetting](https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator)
+- [Simple MDX image grid](https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada)
+- [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine)
+
 ## Quick Start Guide
 
 1. Fork this project

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nexjs Starter Blog'
-date: '2021-01-11'
-tags: ['nextjs', 'tailwind', 'guide']
+date: '2021-01-12'
+tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
 ---
@@ -37,6 +37,14 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Support for tags - each unique tag will be its own page
 - SEO friendly with RSS feed, sitemaps and more!
 
+## Sample posts
+
+- [A markdown guide](/blog/github-markdown-guide)
+- [Learn more about images in Next.js](/blog/guide-to-using-images-in-nextjs)
+- [A tour of math typesetting](/blog/deriving-ols-estimator)
+- [Simple MDX image grid](/blog/pictures-of-canada)
+- [Example of long prose](/blog/the-time-machine)
+
 ## Quick Start Guide
 
 1. Fork this project

pages/404.js

@@ -0,0 +1,21 @@
+export default function FourZeroFour() {
+  return (
+    <div className="flex items-start justify-start flex-col md:justify-center md:items-center md:flex-row md:space-x-6 md:mt-24">
+      <div className="pt-6 pb-8 space-x-2 md:space-y-5">
+        <h1 className="text-6xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight md:text-8xl md:leading-14 md:border-r-2 md:px-6">
+          404
+        </h1>
+      </div>
+      <div class="max-w-md">
+        <p class="text-xl md:text-2xl mb-4 font-bold leading-normal">
+          Sorry we couldn't find this page.
+        </p>
+        <p class="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
+
+        <button class="px-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-500">
+          Back to Homepage
+        </button>
+      </div>
+    </div>
+  )
+}

public/index.xml

@@ -5,9 +5,17 @@
       <link>https://tailwind-nextjs-starter-blog.vercel.app/blog</link>
       <description>A blog created with Next.js and Tailwind.css</description>
       <language>en-us</language>
-      <lastBuildDate>Wed, 11 Nov 2020 00:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Tue, 12 Jan 2021 00:00:00 GMT</lastBuildDate>
       <atom:link href="https://tailwind-nextjs-starter-blog.vercel.app/index.xml" rel="self" type="application/rss+xml"/>
       
+  <item>
+    <guid>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</guid>
+    <title>Introducing Tailwind Nexjs Starter Blog</title>
+    <link>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</link>
+    <description>Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.</description>
+    <pubDate>Tue, 12 Jan 2021 00:00:00 GMT</pubDate>
+  </item>
+
   <item>
     <guid>https://tailwind-nextjs-starter-blog.vercel.appguide-to-using-images-in-nextjs</guid>
     <title>Images in Next.js</title>
@@ -24,14 +32,6 @@
     <pubDate>Sat, 16 Nov 2019 00:00:00 GMT</pubDate>
   </item>
 
-  <item>
-    <guid>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</guid>
-    <title>Markdown Guide</title>
-    <link>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</link>
-    <description>Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on Github Flavored Markdown.</description>
-    <pubDate>Fri, 11 Oct 2019 00:00:00 GMT</pubDate>
-  </item>
-
   <item>
     <guid>https://tailwind-nextjs-starter-blog.vercel.appgithub-markdown-guide</guid>
     <title>Markdown Guide</title>