Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my pers...

GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS

Kanazawa.js Remote Meetup #11
https://kanazawajs.connpass.com/event/206416/

Kentaro Matsushita

March 27, 2021
Tweet

More Decks by Kentaro Matsushita

Other Decks in Programming

Transcript

  1. ブログ全体のスタイルに⼀貫性なし const BioWrapper = styled.div` display: block; ${mq[0]} { display:

    flex; justify-content: center; } ` const AuthorLink = styled.a` font-size: 24px; margin-bottom: .2em; display: block; ` const DescriptionText = styled.p` font-size: 20px; display: block; margin: 0; `
  2. MDXの導⼊ const components = { a: (props) => <Link {...props}>{props.children}</Link>,

    p: ({ children }) => <Text mb={8} lineHeight='tall' >{children}</Text>, h2: ({ children }) => <Heading size='lg'>{children}</Heading>, ul: ({ children }) => <UnorderedList>{children}</UnorderedList>, li: ({ children }) => <ListItem mt={1} mb={1}>{children}</ListItem>, pre: (props) => <Box {...props} mb={8} />, code: (props) => <CodeBlock {...props} />, img: (props) => <Image {...props} mb={8} />, <MDXProvider components={components}> {data?.mdx?.body} </MDXProvider> }
  3. MDXの応⽤ Gatsby Plugin MDX Embedでツイート埋め込み実現 ⾃作コンポーネントでSpeaker Deckの埋め込み実現 Speakerdeck の Embed

    をコンポーネントにして、MDX に埋め込む - ARTICLES <Tweet tweetLink="yu_kgr/status/1264060189646286850" />