feat: animated full-site architecture page (/architecture)#148
Merged
Conversation
New /post skill: draft once here → publish an MDX blog article + brand infographic → (after explicit confirmation) auto-post the same content to LinkedIn via the API → backfill the live URL. For FUTURE posts only; existing posts are already on LinkedIn manually. - scripts/lib/linkedin-core.mjs: pure, unit-tested helpers (slugify, commentary/payload builders, URN→URL) — 30 vitest cases. - scripts/lib/linkedin-api.mjs: OAuth refresh→access token, /v2/userinfo person URN, image register+upload, /v2/ugcPosts — mirrors the Google OAuth pattern in src/app/api/visitors/route.ts. - scripts/linkedin-auth.mjs: one-time 3-legged OAuth helper (localhost callback, w_member_social scope). - scripts/post-to-linkedin.mjs: CLI with --dry-run and a --confirm safety gate (refuses to publish otherwise). - scripts/render-card.mjs: reusable 2.05:1 crop-safe infographic generator. - blog/[slug] shows a 'Discuss on LinkedIn' button when linkedinUrl is set; .env.local.example documents LINKEDIN_*. - Live posting requires a one-time LinkedIn app authorization (run scripts/linkedin-auth.mjs); pipeline is unit-tested + dry-run-validated without it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Avoids the manual copy-paste of the printed keys (which is easy to do partially — e.g. dropping the token/URN lines). --write upserts all LINKEDIN_* values into .env.local in place, preserving other keys. Verified end-to-end: re-auth wrote 4 keys and a live /v2/userinfo call accepted the token. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Addresses 'no manual steps': the /post skill now triggers on natural language ('post on blog and LinkedIn', 'share on LinkedIn', ...) and runs every step itself — draft, infographic, MDX + blog wiring, build/lint/test, LinkedIn publish, URL backfill, commit, push. The only human inputs are the topic and one (waivable) final approval before the public post.
Token renewal is now automatic-as-possible: linkedin-auth.mjs records LINKEDIN_TOKEN_EXPIRES; a pure tokenStatus() helper (5 unit tests) + 'post-to-linkedin.mjs --check-token' (live userinfo validation, authoritative) report TOKEN_STATUS=ok|expiring|expired and exit 3 when a re-auth is due. On expiry the skill auto-launches the OAuth helper — the user's only action is one 'Allow' click (LinkedIn issues no refresh token for this app, so that click is unavoidable). Verified both the ok path (exit 0) and expired path (exit 3).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New /architecture route visualizing the portfolio's architecture, system design, and automated workflows: - Layered, server-first stack with data dots flowing down the bus - Request-lifecycle packet animation (horizontal desktop / vertical mobile) - Blog, Blog->LinkedIn (/post), and CI/CD pipeline step animations - 8 system-design principle cards with staggered reveals Server-rendered to static HTML with Metadata + BreadcrumbList JSON-LD, matching the existing inner-page pattern. Wired into the navbar, footer, and sitemap. All motion respects prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
bilalahamad0
added a commit
that referenced
this pull request
Jun 2, 2026
…EADME doc (#149) * Revert "feat: animated full-site architecture page (/architecture) (#148)" This reverts commit d394545. * docs: add standalone animated architecture page + README banner Self-contained docs/architecture.html (pure HTML/CSS/vanilla JS, no build step, no dependencies) visualizing the site's layered architecture, request lifecycle, automated content pipelines, and system-design principles — the same diagram as the reverted in-app route, but as documentation only, fully detached from the deployed site. Embeds a clickable preview banner (docs/architecture-preview.png) in README.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
/architectureroute — an animated visualization of the portfolio's own architecture, system design, and automated workflows. Built as a first-class page in the app (glassmorphism + Framer Motion), not a standalone file.What's on the page
/post), and CI/CD quality gates.Plus a static schematic-grid backdrop. All looping motion and reveals respect
prefers-reduced-motion.How it's built (matches existing conventions)
page.tsx) +layout.tsxwithMetadataandBreadcrumbListJSON-LD, mirroring theexperiencepage pattern."use client"child (ArchitectureDiagramClient.tsx); the page renders to static HTML.t-*typography tokens, the.glass/.glass-cardutilities, and the blue/emerald/violet accent system.sitemap.xml.Verification
npm run buildclean — TypeScript strict passes, noany;/architectureprerenders as static.npm run lint— zero issues in changed files.🤖 Generated with Claude Code