Next.js + tailwindcss + ReactMarkdownで経歴書作成

完成物

next.jsをvercelでホスト、markdown部分はgist管理しています

https://tminamiii.dev

必要なモジュール

npm i -D remark-gfm react-markdown tailwindcss pstcss-preset-env github-markdown-css

tailwindcssとpostcssの設定

このあたりはを以下の参考にしつつ設定

https://panda-program.com/posts/nextjs-tailwind-css

tailwind.config.js

module.exports = {
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    container: {
      center: true,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
};

tailwindcssと_app.tsx listのdisc表示

tailwindcssはul,olの記号をデフォルトnoneにしてしまうのですが、職務経歴書では表示させたいのでglobalなcssに変更をいるます。とりあえうず4入れ子分つくっておきました。

@tailwind base;
@tailwind components;

ul {
    list-style: disc;
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

ul ul {
    list-style: circle;
    list-style-type: circle;
    margin: 0;
    padding: 0;
}

ul ul ul {
    list-style: square;
    list-style-type: square;
    margin: 0;
    padding: 0;
}

ul ul ul ul{
    list-style: circle;
    list-style-type: circle;
    margin: 0;
    padding: 0;
}
@tailwind utilities;

import { ReactElement } from 'react';
import '../styles/tailwind.css';

type AppProps = {
  Component: any;
  pageProps: any;
};

function App({ Component, pageProps }: AppProps): ReactElement {
  return <Component {...pageProps} />;
}

export default App;

ReactMarkdown

pluginsにgfmをつかってGitHub Flavorな文法を表示できるようにする
<ReactMarkdown plugins={[gfm]} source={content} />

このあたりでははGridを使用して、文章部分を中央に寄せています。
9行分割して左右2行をマージンとして使用。 残り5が本文になります。
`className=markdown-body'しておくとgithub-markdown-cssが適用されてGitHub風の表示になります。

      <div className="grid grid-cols-9">
        <div className="col-span-2" />
        <div className="markdown-body col-span-5 m-10">
          <ReactMarkdown plugins={[gfm]} source={content} />
        </div>
        <div className="col-span-2" />
      </div>

index.tsx

import 'github-markdown-css';
import React, { ReactElement } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import HeaderElements from '../components/HeaderElements';
import HeaderNavi from '../components/HeaderNavi';

const gistResumeUrl = 'https://gist.githubusercontent.com/tMinamiii/f1e93ca728eb66558f19fadb1a9e6feb/raw/resume.md';
type Props = {
  content: string;
};

export async function getServerSideProps(): Promise<any> {
  const resp = await fetch(gistResumeUrl);
  const text = await resp.text();
  return { props: { content: text } };
}

const ResumePage: React.FC<Props> = ({ content }: Props): ReactElement => {
  return (
    <div>
      <HeaderElements title="Resume" />
      <HeaderNavi />
      <div className="grid grid-cols-9">
        <div className="col-span-2" />
        <div className="markdown-body col-span-5 m-10">
          <ReactMarkdown plugins={[gfm]} source={content} />
        </div>
        <div className="col-span-2" />
      </div>
    </div>
  );
};
export default ResumePage;