Merge pull request #5 from CodeYogiCo/feat/pinned-repos

Add pinned GitHub repos section on the index

Author: CodeYogiCo

src/App.jsx

@@ -5,6 +5,7 @@ import { profile } from './data'
 import { posts, visiblePosts } from './loadPosts'
 import { widgets } from './widgets'
 import ViewCount from './widgets/ViewCount.jsx'
+import PinnedRepos from './widgets/PinnedRepos.jsx'
 
 const lastEdit = visiblePosts[0]?.date || posts[0]?.date || ''
 
@@ -371,6 +372,7 @@ function Index() {
       <Identity />
       <About />
       <PostsList />
+      <PinnedRepos />
       <Footer />
     </main>
   )

src/index.css

@@ -218,6 +218,50 @@ a:hover {
 }
 .posts li:hover .read { color: var(--accent); }
 
+/* ── pinned repos ──────────────────────────────────────── */
+
+.pinned { margin-top: 60px; }
+.pinned-title {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: lowercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  margin: 0 0 14px;
+}
+.pinned-title::before { content: "## "; }
+.pinned-list { list-style: none; margin: 0; padding: 0; }
+.pinned-list li {
+  border-top: 1px dashed var(--rule);
+  padding: 10px 0;
+}
+.pinned-list li:last-child { border-bottom: 1px dashed var(--rule); }
+.pinned-card { display: block; border-bottom: 0; }
+.pinned-card:hover .pinned-name { color: var(--accent); }
+.pinned-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13.5px;
+}
+.pinned-name { font-weight: 500; }
+.pinned-meta {
+  display: inline-flex;
+  gap: 12px;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+.pinned-lang { color: var(--accent); letter-spacing: 0.04em; }
+.pinned-stars { font-variant-numeric: tabular-nums; }
+.pinned-desc {
+  margin-top: 3px;
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  line-height: 1.5;
+}
+
 /* ── footer ────────────────────────────────────────────── */
 
 .footer {

src/widgets/PinnedRepos.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+
+const ENDPOINT = 'https://gh-pinned-repos.egoist.dev/?username=codeyogico'
+
+function clean(r) {
+  const repo = (r.repo || '').trim()
+  const link = (r.link || '').trim() || `https://github.com/${r.owner}/${repo}`
+  return {
+    owner: r.owner,
+    repo,
+    link: link.replace(/\s+/g, ''),
+    description: (r.description || '').trim(),
+    language: (r.language || '').trim(),
+    stars: Number(r.stars) || 0,
+  }
+}
+
+export default function PinnedRepos() {
+  const [repos, setRepos] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(ENDPOINT)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => {
+        if (cancelled || !Array.isArray(data)) return
+        setRepos(data.map(clean).filter((r) => r.repo))
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (!repos || repos.length === 0) return null
+
+  return (
+    <section className="pinned">
+      <h2 className="pinned-title">github</h2>
+      <ul className="pinned-list">
+        {repos.map((r) => (
+          <li key={`${r.owner}/${r.repo}`}>
+            <a href={r.link} target="_blank" rel="noopener noreferrer" className="pinned-card">
+              <div className="pinned-row">
+                <span className="pinned-name">{r.repo}</span>
+                <span className="pinned-meta">
+                  {r.language && <span className="pinned-lang">{r.language}</span>}
+                  {r.stars > 0 && <span className="pinned-stars">★ {r.stars}</span>}
+                </span>
+              </div>
+              {r.description && <div className="pinned-desc">{r.description}</div>}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}