blog-fs/pages/_app.tsx

import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import React, { useState } from "react";
import { GlobalSidebar } from "../components/layouts/global-sidebar";
import styles from "./_app.module.css";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../commons/graphql/client";
import { ThemeProvider, useTheme } from "../commons/theme";
import { SwitchTheme } from "../components/switch-theme";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCross,
  faHamburger,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";
import clsx from "clsx";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps);
  const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
  return (
    <ApolloProvider client={apolloClient}>
      <Head>
        <title>Ivan‘s Blog</title>
      </Head>
      <ThemeProvider>
        <div className={styles.page}>
          <GlobalSidebar
            className={styles.sidebar}
            focusOpen={focusOpenSidebar}
            onClick={() => setFocusOpenSidebar(false)}
          />
          <div className={styles.primary}>
            <header className={styles.pageHeader}>
              <button
                className={clsx(styles.headerBtn, {
                  [styles.opened]: focusOpenSidebar,
                })}
                onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
              >
                <FontAwesomeIcon
                  icon={focusOpenSidebar ? faTimes : faHamburger}
                />
              </button>
              <h1>{"Ivan Li 的个人博客"}</h1>
              <div className={styles.actions}>
                <SwitchTheme />
              </div>
            </header>
            <div className={styles.wrapper}>
              <Component {...pageProps} />
            </div>
          </div>
        </div>
      </ThemeProvider>
    </ApolloProvider>
  );
}

export default MyApp;
-												feat: home page.

											
										
										
											2021-05-02 10:42:38 +08:00
+								import "../styles/globals.css";
-												feat: Init commit.

											
										
										
											2021-05-01 18:34:45 +08:00
+								import "tailwindcss/tailwind.css";
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								import React, { useState } from "react";
-												feat: home page.

											
										
										
											2021-05-02 10:42:38 +08:00
+								import { GlobalSidebar } from "../components/layouts/global-sidebar";
 								import styles from "./_app.module.css";
 								import { ApolloProvider } from "@apollo/client";
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								import { useApollo } from "../commons/graphql/client";
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								import { ThemeProvider, useTheme } from "../commons/theme";
-												feat: 代码高亮

											
										
										
											2021-07-03 11:25:14 +08:00
+								import { SwitchTheme } from "../components/switch-theme";
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 								import {
 								  faCross,
 								  faHamburger,
 								  faTimes,
 								} from "@fortawesome/free-solid-svg-icons";
 								import clsx from "clsx";
-												feat: page title.

											
										
										
											2021-07-25 21:52:09 +08:00
+								import Head from "next/head";
-												Initial commit from Create Next App

											
										
										
											2021-05-01 17:33:49 +08:00
 								function MyApp({ Component, pageProps }) {
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								  const apolloClient = useApollo(pageProps);
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								  const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
-												feat: sidebar.

											
										
										
											2021-05-01 23:10:28 +08:00
+								  return (
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								    <ApolloProvider client={apolloClient}>
-												feat: page title.

											
										
										
											2021-07-25 21:52:09 +08:00
+								      <Head>
 								        <title>Ivan‘s Blog</title>
 								      </Head>
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								      <ThemeProvider>
 								        <div className={styles.page}>
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								          <GlobalSidebar
 								            className={styles.sidebar}
 								            focusOpen={focusOpenSidebar}
 								            onClick={() => setFocusOpenSidebar(false)}
 								          />
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								          <div className={styles.primary}>
 								            <header className={styles.pageHeader}>
-												feat: 适配小屏自适应

											
										
										
											2021-07-15 21:08:33 +08:00
+								              <button
 								                className={clsx(styles.headerBtn, {
 								                  [styles.opened]: focusOpenSidebar,
 								                })}
 								                onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
 								              >
 								                <FontAwesomeIcon
 								                  icon={focusOpenSidebar ? faTimes : faHamburger}
 								                />
 								              </button>
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								              <h1>{"Ivan Li 的个人博客"}</h1>
 								              <div className={styles.actions}>
 								                <SwitchTheme />
 								              </div>
 								            </header>
 								            <div className={styles.wrapper}>
 								              <Component {...pageProps} />
-												feat: home page.

											
										
										
											2021-05-02 10:42:38 +08:00
+								            </div>
 								          </div>
 								        </div>
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								      </ThemeProvider>
-												feat: home page.

											
										
										
											2021-05-02 10:42:38 +08:00
+								    </ApolloProvider>
-												feat: sidebar.

											
										
										
											2021-05-01 23:10:28 +08:00
+								  );
-												Initial commit from Create Next App

											
										
										
											2021-05-01 17:33:49 +08:00
+								}
-												feat: home page.

											
										
										
											2021-05-02 10:42:38 +08:00
+								export default MyApp;