fix: material-ui styles & upgrade webpack

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,

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

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 }) {

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>
   )
 }
 

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(),
+    ],
+  }
+}