docs: enable ga and cookie banner (#1986)

docs/docusaurus.config.js

@@ -22,8 +22,12 @@ async function createConfig() {
     organizationName: 'Edgeless Systems', // Usually your GitHub org/user name.
     projectName: 'Constellation', // Usually your repo name.
 
-    // plausible
-    scripts: [{ src: 'https://plausible.io/js/plausible.js', async: true, defer: true, 'data-domain': 'docs.edgeless.systems' }],
+    // scripts
+    scripts: [
+      { src: 'https://plausible.io/js/plausible.js', async: true, defer: true, 'data-domain': 'docs.edgeless.systems' },
+      { id: "Cookiebot", src: "https://consent.cookiebot.com/uc.js", "data-cbid": "a0cc864f-0b67-49be-8d65-9ed354de2ee6", "data-blockingmode": "auto" },
+      { id: "CookieDeclaration", src: "https://consent.cookiebot.com/a0cc864f-0b67-49be-8d65-9ed354de2ee6/cd.js" }
+    ],
 
     // Even if you don't use internalization, you can use this field to set useful
     // metadata like html lang. For example, if your site is Chinese, you may want
@@ -39,30 +43,32 @@ async function createConfig() {
         /** @type {import('@docusaurus/preset-classic').Options} */
         ({
           docs: {
-            remarkPlugins: [[mdxMermaid.default, { mermaid: {
-              theme: 'base',
-              themeVariables: {
-                // general
-                'fontFamily': '"Open Sans", sans-serif',
-                'primaryColor': '#90FF99', // edgeless green
-                'primaryTextColor': '#000000',
-                'secondaryColor': '#A5A5A5', // edgeless grey
-                'secondaryTextColor': '#000000',
-                'tertiaryColor': '#E7E6E6', // edgeless light grey
-                'tertiaryTextColor': '#000000',
-                // flowchart
-                'clusterBorder': '#A5A5A5',
-                'clusterBkg': '#ffffff',
-                'edgeLabelBackground': '#ffffff',
-                // sequence diagram
-                'activationBorderColor': '#000000',
-                'actorBorder': '#A5A5A5',
-                'actorFontFamily': '"Open Sans", sans-serif', // not released by mermaid yet
-                'noteBkgColor': '#8B04DD', // edgeless purple
-                'noteTextColor': '#ffffff',
-              },
-              startOnLoad: true
-            }}]],
+            remarkPlugins: [[mdxMermaid.default, {
+              mermaid: {
+                theme: 'base',
+                themeVariables: {
+                  // general
+                  'fontFamily': '"Open Sans", sans-serif',
+                  'primaryColor': '#90FF99', // edgeless green
+                  'primaryTextColor': '#000000',
+                  'secondaryColor': '#A5A5A5', // edgeless grey
+                  'secondaryTextColor': '#000000',
+                  'tertiaryColor': '#E7E6E6', // edgeless light grey
+                  'tertiaryTextColor': '#000000',
+                  // flowchart
+                  'clusterBorder': '#A5A5A5',
+                  'clusterBkg': '#ffffff',
+                  'edgeLabelBackground': '#ffffff',
+                  // sequence diagram
+                  'activationBorderColor': '#000000',
+                  'actorBorder': '#A5A5A5',
+                  'actorFontFamily': '"Open Sans", sans-serif', // not released by mermaid yet
+                  'noteBkgColor': '#8B04DD', // edgeless purple
+                  'noteTextColor': '#ffffff',
+                },
+                startOnLoad: true
+              }
+            }]],
             sidebarPath: require.resolve('./sidebars.js'),
             // sidebarPath: 'sidebars.js',
             // Please change this to your repo.
@@ -74,6 +80,10 @@ async function createConfig() {
           theme: {
             customCss: require.resolve('./src/css/custom.css'),
           },
+          gtag: {
+            trackingID: 'G-3DVYB2CHLG',
+            anonymizeIP: true,
+          }
         }),
       ],
     ],
@@ -160,7 +170,7 @@ async function createConfig() {
               items: [
                 {
                   label: 'Blog',
-                  to: 'https://blog.edgeless.systems/',
+                  href: 'https://blog.edgeless.systems/',
                 },
                 {
                   label: 'Twitter',
@@ -177,6 +187,27 @@ async function createConfig() {
                 },
               ],
             },
+            {
+              title: 'Company',
+              items: [
+                {
+                  label: 'Imprint',
+                  href: 'https://www.edgeless.systems/imprint',
+                },
+                {
+                  label: 'Privacy Policy',
+                  href: 'https://www.edgeless.systems/privacy',
+                },
+                {
+                  html: `<a href="javascript: Cookiebot.renew()" class="footer__link-item">Cookie Settings</a>`
+                },
+
+                {
+                  label: 'Contact Us',
+                  href: 'https://www.edgeless.systems/contact/',
+                },
+              ],
+            },
           ],
           copyright: `Copyright © ${new Date().getFullYear()} Edgeless Systems`,
         },

docs/package.json

@@ -17,6 +17,7 @@
     "@cmfcmf/docusaurus-search-local": "^1.0.0",
     "@docusaurus/core": "^2.2.0",
     "@docusaurus/module-type-aliases": "^2.2.0",
+    "@docusaurus/plugin-google-gtag": "^2.4.1",
     "@docusaurus/preset-classic": "^2.2.0",
     "@mdx-js/react": "^1.6.22",
     "asciinema-player": "^3.0.1",