feat: featured projects

src/index.css

@@ -75,9 +75,14 @@
 }
 
 .prose.prose-invert a {
-  color: oklch(0.488 0.243 264.376);
+  color: oklch(0.82 0.12 195);
   font-weight: 500;
   text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.prose.prose-invert a:hover {
+  color: oklch(0.88 0.1 195);
 }
 
 .prose.prose-invert code {

src/lib/featuredProjects.ts

@@ -0,0 +1,8 @@
+import type { FeaturedProjectsFile } from "@/src/types/featured"
+import rawFeatured from "../../projects.yaml"
+
+const data = rawFeatured as FeaturedProjectsFile
+
+export function getFeaturedProjects(): FeaturedProjectsFile["projects"] {
+  return data.projects
+}

src/pages/HomePage.tsx

@@ -1,4 +1,5 @@
 import logo from "@/assets/logo.png"
+import { FeaturedProjects } from "@/components/FeaturedProjects"
 import { Button } from "@/components/ui/button"
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
@@ -13,8 +14,10 @@ export default function HomePage() {
   const [input, setInput] = useState("")
   const [error, setError] = useState<string | null>(null)
 
-  const go = () => {
-    const parsed = parseGithubUrl(input)
+  const openRepoUrl = (raw: string) => {
+    const trimmed = raw.trim()
+    setInput(trimmed)
+    const parsed = parseGithubUrl(trimmed)
     if (!parsed) {
       setError("Paste a GitHub URL like https://github.com/owner/repo or owner/repo")
       return
@@ -30,8 +33,10 @@ export default function HomePage() {
     }
   }
 
+  const go = () => openRepoUrl(input)
+
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col items-center justify-center px-6 py-16">
+    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col items-center justify-start px-6 py-12 md:py-16">
       <div className="max-w-xl w-full text-center space-y-8">
         <div className="space-y-5">
           <div className="flex justify-center">
@@ -49,6 +54,8 @@ export default function HomePage() {
           </div>
         </div>
 
+        <FeaturedProjects onOpenRepoUrl={openRepoUrl} />
+
         <div className="space-y-3 text-left">
           <input
             id="gh-url"

src/pages/RepoPage.tsx

@@ -728,7 +728,7 @@ export default function RepoPage() {
               <div>
                 <p className="text-xs text-slate-500 mb-1">{owner}</p>
                 <h3 className="flex flex-wrap items-center gap-1.5 text-xl font-bold text-white leading-tight">
-                  <a className="hover:text-cyan-400" href={ghRepoRoot} target="_blank" rel="noreferrer">
+                  <a className="text-white hover:text-cyan-400" href={ghRepoRoot} target="_blank" rel="noreferrer">
                     {repo}
                   </a>
                   {!ghAboutHomepage ? (

src/types/featured.ts

@@ -0,0 +1,11 @@
+export type FeaturedProject = {
+  title: string
+  subtitle?: string
+  url: string
+  highlighted?: boolean
+  logo: string
+}
+
+export type FeaturedProjectsFile = {
+  projects: FeaturedProject[]
+}

src/vite-env.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="vite/client" />
 
-declare module '*.md?raw' {
+declare module "*.md?raw" {
   const src: string
   export default src
 }
+
+declare module "*.yaml" {
+  const data: unknown
+  export default data
+}