frontend: add selfhosting view toggle

assets/js/custom.js

@@ -1 +1,22 @@
 // Put your custom JS code here
+
+// self-hosting view.
+const getSelfhost = () => {
+  return localStorage.getItem('selfhost') || 'no';
+};
+
+const setSelfhost = (selfhost) => {
+  localStorage.setItem('selfhost', selfhost);
+  document.documentElement.setAttribute('data-selfhost', selfhost);
+};
+
+setSelfhost(getSelfhost());
+
+window.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[data-selfhost-value]').forEach((element) => {
+    element.addEventListener('click', (event) => {
+      const selfhost = element.getAttribute('data-selfhost-value');
+      setSelfhost(selfhost);
+    });
+  }
+)});

assets/scss/common/_custom.scss

@@ -147,6 +147,32 @@ pre.shiki {
   opacity: var(--ec-frm-inlBtnBgActOpa);
 }
 
+// show active server if self-hosting view enabled
+html[data-selfhost="yes"] {
+  .icon-tabler-server {
+    display: block;
+  }
+
+  .icon-tabler-server-off {
+    display: none;
+  }
+}
+
+// hide active server if self-hosting view disabled
+html[data-selfhost="no"] {
+  .icon-tabler-server {
+    display: none;
+  }
+
+  .icon-tabler-server-off {
+    display: block;
+  }
+
+  .selfhosting {
+    display: none;
+  }
+}
+
 @media (hover: hover) {
   .highlight .copy button {
       opacity: 0;

config/postcss.config.js

@@ -26,6 +26,7 @@ module.exports = {
 				'data-global-alert',
 				'data-pane', // tabs.js
 				'data-popper-placement',
+				'data-selfhost',
 				'data-sizes',
 				'data-toggle-tab', // tabs.js
 				'id',

content/docs/moderation/logging.md

@@ -28,7 +28,7 @@ contains an embed, it is serialized and saved in JSON format.
 
 Message logs on the official YAGPDB instance will be automatically deleted after 30 days of their creation.
 
-If you're self-hosting, see [Message Log Purge](#message-log-purge-self-hosting-only) for more information.
+If you're self-hosting, see [Message Log Purge](#message-log-purge) for more information.
 
 {{< /callout >}}
 
@@ -114,8 +114,12 @@ channels.
 Users with write access to the control panel may delete individual logs or delete all logs on the server using the
 control panel.
 
-## Message Log Purge [Self-hosting only]
+{{< selfhosting >}}
+
+## Message Log Purge
 
 If you are self-hosting your own instance of YAGPDB, you can set `enable_message_log_purge=true` to automatically purge
 message logs older than 30 days. This option is enabled on the official instance of YAGPDB hosted by Botlabs but is
 disabled by default on a fresh self-host.
+
+{{< /selfhosting >}}

content/docs/moderation/verification.md

@@ -97,6 +97,8 @@ If a new user who verifies is detected as an alt but none of their associated ac
 send a log to the verification log channel if specified, identifying the new user as an alt and listing other users who
 verified at the same IP address.
 
+{{< selfhosting >}}
+
 ### Disable Alt Detection Globally
 
 For self hosters, the environment variable to enable this feature is `verification.track_ips`. It is `true` by default.
@@ -112,3 +114,5 @@ Do not proceed unless you are hosting your own version of the YAGPDB codebase.
 Verification requires the `google.recaptcha_secret` and `google.recaptcha_site_key` env variables to be configured and
 valid. To get a reCAPTCHA secret and site key, [register a site on
 reCAPTCHA](https://www.google.com/recaptcha/admin/create) and copy the generated secret and key.
+
+{{< /selfhosting >}}

content/docs/welcome/premium.md

@@ -127,6 +127,8 @@ You can assign your premium slots to any server with YAGPDB in it and no existin
 
 ![Redeemed Premium Slots](slots_premium.png)
 
+{{< selfhosting >}}
+
 ## Self Hosting YAGPDB
 
 Do not proceed unless you are hosting your own version of the YAGPDB codebase.
@@ -153,3 +155,5 @@ recommended you familiarize yourself with the codebase before making changes. Fi
 defined and alter their values as you wish.
 
 ![Example of limit definitions in Advanced Automoderator](limits_example.png)
+
+{{< /selfhosting >}}

layouts/partials/header/header.html

@@ -272,6 +272,24 @@ <h5 class="offcanvas-title fw-bold" id="offcanvasNavMainLabel">{{ .Site.Params.T
         </ul>
         {{ end -}}
 
+        <!-- self-hosting view -->
+        <button id="selfHosting" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1" type="button" aria-label="Toggle self-hosting view">
+          <svg data-selfhost-value="yes" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M12 12h-6a3 3 0 0 1 -3 -3v-2c0 -1.083 .574 -2.033 1.435 -2.56m3.565 -.44h10a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-2" />
+            <path d="M16 12h2a3 3 0 0 1 3 3v2m-1.448 2.568a2.986 2.986 0 0 1 -1.552 .432h-12a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h6" />
+            <path d="M7 8v.01" />
+            <path d="M7 16v.01" />
+            <path d="M3 3l18 18" />
+          </svg>
+          <svg data-selfhost-value="no" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+            <path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+            <path d="M7 8l0 .01" />
+            <path d="M7 16l0 .01" />
+          </svg>
+        </button>
 
         <!-- Navbar button mobile -->
         {{ if site.Params.doks.navBarButton -}}

layouts/shortcodes/selfhosting.html

@@ -0,0 +1,4 @@
+{{/* wraps the inner content in a div with a class of "selfhosting", such that it can be conditionally hidden by some JS code. */}}
+<div class="selfhosting">
+  {{ .Inner | $.Page.RenderString }}
+</div>