initial commit

2026-06-17 22:37:47 +05:30
commit bc31b2508b
100 changed files with 18050 additions and 0 deletions
@@ -0,0 +1,76 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import ArticleCard from '../../components/article/ArticleCard.astro';
+import SectionHead from '../../components/ui/SectionHead.astro';
+import { getArticles, getPopular } from '../../lib/payload';
+
+const page = Number(Astro.url.searchParams.get('page') || 1);
+const [{ docs, hasPrevPage, hasNextPage }, popular] = await Promise.all([
+  getArticles({ limit: 12, page }),
+  getPopular(3),
+]);
+---
+
+<BaseLayout
+  seo={{ title: 'Articles', description: 'All articles published on SoftVowels.' }}
+  current="articles"
+>
+  <div
+    class="mx-auto grid max-w-[1440px] grid-cols-1 gap-12 px-4 pb-24 pt-12 md:px-10 lg:grid-cols-12"
+  >
+    <div class="lg:col-span-8">
+      <SectionHead eyebrow="All articles" level={2} />
+      <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+        {docs.map((a) => <ArticleCard article={a} />)}
+      </div>
+      <nav class="mt-12 flex items-center justify-between" aria-label="Pagination">
+        {
+          hasPrevPage ? (
+            <a
+              href={`/articles?page=${page - 1}`}
+              class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
+            >
+              ← Newer
+            </a>
+          ) : (
+            <span />
+          )
+        }
+        {
+          hasNextPage ? (
+            <a
+              href={`/articles?page=${page + 1}`}
+              class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
+            >
+              Older →
+            </a>
+          ) : (
+            <span />
+          )
+        }
+      </nav>
+    </div>
+    <aside class="space-y-8 lg:col-span-4">
+      <h3 class="font-label-md text-label-md text-text-tertiary m-0 uppercase tracking-widest">
+        Popular this week
+      </h3>
+      <div class="space-y-4">
+        {
+          popular.map((a, i) => (
+            <a
+              href={`/articles/${a.slug}`}
+              class="bg-surface-raised border-border-subtle hover:border-primary group block rounded-lg border p-5 transition-colors"
+            >
+              <span class="text-primary mb-2 block font-mono text-[10px]">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+              <h4 class="font-display group-hover:text-primary m-0 text-balance text-[18px] leading-snug transition-colors">
+                {a.title}
+              </h4>
+            </a>
+          ))
+        }
+      </div>
+    </aside>
+  </div>
+</BaseLayout>