Feature/ghost city

[Animesh-86]

Description

Fixes #97

1. Ghost City Mode: Zero-contribution days now show as thin 4px blueprint foundations to maintain a premium 3D look across the entire calendar.
2. Auto-Theme Support: Refactored the logic so these new foundations automatically switch colors between Dark and Light mode.
3. Modular Rendering: Moved tower calculations into helper functions (computeTowers, computeFaceOpacity) to make the code cleaner and easier to manage.
4. Upstream Sync: Integrated the changes with the latest project updates (Auto-Theme and Dynamic Fonts) to ensure no features were broken.
5. Documentation: Preserved all original maintainer comments and added new JSDoc for the refactored functions.

Pillar

• 🎨 Pillar 1 — New Theme Design
• [x ] 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

Before

After

Checklist before requesting a review:

• [x ] I have read the CONTRIBUTING.md file.
• [ x] I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• [x ] I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• [ x] My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• [ x] I have updated README.md if I added a new theme or URL parameter.
• [x ] I have started the repo.
• [x ] I have made sure that i have only one commit to merge in this PR.
• [ x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).

[vercel]

@Animesh-86 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Implements "Ghost City" mode (issue #97), rendering zero-contribution days as thin 4px blueprint-style foundations using stroked, low-opacity faces so the isometric grid retains a consistent 3D appearance. The bulk of the diff also refactors the tower rendering: face/stroke opacity and height computation are now extracted into helper functions and a richer TowerData shape, and many template strings are compressed onto single lines.

Changes:

• New GHOST_HEIGHT_PX/scale constants and helpers computeTowerHeight, computeFaceOpacity, with TowerData extended to carry per-face opacities, isGhost, and stroke styling.
• Both generateSVG and generateAutoThemeSVG now render each tower face with per-face fill-opacity plus a stroke driven by t.strokeOpacity/t.strokeWidth; the auto-theme path uses stroke="currentColor" and adds color: var(--cp-*) to the utility classes so strokes inherit the themed color.
• README updated to describe the "Ghost City Architecture" behavior; previously inline opacity values (opacity*0.5, opacity*0.3, opacity) for contributing days are preserved as {left:0.35, right:0.21, top:0.7}.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
README.md	Adds a paragraph describing the new Ghost City foundations and tweaks surrounding copy.
lib/svg/generator.ts	Adds ghost-mode rendering, refactors tower math into helpers, extends TowerData, and reformats the static- and auto-theme renderers.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[JhaSourav07]

@Animesh-86
This does not look nice can we do something like if there is whole monolith is empty then we will make the svg like ghost city mode?

right now if i will merge this PR it will ruin the premium look.

[Animesh-86]

@Animesh-86 This does not look nice can we do something like if there is whole monolith is empty then we will make the svg like ghost city mode?

right now if i will merge this PR it will ruin the premium look.

Thanks for the feedback on the 'Premium' aesthetic! I completely agree, mixing those wireframe foundations with the solid glowing towers creates a bit too much visual noise and breaks the clean silhouette of the 3D skyline.

To fix this and preserve the premium look, I’m pivoting the implementation to be a Conditional Placeholder State:

1. Active Users: If there is even one commit in the 14-week window, the badge stays 100% clean (zero-commit days will remain invisible). This keeps the focus entirely on the 'Skyline' silhouette.

2. Empty State (Zero commits): If the entire monolith is empty, we will automatically trigger the 'Ghost City' mode. Instead of a blank badge, it will render as a subtle, architectural blueprint foundation.

This way, active users get the sleek look they love, while new or inactive users see a 'Blueprint for Success' rather than a broken or empty badge.

What do you think of this 'Placeholder' approach for the Ghost City mode?

[JhaSourav07]

@Animesh-86 This does not look nice can we do something like if there is whole monolith is empty then we will make the svg like ghost city mode?
right now if i will merge this PR it will ruin the premium look.

Thanks for the feedback on the 'Premium' aesthetic! I completely agree, mixing those wireframe foundations with the solid glowing towers creates a bit too much visual noise and breaks the clean silhouette of the 3D skyline.

To fix this and preserve the premium look, I’m pivoting the implementation to be a Conditional Placeholder State:

1. Active Users: If there is even one commit in the 14-week window, the badge stays 100% clean (zero-commit days will remain invisible). This keeps the focus entirely on the 'Skyline' silhouette.
2. Empty State (Zero commits): If the entire monolith is empty, we will automatically trigger the 'Ghost City' mode. Instead of a blank badge, it will render as a subtle, architectural blueprint foundation.

This way, active users get the sleek look they love, while new or inactive users see a 'Blueprint for Success' rather than a broken or empty badge.

What do you think of this 'Placeholder' approach for the Ghost City mode?

Works