feat: add og.png by himself65 · Pull Request #1 · LMRouter/lmrouter-docs

himself65 · 2025-09-22T20:42:26Z

No description provided.

vercel · 2025-09-22T20:42:31Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
lmrouter-docs	Ready	Preview	Comment	Sep 22, 2025 8:43pm

yvbbrjdr · 2025-09-23T03:40:03Z

Is this vibe coded?

Copilot

Pull Request Overview

This PR adds dynamic Open Graph image generation functionality to the LMRouter documentation site. It implements a server-side image generation API endpoint that creates branded social media preview images.

Key changes:

Added a new API endpoint /api/og/route.tsx that generates dynamic OG images with custom title, description, and type parameters
Updated documentation page metadata to include Open Graph and Twitter card configurations
Added @vercel/og dependency for server-side image generation

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 5 comments.

File	Description
src/app/api/og/route.tsx	New API endpoint that generates dynamic OG images with LMRouter branding and custom content
src/app/(docs)/[[...slug]]/page.tsx	Enhanced metadata generation to include Open Graph and Twitter card configurations
package.json	Added @vercel/og dependency for image generation functionality

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-24T02:57:20Z

src/app/api/og/route.tsx

+          <svg
+            style={{
+              position: "absolute",
+              top: "30px",
+              left: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >
+            <path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+          <svg
+            style={{
+              position: "absolute",
+              top: "30px",
+              right: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >
+            <path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+          <svg
+            style={{
+              position: "absolute",
+              bottom: "30px",
+              left: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >


The corner decoration SVGs have duplicated styling properties (fill='white' and opacity='0.4'). Consider extracting these common properties into a shared style object or constant to reduce duplication and improve maintainability.

Suggested change

<svg

style={{

position: "absolute",

top: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

<path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

top: "30px",

right: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

<path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

bottom: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

{/*

Extracted common SVG properties for corner decorations

*/}

{/*

Define shared props for corner SVGs

*/}

{/*

Place this constant just before the SVGs

*/}

{(() => {

const cornerSvgProps = { fill: "white", opacity: "0.4" };

return (

<>

<svg

style={{

position: "absolute",

top: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

<path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

top: "30px",

right: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

<path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

bottom: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

Copilot · 2025-09-24T02:57:20Z

src/app/api/og/route.tsx

+          <svg
+            style={{
+              position: "absolute",
+              top: "30px",
+              left: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >
+            <path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+          <svg
+            style={{
+              position: "absolute",
+              top: "30px",
+              right: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >
+            <path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+          <svg
+            style={{
+              position: "absolute",
+              bottom: "30px",
+              left: "30px",
+              width: "20px",
+              height: "20px",
+            }}
+            fill="white"
+            opacity="0.4"
+          >
+            <path d="M0,10 L10,10 L10,20" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+          <svg
+            style={{
+              position: "absolute",
+              bottom: "30px",


The corner decoration SVGs have duplicated styling properties (fill='white' and opacity='0.4'). Consider extracting these common properties into a shared style object or constant to reduce duplication and improve maintainability.

Suggested change

<svg

style={{

position: "absolute",

top: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

<path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

top: "30px",

right: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

<path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

bottom: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

fill="white"

opacity="0.4"

>

<path d="M0,10 L10,10 L10,20" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

bottom: "30px",

{/*

Shared SVG props for corner decorations

*/}

{(() => {

const cornerSvgProps = {

fill: "white",

opacity: "0.4",

};

return (

<>

<svg

style={{

position: "absolute",

top: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

<path d="M0,10 L10,10 L10,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

top: "30px",

right: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

<path d="M10,10 L10,0 L20,0" stroke="white" strokeWidth="2" fill="none" />

</svg>

<svg

style={{

position: "absolute",

bottom: "30px",

left: "30px",

width: "20px",

height: "20px",

}}

{...cornerSvgProps}

>

<path d="M0,10 L10,10 L10,20" stroke="white" strokeWidth="2" fill="none" />

</svg>

</>

);

})()}

<svg

style={{

position: "absolute",

bottom: "30px",

Copilot · 2025-09-24T02:57:21Z

src/app/api/og/route.tsx

+            fill="white"
+            opacity="0.4"


The corner decoration SVGs have duplicated styling properties (fill='white' and opacity='0.4'). Consider extracting these common properties into a shared style object or constant to reduce duplication and improve maintainability.

Copilot · 2025-09-24T02:57:21Z

src/app/api/og/route.tsx

+            fill="white"
+            opacity="0.4"


The corner decoration SVGs have duplicated styling properties (fill='white' and opacity='0.4'). Consider extracting these common properties into a shared style object or constant to reduce duplication and improve maintainability.

Copilot · 2025-09-24T02:57:21Z

src/app/api/og/route.tsx

+            {/* Title */}
+            <h1
+              style={{
+                fontSize: title.length > 30 ? "56px" : "64px",


The magic number 30 for title length threshold should be extracted as a named constant to make the logic more maintainable and self-documenting.

yvbbrjdr · 2025-09-24T02:57:34Z

src/app/(docs)/[[...slug]]/page.tsx

  const page = source.getPage(params.slug);
  if (!page) notFound();

+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';


Is this envvar automatically set by Vercel?

feat: add og.png

b5c0808

vercel bot deployed to Preview September 22, 2025 20:43 View deployment

yvbbrjdr requested review from Copilot and yvbbrjdr September 24, 2025 02:56

yvbbrjdr assigned himself65 Sep 24, 2025

yvbbrjdr added the enhancement New feature or request label Sep 24, 2025

Copilot AI reviewed Sep 24, 2025

View reviewed changes

yvbbrjdr reviewed Sep 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add og.png#1

feat: add og.png#1
himself65 wants to merge 1 commit intomainfrom
og

himself65 commented Sep 22, 2025

Uh oh!

vercel bot commented Sep 22, 2025 •

edited

Loading

Uh oh!

yvbbrjdr commented Sep 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

Copilot AI Sep 24, 2025

Uh oh!

yvbbrjdr Sep 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

himself65 commented Sep 22, 2025

Uh oh!

vercel bot commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yvbbrjdr commented Sep 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

yvbbrjdr Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Sep 22, 2025 •

edited

Loading