Merge pull request #107 from lumirlumir/develop-style

Develop style sidebar header
lumirlumir · Oct 21, 2024 · 38a1107 · 38a1107
2 parents 847c789 + fe1e439
commit 38a1107
Show file tree

Hide file tree

Showing 41 changed files with 2,081 additions and 97 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,16 +1,27 @@
 const path = require('path');
+const isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'avatars.githubusercontent.com', // Allow GitHub profile image.
+      },
+    ],
+  },
   sassOptions: {
     includePaths: [path.resolve(__dirname, 'src', 'styles')],
     additionalData: `
-      @import 'mixins';
+      @import 'utils/mixins';
+      @import 'utils/variables';
     `,
   },
-  // Remove `console.*` output except `console.error`
-  compiler: {
-    removeConsole: {
-      exclude: ['error'],
+  // Remove `console.*` output except `console.warn` and `console.error` only in production.
+  ...(isProduction && {
+    compiler: {
+      removeConsole: {
+        exclude: ['warn', 'error'],
+      },
     },
-  },
+  }),
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
     "@giscus/react": "^3.0.0",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
-    "github-markdown-css": "^5.7.0",
     "gray-matter": "^4.0.3",
     "html-react-parser": "^5.1.18",
     "next": "^14.2.15",

diff --git a/src/app/categories/[tag]/page.jsx b/src/app/categories/[tag]/page.jsx
@@ -26,7 +26,7 @@ export default async function Page({ params, searchParams }) {
   const tagTree = await readMarkdownTagTree(PATH_DOCS);
 
   return (
-    <Suspense key={sort + order} fallback={<Loading />}>
+    <Suspense key={sort + order} fallback={<Loading content="목록" />}>
       {tagTree[params.tag]
         .sort(compareMarkdownDocument(sort, order))
         .map(({ basename, data: { title, description, created, updated, tags } }) => (

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -1,19 +1,35 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 
+import ThemeProvider from '@/components/common/ThemeProvider';
+
 import Aside from '@/components/layouts/Aside';
 import Body from '@/components/layouts/Body';
 import Header from '@/components/layouts/Header';
 import Main from '@/components/layouts/Main';
 
 import Categories from '@/components/aside/Categories';
-import Home from '@/components/aside/Home';
+import Links from '@/components/aside/Links';
+import Profile from '@/components/aside/Profile/Profile';
 
+import DarkModeToggle from '@/components/header/DarkModeToggle';
 import Title from '@/components/header/Title';
 
 import { GITHUB_USER_NAME, GITHUB_USER_BIO } from '@/constants';
 
-// TODO: import '@/styles/global.scss';
+import '@/styles/global.scss';
+
+const themeScript = `
+function getTheme() {
+  const themeLocalStorage = localStorage.getItem('data-theme');
+
+  if(themeLocalStorage) return themeLocalStorage;
+
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+};
+
+document.documentElement.setAttribute('data-theme', getTheme());
+`;
 
 export const metadata = {
   title: {
@@ -25,20 +41,29 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="ko">
-      <Body>
-        <Header>
-          <Title />
-        </Header>
-        <Aside>
-          <Home />
-          <Categories />
-        </Aside>
-        <Main>{children}</Main>
-
-        <Analytics />
-        <SpeedInsights />
-      </Body>
+    <html lang="ko" data-theme="dark">
+      <ThemeProvider>
+        <Body>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: themeScript,
+            }}
+          />
+          <Header>
+            <Title />
+            <DarkModeToggle />
+          </Header>
+          <Aside>
+            <Profile />
+            <Links />
+            <Categories />
+          </Aside>
+          <Main>{children}</Main>
+
+          <Analytics />
+          <SpeedInsights />
+        </Body>
+      </ThemeProvider>
     </html>
   );
 }
diff --git a/src/app/posts/[markdown]/loading.jsx b/src/app/posts/[markdown]/loading.jsx
@@ -1,5 +1,5 @@
-import LoadingGif from '@/components/common/Loading';
+import LoadingOriginal from '@/components/common/Loading';
 
 export default function Loading() {
-  return <LoadingGif />;
+  return <LoadingOriginal content="문서" />;
 }
diff --git a/src/app/posts/[markdown]/page.jsx b/src/app/posts/[markdown]/page.jsx
@@ -34,5 +34,9 @@ export async function generateMetadata({ params }) {
 }
 
 export default async function Page({ params }) {
-  return <>{await markdownToJsxFromPath(getFilePath(params))}</>;
+  return (
+    <div className="markdown-body">
+      {await markdownToJsxFromPath(getFilePath(params))}
+    </div>
+  );
 }
diff --git a/src/components/aside/Categories/Categories.jsx b/src/components/aside/Categories/Categories.jsx
@@ -1,35 +1,40 @@
 import Link from 'next/link';
+import { FaPen } from 'react-icons/fa6';
 
 import { PATH_DOCS } from '@/constants';
 import { MARKDOWN_DOCUMENT_DATA_TAG_META } from '@/data';
 import { readMarkdownTagTree } from '@/utils/fs';
 
-/* React Declaration */
+import styles from './Categories.module.scss';
+
 export default async function Categories() {
   const tagTree = await readMarkdownTagTree(PATH_DOCS);
 
   return (
-    <ul>
+    <ul className={styles.categories}>
       {Object.keys(tagTree)
         .sort(
           (a, b) =>
             MARKDOWN_DOCUMENT_DATA_TAG_META[a].order -
             MARKDOWN_DOCUMENT_DATA_TAG_META[b].order,
-        )
-        .map(key => {
+        ) // Ascending.
+        .map(tag => {
           const {
             name: { en, ko },
             reactIcons,
-          } = MARKDOWN_DOCUMENT_DATA_TAG_META[key];
+          } = MARKDOWN_DOCUMENT_DATA_TAG_META[tag];
 
           return (
-            <li key={key}>
-              <span>{reactIcons}</span>
-              <Link href={`/categories/${key}`}>
-                {en}
-                <sub>{ko}</sub>
+            <li key={tag}>
+              <Link href={`/categories/${tag}`}>
+                <div className={styles['react-icons']}>{reactIcons}</div>
+                <div className={styles['name-en']}>{en}</div>
+                <div className={styles['name-ko']}>{ko}</div>
+                <div className={styles['count-docs']}>
+                  <span>{tagTree[tag].length}</span>
+                  <FaPen />
+                </div>
               </Link>
-              <span>&nbsp;({tagTree[key].length})</span>
             </li>
           );
         })}

diff --git a/src/components/aside/Categories/Categories.module.scss b/src/components/aside/Categories/Categories.module.scss
@@ -0,0 +1,74 @@
+.categories {
+  /* variables */
+  $grid-template-rows-1: $size-24;
+  $grid-template-rows-2: $size-16;
+  $grid-template-columns: $grid-template-rows-1 + $grid-template-rows-2 + $size-8;
+
+  /* properties */
+  display: flex;
+  flex-direction: column;
+
+  /* selectors */
+  > li > a {
+    @include selector-hover-default;
+
+    display: grid;
+    grid-template-rows: $grid-template-rows-1 $grid-template-rows-2;
+    grid-template-columns: $grid-template-columns 1fr $grid-template-columns;
+    padding: $size-8 $size-4;
+    margin: $size-4 $size-8;
+
+    &:hover {
+      > div.react-icons {
+        @include props-animation-shake;
+      }
+    }
+
+    > div.react-icons {
+      @include props-flex-center;
+
+      grid-area: 1 / 1 / 3 / 2;
+
+      > svg {
+        width: $size-24;
+        height: $size-24;
+      }
+    }
+
+    > div.name-en {
+      grid-area: 1 / 2 / 2 / 3;
+      letter-spacing: -1px;
+    }
+
+    > div.name-ko {
+      grid-area: 2 / 2 / 3 / 3;
+      font-size: 11px;
+      color: var(--color-fg-muted);
+      letter-spacing: -1px;
+    }
+
+    > div.count-docs {
+      @include props-flex-center;
+
+      grid-area: 1 / 3 / 3 / 4;
+
+      > span {
+        @include props-flex-center;
+
+        width: 20px;
+        height: 20px;
+        font-size: 12px;
+        font-weight: $text-weight-semibold;
+        letter-spacing: -1px;
+        border: 1px solid var(--color-border-default);
+        border-radius: 50%;
+      }
+
+      > svg {
+        width: 10px;
+        height: 10px;
+        transform: translate(-3px, -10px);
+      }
+    }
+  }
+}
diff --git a/src/components/aside/Home/Home.jsx b/src/components/aside/Home/Home.jsx
diff --git a/src/components/aside/Home/index.js b/src/components/aside/Home/index.js
diff --git a/src/components/aside/Links/Links.jsx b/src/components/aside/Links/Links.jsx
@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import { FaHouseChimney, FaGithub } from 'react-icons/fa6';
+
+import { GITHUB_USER_HTML_URL } from '@/constants';
+
+import styles from './Links.module.scss';
+
+export default async function Links() {
+  return (
+    <ul className={styles.links}>
+      <li>
+        <Link href="/">
+          <FaHouseChimney />
+          <span>Home</span>
+        </Link>
+      </li>
+      <li>
+        <Link href={GITHUB_USER_HTML_URL}>
+          <FaGithub />
+          <span>GitHub</span>
+        </Link>
+      </li>
+    </ul>
+  );
+}
diff --git a/src/components/aside/Links/Links.module.scss b/src/components/aside/Links/Links.module.scss
@@ -0,0 +1,37 @@
+.links {
+  @include props-flex-center;
+
+  padding: 8px 0 16px;
+  margin: 8px 0;
+
+  > li > a {
+    @include props-flex-center;
+    @include selector-hover-default;
+
+    &:hover {
+      > svg {
+        @include props-animation-shake;
+      }
+    }
+
+    flex-direction: column;
+    padding: 6px;
+
+    > * {
+      width: 40px;
+      margin: 2px;
+    }
+
+    > svg {
+      width: $size-24;
+      height: $size-24;
+    }
+
+    > span {
+      @include props-flex-center;
+
+      color: var(--color-fg-muted);
+      letter-spacing: -1px;
+    }
+  }
+}
diff --git a/src/components/aside/Links/index.js b/src/components/aside/Links/index.js
@@ -0,0 +1,3 @@
+import Links from './Links';
+
+export default Links;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Links from './Links';

		export default Links;