From 5272a79dc7b1781954d978842bb5dd2f00d7f8a6 Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Mon, 26 Apr 2021 09:59:40 +0800
Subject: [PATCH] fix: material-ui styles & upgrade webpack

---
 components/container/post-container.tsx |  8 ++---
 libs/server/middlewares/note.ts         |  2 +-
 next.config.js                          |  4 +++
 pages/_app.tsx                          | 26 ++++++++++----
 pages/_document.tsx                     | 48 +++++++++++++++++++++++++
 5 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/components/container/post-container.tsx b/components/container/post-container.tsx
index 4e67752..8b8df06 100644
--- a/components/container/post-container.tsx
+++ b/components/container/post-container.tsx
@@ -5,13 +5,13 @@ import rules from 'rich-markdown-editor/dist/lib/markdown/rules'
 import styled from 'styled-components'
 import { NextSeo } from 'next-seo'
 
+/**
+ * FIXME https://github.com/outline/rich-markdown-editor/pull/432/files
+ */
 const renderToHtml = (markdown: string) => {
   return rules({ embeds: [] }).render(markdown).trim()
 }
 
-/**
- * FIXME https://github.com/outline/rich-markdown-editor/pull/432/files
- */
 export const PostContainer: FC<{ baseURL: string }> = ({ baseURL }) => {
   const { note } = NoteState.useContainer()
 
@@ -25,7 +25,7 @@ export const PostContainer: FC<{ baseURL: string }> = ({ baseURL }) => {
     <AriticleStyle className="prose mx-auto prose-sm lg:prose-xl">
       <NextSeo
         title={note?.title}
-        titleTemplate="%s - Power By Notea"
+        titleTemplate="%s - Powered by Notea"
         description={description}
         openGraph={{
           title: note?.title,
diff --git a/libs/server/middlewares/note.ts b/libs/server/middlewares/note.ts
index ce8e7e7..5437502 100644
--- a/libs/server/middlewares/note.ts
+++ b/libs/server/middlewares/note.ts
@@ -39,7 +39,7 @@ export function withNote(wrapperHandler: any) {
     res.props = {
       ...res.props,
       ...props,
-      baseURL: getEnv('BASE_URL'),
+      baseURL: getEnv('BASE_URL', ''),
     }
 
     return res
diff --git a/next.config.js b/next.config.js
index 3ec95aa..07ba62f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,10 @@ const withPWA = require('next-pwa')
 const runtimeCaching = require('next-pwa/cache')
 
 module.exports = withPWA({
+  future: {
+    webpack5: true,
+  },
+
   target: process.env.NETLIFY ? 'serverless' : 'server',
 
   webpack(config, { defaultLoaders }) {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 52c8046..39d5e5d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,11 +3,14 @@ import UIState from 'libs/web/state/ui'
 import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, useTheme } from 'next-themes'
-import { StylesProvider } from '@material-ui/styles'
 import PortalState from 'libs/web/state/portal'
 import Div100vh from 'react-div-100vh'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
-import { useMemo } from 'react'
+import {
+  createMuiTheme,
+  MuiThemeProvider,
+  StylesProvider,
+} from '@material-ui/core'
+import { useEffect, useMemo } from 'react'
 import { zhCN, enUS, Localization } from '@material-ui/core/locale'
 import { Locale, Settings } from 'libs/shared/settings'
 import I18nProvider from 'libs/web/utils/i18n-provider'
@@ -77,9 +80,18 @@ const AppInner = ({ Component, pageProps }: AppProps) => {
     [resolvedTheme, settings]
   )
 
+  useEffect(() => {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side')
+
+    if (jssStyles) {
+      jssStyles.parentElement?.removeChild(jssStyles)
+    }
+  }, [])
+
   return (
-    <MuiThemeProvider theme={muiTheme}>
-      <StylesProvider injectFirst>
+    <StylesProvider injectFirst>
+      <MuiThemeProvider theme={muiTheme}>
         <I18nProvider locale={settings?.locale} lngDict={pageProps.lngDict}>
           <UIState.Provider initialState={{ ua: pageProps?.ua, settings }}>
             <PortalState.Provider>
@@ -90,8 +102,8 @@ const AppInner = ({ Component, pageProps }: AppProps) => {
             </PortalState.Provider>
           </UIState.Provider>
         </I18nProvider>
-      </StylesProvider>
-    </MuiThemeProvider>
+      </MuiThemeProvider>
+    </StylesProvider>
   )
 }
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 6bc518c..546793e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,4 +1,6 @@
+import { ServerStyleSheets } from '@material-ui/core'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { Children } from 'react'
 
 class MyDocument extends Document {
   render() {
@@ -45,3 +47,49 @@ class MyDocument extends Document {
 }
 
 export default MyDocument
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with server-side generation (SSG).
+MyDocument.getInitialProps = async (ctx) => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // Render app and page and get the context of the page with collected side effects.
+  const sheets = new ServerStyleSheets()
+  const originalRenderPage = ctx.renderPage
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+    })
+
+  const initialProps = await Document.getInitialProps(ctx)
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: [
+      ...Children.toArray(initialProps.styles),
+      sheets.getStyleElement(),
+    ],
+  }
+}