From cf105162d97891de9a4de7dc019ec871d287d0e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?=
 =?UTF-8?q?=E1=86=AB?= <rhymint@gmail.com>
Date: Fri, 17 Apr 2026 19:03:29 +0900
Subject: [PATCH] =?UTF-8?q?feat(demo):=20SEO/GEO=20=E2=80=94=20full=20OG,?=
 =?UTF-8?q?=20Twitter,=20canonical,=20robots,=20sitemap,=20JSON-LD,=20llms?=
 =?UTF-8?q?.txt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Full Open Graph (url, site_name, locale) and Twitter Card metadata
- Canonical link, apple-touch-icon
- public/robots.txt + public/sitemap.xml
- JSON-LD @graph: WebSite + Person (Todari) + SoftwareSourceCode (npm package)
- public/llms.txt with usage example, package list, and compatibility info

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/demo/index.html         | 53 ++++++++++++++++++++++++++++++++++--
 apps/demo/public/llms.txt    | 42 ++++++++++++++++++++++++++++
 apps/demo/public/robots.txt  |  4 +++
 apps/demo/public/sitemap.xml |  8 ++++++
 4 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 apps/demo/public/llms.txt
 create mode 100644 apps/demo/public/robots.txt
 create mode 100644 apps/demo/public/sitemap.xml

diff --git a/apps/demo/index.html b/apps/demo/index.html
index b998c73..0c9a9cc 100644
--- a/apps/demo/index.html
+++ b/apps/demo/index.html
@@ -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." />
+
     <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>" />
+
+    <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>
diff --git a/apps/demo/public/llms.txt b/apps/demo/public/llms.txt
new file mode 100644
index 0000000..ddd9ac7
--- /dev/null
+++ b/apps/demo/public/llms.txt
@@ -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>
+```
+
+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)
diff --git a/apps/demo/public/robots.txt b/apps/demo/public/robots.txt
new file mode 100644
index 0000000..fe99225
--- /dev/null
+++ b/apps/demo/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://react-pixel-ui.vercel.app/sitemap.xml
diff --git a/apps/demo/public/sitemap.xml b/apps/demo/public/sitemap.xml
new file mode 100644
index 0000000..6f6b0c4
--- /dev/null
+++ b/apps/demo/public/sitemap.xml
@@ -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>