feat: selected works with collections

nix6839 · Sep 16, 2023 · 5011cd3 · 5011cd3
1 parent b4951de
commit 5011cd3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/apps/portfolio/src/assets/portfolio-website-cover.png b/apps/portfolio/src/assets/portfolio-website-cover.png
diff --git a/apps/portfolio/src/components/pages/index/SelectedWorks.astro b/apps/portfolio/src/components/pages/index/SelectedWorks.astro
@@ -1,5 +1,17 @@
 ---
+import { Image } from 'astro:assets';
+import { getEntry } from 'astro:content';
+import Links from '../../../core/links.js';
 import InternalLink from '../../InternalLink.astro';
+
+import type { CollectionEntry } from 'astro:content';
+
+const selectedWorksSlugs: Array<CollectionEntry<'works'>['slug']> = [
+  'portfolio-website',
+];
+const selectedWorks = await Promise.all(
+  selectedWorksSlugs.map((slug) => getEntry('works', slug)),
+);
 ---
 
 <section>
@@ -9,27 +21,27 @@ import InternalLink from '../../InternalLink.astro';
   </header>
 
   <div>
-    <article>
-      <InternalLink href="/works/asdf">
-        <img src="" alt="썸네일" aria-hidden="true" />
-        <h3>포트폴리오 웹사이트</h3>
-        <p>나에 대해 소개하는 웹사이트</p>
-        <ul>
-          <li>React</li>
-          <li>TypeScript</li>
-        </ul>
-      </InternalLink>
-    </article>
-    <article>
-      <InternalLink href="/works/qwer">
-        <img src="" alt="썸네일" aria-hidden="true" />
-        <h3>쿠팡플레이 개선 확장</h3>
-        <p>쿠팡 플레이 웹사이트를 개선 시켜주는 브라우저 확장 프로그램.</p>
-        <ul>
-          <li>React</li>
-          <li>TypeScript</li>
-        </ul>
-      </InternalLink>
-    </article>
+    {
+      selectedWorks.map((work, i) => (
+        <article>
+          <InternalLink href={Links.work(work.slug)}>
+            <Image
+              src={work.data.cover}
+              alt="썸네일"
+              aria-hidden="true"
+              class="h-auto w-full"
+              {...(i < 2 ? { decoding: 'sync', loading: 'eager' } : {})}
+            />
+            <h3>{work.data.title}</h3>
+            <p>{work.data.description}</p>
+            <ul>
+              {work.data.techs.map((tech) => (
+                <li>{tech}</li>
+              ))}
+            </ul>
+          </InternalLink>
+        </article>
+      ))
+    }
   </div>
 </section>