Feat/rehype-citation (#270)

* feat: add rehype-citation and upgrade to next 12.0.3

* docs: update docs

Author: timlrx

README.md

@@ -26,7 +26,7 @@ Feature request? Check the past discussions to see if it has been brough up prev
 - [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions
 - [Thinh's Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents
 - [Leo's Blog](https://leohuynh.dev) - Tuan Anh Huynh's personal site. Add Snippets Page, Author Profile Card, Image Lightbox, ...
-- [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more. Keep reading at: [Over-engineering thvu.dev](https://www.thvu.dev/blog/over-engineering-thvu-dev)
+- [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more.
 
 Using the template? Feel free to create a PR and add your blog to this list.
 
@@ -47,6 +47,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - [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)
 - Math display supported via [KaTeX](https://katex.org/)
+- Citation and biliography support via [rehype-citation](https://github.com/timlrx/rehype-citation)
 - Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
 - Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
 - Support for tags - each unique tag will be its own page

css/prism.css

@@ -28,7 +28,7 @@
 }
 
 .line-number::before {
-  @apply mr-4 -ml-2 text-gray-400 inline-block w-4 text-right;
+  @apply inline-block w-4 mr-4 -ml-2 text-right text-gray-400;
   content: attr(line);
 }
 

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

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nextjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-09-08'
+lastmod: '2021-11-14'
 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.'
@@ -51,6 +51,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - [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)
 - Math display supported via [KaTeX](https://katex.org/)
+- Citation and biliography support via [rehype-citation](https://github.com/timlrx/rehype-citation)
 - Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
 - Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
 - Support for tags - each unique tag will be its own page

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

@@ -1,11 +1,12 @@
 ---
 title: 'New features in v1'
 date: 2021-08-07T15:32:14Z
-lastmod: '2021-10-27'
+lastmod: '2021-11-14'
 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'
 layout: PostSimple
+bibliography: references-data.bib
 ---
 
 ## Overview
@@ -329,7 +330,7 @@ To modify the styles, change the following class selectors in the `tailwind.css`
 }
 ```
 
-## Newletter component
+## Newletter component (v1.1.3)
 
 Introduced in v1.1.3, the newsletter component gives you a easy way to build an audience. It integrates with the following providers:
 
@@ -354,6 +355,37 @@ and is not compatible with a 100% static site export. Users should either self-h
 
 A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.
 
+## Bibliography and Citations (v1.2.1)
+
+`rehype-citation` plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file.
+
+For example, the following markdown code sample:
+
+```md
+Standard citation [@Nash1950]
+In-text citations e.g. @Nash1951
+Multiple citations [see @Nash1950; @Nash1951, page 50]
+
+**References:**
+
+[^ref]
+```
+
+is rendered to the following:
+
+Standard citation [@Nash1950]  
+In-text citations e.g. @Nash1951  
+Multiple citations [see @Nash1950; @Nash1951, page 50]
+
+**References:**
+
+[^ref]
+
+A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a `[^Ref]` tag at the intended location.
+The plugin uses APA citation formation, but also supports the following CSLs, 'apa', 'vancouver', 'harvard1', 'chicago', 'mla', or a path to a user-specified CSL file.
+
+See [rehype-citation readme](https://github.com/timlrx/rehype-citation) for more information on the configuration options.
+
 ## 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.

data/references-data.bib

@@ -0,0 +1,33 @@
+@article{Nash1950,
+  title={Equilibrium points in n-person games},
+  author={Nash, John},
+  journal={Proceedings of the national academy of sciences},
+  volume={36},
+  number={1},
+  pages={48--49},
+  year={1950},
+  publisher={USA}
+}
+
+@article{Nash1951,
+  title={Non-cooperative games},
+  author={Nash, John},
+  journal={Annals of mathematics},
+  pages={286--295},
+  year={1951},
+  publisher={JSTOR}
+}
+
+@Manual{Macfarlane2006,
+  url={https://pandoc.org/},
+  title={Pandoc: a universal document converter},
+  author={MacFarlane, John},
+  year={2006}
+}
+
+@book{Xie2016,
+  title={Bookdown: authoring books and technical documents with R markdown},
+  author={Xie, Yihui},
+  year={2016},
+  publisher={CRC Press}
+}

lib/mdx.js

@@ -16,6 +16,7 @@ import remarkImgToJsx from './remark-img-to-jsx'
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
+import rehypeCitation from 'rehype-citation'
 import rehypePrismPlus from 'rehype-prism-plus'
 
 const root = process.cwd()
@@ -46,27 +47,18 @@ export async function getFileBySlug(type, slug) {
 
   // https://github.com/kentcdodds/mdx-bundler#nextjs-esbuild-enoent
   if (process.platform === 'win32') {
-    process.env.ESBUILD_BINARY_PATH = path.join(
-      process.cwd(),
-      'node_modules',
-      'esbuild',
-      'esbuild.exe'
-    )
+    process.env.ESBUILD_BINARY_PATH = path.join(root, 'node_modules', 'esbuild', 'esbuild.exe')
   } else {
-    process.env.ESBUILD_BINARY_PATH = path.join(
-      process.cwd(),
-      'node_modules',
-      'esbuild',
-      'bin',
-      'esbuild'
-    )
+    process.env.ESBUILD_BINARY_PATH = path.join(root, 'node_modules', 'esbuild', 'bin', 'esbuild')
   }
 
   let toc = []
 
-  const { frontmatter, code } = await bundleMDX(source, {
+  // Parsing frontmatter here to pass it in as options to rehype plugin
+  const { data: frontmatter } = matter(source)
+  const { code } = await bundleMDX(source, {
     // mdx imports can be automatically source from the components directory
-    cwd: path.join(process.cwd(), 'components'),
+    cwd: path.join(root, 'components'),
     xdmOptions(options) {
       // this is the recommended way to add custom remark/rehype plugins:
       // The syntax might look weird, but it protects you in case we add/remove
@@ -85,6 +77,10 @@ export async function getFileBySlug(type, slug) {
         rehypeSlug,
         rehypeAutolinkHeadings,
         rehypeKatex,
+        [
+          rehypeCitation,
+          { bibliography: frontmatter?.bibliography, path: path.join(root, 'data') },
+        ],
         [rehypePrismPlus, { ignoreMissing: true }],
       ]
       return options