Skip to content

[Feature] Enhance stats UI, kanban experience, and dynamic blog integrations #82

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

Merged
Gautam25Raj merged 1 commit into from
May 23, 2026
Merged

[Feature] Enhance stats UI, kanban experience, and dynamic blog integrations #82

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
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,6 @@ next-env.d.ts

# Agents
.agents
skills-lock.json
skills-lock.json
studio_audit_report.md
server_audit_report.md
194 changes: 104 additions & 90 deletions apps/blog-platform/app/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { notFound } from "next/navigation";
import { ArrowLeft, Clock, Calendar } from "lucide-react";
import { DocsBody } from "fumadocs-ui/layouts/notebook/page";
import { ArrowLeft, Clock, Calendar, ArrowRight } from "lucide-react";

import { blog } from "@/lib/source";
import { siteConfig } from "@/config/site";
import { getReadingTime } from "@/lib/read-time";

import PostActions from "@/components/blog/PostActions";

Expand All @@ -29,110 +30,123 @@ export default async function BlogPostPage(props: PageProps) {
const postUrl = `${siteConfig.url}/${params.slug}`;

return (
<div className="surface-grid min-h-screen py-10 md:py-16">
<div className="min-h-screen py-12 md:py-20">
<Container>
<article className="border-border bg-card relative overflow-hidden rounded-4xl border px-6 py-8 shadow-[0_30px_90px_-50px_rgba(0,0,0,0.45)] md:px-14 md:py-14">
<div className="bg-accent/5 pointer-events-none absolute -top-24 right-0 h-72 w-72 rounded-full blur-3xl" />

<nav className="relative mb-8 flex items-center justify-between">
<Link
href="/"
className="text-muted hover:text-foreground flex items-center gap-2 text-sm font-bold tracking-widest uppercase transition"
>
<ArrowLeft className="size-4" /> Back to Blog
</Link>

<PostActions title={page.data.title} url={postUrl} path={page.data.info.path} />
</nav>

<header className="relative mb-12 space-y-6 md:mb-14">
<div className="flex flex-wrap items-center gap-6 text-sm font-medium text-zinc-400">
<div className="flex items-center gap-2">
<Calendar className="size-4" />
{new Date(page.data.date).toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric",
})}
</div>
<div className="grid gap-12 lg:grid-cols-4 lg:gap-16">
<main className="space-y-8 lg:col-span-3">
<header className="space-y-6">
<Link
href="/"
className="text-muted hover:text-foreground group inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase transition-all duration-300"
>
<ArrowLeft className="size-4 transition-transform group-hover:-translate-x-1" />{" "}
Back to Blog
</Link>

<div className="space-y-4">
<div className="bg-accent/10 text-accent w-fit rounded-full px-3 py-1 text-xs font-bold tracking-wider uppercase">
Engineering
</div>

<h1 className="text-foreground text-3xl leading-[1.15] font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
{page.data.title}
</h1>

<div className="flex items-center gap-2">
<Clock className="size-4" />6 min read
<p className="text-muted max-w-3xl text-lg leading-relaxed font-medium md:text-xl">
{page.data.description}
</p>
</div>
</header>

<div className="bg-accent/10 text-accent rounded-full px-3 py-1 text-xs font-bold tracking-wider uppercase">
Engineering
<div className="bg-border/40 h-px" />

<div className="prose prose-zinc dark:prose-invert max-w-none">
<DocsBody className="[&_h2]:text-foreground [&_h3]:text-foreground [&_p]:text-muted [&_li]:text-muted [&_blockquote]:text-muted max-w-none [&_a]:text-blue-600 [&_a]:underline hover:[&_a]:text-blue-500 [&_blockquote]:border-l-4 [&_blockquote]:border-blue-500/40 [&_blockquote]:pl-6 [&_blockquote]:italic [&_code]:rounded-md [&_code]:bg-zinc-500/10 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h2]:mt-12 [&_h2]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:md:text-3xl [&_h3]:mt-8 [&_h3]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:tracking-tight [&_h3]:md:text-2xl [&_li]:my-2 [&_li]:leading-7 [&_p]:my-6 [&_p]:text-base [&_p]:leading-8 md:[&_p]:text-lg [&_ul]:my-6 [&_ul]:list-disc [&_ul]:pl-6">
<MDX components={getMDXComponents()} />
</DocsBody>
</div>
</main>

{/* Sticky Metadata & Project Callout Sidebar */}
<aside className="border-border/40 h-fit space-y-8 border-t pt-8 lg:sticky lg:top-24 lg:col-span-1 lg:border-t-0 lg:pt-0">
{/* Publisher Block */}
<div className="space-y-4">
<div className="text-muted font-mono text-[10px] font-bold tracking-widest uppercase">
Author
</div>
<div className="flex items-center gap-3">
<div className="border-border bg-card rounded-full border p-1">
<Image
width={32}
height={32}
alt="VeriWorkly Logo"
src="/veriworkly-logo.png"
className="rounded-full"
/>
</div>
<div>
<p className="text-foreground text-sm leading-none font-bold">VeriWorkly Team</p>
<p className="text-muted mt-1 text-xs">Core Contributors</p>
</div>
</div>
</div>

<h1 className="text-foreground text-4xl leading-[1.1] font-bold tracking-tight sm:text-5xl md:text-6xl">
{page.data.title}
</h1>

<p className="text-muted max-w-3xl text-lg leading-relaxed font-medium md:text-xl">
{page.data.description}
</p>
<div className="bg-border/40 h-px" />

<div className="flex items-center gap-4 pt-4">
<div className="border-border rounded-full border p-1.5">
<Image width={32} height={32} alt="VeriWorkly Logo" src="/veriworkly-logo.png" />
<div className="space-y-4">
<div className="text-muted font-mono text-[10px] font-bold tracking-widest uppercase">
Details
</div>

<div>
<p className="text-foreground leading-none font-bold">VeriWorkly Team</p>
<p className="text-muted mt-1 text-xs">Core Contributors</p>
</div>
</div>
</header>

<div className="border-border/60 bg-background/20 relative rounded-3xl border p-6 md:p-10">
<DocsBody className="max-w-none [&_code]:rounded-md [&_code]:bg-zinc-500/10 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-[0.92em] [&_h2]:mt-10 [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h3]:mt-8 [&_h3]:text-2xl [&_h3]:font-semibold [&_li]:my-2 [&_p]:my-5 [&_p]:text-base [&_p]:leading-8 md:[&_p]:text-lg [&_ul]:my-4">
<MDX components={getMDXComponents()} />
</DocsBody>
</div>

<footer className="border-border mt-16 border-t pt-12 md:mt-20 md:pt-14">
<div className="bg-accent/5 rounded-3xl p-8 md:p-10">
<div className="flex flex-col items-center gap-8 text-center md:flex-row md:text-left">
<div className="bg-foreground/10 text-background flex size-20 shrink-0 items-center justify-center rounded-2xl font-bold shadow-2xl">
<Image width={48} height={48} alt="VeriWorkly Logo" src="/veriworkly-logo.png" />
<div className="space-y-3 text-sm font-medium text-zinc-500">
<div className="flex items-center gap-2.5">
<Calendar className="size-4 text-zinc-400" />

<span>
{new Date(page.data.date).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</span>
</div>

<div className="space-y-4">
<h3 className="text-foreground text-2xl font-bold">Written by VeriWorkly</h3>

<p className="text-muted text-lg leading-relaxed">
We&apos;re on a mission to build the most private and professional career
engineering platform. Join us in redefining how professional stories are told.
</p>

<div className="flex flex-wrap justify-center gap-4 pt-2 md:justify-start md:gap-6">
<Link
href={siteConfig.links.app}
className="text-accent text-xs font-bold tracking-wider uppercase hover:underline"
>
Open resume builder
</Link>

<Link
href={siteConfig.links.docs}
className="text-accent text-xs font-bold tracking-wider uppercase hover:underline"
>
Read docs
</Link>

<Link
href={siteConfig.links.github}
className="text-accent text-xs font-bold tracking-wider uppercase hover:underline"
>
Follow our progress
</Link>
</div>
<div className="flex items-center gap-2.5">
<Clock className="size-4 text-zinc-400" />
<span>{getReadingTime(page.data.info.path)}</span>
</div>
</div>
</div>
</footer>
</article>

<div className="bg-border/40 h-px" />

<div className="space-y-4">
<div className="text-muted font-mono text-[10px] font-bold tracking-widest uppercase">
Actions
</div>

<PostActions title={page.data.title} url={postUrl} path={page.data.info.path} />
</div>

<div className="bg-border/40 h-px" />

<div className="border-border/60 bg-card/50 space-y-4 rounded-2xl border p-5">
<h4 className="text-foreground text-sm font-bold">VeriWorkly Platform</h4>

<p className="text-muted text-xs leading-relaxed">
Build a professional, ATS-friendly resume for free. 100% open-source and
privacy-first.
</p>

<Link
href={siteConfig.links.app}
className="text-accent inline-flex items-center gap-1.5 text-xs font-bold tracking-widest uppercase transition-all hover:gap-2"
>
Launch Builder <ArrowRight className="size-3.5" />
</Link>
</div>
</aside>
</div>
</Container>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/blog-platform/app/api/og/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export async function GET(request: Request) {
textTransform: "uppercase",
}}
>
blogs.veriworkly.com
blog.veriworkly.com
</div>
</div>,
{
Expand Down
Loading
Loading