sehyunchung commented 3 years ago

:question:

49 gitbook -> gatsby + doctocat 마이그레이션 시도

:hammer_and_wrench:

feat: init doctocat
chore: remove unused gitbook related files
feat: add SUMMARY.mdx for test
feat: enable typescript & change npm -> yarn
feat: add path resolver
fix: react/react-dom version conflict
feat: migrate contents
feat: tried component shadowing [but not working]

:eyes:

일단 본문 영역 파일들은 그대로 옮겨도 잘 동작합니다.

https://user-images.githubusercontent.com/31644638/109420539-65293280-7a16-11eb-9cbc-a27244578282.mov

Issues

Component shadowing이 아직 파악하지 못한 이유로 동작하지 않습니다.

현재 doctocat을 gatsby-theme-doctocat을 설치하여 사용중.
gatsby는 theme shadowing이라는 기능을 제공합니다.
- theme이 설치된 경로(node_modules/@primer/gatsby-theme-doctocat/)와 같은 구조의 하위 경로를 가진 폴더를 ./src에 추가(./src/@primer/gatsby-theme-doctocat/) 하고 동일 경로에 같은 이름의 파일을 추가하면 overriding을 하게 해주는 기능.
- 현재 src/@primer/gatsby-theme-doctocat/src/nav.yml은 정상적으로 동작하나,
- src/@primer/gatsby-theme-doctocat/src/components/header.tsx는 무시됨.
혹시 방법을 찾지 못한다면 걍 저희끼리 처음부터 만들어도 될 것 같긴 합니다.

npm -> yarn

npm 에서 뭔가 계속 peer dependencies 충돌이 계속 생겨서 일단 yarn으로 바꿔서 해결했습니다😭

seungha-kim commented 3 years ago

몇몇 파일이 HTML 태그 문법 문제때문에 제대로 생성되지 않아서 수정 후 올려두었습니다!

sehyunchung commented 3 years ago

몇몇 파일이 HTML 태그 문법 문제때문에 제대로 생성되지 않아서 수정 후 올려두었습니다!

오오 넘 좋습니다!

sehyunchung commented 3 years ago

일단 돌아가게 다시 만들었어요!ㅋㅋ @seungha-kim

https://user-images.githubusercontent.com/31644638/112746989-7ea9a400-8fed-11eb-88c8-3fc0299d40c9.mov

seungha-kim commented 3 years ago

으아 고생 많으셨습니다 ㅠㅠㅠ

생각해보니 페이지별 링크들이 기존과 달라지는 문제가 있는데, 요거 어떻게 할 수 있을지 좀 조사해보겠습니다!!

seungha-kim commented 3 years ago

몇가지 수정사항 적용 후 푸시해두었습니다! 간단히 확인 부탁드립니닷!

페이지 상단마다 회색 border 가 있길래 보니 frontmatter 의 title 이 없어서이길래 제목을 모두 frontmatter를 통해 그리도록 바꾸었습니다 ㅎㅎ

제가 아래 작업들 까지만 한 뒤에 머지하겠습니다! 정말 수고 많으셨습니닷!!!! ❤️

[ ] 이미지가 안 나오는 문제
[ ] google analytics 연동 확인

sehyunchung commented 3 years ago

몇가지 수정사항 적용 후 푸시해두었습니다! 간단히 확인 부탁드립니닷!

페이지 상단마다 회색 border 가 있길래 보니 frontmatter 의 title 이 없어서이길래 제목을 모두 frontmatter를 통해 그리도록 바꾸었습니다 ㅎㅎ

제가 아래 작업들 까지만 한 뒤에 머지하겠습니다! 정말 수고 많으셨습니닷!!!! ❤️

[ ] 이미지가 안 나오는 문제

[ ] google analytics 연동 확인

헙 확인이 늦었습니다. 수정하신 것들 확인했고, 체크리스트 올려주신 것들 저도 시간 나는대로 확인해보겠습니다😃

seungha-kim commented 3 years ago

이미지 안 나오는 문제 -> SVG 를 폭력적으로 리액트 컴포넌트로 만들어서 해결했습니다! 장기적으로 좋은 해결책인지는 잘 모르겠습니다만 🤔

구글애널리틱스 -> 원래부터 Netlify 에서 자체적으로 제공해주는 기능을 활용해서 GA 스크립트를 넣고 있었기때문에, 당장 추가로 작업을 할 필요는 없어 보입니다.

프리뷰 배포가 깨져있길래 확인해보니 Netlify 가 gatsby 빌드를 어떻게 해야하는지 몰라서 생긴 문제로, 빌드 명령과 Node 버전을 명시해주니 해결되었습니다 ㅎㅎ

sehyunchung commented 3 years ago

mobile 화면에서 nav에 Primer가 뜨는 버그가 있어 삭제하였어욥. https://github.com/helloworld-javascript/hwjs-book/pull/60/commits/cf12a45fc3894dc622c9f37fbd36ca5508bfe9b5

606a966be0bcba0007d5c4b0--elastic-gates-4140bb netlify app_

seungha-kim commented 3 years ago

머지 했습니다! 정말 고생 많으셨습니다!

helloworld-javascript / hwjs-book

feat: migrate to gatsby + doctocat #60

:question:

49 gitbook -> gatsby + doctocat 마이그레이션 시도

:hammer_and_wrench:

:eyes:

Issues

Component shadowing이 아직 파악하지 못한 이유로 동작하지 않습니다.

npm -> yarn