記事をmarkdownに移行

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "[handlebars]": {
+    "editor.formatOnSave": false
+  }
 }

astro.config.mjs

@@ -5,9 +5,11 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 import cloudflare from "@astrojs/cloudflare";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
+  integrations: [tailwind(), mdx()],
   site: "https://yukky-sandbox.dev/",
   vite: {
     optimizeDeps: {
@@ -26,4 +28,4 @@ export default defineConfig({
     defaultStrategy: "viewport",
     prefetchAll: false,
   },
-});
+});

package.json

@@ -8,11 +8,14 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "gen-blog": "plop blog"
   },
   "dependencies": {
     "@astrojs/cloudflare": "11.0.4",
+    "@astrojs/mdx": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
+    "@formkit/tempo": "^0.1.2",
     "astro": "4.15.6",
     "microcms-js-sdk": "^3.0.0",
     "tailwindcss": "^3.3.3",
@@ -29,6 +32,7 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
+    "plop": "^4.0.1",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.2"

plop-templates/blog/index.md.hbs

@@ -0,0 +1,6 @@
+--- 
+title: "タイトル" 
+createdAt: {{createdAt}}
+description: "キャッチコピー" 
+layout: "../../../layouts/PostLayout.astro"
+---

plopfile.js

@@ -0,0 +1,19 @@
+export default function (plop) {
+  const today = new Date();
+  const pathname = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}-${today.getMilliseconds()}`;
+
+  plop.setGenerator("blog", {
+    description: "blog post",
+    prompts: [],
+    actions: [
+      {
+        type: "add",
+        path: `src/pages/post/${pathname}/index.md`,
+        templateFile: "plop-templates/blog/index.md.hbs",
+        data: {
+          createdAt: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
+        },
+      },
+    ],
+  });
+}

src/components/organisms/PostCards.astro

@@ -1,5 +1,4 @@
 ---
-import { getPosts } from "../../library/postFetcher";
 import PostCard from "../molecules/PostCard.astro";
 
 interface Frontmatter {
@@ -9,21 +8,20 @@ interface Frontmatter {
   month: number;
   date: number;
 }
-const posts = await getPosts({
-  fields: ["id", "title", "description", "createdAt"],
-});
+
+const posts = await Astro.glob('../../pages/post/**/*.{md,mdx}')
 ---
 
 <article class="w-full py-5">
   <h1 class="text-center text-4xl font-bold py-5 dark:text-white">記事一覧</h1>
   <div class="md:rounded-3x dark:bg-neutral-700 p-5">
     {
-      posts.contents.map((post) => (
+      posts.sort((postA, postB) => { return new Date(postA.frontmatter.createdAt) < new Date(postB.frontmatter.createdAt) ? 1 : -1 }).map((post) => (
         <PostCard
-          title={post.title}
-          description={post.description}
-          createdAt={post.createdAt}
-          url={`/post/${post.id}`}
+          title={post.frontmatter.title}
+          description={post.frontmatter.description}
+          createdAt={post.frontmatter.createdAt}
+          url={post.url}
         />
       ))
     }

src/layouts/PostLayout.astro

@@ -6,7 +6,7 @@ export interface Props {
   description: string;
   createdAt: string;
 }
-const { title, description, createdAt } = Astro.props;
+const { title, description, createdAt } = Astro.props.frontmatter;
 const OG_TYPE = "article";
 const dateTypeCreatedAt = new Date(createdAt);
 ---
@@ -27,7 +27,7 @@ const dateTypeCreatedAt = new Date(createdAt);
     </p>
     <span class="content-center place-content-center">
       <section
-        class="m-auto prose dark:prose-invert dark:prose-pre:dark:bg-slate-700 md:prose-h1:text-4xl prose-h1:text-2xl md:prose-h2:text-3xl prose-h2:text-xl prose-h1:border-b-yellow-700 prose-h1:border-b-2 prose-h1:font-semibold prose-h2:border-l-8 prose-h2:border-l-orange-500 prose-h2:pl-2 prose-p:text-lg font-sans px-8 pt-10 prose-img:w-full prose-a:break-all md:rounded-3xl bg-white dark:bg-neutral-700 pb-8"
+        class="m-auto prose dark:prose-invert dark:prose-pre:dark:bg-slate-700 md:prose-h2:text-4xl prose-h2:text-2xl md:prose-h3:text-3xl prose-h3:text-xl prose-h2:border-b-yellow-700 prose-h2:border-b-2 prose-h2:font-semibold prose-h3:border-l-8 prose-h3:border-l-orange-500 prose-h3:pl-2 prose-p:text-lg font-sans px-8 pt-10 prose-img:w-full prose-a:break-all md:rounded-3xl bg-white dark:bg-neutral-700 pb-8"
       >
         <slot />
       </section>

src/pages/post/0h2p5w7rfh/index.md

@@ -0,0 +1,77 @@
+---
+title: "転職して1ヶ月が経過した"
+createdAt: 2023/6/11
+description: "転職して1ヶ月が経過したため、転職活動中のことや今感じていること・思っていることをまとめてみます！"
+layout: "../../../layouts/PostLayout.astro"
+---
+
+## はじめに
+
+最後にこのブログを更新したときは足先が寒くてブログを書くのも一苦労だったのに、今これを書いている自分は半袖半ズボンになっており、気づけば大きく季節が移り変わっていました。さて、その間本ブログを何も更新していなかったわけですが、その裏では自分にとって初めての重大イベント**転職**が行われていました、、！
+
+今回はその転職自体についてや、新しい環境で1ヶ月働いてみての感想なんかを書いていきます。
+
+※本ブログは所属組織とは一切の関係を持たないため、記事内では社名・公開情報でない情報は記載しません。
+
+## 転職
+
+当時の自分はSIerとしてそれなりに良い環境で働かせていただいていたと思っています。最新技術が即座に組み込まれる環境に優秀でやる気のある仲間たち、充実したナレッジ、国民なら誰でも知っているような超大手クライアント様と仕事ができることへの満足感。しかし、サービスの仕様を対等な立場で決められないことに違和感を感じ、キャリアの大幅な方向転換が必要だと感じて転職することにしました。
+
+## 当時の自身のスペック(超簡易版)
+
+- 某SIer1年目。設計・開発をメインタスクとして行っていた。フル出社。
+- 学生時代から開発経験あり。開発系アルバイトも少しやってた。
+- 実務ではSpring Boot(Kotlin)をメインで触っていた。個人ではPython, TypeScript周りを触ることが多かった。
+- AWSで0から簡単なサービス設計構築・CICDの整備くらいはできる。
+- 資格は以下のような感じ:
+  - AWS SAA
+  - AWS DVA
+  - AWS DBS
+  - AP
+
+## 転職の軸
+
+### MUST
+
+- 自社開発企業
+- 裁量労働制
+- 充実したテストコード(あるいは、テストの質を高める姿勢への理解)
+- フルリモート可
+
+### SHOULD
+
+- アウトプット文化
+- 技術トークの好きな仲間
+
+### その他
+
+- 技術に関してはこだわりなし
+
+## 戦績
+
+転職プラットフォームにはforkwellを使いました。forkwellは企業からスカウトをいただいて選考を進めるタイプの転職サイトで、スカウトをもらった際に企業の魅力やどんな人材を求めているかがわかりやすく書かれており大変使いやすかったです。また、面談・面接のたびに1000円分のアマギフがもらえるため、小遣い稼ぎにもなりました笑。
+
+- カジュアル面談: 13社
+- 選考: 4社
+- 内定: 2社
+
+最終的に以下の2社から内定をいただきました。
+
+- バーティカルSaaS系スタートアップ
+- マッチングアプリ大手の開発企業
+
+どちらの企業様も転職の軸を100%満たせる環境が揃っていたため、とても悩みましたが、面接・面談で話した人の雰囲気と選考時のサポート体制、業界とサービスへの興味から後者に入社することにしました。
+
+## 転職後1ヶ月働いてみて
+
+転職の軸は本当に全て満たしていました。企画策定の場にエンジニアも参加でき、技術的観点からの意見はもちろん、1個人としてプランナーと対等に話せる環境が整っています。今はまだ仕事を覚え始めた段階ですが、これからサービスへの理解を深めていき、より主体的にサービスを創っていけることが楽しみです！
+
+また、リモートが主軸になり生活が大きく変わりました。今までは通勤時間のせいで退勤後に時間や体力がなく、家事をこなすのも大変でしたが、今は退勤後すぐに自由な時間が確保できるようになり、家事も余裕を持って行えます(ただ太りました、、)。また、自宅にある技術書をすぐに参照できるため、大変効率的に仕事ができています。もう出社生活には戻れません。
+
+現職では年に2日以外は出社・リモートは全て自由で、リモート勤務が多いです。月に1回だけ社内イベントがあり、その日は出社する人が多いです。
+
+さらに、エンジニア以外の職種の方々との距離もかなり近いです。まだエンジニア以外の方とはほとんど話せていませんが、社内イベントを通じて他職種の仲間とも仲良くなりたいと思っています！
+
+## まとめ
+
+転職を決めたときは1年目で相談できる人もほとんどおらず不安でしたが、理想的な環境に入ることができ、結果的に転職して良かったです！まだ覚えることも多く、慣れないこともありますが、これから頑張っていきます🔥

src/pages/post/4d4y1g2up/index.md

@@ -0,0 +1,88 @@
+---
+title: "2023年の目標50本"
+createdAt: 2023/1/9
+description: "今年の目標を50本立てました！！達成できるように頑張ろう！！"
+layout: "../../../layouts/PostLayout.astro"
+---
+
+## MUST
+
+- 楽しく生きる
+- 資産運用を始める。まずは積み立てNISAから
+- アニメ見ながら体幹トレーニング
+- 25歳になる
+
+## SHOULD
+
+### キャリア系
+
+- 愚痴れるくらいの仲の人を増やす
+- APN ALL Certified Engineer
+- ビジネス面からキャリアのやりがいややってみたいこと、興味のあることを考えてみる
+- 「楽しい」を目的に頑張る。目的はブレてはならない。
+- 年収xxx万円(公開できない)
+- DB周りで誰よりも詳しくなる、を目標に色々やってみる
+- ですぺ
+- ねすぺ
+- 属人化絶許マンになる(各種ドキュメント化などを主体的に進める)
+
+### 個人開発系
+
+- スマホアプリをリリースする
+- 自分のアプリで1円以上稼ぐ
+- 休日に一緒に何か作ってくれる友達を作る
+- 自作RDBMS完成させる
+- 株価系のAI作ってみる
+
+### アウトプット系
+
+- 月1回はQiitaで記事を書く
+- 月2回はこのブログを更新する
+- 年2回登壇する
+- 月1冊以上本を読んで、感想とかをこのブログに書く
+- 感想をこのブログに書く
+
+### 人・友達系
+
+- IT以外の趣味で1人以上と繋がる
+- 社外の人5人と顔見知りになる
+- Twitterで話す人を増やす
+- サイゼリヤで語れる友達を作る
+
+### 物欲系
+
+- M2のMacbook Airを買う
+- 部屋にインテリアを置く
+- ベッドをセミダブルにする
+
+### ゲーム系
+
+- ルシファーHLソロで勝つ
+- ベリアルHLにソロで勝つ
+- ブレワイ発売日に有給取ってプレイする
+- グレイシアとマスター3桁
+
+### 旅行系
+
+- 沖縄行く
+- 18きっぷ旅
+- 江ノ島サイクリング
+- 誕生日に岐阜タンメンに行ってトッピングマシマシする
+- 離島行く
+- 山の上ホテルのプリンアラモードを食べる
+- 彼女と海で遊ぶ
+- 高尾山に行く
+- 能登の海舟に泊まる(2泊3日)
+- 東北地方開拓
+
+### その他
+
+- 料理のモチベーションを見つける
+- キーボード(楽器)を再開する
+- 月1回は部屋の大掃除をする
+- ツーリングの再開
+- 何かのコンサートに行く(できればピアノ)
+- 蟹を食べる
+- 大晦日にすき焼きを食べる
+- 彼女の誕生日をちゃんと祝う(去年は当日に発熱してちゃんと祝えなかった)
+- 11時寝7時半起き

src/pages/post/4sdndar2n/index.mdx

@@ -0,0 +1,30 @@
+---
+title: "Cloudflareでbun使えないじゃん！！！と思ったらBuild Systemが古いだけでした"
+createdAt: 2023/12/3
+description: "Cloudflareでbunが使えないと思ってnカ月。。原因はBuild System Versionが1のままなことでした。。。 "
+layout: "../../../layouts/PostLayout.astro"
+---
+
+import { Image } from "astro:assets";
+import buildSystemVersionPng from "./_build_system_version.png";
+
+Cloudflareでbunが使えないと思ってnカ月。。原因は`Build System Version`が1のままなことでした。。。
+
+<Image
+  src={buildSystemVersionPng}
+  alt="Build System Versionが1のままだった"
+  width={974}
+  height={405}
+  decoding="async"
+  loading="lazy"
+/>
+
+`Build System Version`を2にしたらbunコマンドが動作するようになりました🎉
+
+## Build System Versionとは？
+
+要は内部で使っているランタイムのバージョンとOSのバージョンが上がったとのこと。
+
+ランタイムのバージョンに至っては BUN_VERSION のような環境変数を指定することで指定したバージョンをインストールすることができるとのこと。
+
+https://developers.cloudflare.com/pages/platform/language-support-and-tools/