テンプレートに沿ったマークダウンファイルをコマンドから簡単に作成できるようにする
前回の投稿に書いたように、このブログは Sylph というスターターを使って作成しています。
Sylph では、 .mdx ファイルを使って投稿を作成し、次のようにフロントマターにタイトルや日付を記述します。
---
title: "新たに投稿を作成する npm スクリプトを追加する"
time:
created: "2024-12-17T04:50:49.566Z"
updated: "2024-12-17T04:50:49.566Z"
---このように決まったテンプレートが必要な場合、手動でファイルを作成するのは面倒です。
なので、 npm スクリプトを追加し、コマンドで簡単に新規投稿を作成できるようにします。
スクリプト用のファイルを作成する
例えば、 /scripts/create-post.js というファイルを作成します。
create-post.js のコードは次のようになります。
ちなみにこのコードはほとんど AI に作成してもらいました。
const fs = require("node:fs");
const path = require("node:path");
const { exec } = require("node:child_process");
// Main function
async function createPost() {
try {
const filename = process.argv[2];
if (!filename) {
throw new Error(
"Please specify a filename.\nExample: npm run create-post my-new-post",
);
}
const timestamp = new Date().toISOString();
const template = `---
title: ""
time:
created: "${timestamp}"
updated: "${timestamp}"
---
## Article content goes here
`;
const postsDir = path.join(
process.cwd(),
"app",
"(posts)",
"blog",
"posts",
);
const filepath = path.join(postsDir, `${filename}.mdx`);
// Check if file already exists
if (fs.existsSync(filepath)) {
throw new Error(`${filename}.mdx already exists.`);
}
fs.writeFileSync(filepath, template, "utf-8");
console.log(`✅ Created ${filepath}`);
// Open file in Cursor
exec(`cursor "${filepath}"`, (error) => {
if (error) {
console.warn("⚠️ Could not open Cursor automatically:", error.message);
}
});
} catch (error) {
console.error("❌ Error:", error.message);
process.exit(1);
}
}
createPost();上のコードはこのブログの構造に沿った内容になっていますが、 template の内容や postDir のパスを変更すれば他のプロジェクトでも使えるかと思います。
あと、ファイル作成後に Cursor で開くようにしていますが、その部分も適宜変更してください。
package.json への追加
npm script として使えるように、 mdx:create というスクリプトを package.json に追加します。
{
// ...
"scripts": {
// ...
"mdx:create": "node ./scripts/create-post",
"lint:style": "npx stylelint \"**/*.css\" --fix",
"lint:biome": "npx biome check --fix --unsafe .",
"lint:prettier": "npx prettier . --write --log-level warn",
"lint": "npm run lint:style && npm run lint:prettier && npm run lint:biome"
},
// ...
}
}実際に使ってみる
次のコマンドを実行します。引数としてファイル名を渡します。
pnpm mdx:create sample-postファイルが作成されると次のように出力されます。
✅ Created /Users/username/myproject/app/(posts)/blog/posts/sample-post.mdxそして、Cursor で作成したファイルが開きます。
作成されたファイルの内容は次のようになっています。
---
title: ""
time:
created: "2024-12-17T05:02:13.439Z"
updated: "2024-12-17T05:02:13.439Z"
---
## Article content goes here
素晴らしい✨
スクリプトの概要
スクリプトの概要は次のようになっています。
process.argv[2]でコマンドライン引数を取得しファイル名にする- ファイル名を指定していない場合はエラーを出す
new Date().toISOString()で現在時刻を ISO 形式で取得し、テンプレートに追加path.join()を使ってfilepathを用意fs.existsSync()で同じファイルが既に存在する場合はエラーを出すfs.writeFileSync()でファイルを作成exec()を使って Cursor でファイルを開く
これで簡単に投稿を作成できるようになりました。
今回のような簡単なスクリプトであれば、一瞬で AI に作成してもらえるのでいい時代になりましたね。
余談ですが、この投稿は Cursor を使って作成しています。記事の内容もわりといい感じにサジェストされるので、投稿の作成がはかどりそうな予感です。
参考