feat: home page.

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
+    }
+  }
+`;

pages/_app.module.css

@@ -2,5 +2,15 @@
   @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;
+  .wrapper {
+    @apply mx-auto max-w-screen-xl;
+  }
+}
+.pageHeader {
+  @apply p-3 bg-gray-50 flex justify-between;
 }

pages/_app.tsx

@@ -1,16 +1,43 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 import "tailwindcss/tailwind.css";
-import React from 'react';
-import { GlobalSidebar } from '../components/layouts/global-sidebar';
-import styles from './_app.module.css';
+import React from "react";
+import { GlobalSidebar } from "../components/layouts/global-sidebar";
+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,17 @@
+.index {
+  ol {
+  }
+}
+
+.item {
+  @apply my-2 mx-4 px-3 overflow-hidden;
+  @apply rounded-md shadow-sm hover:shadow;
+  @apply bg-gray-50 hover:bg-white;
+  
+  .title {
+    @apply text-lg my-2;
+  }
+  .description {
+    @apply text-sm text-gray-600 leading-6 my-2;
+  }
+}

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