From 7760ae8362056bacd68f9c62a15b7febd14e175a Mon Sep 17 00:00:00 2001
From: maretol <maretol@outlook.com>
Date: Sun, 15 Dec 2024 16:54:31 +0900
Subject: [PATCH] =?UTF-8?q?artifacts=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cms-data-fetcher/src/parse.ts                 |  9 ++++++
 packages/api-types/src/cms_types.ts           |  1 +
 pages/components/middle/article_content.tsx   |  9 ++++++
 .../middle/article_dom/artifactcard.tsx       | 28 +++++++++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 pages/components/middle/article_dom/artifactcard.tsx

diff --git a/cms-data-fetcher/src/parse.ts b/cms-data-fetcher/src/parse.ts
index b578740..b32c791 100644
--- a/cms-data-fetcher/src/parse.ts
+++ b/cms-data-fetcher/src/parse.ts
@@ -54,6 +54,8 @@ function getPOption(text: string) {
     pOpt = 'twitter'
   } else if (isBlog(text)) {
     pOpt = 'blog'
+  } else if (isArtifact(text)) {
+    pOpt = 'artifact'
   } else if (isURL(text)) {
     pOpt = 'url'
   } else if (text === '') {
@@ -106,6 +108,13 @@ function isBlog(text: string) {
   return text.indexOf('https://www.maretol.xyz/blog/') === 0 || text.indexOf('https://maretol.xyz/blog/') === 0
 }
 
+// artifactのリンクの場合
+function isArtifact(text: string) {
+  return (
+    text.indexOf('https://www.maretol.xyz/artifacts/') === 0 || text.indexOf('https://maretol.xyz/artifacts/') === 0
+  )
+}
+
 function isURL(text: string) {
   return text.indexOf('https://') === 0
 }
diff --git a/packages/api-types/src/cms_types.ts b/packages/api-types/src/cms_types.ts
index 80772fa..118935b 100644
--- a/packages/api-types/src/cms_types.ts
+++ b/packages/api-types/src/cms_types.ts
@@ -50,6 +50,7 @@ type infoAPIResult = {
   publishedAt: string
   revisedAt: string
   page_pathname: string
+  title: string | undefined
   main_text: string
   parsed_content: ParsedContent[]
   table_of_contents: TableOfContents
diff --git a/pages/components/middle/article_content.tsx b/pages/components/middle/article_content.tsx
index 50d272d..6bf4b14 100644
--- a/pages/components/middle/article_content.tsx
+++ b/pages/components/middle/article_content.tsx
@@ -14,6 +14,7 @@ import LoadingLinkcard from './loading_dom/loading_linkcard'
 import BlogCard from './article_dom/blogcard'
 import LoadingBlogCard from './loading_dom/loading_blogcard'
 import Table from './article_dom/table_of_contents'
+import ArtifactCard from './article_dom/artifactcard'
 
 export default async function ArticleContent({
   contents,
@@ -142,6 +143,14 @@ export default async function ArticleContent({
                 </Suspense>
               </div>
             )
+          } else if (pOption === 'artifact') {
+            return (
+              <div key={i} className="py-6">
+                <Suspense fallback={<LoadingBlogCard />}>
+                  <ArtifactCard link={text} />
+                </Suspense>
+              </div>
+            )
           } else if (pOption === 'empty') {
             // 空行の場合。改行をいれる
             return <Br key={i} />
diff --git a/pages/components/middle/article_dom/artifactcard.tsx b/pages/components/middle/article_dom/artifactcard.tsx
new file mode 100644
index 0000000..95c87a9
--- /dev/null
+++ b/pages/components/middle/article_dom/artifactcard.tsx
@@ -0,0 +1,28 @@
+import { Button } from '@/components/ui/button'
+import { getInfo } from '@/lib/api/workers'
+import { convertJST } from '@/lib/time'
+import { HammerIcon } from 'lucide-react'
+import Link from 'next/link'
+
+export default async function ArtifactCard({ link }: { link: string }) {
+  const linkURL = new URL(link)
+  const linkPath = linkURL.pathname
+  const info = await getInfo()
+  const artifact = info.filter((c) => c.page_pathname === linkPath || c.page_pathname === linkPath)[0]
+
+  return (
+    <div className="flex max-w-xl">
+      <Button variant={'outline'} className="no-underline bg-gray-300 h-full w-full" asChild>
+        <Link href={linkPath}>
+          <HammerIcon className="w-8 h-8 mr-2" />
+          <div className="w-full flex flex-row space-x-2">
+            <div className="w-full flex flex-col self-end">
+              <p className="text-md text-wrap line-clamp-2">{artifact.title || 'タイトル未定義'}</p>
+              <p className="text-gray-500 text-xs text-wrap line-clamp-2">{convertJST(artifact.publishedAt)}</p>
+            </div>
+          </div>
+        </Link>
+      </Button>
+    </div>
+  )
+}