fix: update metadata tags in head

package.json

@@ -27,6 +27,7 @@
     "eslint-config-next": "14.0.1",
     "postcss": "^8",
     "remark-cli": "^12.0.0",
+    "remark-frontmatter": "^5.0.0",
     "remark-lint-fenced-code-flag": "^3.1.2",
     "remark-lint-first-heading-level": "^3.1.2",
     "remark-lint-heading-increment": "^3.1.2",
@@ -46,6 +47,7 @@
       "rule": "-"
     },
     "plugins": [
+      "remark-frontmatter",
       "remark-preset-lint-consistent",
       "remark-preset-lint-recommended",
       "remark-lint-fenced-code-flag",

src/pages/docs/index.mdx

@@ -1,3 +1,7 @@
+---
+title: docs
+---
+
 import { Cards, Card } from 'nextra/components'
 
 **Under the hood** web3.storage uses [UCANs](https://github.com/ucan-wg/spec) for trustless, local-first authorization, and is backed by the provable storage of [IPFS](https://docs.ipfs.tech/) and [Filecoin](https://docs.filecoin.io/basics/what-is-filecoin).

src/theme.config.jsx

@@ -1,28 +1,77 @@
+import { useConfig } from 'nextra-theme-docs'
 import { DocsLogo } from './components/brand'
 
-const config = {
+/**
+ * @type {import('nextra-theme-docs').DocsThemeConfig}
+ */
+export default {
   logo: <DocsLogo>web3.storage/<span className='font-bold'>docs</span></DocsLogo>,
+  primaryHue: {
+    dark: 192,
+    light: 200
+  },
+  primarySaturation: 100,
   project: {
     link: 'https://github.com/web3-storage/w3up'
   },
   docsRepositoryBase: 'https://github.com/web3-storage/www/tree/main',
+  footer: {
+    component: <footer className='py-6 text-center text-lg'></footer>
+  },
+  head: <></>,
   useNextSeoProps() {
+    const { frontMatter } = useConfig()
     return {
-      titleTemplate: '%s ⁂ web3.storage'
+      titleTemplate: '%s ⁂ web3.storage',
+      description: frontMatter.description || 'Learn how to use web3.storage to decentralize your data storage',
+      additionalMetaTags: [
+        { content: 'en', httpEquiv: 'Content-Language' },
+        { name: 'apple-mobile-web-app-title', content: 'web3.storage/docs' },
+        { name: 'msapplication-TileColor', content: '#fff' },
+        { name: 'msapplication-TileImage', content: '/app-icon.svg' }
+      ],
+      openGraph: {
+        // set when we have a nice preview image. No image more chill tho, so dont rush./
+        // images: [
+        //   { url: frontMatter.image || 'https://web3.storage/social-card-web3storage.jpg' }
+        // ]
+      },
+      twitter: {
+        cardType: 'summary',
+        site: '@web3_storage'
+      },
+      additionalLinkTags: [
+        {
+          href: '/apple-touch-icon.png',
+          rel: 'apple-touch-icon',
+          sizes: '180x180'
+        },
+        {
+          href: '/android-chrome-192x192.png',
+          rel: 'icon',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          href: '/android-chrome-512x512.png',
+          rel: 'icon',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          href: '/favicon-32x32.png',
+          rel: 'icon',
+          sizes: '32x32',
+          type: 'image/png'
+        },
+        {
+          href: '/favicon-16x16.png',
+          rel: 'icon',
+          sizes: '16x16',
+          type: 'image/png'
+        }
+      ],
     }
-  },
-  footer: {
-    component: (
-      <footer className='py-6 text-center text-lg'>
-
-      </footer>
-    )
-  },
-  primaryHue: {
-    dark: 192,
-    light: 200
-  },
-  primarySaturation: 100,
+  }
 }
 
-export default config