Upgrade/next 12 (#264)
* 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
GitHub
parent
3d249985af
commit
94c1a30760
@ -40,7 +40,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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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} />
|
||||
|
||||
</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
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ module.exports = withBundleAnalyzer({
|
||||
eslint: {
|
||||
dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
|
||||
},
|
||||
experimental: { esmExternals: true },
|
||||
webpack: (config, { dev, isServer }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.(png|jpe?g|gif|mp4)$/i,
|
||||
|
||||
1173
package-lock.json
generated
1173
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tailwind-nextjs-starter-blog",
|
||||
"version": "1.1.4",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node ./scripts/next-remote-watch.js ./data",
|
||||
@ -21,7 +21,7 @@
|
||||
"gray-matter": "^4.0.2",
|
||||
"image-size": "1.0.0",
|
||||
"mdx-bundler": "^6.0.1",
|
||||
"next": "11.1.2",
|
||||
"next": "12.0.1",
|
||||
"next-themes": "^0.0.14",
|
||||
"postcss": "^8.3.5",
|
||||
"preact": "^10.5.13",
|
||||
@ -41,12 +41,12 @@
|
||||
"unist-util-visit": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/bundle-analyzer": "11.1.2",
|
||||
"@next/bundle-analyzer": "12.0.1",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"dedent": "^0.7.0",
|
||||
"eslint": "^7.29.0",
|
||||
"eslint-config-next": "11.1.2",
|
||||
"eslint-config-next": "12.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user