Merge pull request #112 from lumirlumir/develop-refactor

Develop refactor
lumirlumir · Oct 22, 2024 · 825cd75 · 825cd75
2 parents 974f31d + d03d4b5
commit 825cd75
Show file tree

Hide file tree

Showing 62 changed files with 260 additions and 129 deletions.
diff --git a/.github/sync-client.yml b/.github/sync-client.yml
@@ -34,6 +34,8 @@ lumirlumir/lumirlumir-configs:
   - source: ./.husky/pre-commit
     dest: ./configs/.husky/pre-commit
   # ./.vscode
+  - source: ./.vscode/extensions.json
+    dest: ./configs/.vscode/web-extensions.json
   - source: ./.vscode/settings.json
     dest: ./configs/.vscode/settings.json
   # ./

diff --git a/.markdownlint.json b/.markdownlint.json
@@ -23,7 +23,11 @@
       "summary",
       "image",
       "code",
-      "kbd"
+      "kbd",
+      "mark",
+      "ruby",
+      "rp",
+      "rt"
     ]
   },
   "hr-style": {

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "davidanson.vscode-markdownlint"
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # blog.lumir.page
 
-루밀LuMir의 블로그.📖
+LuMir's blog. 루밀의 블로그.📖
diff --git a/...avascript/composition-of-javascript/1.png → ...ges/posts/composition-of-javascript/1.png b/...avascript/composition-of-javascript/1.png → ...ges/posts/composition-of-javascript/1.png
diff --git a/...avascript/composition-of-javascript/2.png → ...ges/posts/composition-of-javascript/2.png b/...avascript/composition-of-javascript/2.png → ...ges/posts/composition-of-javascript/2.png
diff --git a/...avascript/composition-of-javascript/3.png → ...ges/posts/composition-of-javascript/3.png b/...avascript/composition-of-javascript/3.png → ...ges/posts/composition-of-javascript/3.png
diff --git a/...avascript/composition-of-javascript/4.png → ...ges/posts/composition-of-javascript/4.png b/...avascript/composition-of-javascript/4.png → ...ges/posts/composition-of-javascript/4.png
diff --git a/...avascript/composition-of-javascript/5.png → ...ges/posts/composition-of-javascript/5.png b/...avascript/composition-of-javascript/5.png → ...ges/posts/composition-of-javascript/5.png
diff --git a/...avascript/composition-of-javascript/6.png → ...ges/posts/composition-of-javascript/6.png b/...avascript/composition-of-javascript/6.png → ...ges/posts/composition-of-javascript/6.png
diff --git a/...avascript/composition-of-javascript/7.png → ...ges/posts/composition-of-javascript/7.png b/...avascript/composition-of-javascript/7.png → ...ges/posts/composition-of-javascript/7.png
diff --git a/...avascript/composition-of-javascript/8.png → ...ges/posts/composition-of-javascript/8.png b/...avascript/composition-of-javascript/8.png → ...ges/posts/composition-of-javascript/8.png
diff --git a/...it/convention-of-git-commit-message/1.png → ...ts/convention-of-git-commit-message/1.png b/...it/convention-of-git-commit-message/1.png → ...ts/convention-of-git-commit-message/1.png
diff --git a/...it/convention-of-git-commit-message/2.png → ...ts/convention-of-git-commit-message/2.png b/...it/convention-of-git-commit-message/2.png → ...ts/convention-of-git-commit-message/2.png
diff --git a/...between-console-log-and-console-dir/1.png → ...between-console-log-and-console-dir/1.png b/...between-console-log-and-console-dir/1.png → ...between-console-log-and-console-dir/1.png
diff --git a/...between-console-log-and-console-dir/2.png → ...between-console-log-and-console-dir/2.png b/...between-console-log-and-console-dir/2.png → ...between-console-log-and-console-dir/2.png
diff --git a/...between-console-log-and-console-dir/3.png → ...between-console-log-and-console-dir/3.png b/...between-console-log-and-console-dir/3.png → ...between-console-log-and-console-dir/3.png
diff --git a/...between-console-log-and-console-dir/4.png → ...between-console-log-and-console-dir/4.png b/...between-console-log-and-console-dir/4.png → ...between-console-log-and-console-dir/4.png
diff --git a/...between-console-log-and-console-dir/5.png → ...between-console-log-and-console-dir/5.png b/...between-console-log-and-console-dir/5.png → ...between-console-log-and-console-dir/5.png
diff --git a/...rence-between-framework-and-library/1.png → ...rence-between-framework-and-library/1.png b/...rence-between-framework-and-library/1.png → ...rence-between-framework-and-library/1.png
diff --git a/...rence-between-framework-and-library/2.png → ...rence-between-framework-and-library/2.png b/...rence-between-framework-and-library/2.png → ...rence-between-framework-and-library/2.png
diff --git a/...rence-between-framework-and-library/3.png → ...rence-between-framework-and-library/3.png b/...rence-between-framework-and-library/3.png → ...rence-between-framework-and-library/3.png
diff --git a/.../markdown/everything-about-markdown/1.png → ...ges/posts/everything-about-markdown/1.png b/.../markdown/everything-about-markdown/1.png → ...ges/posts/everything-about-markdown/1.png
diff --git a/...markdown/everything-about-markdown/10.png → ...es/posts/everything-about-markdown/10.png b/...markdown/everything-about-markdown/10.png → ...es/posts/everything-about-markdown/10.png
diff --git a/.../markdown/everything-about-markdown/2.png → ...ges/posts/everything-about-markdown/2.png b/.../markdown/everything-about-markdown/2.png → ...ges/posts/everything-about-markdown/2.png
diff --git a/.../markdown/everything-about-markdown/3.png → ...ges/posts/everything-about-markdown/3.png b/.../markdown/everything-about-markdown/3.png → ...ges/posts/everything-about-markdown/3.png
diff --git a/.../markdown/everything-about-markdown/4.png → ...ges/posts/everything-about-markdown/4.png b/.../markdown/everything-about-markdown/4.png → ...ges/posts/everything-about-markdown/4.png
diff --git a/.../markdown/everything-about-markdown/5.png → ...ges/posts/everything-about-markdown/5.png b/.../markdown/everything-about-markdown/5.png → ...ges/posts/everything-about-markdown/5.png
diff --git a/.../markdown/everything-about-markdown/6.png → ...ges/posts/everything-about-markdown/6.png b/.../markdown/everything-about-markdown/6.png → ...ges/posts/everything-about-markdown/6.png
diff --git a/.../markdown/everything-about-markdown/7.png → ...ges/posts/everything-about-markdown/7.png b/.../markdown/everything-about-markdown/7.png → ...ges/posts/everything-about-markdown/7.png
diff --git a/.../markdown/everything-about-markdown/8.png → ...ges/posts/everything-about-markdown/8.png b/.../markdown/everything-about-markdown/8.png → ...ges/posts/everything-about-markdown/8.png
diff --git a/.../markdown/everything-about-markdown/9.png → ...ges/posts/everything-about-markdown/9.png b/.../markdown/everything-about-markdown/9.png → ...ges/posts/everything-about-markdown/9.png
diff --git a/...ges/languages/npm/npm-package-react/1.png → public/images/posts/npm-package-react/1.png b/...ges/languages/npm/npm-package-react/1.png → public/images/posts/npm-package-react/1.png
diff --git a/...ges/tools/git/what-is-github-issues/1.png → .../images/posts/what-is-github-issues/1.png b/...ges/tools/git/what-is-github-issues/1.png → .../images/posts/what-is-github-issues/1.png
diff --git a/...ges/tools/git/what-is-github-issues/2.png → .../images/posts/what-is-github-issues/2.png b/...ges/tools/git/what-is-github-issues/2.png → .../images/posts/what-is-github-issues/2.png
diff --git a/...-favicon-is-not-displayed-correctly/1.png → ...-favicon-is-not-displayed-correctly/1.png b/...-favicon-is-not-displayed-correctly/1.png → ...-favicon-is-not-displayed-correctly/1.png
diff --git a/...-favicon-is-not-displayed-correctly/2.png → ...-favicon-is-not-displayed-correctly/2.png b/...-favicon-is-not-displayed-correctly/2.png → ...-favicon-is-not-displayed-correctly/2.png
diff --git a/...-favicon-is-not-displayed-correctly/3.png → ...-favicon-is-not-displayed-correctly/3.png b/...-favicon-is-not-displayed-correctly/3.png → ...-favicon-is-not-displayed-correctly/3.png
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -2,6 +2,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 
 import ThemeProvider from '@/components/common/ThemeProvider';
+import ThemeScript from '@/components/common/ThemeScript';
 
 import Aside from '@/components/layouts/Aside';
 import Body from '@/components/layouts/Body';
@@ -15,40 +16,29 @@ 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';
+import { getGithubUsers } from '@/utils/fetch';
 
 import '@/styles/global.scss';
 
-const themeScript = `
-function getTheme() {
-  const themeLocalStorage = localStorage.getItem('data-theme');
+export async function generateMetadata() {
+  const { bio, name } = await getGithubUsers();
 
-  if(themeLocalStorage) return themeLocalStorage;
-
-  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-};
-
-document.documentElement.setAttribute('data-theme', getTheme());
-`;
-
-export const metadata = {
-  title: {
-    template: `%s | ${GITHUB_USER_NAME}`,
-    default: GITHUB_USER_NAME,
-  },
-  description: GITHUB_USER_BIO,
-};
+  return {
+    title: {
+      template: `%s | ${name}`,
+      default: name,
+    },
+    description: bio,
+  };
+}
 
 export default function RootLayout({ children }) {
   return (
     <html lang="ko" data-theme="dark">
       <ThemeProvider>
         <Body>
-          <script
-            dangerouslySetInnerHTML={{
-              __html: themeScript,
-            }}
-          />
+          <ThemeScript />
+
           <Header>
             <Title />
             <DarkModeToggle />

diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -1,6 +1,9 @@
 import Article from '@/components/layouts/Article';
-import { GITHUB_USER_NAME } from '@/constants';
 
-export default function Page() {
-  return <Article>{`Hello, It's ${GITHUB_USER_NAME}'s blog!`}</Article>;
+import { getGithubUsers } from '@/utils/fetch';
+
+export default async function Page() {
+  const { name } = await getGithubUsers();
+
+  return <Article>{`Hello, It's ${name}'s blog!`}</Article>;
 }
diff --git a/src/components/aside/Links/Links.jsx b/src/components/aside/Links/Links.jsx
@@ -1,11 +1,13 @@
 import Link from 'next/link';
 import { FaHouseChimney, FaGithub } from 'react-icons/fa6';
 
-import { GITHUB_USER_HTML_URL } from '@/constants';
+import { getGithubUsers } from '@/utils/fetch';
 
 import styles from './Links.module.scss';
 
 export default async function Links() {
+  const { html_url } = await getGithubUsers();
+
   return (
     <ul className={styles.links}>
       <li>
@@ -15,7 +17,7 @@ export default async function Links() {
         </Link>
       </li>
       <li>
-        <Link href={GITHUB_USER_HTML_URL}>
+        <Link href={html_url}>
           <FaGithub />
           <span>GitHub</span>
         </Link>

diff --git a/src/components/common/ThemeScript/ThemeScript.jsx b/src/components/common/ThemeScript/ThemeScript.jsx
@@ -0,0 +1,21 @@
+export default function ThemeScript() {
+  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());
+`;
+
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: themeScript,
+      }}
+    />
+  );
+}
diff --git a/src/components/common/ThemeScript/index.js b/src/components/common/ThemeScript/index.js
@@ -0,0 +1,3 @@
+import ThemeScript from './ThemeScript';
+
+export default ThemeScript;
diff --git a/src/components/layouts/Aside/Aside.module.scss b/src/components/layouts/Aside/Aside.module.scss
@@ -1,5 +1,5 @@
 .aside {
-  @include selector-scrollbar;
+  @include selector-scrollbar(2px);
 
   position: sticky;
   top: $size-header-height;

diff --git a/src/components/layouts/Body/Body.module.scss b/src/components/layouts/Body/Body.module.scss
@@ -1,5 +1,5 @@
 .body {
-  @include selector-scrollbar-default;
+  @include selector-scrollbar;
 
   display: grid;
   grid-template-rows: $size-header-height 1fr;

diff --git a/src/components/layouts/Header/Header.module.scss b/src/components/layouts/Header/Header.module.scss
@@ -6,7 +6,6 @@
   z-index: 1;
   display: grid;
   grid-template-columns: $size-sidebar-width 1fr 64px;
-  font-size: 32px;
   background-color: inherit;
   border-bottom: 1px solid var(--color-border-default);
 

diff --git a/src/components/layouts/Main/Main.module.scss b/src/components/layouts/Main/Main.module.scss
@@ -1,6 +1,6 @@
 .main {
   display: grid;
-  grid-template-columns: 1fr 225px;
+  grid-template-columns: 1fr $size-nav-width;
 
   > article {
     grid-area: 1 / 1 / 2 / 2;

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -1,14 +1,9 @@
 import { join } from 'path';
 
-// GitHub User, Ref: https://docs.github.com/en/rest/users/users
-export const GITHUB_USER_LOGIN = 'lumirlumir';
-export const GITHUB_USER_NAME = '루밀LuMir';
-export const GITHUB_USER_BIO = 'PLAY KEYBOARD, STRIKE A CODE🎨';
-export const GITHUB_USER_HTML_URL = `https://github.com/${GITHUB_USER_LOGIN}`;
-
 // GitHub Repository, Ref: https://docs.github.com/en/rest/repos/repos
+export const GITHUB_REPO_OWNER = 'lumirlumir';
 export const GITHUB_REPO_NAME = 'web-blog.lumir.page';
-export const GITHUB_REPO_FULL_NAME = `${GITHUB_USER_LOGIN}/${GITHUB_REPO_NAME}`;
+export const GITHUB_REPO_FULL_NAME = `${GITHUB_REPO_OWNER}/${GITHUB_REPO_NAME}`;
 
 // Path
 export const PATH_DOCS = join(process.cwd(), 'src', 'posts', 'docs');
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,11 @@ @@
           "summary",
           "image",
           "code",
-          "kbd"
+          "kbd",
+          "mark",
+          "ruby",
+          "rp",
+          "rt"
         ]
       },
       "hr-style": {
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ThemeScript from './ThemeScript';

		export default ThemeScript;