feat: faq, mdx, guides

docusaurus.config.ts

@@ -29,19 +29,31 @@ const config: Config = {
       "classic",
       {
         docs: {
-          path: "contents/docs",
+          path: "docs",
           sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl: "https://github.com/geultto/geultto.github.io/tree/main/docs",
         },
         blog: {
-          path: "contents/blog",
+          path: "blog",
           blogTitle: "글또 블로그",
           showReadingTime: true,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl: "https://github.com/geultto/geultto.github.io/tree/main/blog",
+          feedOptions: {
+            type: "all",
+            copyright: `Copyright © ${new Date().getFullYear()} 글또`,
+            createFeedItems: async (params) => {
+              const { blogPosts, defaultCreateFeedItems, ...rest } = params;
+              return defaultCreateFeedItems({
+                // keep only the 10 most recent blog posts in the feed
+                blogPosts: blogPosts.filter((_, index) => index < 10),
+                ...rest,
+              });
+            },
+          },
         },
         theme: {
           customCss: "./src/css/custom.css",
@@ -70,6 +82,11 @@ const config: Config = {
           label: "가이드",
         },
         { to: "/blog", label: "블로그", position: "left" },
+        {
+          to: "/faq",
+          label: "FAQ",
+          position: "left",
+        },
         {
           href: "https://github.com/geultto/geultto.github.io",
           label: "GitHub",
@@ -112,7 +129,7 @@ const config: Config = {
       //     ],
       //   },
       // ],
-      copyright: "Copyright © 2024 글또",
+      copyright: `Copyright © ${new Date().getFullYear()} 글또`,
     },
     prism: {
       theme: prismThemes.github,

guides/컨텐츠-작성하기.md

@@ -0,0 +1,65 @@
+# 컨텐츠 작성하기
+
+> [프로젝트-세팅하기](./프로젝트-세팅하기.md)를 먼저 보고 와주세요.
+
+## authors.yml에 작성자 추가하기
+
+> 블로그 글에 자신의 정보를 추가하기 위해서 먼저 작가 정보를 추가해야 합니다.
+
+[authors.yml](../blog/authors.yml) 파일에 작성자를 추가하면 됩니다.
+
+```yml
+정현수: # frontmatter에 작성될 author 이름
+  name: 정현수 # 페이지에 보일 이름 (필수)
+  title: Frontend Engineer @ Daangn # 페이지에 보일 직함 (필수)
+  url: https://github.com/junghyeonsu # 페이지에 보일 링크
+  image_url: https://github.com/junghyeonsu.png # 페이지에 보일 이미지
+  socials: # 페이지에 보일 소셜 링크 (아래의 것들은 전부 선택사항입니다.)
+    linkedin: hyeonsu-jung-5483911a5 # 뒤에 있는 아이디값을 전부 넣어주세요
+    github: junghyeonsu # 깃허브 아이디
+    blog: https://junghyeonsu.com/ # 블로그 링크
+    myLink: https://mylink.com/ # 추가하고 싶은 소셜 링크
+```
+
+## 프로젝트 구조 파악하기
+
+다른건 다 필요없고, `./docs`, `./blog`, `./src/pages/faq`만 알면됩니다.
+
+- `./docs`: 문서들이 들어가는 폴더입니다.
+- `./blog`: 블로그 글들이 들어가는 폴더입니다.
+- `./src/pages/faq`: FAQ 페이지들이 들어가는 폴더입니다. 현재는 `index.mdx`에 전부 담아놓는 형식입니다.
+
+## 컨텐츠 작성하기
+
+`./docs`, `./blog`, `./src/pages/faq` 폴더에 마크다운 형식의 파일을 작성하면 됩니다.
+
+`md`, `mdx` 두개의 확장자 아무거나 사용해도 상관없습니다. (mdx를 추천해요.)
+
+파일명은 한국어로 작성하셔도 되고 띄워쓰기는 `-`로 이어주세요. (ex: `프로젝트-세팅하기.mdx`)
+
+컨텐츠 작성이 끝났다면 `yarn dev` 명령어를 실행해서 작성한 컨텐츠가 잘 보이는지 확인해보세요.
+
+- [블로그 컨텐츠 예시](../blog/2021-08-26-welcome/index.md)
+- [문서 컨텐츠 예시](../docs/example.md)
+- [FAQ 컨텐츠](../src/pages/faq/index.mdx)
+
+
+### MDX 파일에서 사용할 수 있는 컴포넌트 목록
+
+> MDX 파일에서 사용할 수 있는 컴포넌트 목록입니다. 컨텐츠를 더 풍부하게 표현해봐요.
+
+[Markdown Features](https://docusaurus.io/docs/markdown-features)의 하위 항목들을 참고하세요.
+
+- [Tabs, 탭](https://docusaurus.io/docs/markdown-features/tabs)
+- [Code Blocks, 코드블럭](https://docusaurus.io/docs/markdown-features/code-blocks)
+- [Admonitions, 콜아웃](https://docusaurus.io/docs/markdown-features/admonitions)
+- [Diagrams, 다이어그램](https://docusaurus.io/docs/markdown-features/diagrams)
+- [이미지 첨부하기](https://docusaurus.io/docs/markdown-features/assets)
+
+## 메인 머지하기
+
+브랜치에서 작업하면 좋은 점은 Github Actions를 통해 `테스트 배포`가 가능하고
+문제가 없는지 미리 확인할 수 있습니다.
+
+메인에서 작업하셨다면 `yarn build` 후, `yarn serve`로 로컬에서 확인하시고
+병합하시는걸 추천합니다. (실제 배포 환경처럼 확인할 수 있어요.)

guides/프로젝트-세팅하기.md

@@ -0,0 +1,23 @@
+# 프로젝트 세팅하기
+
+## 1. 클론하기
+
+해당 레포지토리를 클론합니다.
+
+## 2. 설치하기
+
+기본적으로 [node](https://nodejs.org/en)가 설치되어 있어야 합니다.
+
+```shell
+$ yarn install
+```
+
+만약 `yarn`이 설치되어 있지 않다면 [yarn 설치하기](https://classic.yarnpkg.com/en/docs/install)를 참고하세요.
+
+## 3. 시작하기
+
+```shell
+$ yarn start # http://localhost:3000
+```
+
+요기까지 하면 로컬에서 프로젝트를 실행할 수 있습니다.

src/pages/faq/index.mdx

@@ -0,0 +1,11 @@
+# FAQ
+
+:::info
+
+글또 10기의 자주 묻는 질문에 대한 답변을 제공합니다.
+
+:::
+
+### 질문
+
+답변

src/theme/MDXComponents.js

@@ -0,0 +1,5 @@
+import MDXComponents from "@theme-original/MDXComponents";
+
+export default {
+  ...MDXComponents,
+};