#23 Add documents detail

Author: raeperd

README.md

@@ -1,7 +1,110 @@
-# Nextjs Paper
-Nextjs Paper theme based on [nanxiaobei/hugo-paper](https://github.com/nanxiaobei/hugo-paper)
+<div align="center">
+<h1>NextJS-Paper <sup><sup><sub>5.1</sub></sup></sup></h1>
 
-# Reference 
-- [nanxiaobei/hugo-paper: 🪴 A simple, clean, flexible Hugo theme](https://github.com/nanxiaobei/hugo-paper)
-- [next.js/examples/blog-starter-typescript at master · vercel/next.js](https://github.com/vercel/next.js/tree/master/examples/blog-starter-typescript)
+A simple, clean, flexible NextJS templates inspired by [nanxiaobei/hugo-paper](https://github.com/nanxiaobei/hugo-paper#readme)  
+Check out demo in [github page](https://raeperd.github.io/nextjs-paper/)
+</div>
 
+
+# Overview
+
+![demo-desktop](./doc/demo-desktop.png)
+![demo-desktop-dark](./doc/demo-desktop-dark.png)
+![demo-mobile](./doc/demo-mobile.png)
+
+
+
+# Feature
+- GFM supprots with tables using [remarkjs/remark-gfm](https://github.com/remarkjs/remark-gfm)
+- Katex inline math using [remarkjs/remark-math](https://github.com/remarkjs/remark-math/tree/main/packages/remark-math) and [remarkjs/remark-katex](https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex) 
+- Syntax highlighting using [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) 
+- Inner HTML using [rehypejs/rehype-raw](https://github.com/rehypejs/rehype-raw) 
+- Disqus comments using [disqus/disqus-react](https://github.com/disqus/disqus-react) 
+- Dark mode using [juliencrn/usehooks-ts](https://github.com/juliencrn/usehooks-ts) 
+
+You can check out my commits if you interested
+- [#9 Add GFM supports for tables · raeperd/nextjs-paper@34adc4f](https://github.com/raeperd/nextjs-paper/commit/34adc4f1c303a7c92ba85162a08433d011473c17)
+- [#9 Add katex support for markdown · raeperd/nextjs-paper@2a92094](https://github.com/raeperd/nextjs-paper/commit/2a920947963b64af016048ba15f7f976fb2fa2ac)
+- [#9 Implements syntax highlighting in article · raeperd/nextjs-paper@bdaa61a](https://github.com/raeperd/nextjs-paper/commit/bdaa61a1b5df950d319e05bc9b4c0b018e9f45b5)
+- [#9 Add inner html supports for markdown · raeperd/nextjs-paper@28a8a58](https://github.com/raeperd/nextjs-paper/commit/28a8a58220a83ccc17e8c28fc9d1a69bd08baa40)
+- [#17 Implements disqus comment feature · raeperd/nextjs-paper@31cc756](https://github.com/raeperd/nextjs-paper/commit/31cc756942136a58804bc2e3b995d8530c9837f5)
+- [#2 Implements DarkMode toggle · raeperd/nextjs-paper@d42fa05](https://github.com/raeperd/nextjs-paper/commit/d42fa057f1ad28a6f43fde2a2ff489bd399d48e0)
+
+# Install
+
+```shell
+npm run server
+```
+
+You can also serve this page with static htmls after build (which is recommended)
+
+```shell
+npm run build && npm run export
+```
+
+
+
+# Configurations
+
+## `.env` file
+
+```shell
+# [OPTIONAL] SITE_NAME value. default is 'Paper'
+SITE_NAME=Paper
+
+# [OPTIONAL] SNS ids are all optional. Not shown if empty
+INSTAGRAM=raeperd
+GITHUB=raeperd
+TWITTER=raeperd117
+
+# [OPTIONAL] Disqus configuration. When u want disqus, below two values must be provided
+DISQUS_SHORTNAME=nextjs-paper
+SERVER_URL=https://raeperd.github.io/nextjs-paper
+
+# [OPTIONAL] Default Author name. Not shown if empty
+AUTHOR=raeperd
+```
+
+## `next.config.js`
+
+```javascript
+
+const isProduction = process.env.NODE_ENV === 'production'
+const name = 'nextjs-paper'
+
+module.exports = {
+  assetPrefix: isProduction ? `/${name}/` : '',
+  basePath: isProduction ? `/${name}` : '',
+  images: {
+    loader: 'akamai',
+    path: '',
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    })
+
+    return config
+  },
+}
+```
+
+- If you want to deploy in github-page (like this repo does), `assetPrefix` and `basePath` must be configured as above 
+
+# Notes
+
+- 🙅🏻 Multilingual is not supported  
+- ⚙️ Build time may increase, as you want to have many markdown files 
+
+# Thanks to
+
+* [nanxiaobei/hugo-paper: 🪴 A simple, clean, flexible Hugo theme](https://github.com/nanxiaobei/hugo-paper)
+* [remarkjs/remark-gfm: remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)](https://github.com/remarkjs/remark-gfm)
+* [remark-math/packages/remark-math at main · remarkjs/remark-math](https://github.com/remarkjs/remark-math/tree/main/packages/remark-math)
+* [remark-math/packages/rehype-katex at main · remarkjs/remark-math](https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex)
+* [react-syntax-highlighter/react-syntax-highlighter: syntax highlighting component for react with prismjs or highlightjs ast using inline styles](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
+* [rehypejs/rehype-raw: plugin to parse the tree again](https://github.com/rehypejs/rehype-raw)
+* [disqus/disqus-react: A React component for Disqus](https://github.com/disqus/disqus-react)
+* [juliencrn/usehooks-ts: React hook library, ready to use, written in Typescript.](https://github.com/juliencrn/usehooks-ts)

doc/demo-desktop-dark.png

@@ -1,25 +1,31 @@
 ---
 title: About
-description : Hugo, the world's fastest framework for building websites
-date : 2019-02-28
-aliases : [about-us, about-hugo, contact]
-author : lee.so
+date : 2022-01-13
 ---
+# NextJS
+To build a complete web application with React from scratch, there are many important details you need to consider:
 
-Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
+- Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
+- You need to do production optimizations such as code splitting.
+- You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
+- You might have to write some server-side code to connect your React app to your data store.
 
-Hugo makes use of a variety of open source projects including:
+A framework can solve these problems. But such a framework must have the right level of abstraction — otherwise it won’t be very useful. It also needs to have great "Developer Experience", ensuring you and your team have an amazing experience while writing code.
 
-* https://github.com/yuin/goldmark
-* https://github.com/alecthomas/chroma
-* https://github.com/muesli/smartcrop
-* https://github.com/spf13/cobra
-* https://github.com/spf13/viper
+## Next.js: The React Framework
+Enter Next.js, the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.
 
-Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
+Next.js aims to have best-in-class developer experience and many built-in features, such as:
 
-Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
+- An intuitive [page-based](https://nextjs.org/docs/basic-features/pages) routing system (with support for [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes))
+- [Pre-rendering](https://nextjs.org/docs/basic-features/pages#pre-rendering), both [static generation (SSG)](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [server-side rendering (SSR)](https://nextjs.org/docs/basic-features/pages#server-side-rendering) are supported on a per-page basis
+- Automatic code splitting for faster page loads
+- [Client-side routing](https://nextjs.org/docs/routing/introduction#linking-between-pages) with optimized prefetching
+- [Built-in CSS](https://nextjs.org/docs/basic-features/built-in-css-support) and [Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) support, and support for any [CSS-in-JS](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) library
+- Development environment with [Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh) support
+- [API routes](https://nextjs.org/docs/api-routes/introduction) to build API endpoints with Serverless Functions
+- Fully extendable
 
-Websites built with Hugo are extremely fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
+Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world's largest brands.
 
-Learn more and contribute on [GitHub](https://github.com/gohugoio).
+- [Create a Next.js App | Learn Next.js](https://nextjs.org/learn/basics/create-nextjs-app)

doc/demo-desktop.png

@@ -16,7 +16,7 @@ series : ["Themes Guide"]
 aliases : ["migrate-from-jekyl"]
 ---
 
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+This article offers a sample of basic Markdown syntax that can be used in NextJS-Paper content files, also it shows whether basic HTML elements are decorated with CSS in a `/public/app.css`
 <!--more-->
 
 ## Headings
@@ -54,7 +54,8 @@ The blockquote element represents content that is quoted from another source, op
 
 ## Tables
 
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+Tables aren't part of the core Markdown spec, but NextJS-paper supports supports them out-of-the-box.  
+This feature is supported by [remarkjs/remark-gfm](https://github.com/remarkjs/remark-gfm)
 
 | Name  | Age | 
 | ----- | --- |
@@ -84,34 +85,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```
 
-#### Code block indented with four spaces
-
-    <!doctype html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-#### Code block with Hugo's internal highlight shortcode
-{{< highlight html >}}
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-## List Types
+This feature is supported by [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
 
 #### Ordered List
 

doc/demo-mobile-dark.png

@@ -6,24 +6,11 @@ description: A brief guide to setup KaTeX
 math: true
 ---
 
-Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
+Mathematical notation in a NextJS-paper project is enabled by [remarkjs/remark-math](https://github.com/remarkjs/remark-math) 
 <!--more-->
 
 In this example we will be using [KaTeX](https://katex.org/)
 
-- Create a partial under `/layouts/partials/math.html`
-- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
-- Include the partial in your templates like so:  
-
-```bash
-{{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
-{{ end }}
-```
-
-- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
-- To enable KaTex on a per page basis include the parameter `math: true` in content files
-
 **Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
 
 ### Examples

doc/demo-mobile.png

@@ -38,8 +38,6 @@ Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Leleg
 
 Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
 
-{{< css.inline >}}
 <style>
 .canon { background: white; width: 100%; height: auto; }
 </style>
-{{< /css.inline >}}

lib/content/about.md

@@ -1,18 +1,17 @@
 ---
-author : lee.so
 title : Rich Content
-date : 2019-03-10
-description : A brief description of Hugo Shortcodes
+date : 2021-01-13
 tags : [
-    "shortcodes",
-    "privacy",
+    "html", "javascript"
 ]
 ---
 
-Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
+You can use external resources using inline html.
+Which is, must be used with extra caution
+
 <!--more-->
 ---
 
-## YouTube Privacy Enhanced Shortcode
+## YouTube Privacy Enhanced Embedded Video
 
-{{< youtube ZJthWmvUzzc >}}
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Sklc_fQBmcs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>