fix: update metadata tags in head

get rid of "Nextra: the next docs builder" and other rough edges. doesn't set a preview image, as link previews with a giant redundant image are uncool. When we have time to make custom images per page, then maaaaybe i'll allow it. License: MIT Signed-off-by: Oli Evans <[email protected]>
storacha · Jan 16, 2024 · 4374cbe · 4374cbe
1 parent 05c0d29
commit 4374cbe
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 16 deletions.
diff --git a/src/pages/docs/index.mdx b/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).

diff --git a/src/theme.config.jsx b/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