leobang17 / gatsby-theme-simplex Goto Github PK

💡 어떤 기능을 구현하나요?

현재 nav의 요소들과 layout의 끝 부분의 정렬이 잘 맞지 않는다.
특히 layout의 main 부분의 경우 좌우 margin이 잡혀있지 않아 창이 좁아질 경우 끝 부분에 딱 붙어버림.

📝 todo

• nav element들과 layout 끝부분 정렬 맞추기
• nav 반응형 breakpoint mobile에서 tablet S 로 변경하기
  • category는 tablet S에서 사라지는데 mobile 크기가 되어서야 drawer 메뉴가 생김.

💡 어떤 기능을 구현하나요?

Footer 반응형 개선. 현재는 모바일 화면너비에서 overflow로 밑으로 텍스트가 밀린다.

📝 todo

• react-response 의존성 설치
• responsive break point들에 대해 hook 생성
• Mobile 용 Footer 생성... 분기처리는 Footer 컴포넌트안에서.

References

• https://www.npmjs.com/package/react-responsive
• https://velog.io/@pyo-sh/React-Responsive

💡 어떤 기능을 구현하나요?

📝 todo

• todo !

References

• https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/#gatsby-node

💡 어떤 기능을 구현하나요?

Nav 바 개선합니다.

📝 todo

• 블로그 타이틀에 gatsby link api 연결 (index page로 가도록)
• Tablet (S) 크기부터 Nav바 우 상단에 메뉴 토글 생성
• 메뉴 토글의 경우 category를 수집할 수 없는 페이지일 경우 수집하지 않도록 조치
• 404, 500 에러 페이지를 ErrorPageContext로 감싸줘 category context를 받을 수 있도록 변경

💡 어떤 기능을 구현하나요?

호스팅하고 있는 도메인 내 잘못된 route를 hit 했을 때 표시할 404 페이지를 만들어보아요

📝 todo

• 404 404 404
• image 크기 반응형으로 줄여주기
• home page로 보내는 링크 달아주기
• 500 internal error page 생성

💡 Error의 원인과 내용은 무엇인가요?

 ERROR #85923  GRAPHQL.VALIDATION

There was an error in your GraphQL query:

Cannot query field "major" on type "MdxFieldsCategory".

If you don't expect "major" to exist on the type "MdxFieldsCategory" it is most likely a typo. However, if you expect "major" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node/gatsby-config, please try a restart of your development server.
- You want to optionally use your field "major" and right now it is not used anywhere.

It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src/templates/ArticlePage.tsx:33:11

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions

/documents path에 카테고리가 하나도 없을 때 발생하는 에러.
onCreateNode API 이용시 기존 MDX 노드에 추가한 major 혹은 minor 프로퍼티가 하나도 없어 생기는 에러 같음.

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

댓글 함 달아보입시더

📝 todo

• todo !

Reference

• https://utteranc.es
• https://www.chanstory.dev/blog/post/20
• https://paulie.dev/posts/2022/08/how-to-use-utterances-with-react/#utterances-component

💡 어떤 기능을 구현하나요?

Article Page을 개선합니다.

📝 todo

• PageQuery 수정
  • 불필요한 field 제거
  • min read 추가
• Title 및 작성일자 재배치
• 작성자 profile
• TOC 사이드 바 수정
  • 스크롤을 따라 중심으로 toc 사이드바도 움직이도록 변경
  • useTableOfContentsObserver의 threshold 0.1으로 줄이기. (지금 감도가 좀 낮은 듯함)
  • hover시 천천히 켜지게 변경
  • active 시 font-size가 커지는게 아니라 왼쪽으로 밀리도록 변경
• 하단에 공백 추가
  • 일정 이상 공백이 없으니 toc 사이드바의 항목이 observer에 포착되지 않음

💡 어떤 기능을 구현하나요?

공식문서를 읽고 Gatsby의 Head API를 이용해 각 문서의 head tag를 채워보아요~

📝 todo

• link 태그 (https://developer.mozilla.org/ko/docs/Web/HTML/Element/link)
  • 현재 문서와 외부 리소스와의 관계를 명시함 stylesheet, favicon을 설정할 때 쓰임
• meta 태그
  • 다음 두 문서 참고
    • https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta#명세
    • https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
  • keywords tag -> article page에 대해서 word bag 만들어서 serve 하기
• style 태그
• title 태그
  • title은 최대한 descriptive 하게 작성
• base 태그 (https://developer.mozilla.org/ko/docs/Web/HTML/Element/base)
  • relative path로 탐색할 때 기준이 될 base uri를 설정.
• tagscript 태그
• noscript 태그
• html 태그 (얘는 property overriding)
• body 태그 (얘도 property overriding)
• Open Graph 태그
  • twitter
  • facebook
• non-sementic tag들 semantic tag로 변경하기 (nav, footer, article 등...)
• ArticlePage의 uri 수정 (category를 더이상 uri endpoint에 노출하지 않도록)
• sitemap 생성
• robots.txt 작성

References

• Gatsby Head API
• Gatsby SEO
• Gatsby Seo Component 만들기
• Seo Best Practice 10
• Seo 및 Open Graph 참고 블로그
• Open Graph - naver, twitter, facebook 참고
• sitemap 생성 플러그인

💡 어떤 기능을 구현하나요?

Gatsby 공식문서를 읽고 SEO를 수행해보아요.

📝 todo

• todo !

References

• https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/
• https://www.gatsbyjs.com/docs/tutorial/part-4/#task-use-usestaticquery-to-create-an-seo-component

💡 어떤 기능을 구현하나요?

원래 category tree를 생성하는 노드에 대해서만 간단히 변경하려고 했는데... 그게 그렇게 간단하지 않았다.
category 관련한 구조를 뜯어고치고 이를 category tree, article page, category page에 올바르게 뿌려주도록 한다.

겸하여 dataLayer path를 생성하고 데이터레이어에 접근하는 api point를 생성한다.
기존의 산개된 함수들을 리팩토링하여 클래스화 하는게 목적인데 ... gatsby가 graphql 쿼리를 이용하는 page 와 static으로 나누어져있고, 또 이를 node api 속에서 이용할 경우 해당 api가 제공하는 parameter인 graphql 메서드를 이용해야하는지라 굳이 모든 케이스의 경우를 다루는게 필요할지는 잘 모르겠다.

📝 todo

• CategoryPage에서 article 필터링 수정 (trailing slash 설정이 안되어있어서 다른 directory여도 그냥 startswith으로 같이 보여줌.)
• Graphql data layer에 접근하는 API point 생성
  • DataLayer (Config)
  • API -> Service -> QueryService -> Query 순으로 의존
• Mdx.field.slug 값 변경
  • gatsby filesystem api에서 제공하는 filepath를 그대로 썼었음
  • 이제 category directory + title 을 조합한 slug를 이용한다.
• Mdx 필드에 추가한 field.category 삭제 (major, minor, slug)
  • 이제 major, minor가 아니라 하나의 string에서 파생된 CATEGORY_THRESHOLD 만큼 카테고리를 생성해서 나눈다.
• raw query 한 번 싹 점검.. 필요없는 값을 가져오지 않도록

💡 어떤 기능을 구현하나요?

fontsource를 이용해 global 로 font 적용

• Global Css
• fontsource

📝 todo

• 나눔 고딕
• Noto Sans

💡 어떤 기능을 구현하나요?

Layout component 생성

@@@
Nav
RightStack Content LeftStack
Footer
@@@

Layout component를 재사용할 수 있도록 구현..
위의 Layout을 기본으로 Page 단위로는 이를 자세하게 구현한 Layout component를 만들 예정.

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

지금은

• 소문자화
• 공백을 hyphen으로 replace
  밖에 없음.

slug 전략를 보다 개선합니다.

📝 todo

• camel case를 인식해 hyphen으로 변경
• hyphen이 중복될 경우 1개로 압축한다.
• 마지막에 . 이 있을 경우 제거

💡 어떤 기능을 구현하나요?

블로그에 검색 기능을 추가하고 싶네요옹

📝 todo

• navigation 바에 검색 텍스트 필드 삽입
• search 페이지 생성

💡 어떤 기능을 구현하나요?

글을 가장 마지막에 수정한 일자를 확인할 수 있도록 합니다.

📝 todo

• last modified date
  • gatsby-transformer-info 플러그인 설치

References

• transformer-info 플러그인 이용해서 last modified date automate하기

💡 어떤 기능을 구현하나요?

Bio 구현

📝 todo

• Bio 및 Social 링크
• GraphQL 데이터레이어 수정

💡 어떤 기능을 구현하나요?

article page의 마지막 부분에 다른 글로도 탐색할 수 있도록 하려고 합니다.
related post 나 recent post, 혹은 이전글 - 다음글 중 뭐라도 일단 보여주려고 합니다.

📝 todo

• hateoas

💡 Error의 원인과 내용은 무엇인가요?

readme에 따르면 gatsby-transformer-remark 뿐 아니라 gatsby-plugin-mdx 역시 호환한다고 나와있는데 일단 적용이 안됨.
issue 남기고 다시 적용해보기.

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

기존에는 Gatsby 환경을 구성하는 파일들은 CommonJS을 기반으로 작성되어야 했었다. (고한다)
사실 기존에도 gatsby-config 나 gatsby-node를 .ts 확장자로 생성하고 내 소스코드의 함수나 변수들은 ES6의 문법에 맞게 import 해오긴 했었지만. 외부 라이브러리를 가져와야할 경우에는 cjs의 require()를 이용했었다.

문제는 mdx와 관련된 옵션들을 서드파티 라이브러리들을 이용해 반영해야할 때 인데... remark나 rehype 관련 대부분 구버전을 제외하고는 ESM 모듈 환경에서만 실행되기 때문에 gatsby-config에서 이 서드파티 라이브러리들을 설정하려면 제약사항들이 있었다.
실제로 아직도 공식 페이지의 docs에서는 다음 제약사항을 명시하고 있다.
https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx#mdxoptions

1. ESM을 따르지 않는 구버전을 다운로드받거나.
2. wrapper 함수를 만들어 가져오거나...

대부분의 remark나 rehype 라이브러리들은 only ESM 이라는 딱지를 달고 나온다. 따라서 일일이 릴리즈 노트를 확인하며 ESM이 적용되지 않은 버전을 설치하는 일은 x
두번째 wrapper 함수는 왜인지 올바르게 동작하지 않았다.

gatsby의 릴리즈 노트를 뒤져보니 v5.3에서 gatsby-config와 gatsby-node 역시 esm을 반영하도록 변경했다고 한다!
https://www.gatsbyjs.com/docs/reference/release-notes/v5.3/
왜 공식문서에 안 적어놓은건지;; 다시 보니 레포지토리의 패키지 속 최신 readme에는 반영이 되어있었다.
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx#mdxoptions
최근에 다시 블로그 수정을 다시 시작하면서 gatsby 버전을 업그레이드 했었는데 이 때 반영되어서 원래 문서에 적혀있던 wrapper 함수가 작동하지 않은 듯...?

아무튼 esm을 반영은 하긴하는데, .mjs 확장자의 파일만 가능하고 아직 타입스크립트 호환은 안된다고 한다.

gatsbyjs/gatsby#37069
mjs에 관한 umbrella discussion

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

베타 버전 배포에 앞서 자잘한 작업들을 수행합니다.

📝 todo

• Configs.ts 수정
  • 베타버전에서는 이용되지 않는 정보까지 입력받도록 하고 있음.
  • 입력되지 않은 값은 default 값을 제공하는 하나의 layer를 더 거치도록 변경
• 유저가 설정할 수 있는 상수들 제공
  • table of content stack depth (몇번째 header까지 표시할 것인지)
• 이용하지 않는 파일들 제거 (dsg.. 등등)
• repo 이름 수정... 지금 너무 밋밋하다.
• repo tag들 추가
• readme 추가
• 이용하지 않는 frontmatter 삭제
• example 용 마크다운 파일 수정. (수식, 사진도 같이 보이도록)
• package.json 수정
• src/styles/responsive <-- case 수정

💡 어떤 기능을 구현하나요?

MDX 스타일링이 되어있지 않은 상태입니다.
MDXProvider를 이용해 전체적인 스타일을 적용하고, 기존 미흡한 점을 개선합니다.

📝 todo

• MDXProvider를 이용해 스타일링
• CodeBlock 문제 해결.
  • code block을 일단은 width에 맞게 줄어들도록 했지만, 남은 공간이 scroll로 overflow되는게 아니라 줄바꿈되어서 밑으로 감.
  • 그래서 코드의 가독성이 떨어지는데, 모바일 환경에서 특히 이상할 듯
  • window width에 맞게 code block의 width가 줄어들고, 남은 공간이 x축으로 scroll되도록 변경해야함.
• remark 이미지 적용
• remark external link 적용
• 수식을 위한 markdown 문법 (달러싸인)을 이용할 경우 뷰 전체가 깨지는데 무시하도록 적용
  • remark katex 라이브러리 적용하기
• mdx remark 관련해서 찾아보기 ..
  • 지금 mdx의 default로 지원하는 syntax tree 작업에서 지원하지 않는 문법들이 있음.
  • 특히 ``이 변환되어 <code /> 가 되어야 하는데 <div> 태그에 한번 더 감싸져서 나옴.
  • ~~ ~~ 자체를 인식 못한다.. <del /> tag를 꾸며줘도 소용이 없음.
• code block에 copy 버튼 달기
• code block에 title 달기
• 반응형으로 font-size 줄여주기

References

• Mdx Remark
• remark codeblock copy
• remark katex

💡 어떤 기능을 구현하나요?

디렉토리 구조 설정 및 동적 페이지 생성

📝 todo

• constant
• types
• hooks
• utils
• FileSystemRoute API를 이용한 dynamic page

💡 어떤 기능을 구현하나요?

• 글 전문을 확인하는 ArticlePage 생성
  • FileSystemRoute API vs createPage API
• 글 목차를 확인하는 Table Of Content 생성
  • Intersection Observer API 이용
• ArticlePage의 PageQuery를 spread하는 context 생성

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

category관련한 string을 directory string으로 바꿨다 뭐했다 slug로 만들었다 배열로 만들었다 하는 작업들이 산개되어있음. 주로 util function에
하나의 클래스로 만들어 생성 및 관리하도록 CategoryString 객체를 정의합니다.

📝 todo

• CategoryStrings 클래스 정의
  • categoryDirectory: 해당 카테고리의 slugify되지 않은 path
  • slug: 해당 카테고리의 slugify된 path
  • categories: 해당 카테고리를 배열로 담음
• CategoryStrings 적용 및 대체된 메서드 삭제

💡 무엇에 대한 문서작업인가요?

조금 늦은 감이 있지만 프로젝트에 사용될 vscode snippet을 정의함.

📝 todo

• Emotion CSS를 이용하는 react arrow functional component 스니펫
  • 파일명에 맞게 type도 명시하도록.
• markdown을 위한 스니펫. frontmatter와 같은 값들을 넣기 편하게

• Issue Template
• PR Template

💡 어떤 기능을 구현하나요?

Nav바 개발

📝 todo

• emotionjs, mui 적용해보기
• 블로그 타이틀, Github 링크

💡 어떤 기능을 구현하나요?

mdx 폐기합니다... mdx를 이용하는 동안 Gatsby가 왜 공식 docs에 밀어주는지 모르겠을만큼 짜증나는 일들만 있었다. gfm으로 생성한 테이블은 작은 화면에서는 옆으로 쭉 밀리질 않나.. theme은 또 적용하는게 뭐이리 힘든지.
깊이 이해하고 커스터마이징을 원한다면 모르겠지만 나처럼 그냥 간단하게 블로그 뚝딱 만들어서 이용하고 싶은 유저에게는 맞지 않는 플러그인이었다.
그나마 장점은 rehype 서드파티 플러그인들을 옵션으로 받아들이는 거 같긴한데 .. 공식문서에서도 모듈간 호환이 안되는 문제를 임시방편으로 해결하는 예제를 보여주고 있고, 5.3 버전 이후로는 esm을 지원하지만 그마저도 rehype 플러그인들 적용해보면 되는건지 안되는건지 모르겠는 놈들이 많았다.
그리고 애초에 remark, rehype 얘네는 문서를 왜이렇게 대충만드는 걸까? 뭘 기대하면 되는 플러그인들인지 알 수가 없으니 설치하고 싶지도 않았다.
나는 마크다운 파싱해서 html로 바꾸는 그 안에 원리 같은건 그다지 알고 싶지 않다고..

그래도 trasnformer-remark는 애초에 gatsby와 호환되게 이름을 달고 나온 녀석들이 많으니 괜찮지 않을까? 하는 기대에 이민을 시도해보려고 한다.
transformer-remark가 더 오래된 플러그인이고, 현재는 공식문서에서도 mdx -> transformer-remark로의 마이그레이션을 설명 및 권장하고 있으니 나는 다운그레이드를 시도하는 거겠지.
그치만 mdx는 도저히 못써먹겠다. 커뮤니티가 풍부?한 레거시로 귀환해야겠다..
마크다운 베이스 블로그 프로젝트인만큼 대공사가 될 예정인데 잘 해낼 수 있을지 조금 막막하다.

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

반응형에 맞게 Layout 수정

📝 todo

• 반응형에 맞게 Layout 수정
  • bp 3개 (mobile - laptop -desktop)
• CategoryPage도 전용 Layout 생성
  • LeftStack 역시 상속한 Layout이 주입하도록 변경
• Footer 만들기
• 페이지 min-height 조절 (footer는 항상 바닥에 붙어있도록)

[Feat] Footer 생성 및 page의 min-height 조정 (#20)

• Footer의 값은 config.ts의 값 재탕.
• body의 default margin 값 삭제
• flex와 min-height을 이용해 footer는 항상 바닥에 존재함
  • 페이지의 내용이 부족할 때는 HStack의 height을 확장.

💡 어떤 기능을 구현하나요?

CategoryPage를 개선합니다.

📝 todo

• 어떤 카테고리에 들어온건지 맨 위에 큰 텍스트로 명시해줌.
• CategoryPage의 전체적인 text styling
• 반응형에 맞게 텍스트 크기 줄여주기

💡 Error의 원인과 내용은 무엇인가요?

진짜 이 이슈가 예전부터 계속되어서 너무너무 짜증나는데.. 왜인지 이유도 모르겠어서 그냥 똥 피하기 용으로 써놓음
gatsby docs, issues, discussions 다 뒤져봤는데 나같은 케이스는 없는 것 같다.

onCreateNode 라이프사이클에서 생긴 문젠데 이 에러메시지가 mdx node 마다 생기는 것 같다
이놈 때문에 그 뒤의 gatsby 빌드 사이클 다 터지고 나중에 웹팩 빌드도 터지고 내 속도 팡팡 터진다

문제이유도 어이없는게 특정 파일에서 path alias를 이용해 import 하면 터진다. 그냥 relative path로 import하면 안터짐 ㅎㅎ
왜일까?
심지어 그 특정 파일들이 node API랑 관련 있는 것도 아님. query랑도 관련 있는 것도 아니다. CategoryTree는 gatsby와 전혀 관련 없는 바닐라 TS 객체인데 터지는거 보면 무슨 기준인지도 모르겠다.
이유가 어이없어서 트러블 슈팅하기도 싫은 이슈다.. 나중에 블로그 갈무리 될 쯤에 해결해야지

예전에는 typescript가 타입핑 하는 재미도 있고 비교적 자유롭다고 생각해서 좋아했헜는데 쓰면 쓸수록 Java가 답답하기는 해도 좋은 언어라는 걸 느낀다.
Java + IntelliJ 조합은 신이다. 코틀린 배워볼까

📝 path alias 피할 놈들

• /src/dataLayer/services/CategoryService.ts
• /src/datastructures/category/CategoryTree.ts
• /src/hooks/createCategoryPages.ts
• /src/hooks/onMdxAppendFields.ts
• /src/utils/nodeApi/parseCategory.ts < 진짜 얘는 왜 터지는거야

💡 무엇을/어떻게/왜 수정하나요?

• 파일 디렉토리 정리
  • hooks, datastructures, contexts 정리
• import 정리
  • 이용하지 않는 import들 제거

📝 todo

• todo !

💡 어떤 기능을 구현하나요?

Category 사이드바를 개선합니다.

• slug
• 카테고리 data fetching 방식
• 전체적인 스타일링

📝 todo

• Category Page 혹은 Article Page에서 현재 속한 카테고리 볼드 처리
• 카테고리 슬러그 수정
  • slugify -> lowercase로 변경.
    • 현재 슬러그가 category title로 사이드바에 그대로 출력되고 있음
  • 원래 title을 사이드 바에 출력
• 카테고리 선택 박스 바운더리 수정 (지금은 옆에 클릭해도 인식함)
• category tree는 Context API에서 가져오도록 변경
• Category 사이드 바 스타일링

💡 어떤 기능을 구현하나요?

node 생성시 카테고리 생성 및 카테고리바 좌측 출력
카테고리 페이지 생성

📝 todo

• onCreateNode -> 카테고리 생성
• 카테고리 dynamic page 생성 (createPage? FileSystemRoute API?)
• 카테고리 좌측 출력.