From b4a23e9b3dad80700ccd18df2ac71d69c989d8f0 Mon Sep 17 00:00:00 2001 From: junghyeonsu Date: Thu, 3 Oct 2024 22:30:07 +0900 Subject: [PATCH] feat: faq, mdx, guides --- CONTRIBUTING.md | 35 ---------- {contents/blog => blog}/2019-05-28-example.md | 0 .../docusaurus-plushie-banner.jpeg | Bin .../blog => blog}/2021-08-26-welcome/index.md | 0 {contents/blog => blog}/authors.yml | 0 ...0\353\230\220-\354\206\214\352\260\234.md" | 0 {contents/docs => docs}/example.md | 0 ...1-\352\260\200\354\235\264\353\223\234.md" | 0 ...1-\352\260\200\354\235\264\353\223\234.md" | 0 ...1\355\225\234-\355\231\234\353\217\231.md" | 0 docusaurus.config.ts | 23 ++++++- ...21\354\204\261\355\225\230\352\270\260.md" | 65 ++++++++++++++++++ ...70\355\214\205\355\225\230\352\270\260.md" | 23 +++++++ src/pages/faq/index.mdx | 11 +++ src/theme/MDXComponents.js | 5 ++ 15 files changed, 124 insertions(+), 38 deletions(-) delete mode 100644 CONTRIBUTING.md rename {contents/blog => blog}/2019-05-28-example.md (100%) rename {contents/blog => blog}/2021-08-26-welcome/docusaurus-plushie-banner.jpeg (100%) rename {contents/blog => blog}/2021-08-26-welcome/index.md (100%) rename {contents/blog => blog}/authors.yml (100%) rename "contents/blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" => "blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" (100%) rename {contents/docs => docs}/example.md (100%) rename "contents/docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" => "docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" (100%) rename "contents/docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" => "docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" (100%) rename "contents/docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" => "docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" (100%) create mode 100644 "guides/\354\273\250\355\205\220\354\270\240-\354\236\221\354\204\261\355\225\230\352\270\260.md" create mode 100644 "guides/\355\224\204\353\241\234\354\240\235\355\212\270-\354\204\270\355\214\205\355\225\230\352\270\260.md" create mode 100644 src/pages/faq/index.mdx create mode 100644 src/theme/MDXComponents.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 66af9b4..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,35 +0,0 @@ -## 설치하기 - -```shell -$ yarn install -``` - -만약 `yarn`이 설치되어 있지 않다면 [yarn 설치하기](https://classic.yarnpkg.com/en/docs/install)를 참고하세요. - -## 시작하기 - -```shell -$ yarn start # http://localhost:3000 -``` - -## docs, blog 작성하기 - -기본적으로 docs는 `docs` 폴더에, blog는 `blog` 폴더에 마크다운 형식의 파일을 작성하면 됩니다. -자동으로 `md` 파일을 인식해서 UI로 그려줍니다. - -- [docs에 대해서](https://docusaurus.io/docs/docs-introduction) -- [docs frontmatter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter) -- [blog에 대해서](https://docusaurus.io/docs/blog) -- [blog frontmatter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog#markdown-front-matter) - -## 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 # 페이지에 보일 이미지 -``` diff --git a/contents/blog/2019-05-28-example.md b/blog/2019-05-28-example.md similarity index 100% rename from contents/blog/2019-05-28-example.md rename to blog/2019-05-28-example.md diff --git a/contents/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg similarity index 100% rename from contents/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg rename to blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg diff --git a/contents/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md similarity index 100% rename from contents/blog/2021-08-26-welcome/index.md rename to blog/2021-08-26-welcome/index.md diff --git a/contents/blog/authors.yml b/blog/authors.yml similarity index 100% rename from contents/blog/authors.yml rename to blog/authors.yml diff --git "a/contents/blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" "b/blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" similarity index 100% rename from "contents/blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" rename to "blog/\352\270\200\353\230\220-\354\206\214\352\260\234.md" diff --git a/contents/docs/example.md b/docs/example.md similarity index 100% rename from contents/docs/example.md rename to docs/example.md diff --git "a/contents/docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" "b/docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" similarity index 100% rename from "contents/docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" rename to "docs/\352\270\200-\354\236\221\354\204\261-\352\260\200\354\235\264\353\223\234.md" diff --git "a/contents/docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" "b/docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" similarity index 100% rename from "contents/docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" rename to "docs/\352\270\200\353\230\220-\355\231\234\353\217\231-\352\260\200\354\235\264\353\223\234.md" diff --git "a/contents/docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" "b/docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" similarity index 100% rename from "contents/docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" rename to "docs/\352\270\200\353\230\220\354\235\230-\353\213\244\354\226\221\355\225\234-\355\231\234\353\217\231.md" diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 88aa8fc..50504ec 100644 --- a/docusaurus.config.ts +++ b/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, diff --git "a/guides/\354\273\250\355\205\220\354\270\240-\354\236\221\354\204\261\355\225\230\352\270\260.md" "b/guides/\354\273\250\355\205\220\354\270\240-\354\236\221\354\204\261\355\225\230\352\270\260.md" new file mode 100644 index 0000000..b9aae64 --- /dev/null +++ "b/guides/\354\273\250\355\205\220\354\270\240-\354\236\221\354\204\261\355\225\230\352\270\260.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`로 로컬에서 확인하시고 +병합하시는걸 추천합니다. (실제 배포 환경처럼 확인할 수 있어요.) diff --git "a/guides/\355\224\204\353\241\234\354\240\235\355\212\270-\354\204\270\355\214\205\355\225\230\352\270\260.md" "b/guides/\355\224\204\353\241\234\354\240\235\355\212\270-\354\204\270\355\214\205\355\225\230\352\270\260.md" new file mode 100644 index 0000000..aff9d64 --- /dev/null +++ "b/guides/\355\224\204\353\241\234\354\240\235\355\212\270-\354\204\270\355\214\205\355\225\230\352\270\260.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 +``` + +요기까지 하면 로컬에서 프로젝트를 실행할 수 있습니다. diff --git a/src/pages/faq/index.mdx b/src/pages/faq/index.mdx new file mode 100644 index 0000000..1139902 --- /dev/null +++ b/src/pages/faq/index.mdx @@ -0,0 +1,11 @@ +# FAQ + +:::info + +글또 10기의 자주 묻는 질문에 대한 답변을 제공합니다. + +::: + +### 질문 + +답변 diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js new file mode 100644 index 0000000..6f3ac6c --- /dev/null +++ b/src/theme/MDXComponents.js @@ -0,0 +1,5 @@ +import MDXComponents from "@theme-original/MDXComponents"; + +export default { + ...MDXComponents, +};