docs: update readme and posts

.gitignore

@@ -18,7 +18,7 @@ public/sitemap.xml
 /build
 *.xml
 # rss feed
-/public/index.xml 
+/public/feed.xml 
 
 # misc
 .DS_Store

README.md

@@ -31,14 +31,14 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 - Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
-- Lightweight, 43kB first load JS, uses Preact in production build
+- Lightweight, 38kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
 - [MDX - write JSX in markdown documents!](https://mdxjs.com/)
-- Server-side syntax highlighting with [rehype-prism](https://github.com/mapbox/rehype-prism)
+- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
 - Math display supported via [KaTeX](https://katex.org/)
 - Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
-- Flexible data retrieval with [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
+- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
 - Support for tags - each unique tag will be its own page
 - Support for multiple authors
 - Blog templates
@@ -57,7 +57,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 ## Quick Start Guide
 
-1. `npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git`
+1. JS (official support) - `npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git` or TS (community support) - `npx degit timlrx/tailwind-nextjs-starter-blog#typescript`
 2. Personalize `siteMetadata.json` (site related information)
 3. Personalize `authors/default.md` (main author)
 4. Modify `projectsData.js`

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

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nexjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-06-09'
+lastmod: '2021-07-11'
 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.'
@@ -36,18 +36,19 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 - Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
-- Lightweight, 43kB first load JS, uses Preact in production build
+- Lightweight, 38kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
 - [MDX - write JSX in markdown documents!](https://mdxjs.com/)
-- Server-side syntax highlighting with [rehype-prism](https://github.com/mapbox/rehype-prism)
+- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
 - Math display supported via [KaTeX](https://katex.org/)
 - Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
-- Flexible data retrieval with [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
+- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
 - Support for tags - each unique tag will be its own page
 - Support for multiple authors
 - Blog templates
 - Support for nested routing of blog posts
+- Projects page
 - SEO friendly with RSS feed, sitemaps and more!
 
 ## Sample posts
@@ -61,7 +62,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 ## Quick Start Guide
 
-1. `npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git`
+1. JS (official support) - `npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git` or TS (community support) - `npx degit timlrx/tailwind-nextjs-starter-blog#typescript`
 2. Personalize `siteMetadata.json` (site related information)
 3. Personalize `authors/default.md` (main author)
 4. Modify `projectsData.js`

data/blog/new-features-in-v1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'New features in v1'
-date: '2021-06-29'
+date: '2021-07-11'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -18,6 +18,10 @@ A post on the new features introduced in v1.0. New features:
 - [Copy button for code blocks](#copy-button-for-code-blocks)
 - [Line highlighting and line numbers](#line-highlighting-and-line-numbers)
 
+First load JS decreased from 43kB to 38kB despite all the new features added!
+
+See [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.
+
 ## Theme colors
 
 You can easily modify the theme color by changing the primary attribute in the tailwind config file:
@@ -55,7 +59,6 @@ For example, the following jsx snippet can be used directly in an MDX file to re
 
 ```js
 import PageTitle from './PageTitle.js'
-
 ;<PageTitle> Using JSX components in MDX </PageTitle>
 ```
 
@@ -229,3 +232,36 @@ To modify the styles, change the following class selectors in the `tailwind.css`
   content: attr(line);
 }
 ```
+
+## Upgrade guide
+
+There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.
+
+There's also no real reason to change if the previous one serves your needs and it might be easier to copy
+the component changes you are interested to your existing blog rather than migrating everything over.
+
+Nonetheless if you want to do so and have not changed much of the template, you could clone the new version and copy over the blog post instead.
+
+Another alternative would be to pull the latest tempate version with the following code:
+
+```bash
+git remote add template git@github.com:timlrx/tailwind-nextjs-starter-blog.git
+git pull template v1 --allow-unrelated-histories
+rm -rf node_modules
+```
+
+You can see an example of such a migration in this [commit](https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286) for my personal blog.
+
+v1 also uses `feed.xml` rather than `index.xml`. If you are migrating you should add a redirect to `next.config.js` like so:
+
+```
+async redirects() {
+  return [
+    {
+      source: '/:path/index.xml',
+      destination: '/:path/feed.xml',
+      permanent: true,
+    }
+  ]
+}
+```

lib/generate-rss.js

@@ -14,7 +14,7 @@ const generateRssItem = (post) => `
   </item>
 `
 
-const generateRss = (posts, page = 'index.xml') => `
+const generateRss = (posts, page = 'feed.xml') => `
   <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
     <channel>
       <title>${escape(siteMetadata.title)}</title>

pages/_document.js

@@ -21,7 +21,7 @@ class MyDocument extends Document {
           <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5" />
           <meta name="msapplication-TileColor" content="#000000" />
           <meta name="theme-color" content="#000000" />
-          <link rel="alternate" type="application/rss+xml" href="/index.xml" />
+          <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
           <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
           <link
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"

scripts/generate-sitemap.js

@@ -26,7 +26,7 @@ const siteMetadata = require('../data/siteMetadata')
                   .replace('.js', '')
                   .replace('.mdx', '')
                   .replace('.md', '')
-                  .replace('/index.xml', '')
+                  .replace('/feed.xml', '')
                 const route = path === '/index' ? '' : path
                 if (page === `pages/404.js` || page === `pages/blog/[...slug].js`) {
                   return