jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade/next 12 (#264)

Browse Source 
* chore: upgrade to next 12

* chore: update package-lock

* docs: update image docs to use mdx v2 compatible code

* docs: increase first load js

* chore: v1.2.0
This commit is contained in:
Timothy
2021-10-27 18:36:00 +08:00
committed by GitHub
parent 3d249985af
commit 94c1a30760
7 changed files with 539 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/blog/introducing-tailwind-nextjs-starter-blog.mdx
View File

@ -44,7 +44,7 @@ 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, 39kB first load JS, uses Preact in production build
- Lightweight, 45kB first load JS, uses Preact in production build
- Mobile-friendly view
- Light and dark theme
- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics

4
data/blog/new-features-in-v1.mdx
View File

@ -1,7 +1,7 @@
---
title: 'New features in v1'
date: 2021-08-07T15:32:14Z
lastmod: '2021-09-11'
lastmod: '2021-10-27'
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'
@ -14,7 +14,7 @@ A post on the new features introduced in v1.0. New features:
<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
First load JS decreased from 43kB to 39kB despite all the new features added!
First load JS decreased from 43kB to 39kB despite all the new features added!^[With the new changes in Nextjs 12, first load JS increase to 45kB.]
See [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.

20
data/blog/pictures-of-canada.mdx
View File

@ -20,16 +20,16 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
![Maple](/static/images/canada/maple.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
![Lake](/static/images/canada/lake.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
![Mountains](/static/images/canada/mountains.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
![Toronto](/static/images/canada/toronto.jpg)
</div>
</div>
@ -38,23 +38,21 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
```js
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
![Maple](/static/images/canada/maple.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
![Lake](/static/images/canada/lake.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
![Mountains](/static/images/canada/mountains.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
![Toronto](/static/images/canada/toronto.jpg)
</div>
</div>
```
_Note_: Currently, one has to use the `Image` component instead of the markdown syntax between jsx. Thankfully, it's one of the default components passed to the MDX Provider and can be used directly.
When MDX v2 is ready, one could potentially interleave markdown in jsx directly! Follow [MDX v2 issues](https://github.com/mdx-js/mdx/issues/1041) for updates.
With MDX v2, one can interleave markdown in jsx as shown in the example code.
### Photo Credits