suponsor fragment

Author: cssho

src/components/session-description-for-panel.astro

@@ -9,7 +9,7 @@ const { item } = Astro.props;
 <Modal
   id={"id" + createHash("md5").update(item.title).digest("hex")}
   open={item.title}
-  buttonClass="text-secondary text-wrap ml-4 xl:ml-0 xl:text-nowrap text-left"
+  buttonClass="text-secondary text-wrap ml-4 xl:ml-0 xl:text-nowrap text-left text-xl xl:py-4"
 >
   <main slot="main">
     <div

src/components/suponsor-card.astro

@@ -11,11 +11,14 @@ const { site } = Astro.props;
 const widths = [450, 800];
 const sizes = "(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw";
 ---
-
-<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 my-14">
-  <a class="group hover:!text-default" href={site.data.url} target="_blank" aria-label={`A link of ${site.data.title}`}>
-    
-    <h3 class="font-extrabold text-l">
+<div class="my-14 grid grid-cols-1 gap-4 lg:grid-cols-2">
+  <a
+    class="group hover:!text-default"
+    href={site.data.url}
+    target="_blank"
+    aria-label={`A link of ${site.data.title}`}
+  >
+    <h3 class="text-l font-extrabold scroll-mt-24" id={"suponsor-" + site.data.order}>
       {site.data.title}
     </h3>
     <figure class="relative h-full w-full overflow-hidden">

src/components/timetable-item.astro

@@ -47,7 +47,7 @@ const { item } = Astro.props;
           <SessionDescriptionForPanel item={item} />
         ) : (
           <div class="ml-4 flex h-full flex-row flex-wrap text-default xl:py-4">
-            <span class="font-bold text-xl ">{item.title}</span>
+            <span class="font-bold text-xl">{item.title}</span>
             <span>{item.description}</span>
           </div>
         )
@@ -67,7 +67,9 @@ const { item } = Astro.props;
     item.suponsors &&
       (item as SuponsorSession).suponsors.map((suponsor) => (
         <div class="m-2 ml-14 rounded border border-slate-500 bg-default p-4 shadow xl:ml-44">
-          <span class="font-bold">{suponsor.speaker.name}</span>
+          <a class="font-bold" href={"#suponsor-" + suponsor.suponsorId}>
+            {suponsor.speaker.name}
+          </a>
         </div>
       ))
   }

src/components/timetable.astro

@@ -68,24 +68,28 @@ VS Code の強力なエディタ機能に Marp を統合することで、プレ
           name: "株式会社CARTA HOLDINGS",
           twitter: "https://x.com/carta_engineers",
         },
+        suponsorId: 1,
       },
       {
         speaker: {
           name: "ペイクラウドホールディングス株式会社",
           link: "https://www.paycloud.inc/",
         },
+        suponsorId: 2,
       },
       {
         speaker: {
           name: "株式会社ヒューマンテクノロジーズ／KING OF TIME",
           link: "https://recruit.h-t.co.jp/",
         },
+        suponsorId: 3,
       },
       {
         speaker: {
           name: "Postman",
           twitter: "https://x.com/postman_japan",
         },
+        suponsorId: 4,
       },
     ],
   },

src/types.ts

@@ -22,6 +22,7 @@ export interface SuponsorSessionItem  {
   speaker: Speaker;
   documentUrl?: string;
   movieUrl?: string;
+  suponsorId: number;
 }
 export interface SuponsorSession extends TimeTableItem {
   suponsors: SuponsorSessionItem[];