Doc improvements (#538)

* add dark/light image to doc

* add dark/light image to doc

* add funding info, prepare release v2.1

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: h44z # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2020-2023 Christoph Haas
+Copyright (c) 2020-2025 Christoph Haas
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README.md

@@ -21,7 +21,7 @@ The configuration portal supports using a database (SQLite, MySQL, MsSQL, or Pos
 ## Features
 
 * Self-hosted - the whole application is a single binary
-* Responsive multi-language web UI written in Vue.js
+* Responsive multi-language web UI with dark-mode written in Vue.js
 * Automatically selects IP from the network pool assigned to the client
 * QR-Code for convenient mobile client configuration
 * Sends email to the client with QR-code and client config
@@ -32,7 +32,7 @@ The configuration portal supports using a database (SQLite, MySQL, MsSQL, or Pos
 * Docker ready
 * Can be used with existing WireGuard setups
 * Support for multiple WireGuard interfaces
-* Supports multiple WireGuard backends (wgctrl or MikroTik [BETA])
+* Supports multiple WireGuard backends (wgctrl or MikroTik)
 * Peer Expiry Feature
 * Handles route and DNS settings like wg-quick does
 * Exposes Prometheus metrics for monitoring and alerting
@@ -62,6 +62,17 @@ For the complete documentation visit [wgportal.org](https://wgportal.org).
 
 * MIT License. [MIT](LICENSE.txt) or <https://opensource.org/licenses/MIT>
 
+## Contributors and Sponsors
+
+Thanks so much for all your contributions! They’re truly appreciated and help keep WireGuard Portal moving ahead.
+
+<a href="https://github.com/h44z/wg-portal/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=h44z/wg-portal" />
+</a>
+
+Want to support the project? You can buy me a coffee or join as a contributor - every bit of support helps! 
+[Become a sponsor!](https://github.com/sponsors/h44z)
+
 
 > [!IMPORTANT]
 > Since the project was accepted by the Docker-Sponsored Open Source Program, the Docker image location has moved to [wgportal/wg-portal](https://hub.docker.com/r/wgportal/wg-portal).

SECURITY.md

@@ -7,7 +7,7 @@ If you believe you've found a security issue in one of the supported versions of
 | Version | Supported          |
 |---------|--------------------|
 | v2.x    | :white_check_mark: |
-| v1.x    | :white_check_mark: |
+| v1.x    | :x:                |
 
 ## Reporting a Vulnerability
 

docs/stylesheets/img-comparison-slider.css

@@ -0,0 +1,15 @@
+img-comparison-slider {
+  visibility: hidden;
+}
+
+img-comparison-slider [slot='second'] {
+  display: none;
+}
+
+img-comparison-slider.rendered {
+  visibility: inherit;
+}
+
+img-comparison-slider.rendered [slot='second'] {
+  display: unset;
+}

docs/theme-overrides/layouts/home.html

@@ -300,6 +300,59 @@
   background: var(--md-accent-fg-color--transparent);
 }
 
+.before,
+.after {
+    margin: 0;
+}
+
+.after figcaption {
+    background: #fff;
+    font-weight: bold;
+    border: 1px solid #c0c0c0;
+    color: #000000;
+    opacity: 0.9;
+    padding: 9px;
+    position: absolute;
+    top: 100%;
+    transform: translateY(-100%);
+    line-height: 100%;
+}
+
+.before figcaption {
+    background: #000;
+    font-weight: bold;
+    border: 1px solid #c0c0c0;
+    color: #ffffff;
+    opacity: 0.9;
+    padding: 9px;
+    position: absolute;
+    top: 100%;
+    transform: translateY(-100%);
+    line-height: 100%;
+}
+
+.before figcaption {
+    left: 0px;
+}
+.after figcaption {
+    right: 0px;
+}
+.custom-animated-handle {
+    transition: transform 0.2s;
+}
+
+.slider-with-animated-handle:hover .custom-animated-handle {
+    transform: scale(1.2);
+}
+.md-typeset img-comparison-slider figure {
+    margin: initial;
+}
+
+.first-overlay {
+    color: #000;
+}
+
+
 </style>
 
   <!-- Hero for landing page -->
@@ -326,11 +379,34 @@
 
   <div class="md-container">
     <div class="tx-hero__image">
-      <img
+      <div>
-        src="{{config.site_url}}/assets/images/screenshot.png"
+        <img-comparison-slider hover="hover">
-        alt=""
+          <figure slot="first" class="before">
-        draggable="false"
+            <img src="{{config.site_url}}/assets/images/wgportal_light.png" alt="Light Mode"/>
-      >
+            <figcaption>Light Mode</figcaption>
+          </figure>
+          <figure slot="second" class="after">
+            <img src="{{config.site_url}}/assets/images/wgportal_dark.png" alt="Dark Mode"/>
+            <figcaption>Dark Mode</figcaption>
+          </figure>
+          <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
+                <!-- Left arrow (dark) -->
+                <path d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2"
+                      stroke="#1a1a1a"
+                      fill="#1a1a1a"
+                      stroke-width="1"
+                      vector-effect="non-scaling-stroke">
+                </path>
+                <!-- Right arrow (white) -->
+                <path d="M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2"
+                      stroke="#fff"
+                      fill="#fff"
+                      stroke-width="1"
+                      vector-effect="non-scaling-stroke">
+                </path>
+          </svg>
+        </img-comparison-slider>
+      </div>
     </div>
   </div>
 

mkdocs.yml

@@ -6,8 +6,12 @@ repo_name: h44z/wg-portal
 repo_url: https://github.com/h44z/wg-portal
 copyright: Copyright © 2023-2025 WireGuard Portal Project
 
+extra_javascript:
+  - javascript/img-comparison-slider.js
+
 extra_css:
   - stylesheets/extra.css
+  - stylesheets/img-comparison-slider.css
 
 theme:
   name: material