Update index.astro

Author: coconecolog

src/pages/index.astro

@@ -13,7 +13,7 @@ import {
   getSubcategoriesByCategory,
   getSubcategoryPath,
 } from "@/lib/posts";
-import { getResourceById } from "@/lib/resources";
+import { getResourceById, getResourceBySlug } from "@/lib/resources";
 import { SITE_NAME, SITE_DESCRIPTION } from "@/consts";
 import { buildOrganizationSchema } from "@/lib/schema";
 import { HOME_HERO, HOME_FOCUS, HOME_ISSUES, HOME_LATEST, HOME_REQUEST } from "@/data/home";
@@ -55,6 +55,12 @@ const focusSteps = getSubcategoriesByCategory(HOME_FOCUS.category)
     return { name: sub.name, href: getSubcategoryPath(sub), link };
   });
 
+// ツール＋関連資料（resourceSlug の資料が見つからないときは資料の枠を出さない）
+const focusTools = HOME_FOCUS.tools.map((tool) => ({
+  ...tool,
+  resource: tool.resourceSlug ? getResourceBySlug(tool.resourceSlug) : undefined,
+}));
+
 // このテーマの新着（記事・資料）
 const focusLatest = focusItems.slice(0, HOME_FOCUS.latestCount).map((item) => ({
   ...item,
@@ -149,19 +155,44 @@ const latestPosts = getLibraryItems("post")
 
         <div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.3fr)]">
           {/* ツール */}
-          {HOME_FOCUS.tools.map((tool) => (
+          {focusTools.map((tool) => (
             <div class="flex flex-col border border-neutral-300 bg-white p-6 md:p-7">
               <p class="text-xs font-bold text-neutral-500">{tool.label}</p>
               <h3 class="mt-2 text-xl font-extrabold leading-snug">
                 <a href={tool.cta.href} class="hover:underline">{tool.name}</a>
               </h3>
               <p class="mt-4 text-sm leading-[1.9] text-neutral-700">{tool.description}</p>
               {tool.note && <p class="mt-4 bg-neutral-100 p-4 text-xs leading-relaxed text-neutral-700">{tool.note}</p>}
-              {tool.subLink && (
-                <a href={tool.subLink.href} class="mt-4 inline-flex items-center gap-2 self-start text-sm font-bold hover:underline">
-                  {tool.subLink.label}
-                  <span aria-hidden="true">→</span>
-                </a>
+              {/* 関連資料（tools の resourceSlug。資料DBから題名・公開日・説明を表示） */}
+              {tool.resource && (
+                <div class="mt-6 grid grid-cols-[72px_minmax(0,1fr)] gap-4">
+                  <a href={`/resources/${tool.resource.slug}`} class="block" aria-hidden="true" tabindex="-1">
+                    <div class="aspect-[3/4] w-full border border-neutral-200 bg-white p-2">
+                      <p class="text-[0.45rem] font-bold">MKTG.AX</p>
+                      <div class="mt-1 h-[2px] bg-ink-950"></div>
+                      <p class="mt-1.5 line-clamp-4 text-[0.55rem] font-extrabold leading-snug">{tool.resource.title}</p>
+                      <div class="mt-1.5 space-y-1" aria-hidden="true">
+                        <div class="h-1 bg-neutral-100"></div>
+                        <div class="h-1 bg-neutral-100"></div>
+                      </div>
+                    </div>
+                  </a>
+                  <div class="min-w-0">
+                    <p class="text-xs text-neutral-500">
+                      {HOME_FOCUS.resourceTypeLabel}　/　{formatDate(tool.resource.publishedAt)}
+                    </p>
+                    <p class="mt-1.5 font-extrabold leading-snug">
+                      <a href={`/resources/${tool.resource.slug}`} class="hover:underline">{tool.resource.title}</a>
+                    </p>
+                    {tool.resource.description && (
+                      <p class="mt-1.5 line-clamp-2 text-xs leading-relaxed text-neutral-600">{tool.resource.description}</p>
+                    )}
+                    <a href={`/resources/${tool.resource.slug}`} class="mt-2 inline-flex items-center gap-2 text-sm font-bold hover:underline">
+                      {HOME_FOCUS.resourceCtaLabel}
+                      <span aria-hidden="true">→</span>
+                    </a>
+                  </div>
+                </div>
               )}
               <div class="mt-auto pt-6">
                 <a href={tool.cta.href} class="flex items-center justify-between gap-4 bg-ink-950 px-6 py-3.5 text-sm font-bold text-white transition-colors hover:bg-neutral-800">