SEO (#1)

* canonical

* robots

* sitemap

* llms

* description should be longer

* make build work

* Update site/src/config.ts

Co-authored-by: Marc Bouchenoire <bouchenoire.marc@gmail.com>

---------

Co-authored-by: Marc Bouchenoire <bouchenoire.marc@gmail.com>

Author: CTNicholas

site/public/llms.txt

@@ -0,0 +1,72 @@
+# Frimousse
+
+A lightweight, unstyled, and composable emoji picker for React.
+
+- ⚡️ **Lightweight and fast**: Dependency-free, tree-shakable, and virtualized with minimal re-renders
+- 🎨 **Unstyled and composable**: Bring your own styles and compose parts as you want
+- 🔄 **Always up-to-date**: Latest emoji data is fetched when needed and cached locally
+- 🔣 **No � symbols**: Unsupported emojis are automatically hidden
+- ♿️ **Accessible**: Keyboard navigable and screen reader-friendly
+
+## Installation
+
+```bash
+npm i frimousse
+```
+
+If you are using [shadcn/ui](https://ui.shadcn.com/), you can also install it as a pre-built component via the [shadcn CLI](https://ui.shadcn.com/docs/cli).
+
+```bash
+npx shadcn@latest add https://frimousse.liveblocks.io/r/emoji-picker
+```
+
+Learn more in the [shadcn/ui](#shadcnui) section.
+
+## Usage
+
+Import the `EmojiPicker` parts and create your own component by composing them.
+
+```tsx
+import { EmojiPicker } from "frimousse";
+
+export function MyEmojiPicker() {
+  return (
+    <EmojiPicker.Root>
+      <EmojiPicker.Search />
+      <EmojiPicker.Viewport>
+        <EmojiPicker.Loading>Loading…</EmojiPicker.Loading>
+        <EmojiPicker.Empty>No emoji found.</EmojiPicker.Empty>
+        <EmojiPicker.List />
+      </EmojiPicker.Viewport>
+    </EmojiPicker.Root>
+  );
+}
+```
+
+Apart from a few sizing and overflow defaults, the parts don’t have any styles out-of-the-box. Being composable, you can bring your own styles and apply them however you want: [Tailwind CSS](https://tailwindcss.com/), CSS-in-JS, vanilla CSS via inline styles, classes, or by targeting the `[frimousse-*]` attributes present on each part.
+
+You might want to use it in a popover rather than on its own. Frimousse only provides the emoji picker itself so if you don’t have a popover component in your app yet, there are several libraries available: [Radix UI](https://www.radix-ui.com/primitives/docs/components/popover), [Base UI](https://base-ui.com/react/components/popover), [Headless UI](https://headlessui.com/react/popover), and [React Aria](https://react-spectrum.adobe.com/react-aria/Popover.html), to name a few.
+
+### shadcn/ui
+
+If you are using [shadcn/ui](https://ui.shadcn.com/), you can install a pre-built version which integrates with the existing shadcn/ui variables via the [shadcn CLI](https://ui.shadcn.com/docs/cli).
+
+```bash
+npx shadcn@latest add https://frimousse.liveblocks.io/r/emoji-picker
+```
+
+It can be composed and combined with other shadcn/ui components like [Popover](https://ui.shadcn.com/docs/components/popover).
+
+## Documentation
+
+Find the full documentation and examples on [frimousse.liveblocks.io](https://frimousse.liveblocks.io).
+
+## Miscellaneous
+
+The name [“frimousse”](https://en.wiktionary.org/wiki/frimousse) means “little face” in French, and it can also refer to smileys and emoticons.
+
+The emoji picker component was originally created for the [Liveblocks Comments](https://liveblocks.io/comments) default components, within [`@liveblocks/react-ui`](https://github.com/liveblocks/liveblocks/tree/main/packages/liveblocks-react-ui).
+
+## Credits
+
+The emoji data is based on [Emojibase](https://emojibase.dev/).

site/src/app/layout.tsx

@@ -8,6 +8,7 @@ import type { PropsWithChildren } from "react";
 import { Toaster } from "sonner";
 import { DynamicMaximumScaleMeta } from "./layout.client";
 import "./styles.css";
+import { config } from "@/config";
 
 const inter = localFont({
   src: "./inter-variable.woff2",
@@ -19,23 +20,15 @@ const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
 });
 
-const config = {
-  name: "Frimousse — An emoji picker for React",
-  url: "https://frimousse.liveblocks.io",
-  description:
-    "A lightweight, unstyled, and composable emoji picker for React.",
-  links: {
-    twitter: "https://x.com/liveblocks",
-    github: "https://github.com/liveblocks/frimousse",
-  },
-} as const;
-
 export const metadata: Metadata = {
   title: {
     default: config.name,
     template: `%s — ${config.name}`,
   },
   metadataBase: new URL(config.url),
+  alternates: {
+    canonical: "/",
+  },
   description: config.description,
   keywords: [
     "emoji",

site/src/app/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

site/src/app/sitemap.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from "next";
+import { config } from "@/config";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  "use cache";
+  return [
+    {
+      url: config.url,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+  ];
+}

site/src/config.ts

@@ -0,0 +1,10 @@
+export const config = {
+  name: "Frimousse — An emoji picker for React",
+  url: "https://frimousse.liveblocks.io",
+  description:
+    "Frimousse is an open-source, lightweight, unstyled, and composable emoji picker for React—originally created for Liveblocks Comments. Styles can be applied with CSS, Tailwind CSS, CSS-in-JS, and more.",
+  links: {
+    twitter: "https://x.com/liveblocks",
+    github: "https://github.com/liveblocks/frimousse",
+  },
+} as const;