Skip to content

Add Navbar component with back and call-to-action links #61

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
dhruv14122004 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Navbar component with back and call-to-action links #61

Show file tree
Hide file tree
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
17 changes: 3 additions & 14 deletions app/a/[slug]/BlogPostClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
"use client"

import Link from "next/link"
import { ArrowLeft, Calendar, User } from "lucide-react"
import { Calendar, User } from "lucide-react"
import Image from "next/image"
import { MarkdownRenderer } from "@/lib/markdown-renderer"
import Footer from "@/components/footer"
import { BlogPost } from "@/lib/blog"
import Navbar from "@/components/navbar"

export default function BlogPostPage({ post }: { post: BlogPost }) {
return (
<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-4xl mx-auto px-4 py-4 flex justify-between items-center">
<Link
href="/"
className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] transition-colors font-semibold"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Stable Viewpoints
</Link>
</div>
</header>
<Navbar backHref="/" backLabel="Back home" />

{/* Article */}
<article className="max-w-4xl mx-auto px-4 py-12">
Expand Down
20 changes: 2 additions & 18 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { useRouter, useSearchParams } from "next/navigation"
import { getPaginatedPosts } from "@/lib/blog"
import BlogCard from "@/components/blog-card"
import Pagination from "@/components/pagination"
import Link from "next/link"
import Footer from "@/components/footer"
import Navbar from "@/components/navbar"

interface BlogPost {
slug: string
Expand Down Expand Up @@ -99,23 +99,7 @@ export default function HomePage() {

return (
<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>
<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">
Stable Viewpoints
</h1>
<p className="text-gray-600 mt-2 text-lg">Independent Articles about Stability</p>
</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>
<Navbar />

{/* Main Content */}
<main className="max-w-6xl mx-auto px-4 py-12">
Expand Down
16 changes: 3 additions & 13 deletions app/submit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Link from "next/link"
import { ArrowLeft, Upload, FileText, ImageIcon, CheckCircle, Users, MessageCircle } from "lucide-react"
import { Upload, FileText, ImageIcon, CheckCircle, Users, MessageCircle } from "lucide-react"
import Footer from "@/components/footer"
import Navbar from "@/components/navbar"
Comment on lines +2 to +4
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 | 🟡 Minor

Avoid CTA self-link on the Submit page.
With current Navbar defaults, this page will render a “Submit article” CTA that links to the current route (/submit). Once Navbar supports disabling CTA, pass ctaHref={null} ctaLabel={null} (or equivalent).

Also applies to: 15-15

🤖 Prompt for AI Agents 
In app/submit/page.tsx around lines 2 to 4 and again at line 15, the page will
render the Navbar's default "Submit article" CTA which links to the current
/submit route; update the Navbar props to disable that CTA by passing
ctaHref={null} and ctaLabel={null} (or the equivalent props your Navbar accepts)
when rendering Navbar so the CTA does not self-link on this page.


export const metadata = {
title: "Submit an Article | Stable Viewpoints",
Expand All @@ -11,18 +12,7 @@ export const metadata = {
export default function SubmitPage() {
return (
<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-4xl mx-auto px-4 py-4 flex justify-between items-center">
<Link
href="/"
className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] transition-colors font-semibold"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Stable Viewpoints
</Link>
</div>
</header>
<Navbar backHref="/" backLabel="Back home" />

{/* Main Content */}
<main className="max-w-4xl mx-auto px-4 py-12">
Expand Down
64 changes: 64 additions & 0 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
"use client"

import Link from "next/link"
import { ArrowLeft, PenLine } from "lucide-react"

interface NavbarProps {
backHref?: string
backLabel?: string
ctaHref?: string
ctaLabel?: string
}

export function Navbar({ backHref, backLabel, ctaHref = "/submit", ctaLabel = "Submit article" }: NavbarProps) {
return (
<header className="sticky top-0 z-50 border-b border-black/5 bg-white/90 backdrop-blur-md shadow-sm">
<div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
<div className="flex items-center gap-3 min-w-0">
{backHref && backLabel ? (
<Link
href={backHref}
className="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition-colors"
>
<ArrowLeft className="h-4 w-4" />
<span className="whitespace-nowrap">{backLabel}</span>
</Link>
) : null}

<Link href="/" className="group flex items-center gap-3">
<span className="relative inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-[#228B22] via-[#91A511] to-[#FFBF00] shadow-sm ring-1 ring-black/5">
<span className="absolute inset-0 bg-white/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
<span className="text-xs font-semibold text-white">SV</span>
</span>
<span className="leading-tight">
<span className="block text-lg font-semibold text-gray-900">Stable Viewpoints</span>
<span className="block text-xs text-gray-500">Independent articles on stability</span>
</span>
</Link>
</div>

<div className="flex items-center gap-2">
<nav className="hidden sm:flex items-center gap-1 text-sm font-medium text-gray-700">
<Link className="rounded-lg px-3 py-2 transition-colors hover:bg-gray-100" href="/">
Home
</Link>
<Link className="rounded-lg px-3 py-2 transition-colors hover:bg-gray-100" href="/submit">
Submit
</Link>
</nav>
{ctaHref && ctaLabel ? (
<Link
href={ctaHref}
className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-[#228B22] to-[#91A511] px-4 py-2 text-sm font-semibold text-white shadow-lg ring-1 ring-black/5 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl hover:from-[#3E921E] hover:to-[#ADAC0D]"
>
<PenLine className="h-4 w-4" />
<span>{ctaLabel}</span>
</Link>
) : null}
</div>
</div>
</header>
)
}

export default Navbar
Loading