Fix/web 615 seo setup (#5257)

* + add header into Packet Mixing docs

* + add head changes for testing

* / updated version of metatags in theme.config

* + add env file

* / theme.config to use NEXT_PUBLIC_SITE_URL from env file

* @ Fix broken link in theme.config

* - remove favicon code

* + add desription for intro pages

documentation/docs/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_SITE_URL=http://localhost:3000

documentation/docs/.gitignore

@@ -4,3 +4,7 @@ out
 
 # the lock file will break Vercel because it may get committed from a machine with a different build architecture
 package-lock.json
+
+# local env files
+.env*.local
+.env

documentation/docs/pages/apis/introduction.mdx

@@ -1,3 +1,7 @@
+---
+description: Interactive APIs generated from the OpenAPI specs of various API endpoints offered by bits of Nym infrastructure run both by Nym and community operators for both Mainnet and the Sandbox testnet.
+---
+
 # Introduction
 
 This site contains interactive APIs generated from the OpenAPI specs of various API endpoints offered by bits of Nym infrastructure run both by Nym and community operators for both Mainnet and the Sandbox testnet.

documentation/docs/pages/developers/index.mdx

@@ -1,3 +1,7 @@
+---
+description: Nym's developer documentation covering core concepts of integrating with the Mixnet, interacting with the Nyx blockchain, an overview of the avaliable tools, and our SDK docs.
+---
+
 # Introduction
 Nym's developer documentation covering core concepts of integrating with the Mixnet, interacting with the Nyx blockchain, an overview of the avaliable tools, and our SDK docs.
 

documentation/docs/pages/network/concepts/mixing.mdx

@@ -1,3 +1,8 @@
+---
+title: Packet Mixing
+description: Mixnets are networks of nodes that route traffic in a way that makes it untraceable
+---
+
 # Packet Mixing
 
 > Continuous-time mixing strategies ... delay each message independently, forwarding it to its next destination once a specified delay has timed out. The aggregate effect of independently delaying each message is an output sequence of messages that is randomly reordered with respect to the input sequence.

documentation/docs/pages/network/index.md

@@ -1,3 +1,7 @@
+---
+description: Nym's network documentation covering network architecture, node types, tokenomics, and cryptography.
+---
+
 # Introduction
 Nym's network documentation covering network architecture, node types, tokenomics, and crypto systems.
 

documentation/docs/pages/operators/introduction.mdx

@@ -1,3 +1,7 @@
+---
+description: Nym's Operators guide containing information and setup guides for the various components of Nym network and Nyx blockchain validators.
+---
+
 # Introduction
 
 This is **Nym's Operators guide**, containing information and setup guides for the various components of Nym network and Nyx blockchain validators.

documentation/docs/theme.config.tsx

@@ -1,14 +1,46 @@
 import React from "react";
-import { DocsThemeConfig } from "nextra-theme-docs";
+import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 import { Footer } from "./components/footer";
 import { Matrix } from "./components/matrix-link";
 import { useRouter } from "next/router";
 
 const config: DocsThemeConfig = {
-  useNextSeoProps() {
-    return {
-      titleTemplate: "%s – Nym Docs",
-    };
+  head: function useHead() {
+    const config = useConfig()
+    const { route } = useRouter()
+    const url = process.env.NEXT_PUBLIC_SITE_URL
+    const image = url + '/nym_logo.jpg'
+
+    const description =
+      config.frontMatter.description ||
+      'Nym is a privacy platform. It provides strong network-level privacy against sophisticated end-to-end attackers, and anonymous access control using blinded, re-randomizable, decentralized credentials.'
+    const title = config.title + (route === '/' ? '' : ' - Nym docs')
+
+    return (
+      <>
+        <title>{title}</title>
+        <meta name="author" content="Nym" />
+        <link rel="canonical" href={url + route} />
+
+        <meta property="og:title" content={title} />
+        <meta property="og:site_name" content="Nym docs"></meta>
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={url + route}></meta>
+
+        <meta property="twitter:title" content={title}></meta>
+        <meta property="twitter:description" content={description}></meta>
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta property="twitter:image" content={image}></meta>
+        <meta name="twitter:site" content="@nymproject" />
+        <meta name="twitter:site:domain" content={url} />
+        <meta name="twitter:url" content={url + route} />
+
+        <meta name="apple-mobile-web-app-title" content="Nym docs" />
+      </>
+    )
   },
   logo: <span>Nym Docs</span>,
   project: {