Add articles section to home dashboard

src/components/Articles/CollectionCard.tsx

@@ -60,7 +60,7 @@ const ArticleTitleRow = styled.div`
 
 const ArticleLink = styled(LinkInternal)`
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
@@ -69,6 +69,7 @@ const ArticleLink = styled(LinkInternal)`
   min-width: 0;
 
   &::before {
+    color: var(--color-text-secondary);
     content: '↳';
   }
 
@@ -79,15 +80,15 @@ const ArticleLink = styled(LinkInternal)`
 `;
 
 const ArticleMeta = styled.span`
-  font-size: 0.825rem;
+  font-size: 0.875rem;
   color: var(--color-text-secondary);
   white-space: nowrap;
   flex-shrink: 0;
   opacity: 0.7;
 `;
 
 const ArticleDescription = styled.p`
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--color-text-secondary);
   margin: 0;
   padding-left: 1.1em;

src/routes/Home.tsx

@@ -6,6 +6,10 @@ import Divider from '~/components/Divider';
 import ExperienceTimeline from '~/components/ExperienceTimeline';
 import type { Route } from '~/router/routes/+types/Home';
 import MetaTags from '~/components/MetaTags';
+import ArticleCard from '~/components/Articles/ArticleCard';
+import { LinkInternal } from '~/components/Button';
+import { publishedArticles } from '~/utils/vite/markdown';
+import { paths } from '~/routes';
 
 const FlexContainer = styled.div`
   display: flex;
@@ -16,6 +20,14 @@ const FlexContainer = styled.div`
   margin-right: auto;
 `;
 
+const recentArticles = [...publishedArticles]
+  .sort((a, b) => {
+    if (!a.published) return 1;
+    if (!b.published) return -1;
+    return new Date(b.published).getTime() - new Date(a.published).getTime();
+  })
+  .slice(0, 3);
+
 // tell React-Router to preload portfolio images for this page
 export const links: Route.LinksFunction = () => {
   return portfolioItems
@@ -51,6 +63,15 @@ export default function Home() {
         <Portfolio />
         <Divider>Experience</Divider>
         <ExperienceTimeline />
+        <Divider>Articles</Divider>
+        <div>
+          {recentArticles.map((article) => (
+            <ArticleCard key={article.path} {...article} />
+          ))}
+        </div>
+        <LinkInternal to={paths.articles} prefetch="intent">
+          View all articles &gt;
+        </LinkInternal>
       </FlexContainer>
     </>
   );