docs: migrate from VuePress 1.4 to Docusaurus 3.6 (#8078)

Migrate docs from VuePress wich is not maintained anymore, to Docusaurus, which is maintained and also used fro XCP-ng docs.

---------

Co-authored-by: Thomas Moraine <thomas.moraine@vates.tech>

docs/src/css/custom.css

@@ -0,0 +1,55 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #be1621;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #8e83fe;
+  --ifm-color-primary-dark: #5952a3;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-background-color);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-focus-background: var(--ifm-color-black);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: rgb(37, 37, 37);
+  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-key-gradient: linear-gradient(
+    -26.5deg,
+    var(--ifm-color-emphasis-200) 0%,
+    var(--ifm-color-emphasis-100) 100%
+  );
+}
+
+.hidden {
+  display: none;
+}

docs/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

docs/src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import clsx from 'clsx'
+import Translate from '@docusaurus/Translate'
+import type { Props } from '@theme/NotFound/Content'
+import Heading from '@theme/Heading'
+
+export default function NotFoundContent({ className }: Props): JSX.Element {
+  return (
+    <main className={clsx('container margin-vert--xl', className)}>
+      <div className='row'>
+        <div className='col col--6 col--offset-3'>
+          <Heading as='h1' className='hero__title'>
+            <Translate id='theme.NotFound.title' description='The title of the 404 page'>
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p>
+            <Translate id='theme.NotFound.p1' description='The first paragraph of the 404 page'>
+              We're sorry, but we couldn’t find the page you were looking for.
+            </Translate>
+          </p>
+          <p>
+            <Translate id='theme.NotFound.p2' description='The 2nd paragraph of the 404 page'>
+              Please contact the owner of the site that linked you to the original URL and let them know their link is
+              broken.
+            </Translate>
+          </p>
+          <p>
+            <a href='/'>Return to Homepage</a>
+          </p>
+        </div>
+      </div>
+    </main>
+  )
+}

docs/src/theme/NotFound/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { translate } from '@docusaurus/Translate'
+import { PageMetadata } from '@docusaurus/theme-common'
+import Layout from '@theme/Layout'
+import NotFoundContent from '@theme/NotFound/Content'
+
+export default function Index(): JSX.Element {
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  })
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  )
+}