Skip to content

feat(demo): SEO/GEO — OG/Twitter/robots/sitemap/JSON-LD/llms.txt #5

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
Todari merged 1 commit into from
Apr 17, 2026
Merged

feat(demo): SEO/GEO — OG/Twitter/robots/sitemap/JSON-LD/llms.txt #5

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
53 changes: 51 additions & 2 deletions apps/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,60 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Pixel UI - CSS Pixel Art Library for React</title>
<meta name="description" content="Create retro pixel art UI with React. Pure CSS output using clip-path, RGBA PNG gradients, and drop-shadow. No Canvas dependency, SSR compatible." />
<meta property="og:title" content="React Pixel UI - CSS Pixel Art Library" />
<meta property="og:description" content="CSS styles to pixel art. No Canvas, no pre-rendering. Pure clip-path + PNG gradient + drop-shadow." />
<meta name="keywords" content="react, pixel, pixel-art, pixelated, css, clip-path, retro, ui, react component, library, SSR" />
<meta name="author" content="Todari" />
<link rel="canonical" href="https://react-pixel-ui.vercel.app/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://react-pixel-ui.vercel.app/" />
<meta property="og:site_name" content="React Pixel UI" />
<meta property="og:title" content="React Pixel UI - CSS Pixel Art Library" />
<meta property="og:description" content="Wrap any element with &lt;Pixel&gt; and your CSS becomes pixel art. Tailwind, inline styles, CSS modules — all supported. No Canvas, SSR compatible." />
<meta property="og:locale" content="en_US" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="React Pixel UI - CSS Pixel Art Library" />
<meta name="twitter:description" content="Wrap any element with <Pixel> and your CSS becomes pixel art. No Canvas, SSR compatible." />

@cursor cursor Bot Apr 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unescaped HTML in Twitter description meta tag

Medium Severity

The twitter:description meta tag contains a raw unescaped <Pixel> in its content attribute, while the og:description on line 16 correctly escapes the same text as &lt;Pixel&gt;. Some HTML parsers and social-card crawlers (including Twitter's card validator) may misinterpret or truncate the description at the unescaped angle bracket, resulting in a broken or incomplete Twitter Card preview.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit cf10516. Configure here.

@cursor cursor Bot Apr 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Twitter card type requires image but none provided

Medium Severity

The twitter:card meta tag is set to summary_large_image, but no twitter:image or og:image meta tag exists anywhere in the file. Twitter's card spec requires an image URL for this card type — without one, the card preview will either render broken/empty or silently degrade to a plain link, undermining the SEO goals of this PR.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit cf10516. Configure here.

@coderabbitai coderabbitai Bot Apr 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Twitter description 값에서 <Pixel>은 이스케이프 처리하는 편이 안전합니다.

Line 21은 메타 속성 값에 raw < 문자를 넣고 있어 파서/검증기 호환성이 떨어질 수 있습니다. &lt;Pixel&gt;로 표기해 주세요.

수정 제안 diff 
-    <meta name="twitter:description" content="Wrap any element with <Pixel> and your CSS becomes pixel art. No Canvas, SSR compatible." />
+    <meta name="twitter:description" content="Wrap any element with &lt;Pixel&gt; and your CSS becomes pixel art. No Canvas, SSR compatible." />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<meta name="twitter:description" content="Wrap any element with <Pixel> and your CSS becomes pixel art. No Canvas, SSR compatible." />
<meta name="twitter:description" content="Wrap any element with &lt;Pixel&gt; and your CSS becomes pixel art. No Canvas, SSR compatible." />
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/demo/index.html` at line 21, Update the meta tag value that currently
contains raw "<Pixel>" so it is HTML-escaped; in apps/demo/index.html locate the
<meta name="twitter:description" ...> tag and replace the raw angle brackets
around Pixel with HTML entities (use &lt; and &gt;) in the content attribute so
the description becomes safe for parsers/validators.


<meta name="theme-color" content="#ff8906" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect fill='%23ff8906' x='0' y='0' width='8' height='8'/><rect fill='%23e53170' x='8' y='0' width='8' height='8'/><rect fill='%236c5ce7' x='0' y='8' width='8' height='8'/><rect fill='%2300b894' x='8' y='8' width='8' height='8'/></svg>" />
<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect fill='%23ff8906' x='0' y='0' width='8' height='8'/><rect fill='%23e53170' x='8' y='0' width='8' height='8'/><rect fill='%236c5ce7' x='0' y='8' width='8' height='8'/><rect fill='%2300b894' x='8' y='8' width='8' height='8'/></svg>" />

@cursor cursor Bot Apr 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apple-touch-icon uses SVG; iOS requires PNG format

Low Severity

The apple-touch-icon link uses an SVG data URI, but iOS only supports PNG format for apple-touch-icons. iOS Safari will ignore the SVG and display a blank or default icon when a user adds the site to their home screen. A 180×180 PNG is the required format for this tag to function correctly on Apple devices.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit cf10516. Configure here.


<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"@id": "https://react-pixel-ui.vercel.app/#website",
"url": "https://react-pixel-ui.vercel.app/",
"name": "React Pixel UI",
"description": "Pure CSS pixel art library for React — no Canvas, SSR compatible.",
"inLanguage": "en-US",
"publisher": { "@id": "https://react-pixel-ui.vercel.app/#person" }
},
{
"@type": "Person",
"@id": "https://react-pixel-ui.vercel.app/#person",
"name": "Todari",
"url": "https://todari.dev",
"sameAs": ["https://github.com/Todari"]
},
{
"@type": "SoftwareSourceCode",
"@id": "https://react-pixel-ui.vercel.app/#package",
"name": "@react-pixel-ui/react",
"description": "Wrap any element with <Pixel> and your CSS becomes pixel art. Tailwind, inline styles, CSS modules — all supported. No Canvas, SSR compatible.",
"codeRepository": "https://github.com/Todari/react-pixel-ui",
"programmingLanguage": ["TypeScript", "CSS"],
"runtimePlatform": "React",
"license": "https://github.com/Todari/react-pixel-ui/blob/main/LICENSE",
"author": { "@id": "https://react-pixel-ui.vercel.app/#person" },
"keywords": "react, pixel, pixel-art, css, clip-path, retro, ui, hooks, SSR"
}
]
}
</script>
</head>
<body>
<div id="root"></div>
Expand Down
42 changes: 42 additions & 0 deletions apps/demo/public/llms.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# React Pixel UI

> React Pixel UI is a pure-CSS pixel art component library for React. Wrap any element with the `<Pixel>` component and its rendered output is automatically transformed into a low-resolution pixel-art look — no Canvas, no pre-rendering, SSR compatible.

## Why pure CSS

The pixelation is achieved with a combination of `clip-path`, RGBA PNG gradient masks, and `drop-shadow` filters — meaning the output is real DOM/CSS, so it works under server-side rendering and is accessible.

## Usage

```jsx
import { Pixel } from "@react-pixel-ui/react";

<Pixel pixelSize={4}>
<button className="bg-orange-500 text-white p-4 rounded">
Click me
</button>
</Pixel>
Comment on lines +14 to +18

@coderabbitai coderabbitai Bot Apr 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

문서 예제 prop 이름이 실제 API와 달라 실행 시 혼란을 유발합니다.

Line 14의 pixelSize는 현재 컴포넌트 API와 맞지 않습니다. PixelProps 기준으로 size를 사용해야 합니다. 문서 그대로 복사하면 기대 동작이 깨집니다.

수정 제안 diff 
-<Pixel pixelSize={4}>
+<Pixel size={4}>
   <button className="bg-orange-500 text-white p-4 rounded">
     Click me
   </button>
 </Pixel>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Pixel pixelSize={4}>
<button className="bg-orange-500 text-white p-4 rounded">
Click me
</button>
</Pixel>
<Pixel size={4}>
<button className="bg-orange-500 text-white p-4 rounded">
Click me
</button>
</Pixel>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/demo/public/llms.txt` around lines 14 - 18, Documentation example uses
the wrong prop name: change the Pixel usage in the example to pass the prop name
expected by the component API (PixelProps) — replace the incorrect pixelSize
prop with size so the Pixel component receives size, e.g., update the Pixel
element in the docs to use size instead of pixelSize to match the Pixel
component/PixelProps API.

```

Anything inside `<Pixel>` (Tailwind, inline styles, CSS modules, even SVGs) is pixelated as-is.

## Packages

- **@react-pixel-ui/react** — React component (`<Pixel>`) and hooks. Main entry.
- **@react-pixel-ui/core** — Framework-agnostic core (CSS generation utilities).

## Links

- npm (React): https://www.npmjs.com/package/@react-pixel-ui/react
- GitHub: https://github.com/Todari/react-pixel-ui
- Demo: https://react-pixel-ui.vercel.app

## Compatibility

- React 18+
- SSR: yes (Next.js, Remix, etc.)
- Browsers: any with `clip-path` and `drop-shadow` support (all modern browsers)

## Author

Todari (https://todari.dev / https://github.com/Todari)
4 changes: 4 additions & 0 deletions apps/demo/public/robots.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
User-agent: *
Allow: /

Sitemap: https://react-pixel-ui.vercel.app/sitemap.xml
8 changes: 8 additions & 0 deletions apps/demo/public/sitemap.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://react-pixel-ui.vercel.app/</loc>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
</urlset>
Loading