fix(pinner.xyz): fix transparent navbar on subpages and per-post OG images

[pcfreak30]

Bug Description

Two bugs introduced after the last site update:

1. Transparent navbar on subpages — The navigation menu is completely invisible on solutions, alternatives, contact, and other subpages.
2. Generic blog OG images — Blog post singles all share the same generic blog-default.png OG social card instead of reflecting the post content.

Root Cause

Navbar

18 subpages used <Layout> without passing navTheme="dark". The Layout defaults to variant="content" which gives the navbar light-theme text (rgb(13, 29, 28) — dark teal), but the body background is also rgb(13, 29, 28). Dark text on dark background = invisible menu.

Blog OG

Blog post singles passed ogImage={post.data.ogImage} which is undefined (not set in frontmatter), so BlogLayout fell back to /images/og/blog-default.png for every post.

Fix

Navbar

Added navTheme="dark" to all 18 affected <Layout> tags, switching navbar text to white (rgb(248, 248, 248)) — readable on dark hero backgrounds.

Pages fixed: 404, contact, how-it-works, partners, pricing, all solutions/* (5), all alternatives/* (7).

Blog OG

• New endpoint: src/pages/images/og/blog/[slug].png.ts — generates a per-post OG image using the post title as headline and description as subtitle (capped at 160 chars for readability)
• Updated src/pages/blog/[...slug].astro to use post.data.ogImage ?? /images/og/blog/${post.id}.png

How to Verify

1. Visit /solutions/ipfs-pinning/ — navbar links should be white and readable against the dark hero
2. Visit /alternatives/pinata/ — same check
3. Visit /blog/content-addressed-storage/ — check og:image meta tag resolves to /images/og/blog/content-addressed-storage.png (not blog-default.png)
4. Run pnpm build --filter=@lumeweb/pinner.xyz — build passes, OG image generated at build time

Test Plan

• Build passes (pnpm build --filter=@lumeweb/pinner.xyz)
• Console verification: nav link color is rgb(248, 248, 248) on solutions and alternatives pages
• OG meta tag verification: og:image points to per-post image
• Generated OG image is a valid 46KB PNG (1200x630)

Risk Assessment

Low — Changes are prop additions to existing Layout components (no logic changes) and a new build-time OG image endpoint. No runtime behavior changes, no API changes, no breaking changes.

---

This PR fixes two issues on the pinner.xyz site:

1. Transparent navbar on subpages: Adds navTheme="dark" to the Layout component across all subpages (404, alternatives, contact, how-it-works, partners, pricing, solutions, etc.) to ensure the navbar has a proper dark theme rather than appearing transparent.

2. Per-post OG images for blog: Adds a dynamic OG image generator (/images/og/blog/[slug].png.ts) that automatically creates Open Graph images for blog posts using the post title and description. The blog post template now falls back to these generated images when a custom ogImage is not specified in the post's frontmatter.

[kody-ai]

Routing mismatch in apps/pinner.xyz/src/pages/images/og/blog/[slug].png.ts causes og:image URLs for nested blog posts with post.id values containing / to 404, because /images/og/blog/2024/my-post.png does not match the single-segment [slug].png.ts route. Renaming the endpoint to [...slug].png.ts keeps params.slug unchanged and aligns the image route with [...slug].astro.

// file: apps/pinner.xyz/src/pages/images/og/blog/[...slug].png.ts
export const getStaticPaths: GetStaticPaths = async () => {
  ...
  return posts.map((post) => ({
    params: { slug: post.id },
  }));
};

export const GET: APIRoute = async ({ params }) => {
  ...
  const post = posts.find((p) => p.id === params.slug);

Prompt for LLM

File apps/pinner.xyz/src/pages/images/og/blog/[slug].png.ts:

Line 5 to 12:

Routing mismatch in apps/pinner.xyz/src/pages/images/og/blog/[slug].png.ts causes og:image URLs for nested blog posts with `post.id` values containing `/` to 404, because `/images/og/blog/2024/my-post.png` does not match the single-segment `[slug].png.ts` route. Renaming the endpoint to `[...slug].png.ts` keeps `params.slug` unchanged and aligns the image route with `[...slug].astro`.

Suggested Code:

// file: apps/pinner.xyz/src/pages/images/og/blog/[...slug].png.ts
export const getStaticPaths: GetStaticPaths = async () => {
  ...
  return posts.map((post) => ({
    params: { slug: post.id },
  }));
};

export const GET: APIRoute = async ({ params }) => {
  ...
  const post = posts.find((p) => p.id === params.slug);

_{Talk to Kody by mentioning @kody}

_{Was this suggestion helpful? React with 👍 or 👎 to help Kody learn from this interaction.}

​

​

[kody-ai]

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

• Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

• Validate Business Logic: Ask Kody to validate your code against business rules by adding a comment with the @kody -v business-logic command.

• Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Bug	✅
Performance	✅
Security	✅
Business Logic	✅

Access your configuration settings here.

​