docs: update docs site Head config

apps/docs/public/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Puck",
+  "short_name": "Pck",
+  "icons": [
+    {
+      "src": "/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/maskable_icon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#111",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/docs/theme.config.tsx

@@ -8,36 +8,63 @@ import { Viewport } from "./components/Viewport";
 
 const Head = () => {
   const { asPath, defaultLocale, locale } = useRouter();
-  const config = useConfig();
+  const { frontMatter, title } = useConfig();
+
+  const siteUrl = "https://puckeditor.com";
   const url =
-    "https://puckeditor.com" +
-    (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
+    siteUrl + (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
 
-  const defaultDescription =
-    "Puck empowers developers to build amazing visual editing experiences into their own React applications, powering the next generation of content tools.";
+  const defaultTitle = `Puck - The open-source visual editor for React`;
+  const description =
+    frontMatter.description ||
+    `Puck empowers developers to build amazing visual editing experiences into their own React applications, powering the next generation of content tools.`;
 
   return (
     <>
+      <link rel="canonical" href={`${siteUrl}${asPath}`} />
       <meta property="og:url" content={url} />
-      <meta
-        property="description"
-        content={config.frontMatter.description || defaultDescription}
-      />
-      <meta
-        property="og:description"
-        content={config.frontMatter.description || defaultDescription}
-      />
+      <meta property="description" content={description} />
+      <meta property="og:description" content={description} />
       <meta property="og:type" content="website" />
-      <meta property="og:image" content="https://puckeditor.com/social.png" />
+      <meta property="og:image" content={`${siteUrl}/social.png`} />
       <meta property="og:image:height" content="675" />
       <meta property="og:image:width" content="1200" />
-      <meta name="image" content="https://puckeditor.com/social.png" />
-      <meta itemProp="image" content="https://puckeditor.com/social.png" />
+      <meta property="og:image:alt" content="Puck" />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:locale" content="en" />
+      <meta property="og:site_name" content={defaultTitle} />
+      <meta name="image" content={`${siteUrl}/social.png`} />
+      <meta itemProp="image" content={`${siteUrl}/social.png`} />
       <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="https://puckeditor.com/social.png" />
+      <meta name="twitter:image" content={`${siteUrl}/social.png`} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image:alt" content="Puck" />
+      <meta name="twitter:image:height" content="675" />
+      <meta name="twitter:image:type" content="image/png" />
+      <meta name="twitter:image:width" content="1200" />
+      <meta name="twitter:site" content="@puckeditor" />
+      <meta
+        name="twitter:title"
+        content={title !== defaultTitle ? `${title} - Puck` : defaultTitle}
+      />
 
-      <link rel="icon" href="/favicon.png" type="image/png" />
+      <link rel="icon" href="/favicon.ico" sizes="48x48" />
       <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+      <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      <link rel="manifest" href="/manifest.webmanifest" />
+      {asPath == "/" && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: `${JSON.stringify({
+              "@context": "https://schema.org",
+              "@type": "WebSite",
+              name: "Puck",
+              url: siteUrl,
+            })}`,
+          }}
+        />
+      )}
     </>
   );
 };