feat: add blog post

app/routes/blog.howtaskpagecreated.mdx

@@ -0,0 +1,31 @@
+---
+title: GitHubCLIでこのブログのタスク管理ページを作りました
+description: GitHubCLIでこのブログのタスク管理ページを作りました
+published: 2024-06-04
+---
+import { NavigationButton } from "../components/NavigationButton"
+
+## {frontmatter.title}
+完成品はこちら  
+<NavigationButton path="/task" label="tasks"/>
+コード自体はレポジトリにあります
+
+## 構成
+GitHubCLIでissueをJSONで吐き出して、shadcn/uiのData Tableで表示しています
+
+## 作り方(準備)
+- [GitHub CLI](https://docs.github.com/en/github-cli/github-cli/about-github-cli)をインストールして、JSONに吐き出します
+- このコマンドをGitHubActionsで定期実行設定＆コミットするように設定します
+```bash
+gh issue list --state all --json number,title,state,url,body > public/currentIssues.json
+```
+- [Data Table](https://ui.shadcn.com/docs/components/data-table)を導入します
+
+
+## 作り方(実装)
+ほぼサンプルそのままDataTableを使いました、ただデフォルトだとソートした時に列ごとの比が保たれなかったためtable-fixed付与しました
+```typescript
+<div className="rounded-md border">
+    <Table className="table-fixed">
+        <TableHeader>
+```

app/routes/blog_._index.tsx

@@ -1,10 +1,12 @@
 import { Link } from "@remix-run/react";
 import * as postFirst from "./blog.first.mdx";
+import * as postHowTaskPageCreated from "./blog.howtaskpagecreated.mdx";
 
 export default function BlogListComponent() {
     return (
         <div className="p-10 prose">
-            <Link to={"/blog/first"} prefetch="intent" unstable_viewTransition>{postFirst.frontmatter.title}</Link>
+            <div><Link to={"/blog/first"} prefetch="intent" unstable_viewTransition>{postFirst.frontmatter.title}</Link></div>
+            <div><Link to={"/blog/howtaskpagecreated"} prefetch="intent" unstable_viewTransition>{postHowTaskPageCreated.frontmatter.title}</Link></div>
         </div>
     );
 }