n350071のブログ

主にRubyなフリーランスエンジニア

GatsbyのStarterにpost追加用スクリプトを追加する

2019-08-30 n350071作業体系化ノート

今回対象となるStarter

gatsby-starter-hero-blog

👍 作業内容

npm run new-post -- タイトル で動くようにしたかったのですが、割と複雑なスクリプトになったため、スクリプトファイルを別で生成し、タイトルは引数として渡すようにしました。以下ファイルの$1が引数に該当します。

工夫した点としては、画像ファイルを毎回選定するのが面倒だったため、src/images/default/連番.jpgの形で45個ほどの画像を置いておき、ランダムで選択されるようにしました。このデフォルト画像はもちろん、あとで変更できます。

最後に、新しい記事をブラウザで開き、リンクをコピーして、atomエディタで開いて終わりです。
atomのところは適宜修正してください。

new-post.sh
# npm run new-post -- [title]

dest=content/posts/$(date '+%Y-%m-%d'--$1)
mkdir -p $dest
sleep 1s

random_num=`awk -v min=1 -v max=45 'BEGIN{srand(); print int(min+rand()*(max-min+1))}'`
default_file_name=$random_num".jpg"

cat <<EOF >>  $dest"/index.md"
---
title: $1
category: "no_tag"
cover: ../../../src/images/default/$default_file_name
author: n350071
---
EOF

sleep 3s # Gatsby develop がうまく動かなくなるので、少し待つ

cat <<EOF >>  $dest"/index.md"

EOF

dest_url=`echo $dest | cut -b 27-`
open "http://localhost:8000/"$dest_url
echo "/"$dest_url"/" | pbcopy
atom $dest"/index.m

出来上がったファイルは、こちらのnew-postから呼び出します。

package.json
  "scripts": {
    "week-number": "date +%V",
    "new-post": ". new-post.sh $1",
    "build": "gatsby build",
    "develop": "gatsby develop",
    "devhost": "gatsby develop --host 192.168.0.112",
    "format": "prettier --write 'src/**/*.js'",
    "lint-errors": "eslint src/**/*.{js,jsx} --quiet",
    "lint": "eslint src/**/*.{js,jsx}",
    "stylelint": "stylelint src/**/*.js",
    "generate-app-icons": "sh ./scripts/generate-app-icons.sh"
  },

デフォルト画像はこちらに配置しました。

$ ls src/images/default/
1.jpg	13.jpg	17.jpg	20.jpg	24.jpg	28.jpg	31.jpg	35.jpg	39.jpg	42.jpg	5.jpg	9.jpg
10.jpg	14.jpg	18.jpg	21.jpg	25.jpg	29.jpg	32.jpg	36.jpg	4.jpg	43.jpg	6.jpg
11.jpg	15.jpg	19.jpg	22.jpg	26.jpg	3.jpg	33.jpg	37.jpg	40.jpg	44.jpg	7.jpg
12.jpg	16.jpg	2.jpg	23.jpg	27.jpg	30.jpg	34.jpg	38.jpg	41.jpg	45.jpg	8.jpg