From f2541a79bf00a3fdc120ca6deb81847c310273a1 Mon Sep 17 00:00:00 2001
From: nash1111 <nash1111@users.noreply.github.com>
Date: Tue, 4 Jun 2024 13:03:56 +0900
Subject: [PATCH] feat: add blog post

---
 app/routes/blog.howtaskpagecreated.mdx | 31 ++++++++++++++++++++++++++
 app/routes/blog_._index.tsx            |  4 +++-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 app/routes/blog.howtaskpagecreated.mdx

diff --git a/app/routes/blog.howtaskpagecreated.mdx b/app/routes/blog.howtaskpagecreated.mdx
new file mode 100644
index 0000000..829703c
--- /dev/null
+++ b/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>
+```
diff --git a/app/routes/blog_._index.tsx b/app/routes/blog_._index.tsx
index 9a1e165..adccff6 100644
--- a/app/routes/blog_._index.tsx
+++ b/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>
     );
 }
\ No newline at end of file