Merge branch 'timlrx:master' into master

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

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nextjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-12-22'
+lastmod: '2021-02-01'
 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.'
@@ -47,6 +47,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Lightweight, 45kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
+- Self-hosted font with [Fontsource](https://fontsource.org/)
 - Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics
 - [MDX - write JSX in markdown documents!](https://mdxjs.com/)
 - Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
@@ -78,11 +79,13 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 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.js` (site related information)
-3. Personalize `authors/default.md` (main author)
-4. Modify `projectsData.js`
-5. Modify `headerNavLinks.js` to customize navigation links
-6. Add blog posts
-7. Deploy on Vercel
+3. Modify the content security policy in `next.config.js` if you want to use
+   any analytics provider or a commenting solution other than giscus.
+4. Personalize `authors/default.md` (main author)
+5. Modify `projectsData.js`
+6. Modify `headerNavLinks.js` to customize navigation links
+7. Add blog posts
+8. Deploy on Vercel
 
 ## Development
 

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

@@ -1,7 +1,7 @@
 ---
 title: 'New features in v1'
 date: 2021-08-07T15:32:14Z
-lastmod: '2021-12-15'
+lastmod: '2021-02-01'
 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'
@@ -261,7 +261,7 @@ A long description of yourself...
 
 You can use this information in multiple places across the template. For example in the about section of the page, we grab the default author information with this line of code:
 
-```
+```js
 const authorDetails = await getFileBySlug('authors', ['default'])
 ```
 
@@ -273,7 +273,7 @@ The frontmatter of a blog post accepts an optional `authors` array field. If no
 
 For example, the following frontmatter will display the authors given by `data/authors/default.md` and `data/authors/sparrowhawk.md`
 
-```
+```yaml
 title: 'My first post'
 date: '2021-01-12'
 draft: false
@@ -322,7 +322,7 @@ To modify the styles, change the following class selectors in the `prism.css` fi
 }
 
 .code-line {
-  @apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
+  @apply -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4;
 }
 
 .code-line.inserted {
@@ -334,11 +334,11 @@ To modify the styles, change the following class selectors in the `prism.css` fi
 }
 
 .highlight-line {
-  @apply -mx-4 bg-gray-700 bg-opacity-50 border-l-4 border-primary-500;
+  @apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
 }
 
 .line-number::before {
-  @apply inline-block w-4 mr-4 -ml-2 text-right text-gray-400;
+  @apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400;
   content: attr(line);
 }
 ```
@@ -399,6 +399,24 @@ The plugin uses APA citation formation, but also supports the following CSLs, 'a
 
 See [rehype-citation readme](https://github.com/timlrx/rehype-citation) for more information on the configuration options.
 
+## Self-hosted font (v1.5.0)
+
+Google font has been replaced with self-hosted font from [Fontsource](https://fontsource.org/). This gives the following [advantages](https://fontsource.org/docs/introduction):
+
+> Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times.
+>
+> Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.
+>
+> Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.
+
+This leads to a smaller font bundle and a 0.1s faster load time ([webpagetest comparison](https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771)).
+
+To change the default Inter font:
+
+1. Install the preferred [font](https://fontsource.org/fonts) - `npm install -save @fontsource/<font-name>`
+2. Update the import at `pages/_app.js`- `import '@fontsource/<font-name>.css'`
+3. Update the `fontfamily` property in the tailwind css config file
+
 ## 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.
@@ -420,7 +438,7 @@ You can see an example of such a migration in this [commit](https://github.com/t
 
 v1 also uses `feed.xml` rather than `index.xml`, to avoid some build issues with Vercel. If you are migrating you should add a redirect to `next.config.js` like so:
 
-```
+```js
 async redirects() {
   return [
     {