[gatsby] gatsby 커스텀 하기

develop, gatsby

written by zuhern1

zuhern

2019. 03. 15

markdown 내 script style

prismJS

npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

스타일

element 내에 style 일일히 박는 것은 안좋아하는 스타일이여서..
gatsby 초기 component 코드만 봐도 지저분…

그래서 react-jss 를 사용하기로 함.

react-jss
theming
material-ui
css는 웬만큼은 하기 때문에 테마는 안쓰려고 했는데..
그래도 있으면 해보는게 개발자 아닌가 ㅋㅋㅋ
material ui로 활용함.

셋팅

https://github.com/mui-org/material-ui/blob/master/examples/gatsby/src/pages/about.js

export default Layout;

/* theme.js */
import { createMuiTheme } from "@material-ui/styles";
import colors from "./colors";

const theme = createMuiTheme({
  base: {
    font: ...
  },
  // material-ui 안에 typography 포함 되어 있음.
  // 기본값에 커스텀 하기
  typography: {
    useNextVariants: true,
    fontFamily: 'Noto Sans KR, sans-serif',
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
  }
});

export default theme;

뭘 써야할지는 차차 생각해보자..
아 근데 bootstrap에 material-ui 이면 너무 과한거 아닌가

거기다 스타일이 자꾸 엎어쳐서서 자세히 보니
typography까지 초기 셋팅부터 붙어 있었네.. 결국 bootstrap, typography 제 거

Layout 잡기

목표

material-ui 에서 제공하는 layout 을 사용하여 pc, mobile 모두 지원

설정 과정

처음에 문서를 대충 훝고는 모든 레이아웃이 모바일 인경우 메뉴영역 숨김을 지원할 줄 알았다.

import 할 때 절대경로 쓰기

gatsby-plugin-root-import gatsby-plugin-root-import

favicon

gatsby-plugin-react-helmet

import favicon from 'src/images/favicon.ico'

return (
  <Helmet
    htmlAttributes={{
      lang,
    }}
    title={title}
    titleTemplate={`%s | ${site.siteMetadata.title}`}
    link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
    ]}

font awesome

how-to-use: react

javascript

component 로 쓰려면

// App.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'

library.add(faIgloo)

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon="igloo" />
  </div>
)

sass

sass 로 쓰려면

@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

.user {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

.twitter {
  @extend %fa-icon;
  @extend .fab;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}