feat: dark mode style.

commons/graphql/queries.ts

@@ -0,0 +1,12 @@
+import gql from "graphql-tag";
+
+export const ARTICLE_FOR_HOME = gql`
+  query ArticlesForHome {
+    articles {
+      id
+      title
+      content
+      publishedAt
+    }
+  }
+`;

components/layouts/global-layout.module.css

@@ -1,15 +1,24 @@
-.sidebar {
+.wrapper {
   @apply bg-green-400 text-white;
-  @apply overflow-hidden flex flex-col;
+  :global(.dark) & {
-  @apply text-center;
+    @apply bg-gray-800 text-gray-400;
+  }
+}
+.sidebar {
+  @apply overflow-hidden flex flex-col fixed top-0;
+  @apply text-center shadow-2xl;
   height: 100vh;
   padding-top: 10vh;
 }
 
 .avatar {
-  @apply md:w-36 md:h-36 rounded-full;
   @apply w-16 h-16;
+  @apply md:w-36 md:h-36 rounded-full;
   @apply mx-auto md:my-8 flex-none;
+  
+  :global(.dark) & {
+    @apply filter brightness-75;
+  }
 }
 
 .name {
@@ -17,10 +26,14 @@
   @apply md:my-8 my-4 flex-none select-all;
 }
 .nav {
-  @apply my-auto;
+  @apply my-auto text-left self-center;
 }
 .navItem {
-  @apply leading-8 md:text-lg cursor-pointer my-1;
+  @apply leading-8 md:text-lg cursor-pointer my-2;
+  @apply tracking-widest;
+  small {
+    @apply text-xs md:inline hidden;
+  }
   &:hover {
     text-shadow: 0 0px 5px #abbf00;
   }
@@ -28,4 +41,8 @@
 .bio {
   @apply text-sm text-opacity-70 text-white;
   @apply my-4;
+
+  :global(.dark) & {
+    @apply text-gray-500;
+  }
 }

components/layouts/global-sidebar.tsx

@@ -13,6 +13,7 @@ interface Props {
 export const GlobalSidebar: FC<Props> = ({className}) => {
 
   return (
+    <div className={classnames(className, styles.wrapper)}>
       <aside className={classnames(className, styles.sidebar)}>
         <img className={styles.avatar} src="/images/avatar.png" />
         <h2 className={styles.name}>{fullName}</h2>
@@ -20,13 +21,22 @@ export const GlobalSidebar: FC<Props> = ({className}) => {
         <nav className={styles.nav}>
           <ul>
             <Link href="/">
-            <li className={styles.navItem}>文章</li>
+              <li className={styles.navItem}>
+                文章
+                <small> / ARTICLES</small>
+              </li>
             </Link>
             <Link href="/tags">
-            <li className={styles.navItem}>标签</li>
+              <li className={styles.navItem}>
+                标签
+                <small> / TAGS</small>
+              </li>
             </Link>
             <Link href="/about">
-            <li className={styles.navItem}>关于</li>
+              <li className={styles.navItem}>
+                关于
+                <small> / ABOUT</small>
+              </li>
             </Link>
           </ul>
         </nav>
@@ -37,5 +47,6 @@ export const GlobalSidebar: FC<Props> = ({className}) => {
           {"好挤 (#`O′)"}
         </footer>
       </aside>
+    </div>
   );
 };

pages/_app.module.css

@@ -2,5 +2,22 @@
   @apply flex;
 }
 .sidebar {
-  @apply md:w-64 w-32;
+  @apply md:w-64 w-32 flex-none;
+}
+.primary {
+  @apply flex-auto;
+  @apply bg-gray-100 text-gray-700;
+  :global(.dark) & {
+    @apply bg-gray-700 text-gray-300;
+  }
+  .wrapper {
+    @apply mx-auto max-w-screen-xl;
+  }
+}
+.pageHeader {
+  @apply p-3 bg-gray-50 flex justify-between;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
 }

pages/_app.tsx

@@ -1,16 +1,43 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 import "tailwindcss/tailwind.css";
-import React from 'react';
+import React from "react";
-import { GlobalSidebar } from '../components/layouts/global-sidebar';
+import { GlobalSidebar } from "../components/layouts/global-sidebar";
-import styles from './_app.module.css';
+import styles from "./_app.module.css";
+import { ApolloProvider } from "@apollo/client";
+import { client } from "../commons/graphql/client";
 
 function MyApp({ Component, pageProps }) {
   return (
+    <ApolloProvider client={client}>
       <div className={styles.page}>
         <GlobalSidebar className={styles.sidebar} />
+        <div className={styles.primary}>
+          <header className={styles.pageHeader}>
+            <h1>{"Ivan Li 的个人博客"}</h1>
+            <div className={styles.actions}>
+              <button onClick={() => switchTheme("light")}>亮色</button>
+              <button onClick={() => switchTheme("dark")}>暗色</button>
+            </div>
+          </header>
+          <div className={styles.wrapper}>
             <Component {...pageProps} />
           </div>
+        </div>
+      </div>
+    </ApolloProvider>
   );
 }
 
-export default MyApp
+function switchTheme(mode: "light" | "dark" | "auto") {
+  if (mode === "auto") {
+    mode = "light";
+  }
+
+  if (mode === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}
+
+export default MyApp;

pages/index.module.css

@@ -0,0 +1,25 @@
+.index {
+  ol {
+  }
+}
+
+.item {
+  @apply my-2 mx-4 px-4 overflow-hidden;
+  @apply rounded-md shadow-sm hover:shadow;
+  @apply bg-gray-50 hover:bg-white;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
+  
+  .title {
+    @apply text-lg my-4;
+  }
+  .description {
+    @apply text-sm text-gray-600 leading-6 my-4;
+
+  :global(.dark) & {
+    @apply text-gray-400;
+  }
+  }
+}

pages/index.tsx

@@ -1,5 +1,23 @@
-import styles from '../styles/home.module.css';
+import { useQuery } from '@apollo/client';
+import { Article } from '../commons/graphql/generated';
+import { ARTICLE_FOR_HOME } from '../commons/graphql/queries';
+import styles from './index.module.css';
 
 export default function Index() {
-  return <main className={styles.test}>TEST</main>;
+  const { data, loading } = useQuery<{articles: Article[]}>(ARTICLE_FOR_HOME);
+
+  return <main className={styles.index}>
+    <ol>
+      {
+        data?.articles?.map(article => <Item article={article} key={article.id} />)
+      }
+    </ol>
+  </main>;
+}
+
+function Item({article}: {article: Article}) {
+  return <li className={styles.item}>
+    <h2 className={styles.title}>{article.title}</h2>
+    <p className={styles.description}>{article.content}</p>
+  </li>
 }