LinkCardコンポーネント暫定

astro.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
   integrations: [
     AutoImport({
       imports: [
-        "./src/components/mdx/LinkBox.astro",
+        "./src/components/mdx/LinkCard.astro",
         {
           "./src/components/mdx/positive.tsx": ["PositiveBox"],
           "./src/components/mdx/negative.tsx": ["NegativeBox"]

src/components/mdx/LinkCard.astro

@@ -0,0 +1,51 @@
+---
+import LinkCardLayout from "@layouts/LinkCardLayout.astro"
+import { getOgpMetaData } from "@lib/getOgpMetaData"
+import type { OgpData } from "@type/ogpData-type"
+
+interface Props {
+  url: string
+  linkUrl?: string
+}
+
+const { url, linkUrl } = Astro.props
+const { env } = Astro.locals.runtime
+
+// check if the url is valid
+try {
+  new URL(url)
+  if (linkUrl) {
+    new URL(linkUrl)
+  }
+} catch (error) {
+  throw new Error("Invalid URL")
+}
+
+const getOgpData = async (url: string) => {
+  // cache key is the base64encoded url
+  const cacheKey = btoa(url)
+  const ogpCache: OgpData | null | undefined = await env.OGP_DATASTORE.get(
+    cacheKey,
+    { type: "json" }
+  )
+  if (ogpCache) {
+    return ogpCache
+  } else {
+    const ogpMetaData = await getOgpMetaData(url)
+    await env.OGP_DATASTORE.put(cacheKey, JSON.stringify(ogpMetaData), {
+      expirationTtl: 60 * 60 * 24
+    })
+    return ogpMetaData
+  }
+}
+
+const ogpData = await getOgpData(url)
+---
+
+<LinkCardLayout
+  title={ogpData.ogpTitle ?? url}
+  siteName={ogpData.ogpSiteName ?? new URL(url).hostname}
+  description={ogpData.ogpDescription ?? ""}
+  imageSrc={ogpData.ogpImageUrl}
+  url={linkUrl ?? url}
+/>

src/layouts/LinkCardLayout.astro

@@ -4,7 +4,7 @@ interface Props {
   title: string
   description: string
   siteName: string
-  imageSrc: string
+  imageSrc?: string
   url: string
 }
 

src/lib/fetcher/fetchOgp.ts → src/lib/getOgpMetaData.ts

@@ -1,16 +1,16 @@
 import { sanitizeUrl } from "@braintree/sanitize-url"
 import { type OgpData } from "@type/ogpData-type"
 
-export const fetchOgp = async (queryUrl: string) => {
+export const getOgpMetaData = async (queryUrl: string) => {
   const decodedUrl = decodeURIComponent(queryUrl)
   const safeUrl = sanitizeUrl(decodedUrl)
 
-  const responseBody = await getOgpDatas(safeUrl)
+  const responseBody = await parseOgpTags(safeUrl)
 
   return responseBody
 }
 
-const getOgpDatas = async (href: string): Promise<OgpData> => {
+const parseOgpTags = async (href: string): Promise<OgpData> => {
   const result: OgpData = {
     ogpTitle: "",
     ogpImageUrl: "",

test/ogpfetcher.test.ts

@@ -1,10 +1,10 @@
 import { expect, test } from "vitest"
-import { fetchOgp } from "~/lib/fetcher/fetchOgp"
+import { getOgpMetaData } from "@lib/getOgpMetaData"
 import { normalLinkUrl, normalLinkDataExpectedResponse } from "./testData"
 
 const encodedUrl = encodeURIComponent(normalLinkUrl)
 
 test("URIエンコードされたURLからOGPデータを取得する", async () => {
-  const res = await fetchOgp(encodedUrl)
+  const res = await getOgpMetaData(encodedUrl)
   expect(res).deep.equal(normalLinkDataExpectedResponse)
 })