|
|
|
|
@@ -1,6 +1,6 @@
|
|
|
|
|
---
|
|
|
|
|
title: 'New features in v1'
|
|
|
|
|
date: '2021-07-11'
|
|
|
|
|
date: '2021-07-18'
|
|
|
|
|
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'
|
|
|
|
|
@@ -15,6 +15,7 @@ A post on the new features introduced in v1.0. New features:
|
|
|
|
|
- [Xdm MDX compiler](#xdm-mdx-compiler)
|
|
|
|
|
- [Layouts](#layouts)
|
|
|
|
|
- [Multiple authors](#multiple-authors)
|
|
|
|
|
- [Blog comments system](#blog-comments-system)
|
|
|
|
|
- [Copy button for code blocks](#copy-button-for-code-blocks)
|
|
|
|
|
- [Line highlighting and line numbers](#line-highlighting-and-line-numbers)
|
|
|
|
|
|
|
|
|
|
@@ -140,6 +141,52 @@ export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
|
|
|
|
|
Use the component is a page where you want to accept a layout name to map to the desired layout.
|
|
|
|
|
You need to pass the layout name from the layout folder (it has to be an exact match) and the mdxSource content which is an output of the `seralize` function from the `next-mdx-remote` library.
|
|
|
|
|
|
|
|
|
|
## Blog comments system
|
|
|
|
|
|
|
|
|
|
We added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
|
|
|
|
|
To enable, simply configure `siteMetadata.js` comments property with the desired provider and settings as specified in the config file.
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
comment: {
|
|
|
|
|
provider: '', // supported providers: giscus, utterances, disqus
|
|
|
|
|
giscusConfig: {
|
|
|
|
|
repo: '', // username/repoName
|
|
|
|
|
// Visit the link below and copy/paste the 'repositoryId', 'category' and 'categoryId'
|
|
|
|
|
// https://giscus.app/api/discussions/categories?repo={username}%2F{repoName}
|
|
|
|
|
repositoryId: '',
|
|
|
|
|
category: [],
|
|
|
|
|
categoryId: '',
|
|
|
|
|
mapping: '', // supported options: pathname, url, title
|
|
|
|
|
reactions: '', // Emoji reactions: 1 = enable / 0 = disable
|
|
|
|
|
// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
|
|
|
|
|
metadata: '',
|
|
|
|
|
// theme example: light, dark, dark_dimmed, dark_high_contrast
|
|
|
|
|
// transparent_dark, preferred_color_scheme, custom
|
|
|
|
|
theme: '',
|
|
|
|
|
// theme when dark mode
|
|
|
|
|
darkTheme: '',
|
|
|
|
|
// If the theme option above is set to 'custom`
|
|
|
|
|
// please provide a link below to your custom theme css file.
|
|
|
|
|
// example: https://giscus.app/themes/custom_example.css
|
|
|
|
|
themeURL: '',
|
|
|
|
|
},
|
|
|
|
|
utterancesConfig: {
|
|
|
|
|
repo: '', // username/repoName
|
|
|
|
|
issueTerm: '', // supported options: pathname, url, title
|
|
|
|
|
label: '', // label (optional): Comment 💬
|
|
|
|
|
// theme example: github-light, github-dark, preferred-color-scheme
|
|
|
|
|
// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light
|
|
|
|
|
theme: '',
|
|
|
|
|
// theme when dark mode
|
|
|
|
|
darkTheme: '',
|
|
|
|
|
},
|
|
|
|
|
disqus: {
|
|
|
|
|
// https://help.disqus.com/en/articles/1717111-what-s-a-shortname
|
|
|
|
|
shortname: '',
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Multiple authors
|
|
|
|
|
|
|
|
|
|
Information on authors is now split from `siteMetadata.json` and stored in its own `data/authors` folder as a markdown file. Minimally, you will need to have a `default.md` file with authorship information. You can create additional files as required and the file name will be used as the reference to the author.
|
|
|
|
|
|