SEO optimization

docs/pages/index.mdx

@@ -13,6 +13,10 @@ patterns in React.
 
 ## What is `react-slots` for
 
+**The slot pattern enables you to break down parent-provided content into
+multiple parts and instruct a component on where to render each part by placing
+slots.**
+
 The slot pattern works best for utility components within your design system.
 These components don't depend on any specific shape of data and work with
 primitives as much as possible. You can think of `react-slots` as a way to
@@ -691,3 +695,38 @@ Checkout
   If you like this project please show support by starring it on
   [Github](https://github.com/Flammae/react-slots)
 </Callout>
+
+```tsx
+type Props = {
+  // a function that renders content or just content;
+  summary: SlotProp;
+  // a function that receives isOpen and returns content or just content;
+  icon: SlotProp<{ isOpen: boolean }>;
+  // ... same as before
+  children: SlotChildren<Slot<{ isOpen: boolean }>>;
+};
+
+function Accordion(props: Props) {
+  const { slot } = useSlot({
+    summary: props.summary,
+    icon: props.icon,
+    children: props.children,
+  });
+
+  return (
+    <div>
+      <h1>
+        <slot.summary />
+        <slot.icon isOpen={true} />
+      </h1>
+      <h1>
+        <slot.default isOpen={true} />
+      </h1>
+    </div>
+  );
+}
+
+<Accordion summary="summary" icon={"<"}>
+  content
+</Accordion>;
+```

docs/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "beqa/react-slots",
+  "short_name": "React Slots",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

docs/theme.config.tsx

@@ -35,22 +35,51 @@ const config: DocsThemeConfig = {
   docsRepositoryBase: "https://github.com/Flammae/react-slots/tree/main/docs",
   head: () => {
     return (
-      <link
-        rel="icon"
-        type="image/x-icon"
-        href="logo-sm-black-white.png"
-      ></link>
+      <>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+      </>
     );
   },
 
   useNextSeoProps() {
     const { asPath } = useRouter();
     console.log("asPath", asPath);
-    if (asPath !== "/") {
-      return {
-        titleTemplate: "%s – @beqa/react-slots",
-      };
-    }
+
+    let titleTemplate =
+      asPath === "/"
+        ? "%s"
+        : asPath.startsWith("/tutorial")
+        ? "%s – Tutorial – beqa/react-slots"
+        : asPath.startsWith("/advanced")
+        ? "%s – Advanced Use – beqa/react-slots"
+        : "%s – beqa/react-slots";
+
+    return {
+      defaultTitle: "beqa/react-slots",
+      titleTemplate,
+      description:
+        asPath === "/"
+          ? "beqa/react-slots is the most feature-complete slot implementation in React. It enables you to break down parent-provided content into multiple parts and instruct a component on where to render each part by placing slots."
+          : undefined,
+      canonical: "https://slots.beqa.site",
+    };
   },
 };