MDX with typography.js
아래는 블로그 개발을 참고한 링크이다.
가이드에 따르면 mdx를 적용하였다.
tailwind css를 적용하고 보니 reset css로 인해 html로 변경된 mdx 내용이 깔끔하게 보이지 않았다.
가이드는 tailwind css의 reset css 기능을 사용하지 않도록 설정하지만, tailwind의 기능을 그대로 사용하는 대신 typography.js의 reset 기능을 사용하지 않도록 했다.
sutro theme 설정에서 다음과 같이 includeNormalize를 false로 준다.
// disable normalize in favor of tailwind
SutroTheme.includeNormalize = false;
가이드는 <TypographyStyle>을 사용하는 것 처럼 나오지만 이렇게 할 경우, <head> 태그 안에 구성을 해야해서 tailwind css를 적용한 의미가 퇴색된다.
결국 mdx로 부터 생성한 html에만 typography.js를 적용해야 함으로 css의 scoping이 필요해 보였다.
다행히, overrideStyles에 함수를 정의하면 styles라는 파라미터를 전달하는데 값은 key/value map 형식으로 html tag/css style을 정의하고 있다.
그리고 확인해본 결과, styles 파라미터의 값이 그대로 css로 생성됨을 확인했다.
따라서, 아래와 같이 모든 css selector 앞에 .markdown이라는 selector를 추가해 보았다.
SutroTheme.overrideStyles = (_verticalRhythm, _options, styles) => {
Object.keys(styles).forEach((k) => {
const style = styles[k];
// eslint-disable-next-line no-param-reassign
delete styles[k];
// eslint-disable-next-line no-param-reassign
styles[`.markdown ${k}`] = style;
});
return {};
};
마지막으로 mdx의 html이 놓여지는 tag에 markdown 클래스 명을 설정하면, 블로그 html 영역에만 typography.js의 스타일을 적용할 수 있었다.
<article className="markdown">{children}</article>
댓글 with utterance
블로그 댓글 기능 Disqus 등록하기 - 취미로 코딩하는 개발자
댓글 서비스는 disqus가 유명하다.
하지만 개발자에게는 개발자라면 누구나 가지고 있을 법한 github의 issue API를 활용한 utterance가 더 매력적이다.
Utterances 적용하기 - Yun Blog | 기술 블로그
처음에는 일반적인 가이드에 따라 <script> 테그를 직접사용해서 붙였지만 잘 동작하지 않았다.
원인을 찾아 검색한 결과 이미 react 기반의 컴포넌트가 있어 그냥 가져다 쓴다.
react-utterances/packages/component at master · b6pzeusbc54tvhw5jgpyw8pwz2x6gs/react-utterances
할일들
<a>테그와<ul>테그의 스타일을 적용해 봐야 겠다.- 코드 영역을 하이라이팅할 방법을 고민해야 겠다.
- 궁극적으로는 여러 습작을 블로그에 병합하면 좋겠는데... 이건 고민을 좀 해야 할것 같다.