Web猫ブログ | VSCodeCon JP 2021 サイトの内幕
VSCodeCon JP 2021 サイトの内幕
11/1/2021
React
NextJS
TypeScript
GithubPages
VSCode
Conference

VSCodeCon 史上初めてカンファレンス用のティザーサイトを製作することとなった今回。

次の要件を満たすとして Next.js を採用した。

  • VSCode カンファレンスならでは
  • SG と相性が良い

主な機能

順に見ていくとする。

  • Github Pages へデプロイ
  • 英語化対応
  • ダークモード対応

Github Pages へデプロイ

今回 vscodejp.github.io というドメインで公開する方針の下 Github Pages へデプロイする。

next build と next export を合わせて進めることで静的 HTML が生成される。

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@master

      - name: Use Node.js
        uses: actions/setup-node@master
        with:
          node-version: '12.x'

      - name: Transpile
        run: |
          npm install
          npm run build
        env:
          CI: true
          URL_PREFIX: conf2021
          GITHUB_PAGES: true

      - name: Export
        run: |
          npm run export
          touch out/.nojekyll

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v2.8.0
        env:
          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./out

また Github Pages 固有の事象として _ から始まるディレクトリが見えず 404 となってしまう問題に対処する必要がある。

具体的には少し前に書かせていただいた記事をチェックしていただければ幸いです。

/posts/be-careful-to-use-next-js-ssg-on-github-pages

英語化対応

ローカライズは Dynamic Routes を利用している。

各種 API getStaticPaths 並びに getStaticProps を使うことで、想定している言語を paths / props として返す。

export async function getStaticPaths() {
  return {
    paths: languages.map((lang) => {
      return { params: { lang: lang } }
    }),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  return {
    props: {
      language: languages.includes(params.lang) ? params.lang : defaultLanguage,
    },
  }
}

ルート pages/index.tsx で各言語に応じたパスへアクセスさせる。

import React from 'react'
import { useRouter } from 'next/router'
import i18next from 'i18next'

export default function Home() {
  const router = useRouter()

  React.useEffect(() => {
    const { pathname } = router
    if (pathname == '/') {
      router.push('/' + i18next.language.substring(0, 2))
    }
  })

  return null
}

Github Pages 同様、具体的には少し前に書かせていただいた記事をチェックしていただければ幸いです。

/posts/localization-on-next-js-ssg

ダークモード対応

Context と localStorage を利用してテーマを保持している。

type ColorTheme = {
  colorMode: 'light' | 'dark'
  changeColorMode: (cm: 'light' | 'dark') => void
}

export const ColorThemeContext = createContext<ColorTheme>(null)

export const ColorThemeProvider: FC = ({ children }) => {
  const [colorMode, setColorMode] = useState(undefined)
  useEffect(() => {
    const root = window.document.documentElement
    const initialColorValue = root.style.getPropertyValue('--initial-color-mode')
    setColorMode(initialColorValue)
  }, [])

  const changeColorMode = (mode: string) => {
    setColorMode(mode)

    window.localStorage.setItem('color-mode', mode)

    const root = window.document.documentElement
    root.style.setProperty('--initial-color-mode', mode)
    root.style.setProperty(
      '--color-text',
      mode === 'light' ? themeColors.light.textColor : themeColors.dark.textColor,
    )
    root.style.setProperty(
      '--color-background',
      mode === 'light' ? themeColors.light.backgroundColor : themeColors.dark.backgroundColor,
    )
  }
  return (
    <ColorThemeContext.Provider value={{ colorMode, changeColorMode }}>
      {children}
    </ColorThemeContext.Provider>
  )
}

やっていることを掻い摘んで話すと下記の通りだ。

  • createContext で Union 型を定義する
  • Global に Provider を登録する

そして保存したタイミングで localStorage に格納することで、次回以降のアクセスについてもそのテーマで表示される。

最後に

これ以外にスタイルの定義を CSS modules で書いていたり、ライブラリ内の react を preact として書き換えてたりしている。

自分仕様の VS Code に変える

余談ですが VS Code のタイトルバーなど、自分仕様にカスタマイズも可能だ。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.lintTask.enable": true,
  "peacock.color": "#007acc",
  "workbench.colorCustomizations": {
    "activityBar.activeBackground": "#007acc",
    "activityBar.activeBorder": "#ee90bb",
    "activityBar.background": "#007acc",
    "activityBar.foreground": "#e7e7e7",
    "activityBar.inactiveForeground": "#e7e7e799",
    "activityBarBadge.background": "#ee90bb",
    "activityBarBadge.foreground": "#15202b",
    "editorGroup.border": "#007acc",
    "panel.border": "#007acc",
    "sash.hoverBorder": "#007acc",
    "sideBar.border": "#0065a9",
    "statusBar.background": "#0098ff",
    "statusBar.foreground": "#e7e7e7",
    "statusBarItem.hoverBackground": "#007acc",
    "statusBarItem.remoteBackground": "#0065a9",
    "statusBarItem.remoteForeground": "#e7e7e7",
    "titleBar.activeBackground": "#0065a9",
    "titleBar.activeForeground": "#e7e7e7",
    "titleBar.inactiveBackground": "#1857a499",
    "titleBar.inactiveForeground": "#e7e7e799"
  }
}

ESLint の設定では VS Code のブランドカラーも織り交ぜている。

詳しくは をご覧あれ。

(5295 characters)

あわせてよみたい..

copyright@2023 webneko.All rights reserved