next.jsさわってみた/medium.css使ってみた

2019-07-07T00:13:01+09:00

使ってみた技術

next.js
medium.css - medium風にするCSSライブラリ
Noto Sans Japanese - フォント。
Netlify - フロントエンドのプラットフォームdeployサービス。
markdown
remark.js - markdownを扱うライブラリ。
react.js

next.js

next.jsはReactを使ってstaticなサイトを作るフレームワークです。
- pages配下にjsファイルを作成すると、ファイルシステムがそのままAPIになります。
- static配下は画像などのstaticなファイルを置くときに使います。

next.jsの採用をやめた理由

/article/:nameなどを使ってpath paramで記事の内容を書いたmdファイルを指定しようとした。
- next.jsはpath paramに対応するのにバックエンドでexpressサーバを立ち上げる必要があった。

→じゃあreact-routerに戻ろう

next.jsをやめてreact.js(CreateReactApp)で作り直しました。
- react.js
- medium.css - medium風にするCSSライブラリ
- Noto Sans Japanese - フォント。
- Netlify - フロントエンドのプラットフォームdeployサービス。
- markdown
- remark.js - markdownを扱うライブラリ。
- react-highlight

データについて

今回DBは使っていません。
jsonに全体のマスタデータを記述しています。

{
    "articles":[
        {
            "title": "next.jsで技術ブログ作ろうとした話",
            "date": "2019-07-07",
            "md_name":"next-js-blog",
            "tag":[
                "next.js","blog"
            ]
        },
        ...

markdownのhighlight実装

import React from "react";
import parse from "remark-parse";
import Highlight from "react-highlight";

var html = require("remark-html");
let remark = require("remark");

class HighlightedMarkdown extends React.Component {
  state = {
    contents: "",
    rendered: false
  };

  componentDidMount() {
    (async () => {
      let response = await fetch(this.props.file);
      let data = await response.text();
      let beginIndex = data.indexOf('')
      let endIndex = data.indexOf('')
      let title=''
      if(beginIndex !== -1 && endIndex !== -1 ){
        title = data.substring(beginIndex + ''.length , endIndex)
      }
      let markdown = remark()
        .use(parse)
        .use(html)
        .processSync(data).contents;
      //.toString('utf-8')
      this.setState({
        contents: markdown,
        rendered: true,
        title: title
      });
      console.log(this.state.contents);
    })().catch(err => {
      console.log(err);
    });
  }

  render() {
    if (this.state.rendered) {
      return (
        <div className="container">
          <div class="meta">
            <div class="image" />
            <div className="info">
              <h1>{this.state.title}</h1>
            </div>
          </div>
          <Highlight innerHTML={true}>{this.state.contents}</Highlight>
          <hr/>
          </div>
      );
    } else {
      return <div />;
    }
  }
}
export default HighlightedMarkdown;


</code></pre>
</article>
</main></body></html>