Migrate from vuepress to vitepress for docs site

2025-10-31 15:53:33 +00:00 · 2024-05-10 23:00:27 +10:00
parent 79cd0c5294
commit 47dddc548b
39 changed files with 1098 additions and 4686 deletions
--- a/4
+++ b/4
@@ -92,8 +92,8 @@ pipeline {
 							sh 'yarn install'
 							sh 'yarn build'
 						}
-						dir(path: 'docs/.vuepress/dist') {
-							sh 'tar -czf ../../docs.tgz *'
+						dir(path: 'docs/dist') {
+							sh 'tar -czf ../docs.tgz *'
 						}
 						archiveArtifacts(artifacts: 'docs/docs.tgz', allowEmptyArchive: false)
 					}
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,8 +1,9 @@
-.vuepress/dist
+dist
 node_modules
 ts
 .temp
 .cache
+.vitepress/cache

 .yarn/*
 !.yarn/releases
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,61 @@
+import { defineConfig, type DefaultTheme } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+	title: "Nginx Proxy Manager",
+	description: "Expose your services easily and securely",
+	head: [
+		["link", { rel: "icon", href: "/icon.png" }],
+		["meta", { name: "description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt" }],
+		["meta", { property: "og:title", content: "Nginx Proxy Manager" }],
+		["meta", { property: "og:description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt"}],
+		["meta", { property: "og:type", content: "website" }],
+		["meta", { property: "og:url", content: "https://nginxproxymanager.com/" }],
+		["meta", { property: "og:image", content: "https://nginxproxymanager.com/icon.png" }],
+		["meta", { name: "twitter:card", content: "summary"}],
+		["meta", { name: "twitter:title", content: "Nginx Proxy Manager"}],
+		["meta", { name: "twitter:description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt"}],
+		["meta", { name: "twitter:image", content: "https://nginxproxymanager.com/icon.png"}],
+		["meta", { name: "twitter:alt", content: "Nginx Proxy Manager"}],
+		// GA
+		['script', { async: 'true', src: 'https://www.googletagmanager.com/gtag/js?id=G-TXT8F5WY5B'}],
+		['script', {}, "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-TXT8F5WY5B');"],
+	],
+	sitemap: {
+		hostname: 'https://nginxproxymanager.com'
+	},
+	metaChunk: true,
+	srcDir: './src',
+	outDir: './dist',
+	themeConfig: {
+		// https://vitepress.dev/reference/default-theme-config
+		logo: { src: '/logo.svg', width: 24, height: 24 },
+		nav: [
+			{ text: 'Setup', link: '/setup/' },
+		],
+		sidebar: [
+			{
+				items: [
+					// { text: 'Home', link: '/' },
+					{ text: 'Guide', link: '/guide/' },
+					{ text: 'Screenshots', link: '/screenshots/' },
+					{ text: 'Setup Instructions', link: '/setup/' },
+					{ text: 'Advanced Configuration', link: '/advanced-config/' },
+					{ text: 'Upgrading', link: '/upgrading/' },
+					{ text: 'Frequently Asked Questions', link: '/faq/' },
+					{ text: 'Third Party', link: '/third-party/' },
+				]
+			}
+		],
+		socialLinks: [
+			{ icon: 'github', link: 'https://github.com/NginxProxyManager/nginx-proxy-manager' }
+		],
+		search: {
+			provider: 'local'
+		},
+		footer: {
+			message: 'Released under the MIT License.',
+			copyright: 'Copyright © 2016-present jc21.com'
+		}
+	}
+});
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,27 @@
+:root {
+	--vp-home-hero-name-color: transparent;
+	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #f15833 30%, #FAA42F);
+
+	--vp-home-hero-image-background-image: linear-gradient(-45deg, #aaaaaa 50%, #777777 50%);
+	--vp-home-hero-image-filter: blur(44px);
+
+	--vp-c-brand-1: #f15833;
+	--vp-c-brand-2: #FAA42F;
+	--vp-c-brand-3: #f15833;
+}
+
+  @media (min-width: 640px) {
+	:root {
+		--vp-home-hero-image-filter: blur(56px);
+	}
+}
+
+  @media (min-width: 960px) {
+	:root {
+		--vp-home-hero-image-filter: blur(68px);
+	}
+}
+
+.inline-img img {
+	display: inline;
+}
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,120 +0,0 @@
-import { defineUserConfig } from 'vuepress';
-import { defaultTheme } from 'vuepress'
-import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics';
-import { searchPlugin } from '@vuepress/plugin-search'
-import { sitemapPlugin } from 'vuepress-plugin-sitemap2';
-import zoomingPlugin from 'vuepress-plugin-zooming';
-
-export default defineUserConfig({
-  locales: {
-    "/": {
-      lang: "en-US",
-      title: "Nginx Proxy Manager",
-      description: "Expose your services easily and securely",
-    },
-  },
-  head: [
-    ["link", { rel: "icon", href: "/icon.png" }],
-    ["meta", { name: "description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt" }],
-    ["meta", { property: "og:title", content: "Nginx Proxy Manager" }],
-    ["meta", { property: "og:description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt"}],
-    ["meta", { property: "og:type", content: "website" }],
-    ["meta", { property: "og:url", content: "https://nginxproxymanager.com/" }],
-    ["meta", { property: "og:image", content: "https://nginxproxymanager.com/icon.png" }],
-    ["meta", { name: "twitter:card", content: "summary"}],
-    ["meta", { name: "twitter:title", content: "Nginx Proxy Manager"}],
-    ["meta", { name: "twitter:description", content: "Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt"}],
-    ["meta", { name: "twitter:image", content: "https://nginxproxymanager.com/icon.png"}],
-    ["meta", { name: "twitter:alt", content: "Nginx Proxy Manager"}],
-  ],
-  theme: defaultTheme({
-    logo: '/icon.png',
-    repo: "jc21/nginx-proxy-manager",
-    docsRepo: 'https://github.com/jc21/nginx-proxy-manager',
-    docsBranch: 'develop',
-    docsDir: 'docs',
-    editLinkPattern: ':repo/edit/:branch/:path',
-    locales: {
-      '/': {
-        label: 'English',
-        selectLanguageText: 'Languages',
-        selectLanguageName: 'English',
-        editLinkText: 'Edit this page on GitHub',
-        navbar: [
-          { text: 'Setup', link: '/setup/' }
-        ],
-        sidebar: {
-          '/': [
-            {
-              text: 'Home',
-              link: '/'
-            },
-            { 
-              text: 'Guide',
-              link: '/guide/',
-              collapsible: true,
-            },
-            {
-              text: 'Screenshots',
-              link:  '/screenshots/',
-              collapsible: true,
-            },
-            {
-              text: 'Setup Instructions',
-              link: '/setup/',
-              collapsible: true,
-            },
-            {
-              text: 'Advanced Configuration',
-              link: '/advanced-config/',
-              collapsible: true,
-            },
-            {
-              text: 'Upgrading',
-              link: '/upgrading/',
-              collapsible: true,
-            },
-            {
-              text: 'Frequently Asked Questions',
-              link: '/faq/',
-              collapsible: true,
-            },
-            {
-              text: 'Third Party',
-              link: '/third-party/',
-              collapsible: true,
-            },
-          ],
-        },
-      }
-    }
-  }),
-  markdown: {
-    code: {
-      lineNumbers: false,
-    },
-  },
-  plugins: [
-    googleAnalyticsPlugin({
-      id: 'UA-99675467-4'
-    }),
-    sitemapPlugin({
-      hostname: "https://nginxproxymanager.com",
-    }),
-    zoomingPlugin({
-      selector: '.zooming',
-      delay: 1000,
-      options: {
-        bgColor: 'black',
-        zIndex: 10000,
-      },
-    }),
-    searchPlugin({
-      locales: {
-        '/': {
-          placeholder: 'Search',
-        },
-      },
-    }),
-  ],
-});
--- a/docs/.vuepress/public/logo.png
+++ b/docs/.vuepress/public/logo.png
--- a/docs/.vuepress/public/nerd-font.woff2
+++ b/docs/.vuepress/public/nerd-font.woff2
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -1,258 +0,0 @@
-:root {
-  // brand colors
-  --c-brand: #f15833;
-  --c-brand-light: #f15833;
-
-  // background colors
-  --c-bg: #ffffff;
-  --c-bg-light: #f3f4f5;
-  --c-bg-lighter: #eeeeee;
-  --c-bg-dark: #ebebec;
-  --c-bg-darker: #e6e6e6;
-  --c-bg-navbar: var(--c-bg);
-  --c-bg-sidebar: var(--c-bg);
-  --c-bg-arrow: #cccccc;
-
-  // text colors
-  --c-text: #663015;
-  --c-text-accent: var(--c-brand);
-  --c-text-light: #863f1c;
-  --c-text-lighter: #b65626;
-  --c-text-lightest: #f15833;
-  --c-text-quote: #999999;
-
-  // border colors
-  --c-border: #eaecef;
-  --c-border-dark: #dfe2e5;
-
-  // custom container colors
-  --c-tip: #42b983;
-  --c-tip-bg: var(--c-bg-light);
-  --c-tip-title: var(--c-text);
-  --c-tip-text: var(--c-text);
-  --c-tip-text-accent: var(--c-text-accent);
-  --c-warning: #ffc310;
-  --c-warning-bg: #fffae3;
-  --c-warning-bg-light: #fff3ba;
-  --c-warning-bg-lighter: #fff0b0;
-  --c-warning-border-dark: #f7dc91;
-  --c-warning-details-bg: #fff5ca;
-  --c-warning-title: #f1b300;
-  --c-warning-text: #746000;
-  --c-warning-text-accent: #edb100;
-  --c-warning-text-light: #c1971c;
-  --c-warning-text-quote: #ccab49;
-  --c-danger: #f11e37;
-  --c-danger-bg: #ffe0e0;
-  --c-danger-bg-light: #ffcfde;
-  --c-danger-bg-lighter: #ffc9c9;
-  --c-danger-border-dark: #f1abab;
-  --c-danger-details-bg: #ffd4d4;
-  --c-danger-title: #ed1e2c;
-  --c-danger-text: #660000;
-  --c-danger-text-accent: #bd1a1a;
-  --c-danger-text-light: #b5474d;
-  --c-danger-text-quote: #c15b5b;
-  --c-details-bg: #eeeeee;
-
-  // badge component colors
-  --c-badge-tip: var(--c-tip);
-  --c-badge-warning: #ecc808;
-  --c-badge-warning-text: var(--c-bg);
-  --c-badge-danger: #dc2626;
-  --c-badge-danger-text: var(--c-bg);
-
-  // transition vars
-  --t-color: 0.3s ease;
-  --t-transform: 0.3s ease;
-
-  // code blocks vars
-  --code-bg-color: #282c34;
-  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
-  --code-ln-color: #9e9e9e;
-  --code-ln-wrapper-width: 3.5rem;
-
-  // font vars
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-
-  // layout vars
-  --navbar-height: 3.6rem;
-  --navbar-padding-v: 0.7rem;
-  --navbar-padding-h: 1.5rem;
-  --sidebar-width: 20rem;
-  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
-  --content-width: 740px;
-  --homepage-width: 960px;
-}
-
-html.dark {
-  // brand colors
-  --c-brand: #f15833;
-  --c-brand-light: #f15833;
-
-  // background colors
-  --c-bg: #22272e;
-  --c-bg-light: #2b313a;
-  --c-bg-lighter: #262c34;
-  --c-bg-dark: #343b44;
-  --c-bg-darker: #37404c;
-
-  // text colors
-  --c-text: #adbac7;
-  --c-text-light: #96a7b7;
-  --c-text-lighter: #8b9eb0;
-  --c-text-lightest: #8094a8;
-
-  // border colors
-  --c-border: #3e4c5a;
-  --c-border-dark: #34404c;
-
-  // custom container colors
-  --c-tip: #318a62;
-  --c-warning: #e0ad15;
-  --c-warning-bg: #2d2f2d;
-  --c-warning-bg-light: #423e2a;
-  --c-warning-bg-lighter: #44442f;
-  --c-warning-border-dark: #957c35;
-  --c-warning-details-bg: #39392d;
-  --c-warning-title: #fdca31;
-  --c-warning-text: #d8d96d;
-  --c-warning-text-accent: #ffbf00;
-  --c-warning-text-light: #ddb84b;
-  --c-warning-text-quote: #ccab49;
-  --c-danger: #fc1e38;
-  --c-danger-bg: #39232c;
-  --c-danger-bg-light: #4b2b35;
-  --c-danger-bg-lighter: #553040;
-  --c-danger-border-dark: #a25151;
-  --c-danger-details-bg: #482936;
-  --c-danger-title: #fc2d3b;
-  --c-danger-text: #ea9ca0;
-  --c-danger-text-accent: #fd3636;
-  --c-danger-text-light: #d9777c;
-  --c-danger-text-quote: #d56b6b;
-  --c-details-bg: #323843;
-
-  // badge component colors
-  --c-badge-warning: var(--c-warning);
-  --c-badge-warning-text: #3c2e05;
-  --c-badge-danger: var(--c-danger);
-  --c-badge-danger-text: #401416;
-
-  // code blocks vars
-  --code-hl-bg-color: #363b46;
-}
-
-
-// plugin-back-to-top
-.back-to-top {
-  --back-to-top-color: var(--c-brand);
-  --back-to-top-color-hover: var(--c-brand-light);
-}
-
-// plugin-docsearch
-.DocSearch {
-  --docsearch-primary-color: var(--c-brand);
-  --docsearch-text-color: var(--c-text);
-  --docsearch-highlight-color: var(--c-brand);
-  --docsearch-muted-color: var(--c-text-quote);
-  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-  --docsearch-modal-background: var(--c-bg-light);
-  --docsearch-searchbox-background: var(--c-bg-lighter);
-  --docsearch-searchbox-focus-background: var(--c-bg);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
-  --docsearch-hit-color: var(--c-text-light);
-  --docsearch-hit-active-color: var(--c-bg);
-  --docsearch-hit-background: var(--c-bg);
-  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
-  --docsearch-footer-background: var(--c-bg);
-}
-
-// dark plugin-docsearch
-html.dark .DocSearch {
-  --docsearch-logo-color: var(--c-text);
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
-    0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
-    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-}
-
-// plugin-external-link-icon
-.external-link-icon {
-  --external-link-icon-color: var(--c-text-quote);
-}
-
-// plugin-medium-zoom
-.medium-zoom-overlay {
-  --medium-zoom-bg-color: var(--c-bg);
-}
-
-// plugin-nprogress
-#nprogress {
-  --nprogress-color: var(--c-brand);
-}
-
-// plugin-pwa-popup
-.pwa-popup {
-  --pwa-popup-text-color: var(--c-text);
-  --pwa-popup-bg-color: var(--c-bg);
-  --pwa-popup-border-color: var(--c-brand);
-  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
-  --pwa-popup-btn-text-color: var(--c-bg);
-  --pwa-popup-btn-bg-color: var(--c-brand);
-  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
-}
-
-// plugin-search
-.search-box {
-  --search-bg-color: var(--c-bg);
-  --search-accent-color: var(--c-brand);
-  --search-text-color: var(--c-text);
-  --search-border-color: var(--c-border);
-
-  --search-item-text-color: var(--c-text-lighter);
-  --search-item-focus-bg-color: var(--c-bg-light);
-}
-
-.home .hero img {
-  max-width: 500px !important;
-  height: 100%;
-  width: 100%
-}
-
-.center {
-  margin: 0 auto;
-  width: 80%
-}
-
-#main-title {
-  display: none
-}
-
-.center {
-  margin: 0 auto;
-  width: 80%;
-}
-
-#main-title {
-  display: none;
-}
-
-.hero {
-  margin: 150px 25px 70px;
-}
-
-@font-face {
-  font-family: 'Nerd Font';
-  src: url("/nerd-font.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-code {
-  font-family: 'Nerd Font', source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
--- a/docs/.yarn/releases/yarn-4.0.2.cjs
+++ b/docs/.yarn/releases/yarn-4.0.2.cjs
--- a/docs/.yarnrc.yml
+++ b/docs/.yarnrc.yml
@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,41 +0,0 @@
---
-home: true
-heroImage: /logo.png
-actions:
-  - text: Get Started
-    link: /guide/
-    type: primary
-footer: MIT Licensed | Copyright © 2016-present jc21.com
---
-
-<div class="features">
-  <div class="feature">
-    <h2>Get Connected</h2>
-    <p>
-      Expose web services on your network &middot;
-      Free SSL with Let's Encrypt  &middot;
-      Designed with security in mind  &middot;
-      Perfect for home networks
-    </p>
-  </div>
-  <div class="feature">
-    <h2>Proxy Hosts</h2>
-    <p>Expose your private network Web services and get connected anywhere.</p>
-  </div>
-  <div class="feature">
-    <h2>Beautiful UI</h2>
-    <p>Based on Tabler, the interface is a pleasure to use. Configuring a server has never been so fun.</p>
-  </div>
-  <div class="feature">
-    <h2>Free SSL</h2>
-    <p>Built in Let’s Encrypt support allows you to secure your Web services at no cost to you. The certificates even renew themselves!</p>
-  </div>
-  <div class="feature">
-    <h2>Docker FTW</h2>
-    <p>Built as a Docker Image, Nginx Proxy Manager only requires a database.</p>
-  </div>
-  <div class="feature">
-    <h2>Multiple Users</h2>
-    <p>Configure other users to either view or manage their own hosts. Full access permissions are available.</p>
-  </div>
-</div>
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -1 +0,0 @@
-../../README.md
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,23 +1,11 @@
 {
-  "name": "docs",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "devDependencies": {
-    "vuepress": "^2.0.0-rc.0"
-  },
  "scripts": {
-    "dev": "vuepress dev",
-    "build": "vuepress build"
+    "dev": "vitepress dev --host",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
  },
-  "author": "",
-  "license": "ISC",
-  "packageManager": "yarn@4.0.2",
-  "dependencies": {
-    "@vuepress/plugin-google-analytics": "2.0.0-rc.0",
-    "@vuepress/plugin-search": "2.0.0-rc.0",
-    "@vuepress/theme-default": "^2.0.0-rc.0",
-    "vuepress-plugin-sitemap2": "^2.0.0-rc.5",
-    "vuepress-plugin-zooming": "^1.1.8"
-  }
+  "devDependencies": {
+    "vitepress": "^1.1.4"
+  },
+  "dependencies": {}
 }
--- a/docs/screenshots/README.md
+++ b/docs/screenshots/README.md
@@ -1,12 +0,0 @@
-# Screenshots
-
-<img class="no-medium-zoom zooming" src="/screenshots/login.png" alt="Login" title="Login" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/dashboard.png" alt="Dashboard" title="Dashboard" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/proxy-hosts.png" alt="Proxy Hosts" title="Proxy Hosts" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/proxy-hosts-add.png" alt="Add Proxy Host" title="Add Proxy Host" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/redirection-hosts.png" alt="Redirection Hosts" title="Redirection Hosts" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/dead-hosts.png" alt="404 Hosts" title="404 Hosts" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/permissions.png" alt="User Permissions" title="User Permissions" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/certificates.png" alt="Certificates" title="Certificates" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/audit-log.png" alt="Audit Log" title="Audit Log" width="200"/>
-<img class="no-medium-zoom zooming" src="/screenshots/custom-settings.png" alt="Custom Settings" title="Custom Settings" width="200"/>
--- a/docs/src/advanced-config/index.md
+++ b/docs/src/advanced-config/index.md
@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # Advanced Configuration

 ## Running processes as a user/group
--- a/docs/src/faq/index.md
+++ b/docs/src/faq/index.md
@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # FAQ

 ## Do I have to use Docker?
@@ -13,7 +17,7 @@ of dependencies.

 Yes! The docker image is multi-arch and is built for a variety of architectures. If yours is
 [not listed](https://hub.docker.com/r/jc21/nginx-proxy-manager/tags) please open a
-[GitHub issue](https://github.com/jc21/nginx-proxy-manager/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=).
+[GitHub issue](https://github.com/NginxProxyManager/nginx-proxy-manager/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=).

 ## I can't get my service to proxy properly?

--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
@@ -0,0 +1,126 @@
+---
+outline: deep
+---
+
+# Guide
+
+::: raw
+<p align="center">
+	<a href="https://hub.docker.com/repository/docker/jc21/nginx-proxy-manager" style="display:inline;margin-right:5px;">
+		<img src="https://img.shields.io/docker/stars/jc21/nginx-proxy-manager.svg?style=for-the-badge" style="display:inline;">
+	</a>
+	<a href="https://hub.docker.com/repository/docker/jc21/nginx-proxy-manager" style="display:inline;margin-right:5px;">
+		<img src="https://img.shields.io/docker/pulls/jc21/nginx-proxy-manager.svg?style=for-the-badge" style="display:inline;">
+	</a>
+</p>
+:::
+
+This project comes as a pre-built docker image that enables you to easily forward to your websites
+running at home or otherwise, including free SSL, without having to know too much about Nginx or Letsencrypt.
+
+- [Quick Setup](#quick-setup)
+- [Full Setup](/setup/)
+- [Screenshots](/screenshots/)
+
+## Project Goal
+
+I created this project to fill a personal need to provide users with an easy way to accomplish reverse
+proxying hosts with SSL termination and it had to be so easy that a monkey could do it. This goal hasn't changed.
+While there might be advanced options they are optional and the project should be as simple as possible
+so that the barrier for entry here is low.
+
+::: raw
+<a href="https://www.buymeacoffee.com/jc21" target="_blank"><img src="http://public.jc21.com/github/by-me-a-coffee.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
+:::
+
+## Features
+
+- Beautiful and Secure Admin Interface based on [Tabler](https://tabler.github.io/)
+- Easily create forwarding domains, redirections, streams and 404 hosts without knowing anything about Nginx
+- Free SSL using Let's Encrypt or provide your own custom SSL certificates
+- Access Lists and basic HTTP Authentication for your hosts
+- Advanced Nginx configuration available for super users
+- User management, permissions and audit log
+
+
+## Hosting your home network
+
+I won't go in to too much detail here but here are the basics for someone new to this self-hosted world.
+
+1. Your home router will have a Port Forwarding section somewhere. Log in and find it
+2. Add port forwarding for port 80 and 443 to the server hosting this project
+3. Configure your domain name details to point to your home, either with a static ip or a service like DuckDNS or [Amazon Route53](https://github.com/jc21/route53-ddns)
+4. Use the Nginx Proxy Manager as your gateway to forward to your other web based services
+
+## Quick Setup
+
+1. Install Docker and Docker-Compose
+
+- [Docker Install documentation](https://docs.docker.com/get-docker/)
+- [Docker-Compose Install documentation](https://docs.docker.com/compose/install/)
+
+2. Create a docker-compose.yml file similar to this:
+
+```yml
+version: '3.8'
+services:
+  app:
+    image: 'jc21/nginx-proxy-manager:latest'
+    restart: unless-stopped
+    ports:
+      - '80:80'
+      - '81:81'
+      - '443:443'
+    volumes:
+      - ./data:/data
+      - ./letsencrypt:/etc/letsencrypt
+```
+
+This is the bare minimum configuration required. See the [documentation](https://nginxproxymanager.com/setup/) for more.
+
+3. Bring up your stack by running
+
+```bash
+docker-compose up -d
+
+# If using docker-compose-plugin
+docker compose up -d
+```
+
+4. Log in to the Admin UI
+
+When your docker container is running, connect to it on port `81` for the admin interface.
+Sometimes this can take a little bit because of the entropy of keys.
+
+[http://127.0.0.1:81](http://127.0.0.1:81)
+
+Default Admin User:
+```
+Email:    admin@example.com
+Password: changeme
+```
+
+Immediately after logging in with this default user you will be asked to modify your details and change your password.
+
+
+## Contributing
+
+All are welcome to create pull requests for this project, against the `develop` branch. Official releases are created from the `master` branch.
+
+CI is used in this project. All PR's must pass before being considered. After passing,
+docker builds for PR's are available on dockerhub for manual verifications.
+
+Documentation within the `develop` branch is available for preview at
+[https://develop.nginxproxymanager.com](https://develop.nginxproxymanager.com)
+
+
+### Contributors
+
+Special thanks to [all of our contributors](https://github.com/NginxProxyManager/nginx-proxy-manager/graphs/contributors).
+
+
+## Getting Support
+
+1. [Found a bug?](https://github.com/NginxProxyManager/nginx-proxy-manager/issues)
+2. [Discussions](https://github.com/NginxProxyManager/nginx-proxy-manager/discussions)
+3. [Reddit](https://reddit.com/r/nginxproxymanager)
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -0,0 +1,32 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Nginx Proxy Manager"
+  tagline: Expose your services easily and securely
+  image:
+    src: /logo.svg
+    alt: NPM Logo
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/
+    - theme: alt
+      text: GitHub
+      link: https://github.com/NginxProxyManager/nginx-proxy-manager
+
+features:
+  - title: Get Connected
+    details: Expose web services on your network &middot; Free SSL with Let's Encrypt  &middot; Designed with security in mind  &middot; Perfect for home networks
+  - title: Beautiful UI
+    details: Based on Tabler, the interface is a pleasure to use. Configuring a server has never been so fun.
+  - title: Free SSL
+    details: Built in Let’s Encrypt support allows you to secure your Web services at no cost to you. The certificates even renew themselves!
+  - title: Free SSL
+    details: Built in Let’s Encrypt support allows you to secure your Web services at no cost to you. The certificates even renew themselves!
+  - title: Docker FTW
+    details: Built as a Docker Image, Nginx Proxy Manager only requires a database.
+  - title: Multiple Users
+    details: Configure other users to either view or manage their own hosts. Full access permissions are available.
+---
--- a/docs/.vuepress/public/github.png
+++ b/docs/.vuepress/public/github.png
--- a/docs/.vuepress/public/icon.png
+++ b/docs/.vuepress/public/icon.png
--- a/docs/.vuepress/public/logo.svg
+++ b/docs/.vuepress/public/logo.svg
--- a/docs/.vuepress/public/robots.txt
+++ b/docs/.vuepress/public/robots.txt
--- a/docs/.vuepress/public/screenshots/access-lists.png
+++ b/docs/.vuepress/public/screenshots/access-lists.png
--- a/docs/.vuepress/public/screenshots/audit-log.png
+++ b/docs/.vuepress/public/screenshots/audit-log.png
--- a/docs/.vuepress/public/screenshots/certificates.png
+++ b/docs/.vuepress/public/screenshots/certificates.png
--- a/docs/.vuepress/public/screenshots/custom-settings.png
+++ b/docs/.vuepress/public/screenshots/custom-settings.png
--- a/docs/.vuepress/public/screenshots/dashboard.png
+++ b/docs/.vuepress/public/screenshots/dashboard.png
--- a/docs/.vuepress/public/screenshots/dead-hosts.png
+++ b/docs/.vuepress/public/screenshots/dead-hosts.png
--- a/docs/.vuepress/public/screenshots/login.png
+++ b/docs/.vuepress/public/screenshots/login.png
--- a/docs/.vuepress/public/screenshots/permissions.png
+++ b/docs/.vuepress/public/screenshots/permissions.png
--- a/docs/.vuepress/public/screenshots/proxy-hosts-add.png
+++ b/docs/.vuepress/public/screenshots/proxy-hosts-add.png
--- a/docs/.vuepress/public/screenshots/proxy-hosts.png
+++ b/docs/.vuepress/public/screenshots/proxy-hosts.png
--- a/docs/.vuepress/public/screenshots/redirection-hosts.png
+++ b/docs/.vuepress/public/screenshots/redirection-hosts.png
--- a/docs/src/screenshots/index.md
+++ b/docs/src/screenshots/index.md
@@ -0,0 +1,20 @@
+---
+outline: deep
+---
+
+# Screenshots
+
+::: raw
+<div class="inline-img">
+	<a href="/screenshots/login.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/login.png" alt="Login" title="Login" width="200"/></a>
+	<a href="/screenshots/dashboard.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/dashboard.png" alt="Dashboard" title="Dashboard" width="200"/></a>
+	<a href="/screenshots/proxy-hosts.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/proxy-hosts.png" alt="Proxy Hosts" title="Proxy Hosts" width="200"/></a>
+	<a href="/screenshots/proxy-hosts-add.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/proxy-hosts-add.png" alt="Add Proxy Host" title="Add Proxy Host" width="200"/></a>
+	<a href="/screenshots/redirection-hosts.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/redirection-hosts.png" alt="Redirection Hosts" title="Redirection Hosts" width="200"/></a>
+	<a href="/screenshots/dead-hosts.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/dead-hosts.png" alt="404 Hosts" title="404 Hosts" width="200"/></a>
+	<a href="/screenshots/permissions.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/permissions.png" alt="User Permissions" title="User Permissions" width="200"/></a>
+	<a href="/screenshots/certificates.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/certificates.png" alt="Certificates" title="Certificates" width="200"/></a>
+	<a href="/screenshots/audit-log.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/audit-log.png" alt="Audit Log" title="Audit Log" width="200"/></a>
+	<a href="/screenshots/custom-settings.png" target="_blank"><img class="no-medium-zoom zooming" src="/screenshots/custom-settings.png" alt="Custom Settings" title="Custom Settings" width="200"/></a>
+</div>
+:::
--- a/docs/src/setup/index.md
+++ b/docs/src/setup/index.md
@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # Full Setup Instructions

 ## Running the App
--- a/docs/src/third-party/index.md
+++ b/docs/src/third-party/index.md
@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # Third Party

 As this software gains popularity it's common to see it integrated with other platforms. Please be aware that unless specifically mentioned in the documentation of those
@@ -12,5 +16,4 @@ Known integrations:


 If you would like your integration of NPM listed, please open a
-[Github issue](https://github.com/jc21/nginx-proxy-manager/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=)
-
+[Github issue](https://github.com/NginxProxyManager/nginx-proxy-manager/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=)
--- a/docs/src/upgrading/index.md
+++ b/docs/src/upgrading/index.md
@@ -1,8 +1,12 @@
+---
+outline: deep
+---
+
 # Upgrading

 ```bash
-docker-compose pull
-docker-compose up -d
+docker compose pull
+docker compose up -d
 ```

 This project will automatically update any databases or other requirements so you don't have to follow
--- a/docs/yarn.lock
+++ b/docs/yarn.lock