Skip to content

feat: compact header and add GitHub icon #57 #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ankitrraj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: compact header and add GitHub icon #57 #59

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import BlogCard from "@/components/blog-card"
import Pagination from "@/components/pagination"
import Link from "next/link"
import Footer from "@/components/footer"
import { Github } from "lucide-react"

interface BlogPost {
slug: string
Expand Down Expand Up @@ -101,19 +102,29 @@ export default function HomePage() {
<div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
{/* Header */}
<header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
<div className="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
<div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
<div>
<h1 className="text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2">
<h1 className="text-2xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight">
Stable Viewpoints
</h1>
<p className="text-gray-600 mt-2 text-lg">Independent Articles about Stability</p>
<p className="text-gray-600 text-sm">Independent Articles about Stability</p>
</div>
<div className="flex items-center gap-6">
<a
href="https://github.com/StabilityNexus/StableViewpoints"
target="_blank"
rel="noopener noreferrer"
className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors"
>
<Github className="w-5 h-5" />
</a>
<Link
href="/submit"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
>
Submit an Article
</Link>
Comment on lines +105 to +126
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add accessible name + focus styles for the icon-only GitHub link.

Right now the <a> contains only an SVG, so screen readers may announce it as an unlabeled “link”, and keyboard users don’t get a clear focus indicator.

           <div className="flex items-center gap-6">
             <a
               href="https://github.com/StabilityNexus/StableViewpoints"
               target="_blank"
               rel="noopener noreferrer"
-              className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors"
+              aria-label="Stable Viewpoints on GitHub"
+              title="Stable Viewpoints on GitHub"
+              className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black"
             >
               <Github className="w-5 h-5" />
             </a>
             <Link
               href="/submit"
-              className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+              className="inline-flex items-center gap-2 rounded-md bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#228B22]"
             >
               Submit an Article
             </Link>
           </div>
🤖 Prompt for AI Agents 
In app/page.tsx around lines 105 to 126, the GitHub anchor is icon-only and
lacks an accessible name and keyboard focus styles; add an accessible label by
either adding aria-label="Open StableViewpoints GitHub" to the <a> or inserting
a visually hidden span (className="sr-only") with that text, and enhance
keyboard focus visibility by adding focus-visible classes to the anchor's
className (for example: focus:outline-none focus-visible:ring-2
focus-visible:ring-offset-2 focus-visible:ring-black or equivalent Tailwind
focus classes) so screen readers announce the link and keyboard users see a
clear focus indicator.

</div>
<Link
href="/submit"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-6 py-3 font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
>
Submit an Article
</Link>
</div>
</header>

Expand Down