update

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["next/babel", "@linaria"]
+  "presets": ["next/babel"],
+  "plugins": ["@emotion/babel-plugin"]
 }

.eslintrc.json

@@ -8,6 +8,7 @@
   "env": {
     "browser": true
   },
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",

.gitignore

@@ -32,6 +32,3 @@ yarn-error.log*
 
 # vercel
 .vercel
-
-# linaria
-.linaria-cache/

.prettierignore

@@ -15,6 +15,5 @@ Dockerfile
 *.xml
 LICENSE
 .next/
-.linaria-cache/
 yarn.lock
 out/

components/footer.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 import { useMemo } from 'react'
 import Link from 'next/link'
 
@@ -17,7 +17,8 @@ export default function Footer() {
         user-select: none;
         display: flex;
         align-items: center;
-        padding: 32px 20px;
+        height: 64px;
+        padding: 0 20px;
         border-top: 1px solid #e1e4e8;
         span {
           color: #586069;
@@ -56,9 +57,7 @@ export default function Footer() {
             {name}
           </a>
         ) : (
-          <Link
-            key={name}
-            href={href === process.env.NEXT_PUBLIC_INDEX ? '/' : href}>
+          <Link key={name} href={href}>
             {name}
           </Link>
         ),

components/layout.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 import { ReactNode } from 'react'
 import Footer from './footer'
 import Navigation from './navigation'

components/local-link.tsx

@@ -5,7 +5,7 @@
 import { ReactNode } from 'react'
 import { ComponentProps } from 'rehype-react'
 import Link from 'next/link'
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 
 export default function LocalLink(
   props: ComponentProps & {

components/markdown-render.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useMemo } from 'react'
-import { cx } from '@linaria/core'
+import { cx } from '@emotion/css'
 import { preview } from 'themes/github'
 import { process } from 'libs/markdown'
 

components/navigation.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@linaria/core'
+import { css, cx } from '@emotion/css'
 import Link from 'next/link'
 import { useMemo } from 'react'
 
@@ -46,9 +46,7 @@ export default function Navigation(props: { className?: string }) {
             {name}
           </a>
         ) : (
-          <Link
-            key={name}
-            href={href === process.env.NEXT_PUBLIC_INDEX ? '/' : href}>
+          <Link key={name} href={href}>
             {name}
           </Link>
         ),

components/utterances.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 import { useRouter } from 'next/dist/client/router'
 import { useEffect, useRef } from 'react'
 

next.config.js

@@ -3,75 +3,8 @@ const withTM = require('next-transpile-modules')([
   'unist-util-visit',
 ])
 
-const LINARIA_EXTENSION = '.linaria.module.css'
-
-function traverse(rules) {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const rule of rules) {
-    if (typeof rule.loader === 'string' && rule.loader.includes('css-loader')) {
-      if (
-        rule.options &&
-        rule.options.modules &&
-        typeof rule.options.modules.getLocalIdent === 'function'
-      ) {
-        const nextGetLocalIdent = rule.options.modules.getLocalIdent
-        rule.options.modules.getLocalIdent = (
-          context,
-          _,
-          exportName,
-          options,
-        ) => {
-          if (context.resourcePath.includes(LINARIA_EXTENSION)) {
-            return exportName
-          }
-          return nextGetLocalIdent(context, _, exportName, options)
-        }
-      }
-    }
-    if (typeof rule.use === 'object') {
-      traverse(Array.isArray(rule.use) ? rule.use : [rule.use])
-    }
-    if (Array.isArray(rule.oneOf)) {
-      traverse(rule.oneOf)
-    }
-  }
-}
-
-const withLinaria = (nextConfig = {}) => ({
-  ...nextConfig,
-  webpack(config, options) {
-    traverse(config.module.rules)
-    config.module.rules.push({
-      test: /\.(tsx|ts|js|mjs|jsx)$/,
-      exclude: /node_modules/,
-      use: [
-        {
-          loader: require.resolve('@linaria/webpack5-loader'),
-          options: {
-            sourceMap: process.env.NODE_ENV !== 'production',
-            ...(nextConfig.linaria || {}),
-            extension: LINARIA_EXTENSION,
-          },
-        },
-      ],
-    })
-
-    if (typeof nextConfig.webpack === 'function') {
-      return nextConfig.webpack(config, options)
-    }
-    return config
+module.exports = withTM({
+  future: {
+    webpack5: true,
   },
 })
-
-module.exports = withTM(
-  withLinaria({
-    future: {
-      webpack5: true,
-    },
-    experimental: {
-      turboMode: true,
-      workerThreads: true,
-      disableOptimizedLoading: false,
-    },
-  }),
-)

package.json

@@ -7,26 +7,23 @@
     "build": "next build",
     "start": "next start",
     "export": "next export",
-    "type-check": "tsc",
     "format": "prettier --config .prettierrc.json --write .",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@linaria/core": "^3.0.0-beta.4",
-    "@monaco-editor/react": "^4.1.3",
-    "comlink": "^4.3.1",
+    "@emotion/css": "^11.1.3",
+    "@emotion/server": "^11.4.0",
+    "@monaco-editor/react": "^4.2.0",
     "dayjs": "^1.10.5",
     "hast-util-sanitize": "^4.0.0",
     "lodash": "^4.17.21",
     "monaco-themes": "^0.3.3",
     "next": "^10.2.3",
     "node-emoji": "^1.10.0",
-    "normalize.css": "^8.0.1",
-    "octokit": "^1.0.5",
-    "prettier": "^2.3.0",
+    "octokit": "^1.0.6",
+    "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
     "rehype-parse": "^7.0.1",
     "rehype-react": "^6.2.0",
     "rehype-sanitize": "^4.0.0",
@@ -35,7 +32,6 @@
     "remark-autolink-headings": "^6.0.1",
     "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
-    "remark-react": "^8.0.0",
     "remark-rehype": "^8.1.0",
     "remark-slug": "^6.0.0",
     "swr": "^0.5.6",
@@ -44,41 +40,29 @@
     "use-async-effect": "^2.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@linaria/shaker": "^3.0.0-beta.4",
-    "@linaria/webpack5-loader": "^3.0.0-beta.4",
+    "@babel/core": "^7.14.6",
+    "@emotion/babel-plugin": "^11.3.0",
     "@types/lodash": "^4.14.170",
-    "@types/node": "^15.6.1",
+    "@types/node": "^15.12.4",
     "@types/node-emoji": "^1.8.1",
-    "@types/prettier": "^2.2.3",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/typescript-estree": "^4.25.0",
-    "eslint": "^7.27.0",
+    "@types/prettier": "^2.3.0",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/typescript-estree": "^4.27.0",
+    "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
-    "monaco-editor": "^0.24.0",
-    "next-transpile-modules": "^7.2.0",
-    "typescript": "^4.3.2",
-    "webpack": "^5.38.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*": [
-      "prettier --config .prettierrc.json --write"
-    ]
+    "monaco-editor": "^0.25.2",
+    "next-transpile-modules": "^8.0.0",
+    "typescript": "^4.3.4",
+    "webpack": "^5.39.1"
   },
   "browserslist": [
     "since 2017"

pages/404.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 import useSWR from 'swr'
 
 export default function NotFound() {

pages/[[...path]].tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core'
+import { css } from '@emotion/css'
 import { GetStaticPaths, GetStaticProps } from 'next'
 import { Octokit } from 'octokit'
 import dayjs from 'dayjs'
@@ -14,6 +14,7 @@ const octokit = new Octokit({
 type Props = {
   lastModified: string | null
   data: string | null
+  isIndex: boolean
 }
 
 type Params = {
@@ -63,7 +64,7 @@ export default function Path(props: Props) {
           </time>
         </footer>
       ) : null}
-      <Utterances />
+      {props.isIndex ? null : <Utterances />}
     </>
   )
 }
@@ -135,6 +136,7 @@ export const getStaticProps: GetStaticProps<Props, Params> = async (
         'content' in content.data
           ? Buffer.from(content.data.content, 'base64').toString()
           : null,
+      isIndex: !context.params.path?.join('/'),
     },
   }
 }

pages/_app.tsx

@@ -1,14 +1,30 @@
-/* eslint-disable react/jsx-props-no-spreading */
-
 import React from 'react'
 import type { AppProps } from 'next/app'
 import Layout from 'components/layout'
-import 'normalize.css'
+import { injectGlobal } from '@emotion/css'
 import './global.css'
 
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+injectGlobal`
+::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+}
+
+:root {
+  --max-width: 900px;
+}
+`
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Layout>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <Component {...pageProps} />
     </Layout>
   )

pages/_document.tsx

@@ -1,9 +1,46 @@
-import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from 'next/document'
+import createEmotionServer from '@emotion/server/create-instance'
+import { cache } from '@emotion/css'
+
+const renderStatic = async (html: string) => {
+  if (html === undefined) {
+    throw new Error('did you forget to return html from renderToString?')
+  }
+  const { extractCritical } = createEmotionServer(cache)
+  const { ids, css } = extractCritical(html)
+
+  return { html, ids, css }
+}
+
+export default class AppDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const page = await ctx.renderPage()
+    const { css, ids } = await renderStatic(page.html)
+    const initialProps = await Document.getInitialProps(ctx)
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion={`css ${ids.join(' ')}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: css }}
+          />
+        </>
+      ),
+    }
+  }
 
-export default class Document extends NextDocument {
   render() {
     return (
-      <Html lang="zh">
+      <Html>
         <Head />
         <body>
           <Main />