mixc

src/components/home/Insights.astro

@@ -1,13 +1,12 @@
 ---
-import { getCollection } from 'astro:content';
+import { getFeed } from '../../data/insights';
 import { Picture } from 'astro:assets';
 import { localePath, t, type Lang } from '../../i18n/ui';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
 const ui = t(lang);
-const posts = (await getCollection('insights'))
-  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
-  .slice(0, 2);
+const feed = (await getFeed()).slice(0, 2);
+const m = ui.insights.mention;
 ---
 <section class="section insights" aria-labelledby="insights-title">
   <div class="container">
@@ -17,23 +16,31 @@ const posts = (await getCollection('insights'))
     </div>
 
     <ul class="insights__list" role="list">
-      {posts.map((post) => (
+      {feed.map((item) => (
         <li class="insights__item">
-          <a class="insights__card" href={localePath(lang, `/insights/${post.id}`)} lang={post.data.lang !== lang ? post.data.lang : undefined}>
-            <Picture
-              src={post.data.cover}
-              alt={post.data.coverAlt}
-              formats={['avif']}
-              fallbackFormat="webp"
-              widths={[400, 640, 960]}
-              sizes="(min-width: 64rem) 30vw, (min-width: 48rem) 45vw, 100vw"
-              loading="lazy"
-              decoding="async"
-              class="insights__img img-doc"
-            />
-            <p class="small muted">{post.data.category}</p>
-            <h3 class="h3">{post.data.title}</h3>
-          </a>
+          {item.kind === 'post' ? (
+            <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
+              <Picture
+                src={item.entry.data.cover}
+                alt={item.entry.data.coverAlt}
+                formats={['avif']}
+                fallbackFormat="webp"
+                widths={[400, 640, 960]}
+                sizes="(min-width: 64rem) 30vw, (min-width: 48rem) 45vw, 100vw"
+                loading="lazy"
+                decoding="async"
+                class="insights__img img-doc"
+              />
+              <p class="small muted">{item.entry.data.category}</p>
+              <h3 class="h3">{item.entry.data.title}</h3>
+            </a>
+          ) : (
+            <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
+              <p class="insights__panel" aria-hidden="true">{item.entry.data.source}</p>
+              <p class="small muted">{m.category(item.entry.data.platform)}</p>
+              <h3 class="h3">{item.entry.data.title}</h3>
+            </a>
+          )}
         </li>
       ))}
       <li class="insights__item">
@@ -70,7 +77,7 @@ const posts = (await getCollection('insights'))
   .insights__card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
   .insights__img, :global(.insights__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--space-2); }
   .insights__card h3 { max-width: 18em; }
-  .insights__event-when {
+  .insights__event-when, .insights__panel {
     display: flex;
     align-items: flex-end;
     aspect-ratio: 3 / 2;