Merge pull request #252 from Cinzya/saas-traefikv3

Traefik v3 example for SaaS configuration

Author: ShadowArcanist

bun.lockb

@@ -7,6 +7,7 @@ import spec from '../public/openapi.json' with { type: 'json' }
 import container from 'markdown-it-container'
 import { bundledLanguages } from 'shiki'
 import { join, dirname } from 'node:path'
+import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 
 const sidebar = useSidebar({ spec, collapsible: true })
 
@@ -585,6 +586,7 @@ export default defineConfig({
           }
         }
       })
+      md.use(tabsMarkdownPlugin)
     },
     theme: {
       light: 'github-light',

docs/.vitepress/config.mts

@@ -18,6 +18,9 @@ import "./scrollbar.css";
 import "./tailwind.postcss";
 import "vitepress-openapi/dist/style.css";
 
+// Import plugins
+import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
+
 // @ts-ignore
 import spec from "../../public/openapi.json" assert { type: "json" };
 
@@ -40,13 +43,15 @@ export default {
   extends: DefaultTheme,
   Layout: Landing,
   enhanceApp({ app, router, siteData }) {
+    enhanceAppWithTabs(app);
+
     const openapi = useOpenapi({
       spec,
       base: "/docs/api-reference/api/operations/",
       label: "API",
     });
 
-    theme.enhanceApp({ app, openapi })
+    theme.enhanceApp({ app, openapi });
     app.component("Card", Card);
     app.component("CardGroup", CardGroup);
     app.component("LandingSection", Sections);
@@ -60,21 +65,25 @@ export default {
     app.component("Browser", Browser);
 
     router.onAfterRouteChange = () => {
-      if (typeof window !== 'undefined' && (window as any).plausible) {
-        (window as any).plausible('pageview')
+      if (typeof window !== "undefined" && (window as any).plausible) {
+        (window as any).plausible("pageview");
       }
-    }
-    app.directive('plausible', {
+    };
+    app.directive("plausible", {
       mounted(el: HTMLElement, binding: DirectiveBinding) {
-        const eventName = binding.arg
-        const eventData = binding.value || {}
+        const eventName = binding.arg;
+        const eventData = binding.value || {};
 
-        el.addEventListener('click', () => {
-          if (typeof window !== 'undefined' && (window as any).plausible && eventName) {
-            (window as any).plausible(eventName, { props: eventData })
+        el.addEventListener("click", () => {
+          if (
+            typeof window !== "undefined" &&
+            (window as any).plausible &&
+            eventName
+          ) {
+            (window as any).plausible(eventName, { props: eventData });
           }
-        })
-      }
-    })
+        });
+      },
+    });
   },
 } satisfies Theme;

docs/.vitepress/theme/index.ts

@@ -14,17 +14,14 @@ description: "A guide to configure wildcard subdomain redirects (with Traefik wi
 ::: tip Tip
 Each provider needs environment variables to be set in the Traefik configuration. You can find the required variables in the [official documentation](https://doc.traefik.io/traefik/https/acme/#providers).
 
-
 If you need fine-grained token, like with [Cloudflare](https://go-acme.github.io/lego/dns/cloudflare/), check the provider configurations.
 :::
 
-
 ## Configuration
 
 1. Setup your wildcard subdomain DNS records, `*.coolify.io`.
 2. Go to your Proxy settings (Servers / Proxy menu) and add the following configuration based on your [providers](https://doc.traefik.io/traefik/https/acme/#providers). The example will use `Hetzner` as a provider.
 
-
 ```bash
 version: '3.8'
 networks:
@@ -120,6 +117,26 @@ Redirect all subdomains to one application. You can use this option if you want
 - In your application, leave the FQDN configuration `empty`.
 - Add the following custom label configuration:
 
+:::tabs key:saas
+== Traefik v3
+
+```bash
+traefik.enable=true
+traefik.http.routers.<unique_router_name_https>.rule=HostRegexp(`^.+\.coolify\.io$`)
+traefik.http.routers.<unique_router_name_https>.entryPoints=https
+traefik.http.routers.<unique_router_name_https>.middlewares=gzip
+traefik.http.routers.<unique_router_name_https>.service=<unique_service_name>
+traefik.http.routers.<unique_router_name_https>.tls.certresolver=letsencrypt
+traefik.http.services.<unique_service_name>.loadbalancer.server.port=80
+traefik.http.routers.<unique_router_name_https>.tls=true
+
+traefik.http.routers.<unique_router_name_http>.rule=HostRegexp(`^.+\.coolify\.io$`)
+traefik.http.routers.<unique_router_name_http>.entryPoints=http
+traefik.http.routers.<unique_router_name_http>.middlewares=redirect-to-https
+```
+
+== Traefik v2
+
 ```bash
 traefik.enable=true
 traefik.http.routers.<unique_router_name_https>.rule=HostRegexp(`{subdomain:[a-zA-Z0-9-]+}.coolify.io`)
@@ -135,11 +152,13 @@ traefik.http.routers.<unique_router_name_http>.entryPoints=http
 traefik.http.routers.<unique_router_name_http>.middlewares=redirect-to-https
 ```
 
+:::
+
 > `traefik.http.routers.<unique_router_name_https>.tls.certresolver` should be the same as your `certresolver` name in Traefik proxy configuration, by default `letsencrypt`.
 
 > `traefik.http.services.<unique_service_name>.loadbalancer.server.port` should be the same as your application listens on. Port 80 if you use a static deployment.
 
 ::: warning Caution
-  You cannot use both configurations (Normal & SaaS) at the same time on one
-  server.
+You cannot use both configurations (Normal & SaaS) at the same time on one
+server.
 :::

docs/knowledge-base/proxy/traefik/wildcard-certs.md

@@ -14,6 +14,7 @@
     "vite-plugin-llms": "^1.0.2",
     "vite-plugin-yaml": "^1.0.5",
     "vitepress": "1.6.3",
+    "vitepress-plugin-tabs": "^0.6.0",
     "vue": "^3.5.13"
   },
   "postcss": {