Add a page to view all articles (#2)

* add spaces before year

* add footnote and citation block

* add build check for pull requests

* Add articles page

app/articles/page.tsx

@@ -0,0 +1,108 @@
+// app/articles/page.tsx
+import Link from 'next/link';
+import Image from 'next/image';
+import { getAllArticles } from '@/lib/articles';
+
+import Header from '@/components/header';
+import Footer from '@/components/footer';
+
+type ArticleType = 'PEER-REVIEWED' | 'EDITORIAL';
+
+const badgeStyles: Record<ArticleType, string> = {
+  'PEER-REVIEWED': "bg-gray-700 text-white",
+  'EDITORIAL': "bg-white border border-gray-300 text-gray-700"
+};
+
+function ArticleBadge({ type }: { type: ArticleType }) {
+  const baseClasses = "px-2 py-1 text-xs font-medium tracking-wide uppercase";
+  const styleClass = badgeStyles[type];
+
+  return (
+    <span className={`${baseClasses} ${styleClass}`}>
+      {type}
+    </span>
+  );
+}
+
+export default async function ArticlesPage() {
+  const articles = await getAllArticles();
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Header />
+
+      <main className="max-w-screen-xl mx-auto px-4 sm:px-6 py-8">
+        <div className="space-y-16">
+          {articles.map(article => {
+            if (!article) return null;
+            const { frontMatter, slug } = article;
+            const date = new Date(frontMatter.publishedDate);
+
+            return (
+              <article key={slug} className="relative group">
+                <div className="grid grid-cols-1 md:grid-cols-[120px_1fr_300px] gap-8">
+                  {/* Left column: Date and badges */}
+                  <div className="flex flex-row md:flex-col gap-4 md:gap-2">
+                    <time 
+                      dateTime={frontMatter.publishedDate}
+                      className="text-sm text-gray-500 whitespace-nowrap"
+                    >
+                      {date.toLocaleDateString('en-US', {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric'
+                      })}
+                    </time>
+                    <div className="flex gap-2">
+                      {frontMatter.type && (
+                        <ArticleBadge type={frontMatter.type as ArticleType} />
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Middle column: Article content */}
+                  <div className="flex-1">
+                    <Link 
+                      href={`/articles/${slug}`}
+                      className="group-hover:text-blue-600 transition-colors"
+                    >
+                      <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                        {frontMatter.title}
+                      </h2>
+                    </Link>
+
+                    <div className="text-gray-700 mb-3">
+                      {frontMatter.authors?.map(author => author.name).join(', ')}
+                    </div>
+
+                    {frontMatter.description && (
+                      <p className="text-gray-600 leading-relaxed">
+                        {frontMatter.description}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Right column: Figure */}
+                  {frontMatter.image && (
+                      <div className="relative w-full aspect-[4/3] rounded-lg overflow-hidden">
+                        <Image
+                          src={frontMatter.image.url}
+                          alt={frontMatter.image.alt || ''}
+                          fill
+                          className="object-contain"
+                        />
+                      </div>
+                  )}
+                </div>
+
+                {/* Bottom border */}
+                <div className="absolute -bottom-8 left-0 right-0 h-px bg-gray-200" />
+              </article>
+            );
+          })}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}

components/footer.tsx

@@ -105,16 +105,16 @@ export default function Footer({ frontMatter }: FooterProps) {
                 Archive
               </Link>
               <Link 
-                href="/about"
+                href="/"
                 className="block text-sm text-gray-400 hover:text-white"
               >
-                About
+                Home
               </Link>
               <Link 
-                href="/submit"
+                href="/team"
                 className="block text-sm text-gray-400 hover:text-white"
               >
-                Submit
+                Team
               </Link>
             </div>
           </div>
@@ -123,22 +123,8 @@ export default function Footer({ frontMatter }: FooterProps) {
           <div>
             <h3 className="text-lg font-semibold mb-4">Legal</h3>
             <div className="space-y-2">
-              <Link 
-                href="/terms"
-                className="block text-sm text-gray-400 hover:text-white"
-              >
-                Terms of Use
-              </Link>
-              <Link 
-                href="/privacy"
-                className="block text-sm text-gray-400 hover:text-white"
-              >
-                Privacy Policy
-              </Link>
               <p className="text-sm text-gray-400 mt-4">
-                © {new Date().getFullYear()} Academic Journal.
-                <br />
-                All rights reserved.
+                CC-BY 4.0 SA © 2025 Open Social World
               </p>
             </div>
           </div>

components/header.tsx

@@ -25,8 +25,8 @@ export default function Header({ frontMatter }: HeaderProps) {
               Open Social World
             </Link>
             <div className="flex space-x-6">
-              <Link href="/archive" className="hover:text-gray-300">
-                Archive
+              <Link href="/articles" className="hover:text-gray-300">
+                Articles
               </Link>
               <Link href="/about" className="hover:text-gray-300">
                 About

content/articles/preface.mdx

@@ -0,0 +1,37 @@
+---
+title: Usher AI Agents into Human Social World
+description: 2025 Editorial
+publishedDate: 2025-01-10
+authors:
+  - name: Hao Zhu
+    personalURL: https://zhuhao.me
+    affiliation: Stanford University
+    affiliationURL: https://www.stanford.edu
+  - name: Diyi Yang
+    personalURL: https://cs.stanford.edu/~diyiy/
+    affiliation: Stanford University
+    affiliationURL: https://www.stanford.edu
+doi: 10.1234/example.2023.001
+type: EDITORIAL
+---
+
+
+## Introduction
+
+
+
+## Methods
+
+Here's an example code block:
+
+<Code language="python">
+{`def analyze_complex_system(data: np.ndarray) -> np.ndarray:
+    # Analysis code here
+    return processed_data`}
+</Code>
+
+## Results
+
+Our findings indicate significant patterns in the data.
+
+<Bibliography />

content/articles/psn.mdx

@@ -36,6 +36,7 @@ authors:
     affiliation: Stanford University
     affiliationURL: https://www.stanford.edu
 doi: 10.1234/example.2023.001
+type: EDITORIAL
 ---
 
 

lib/utils.ts

@@ -4,3 +4,16 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+}
+
+// Helper function to sort dates in descending order
+export function sortByDate(a: Date, b: Date): number {
+  return b.getTime() - a.getTime();
+}

types/article.tsx

@@ -5,12 +5,15 @@ export interface Author {
   affiliationURL?: string;
 }
 
+export type ArticleType = 'PEER-REVIEWED' | 'EDITORIAL';
+
 export interface FrontMatter {
   title: string;
   description?: string;
   authors?: Author[];
   publishedDate: string;
   doi?: string;
+  type?: ArticleType;
   katex?: {
     [key: string]: any;
   };