Convert beszel and upsnap install/expose sections to the steps component

content/en/3.serveex/4.monitoring/4.beszel.md

@@ -5,16 +5,6 @@ description: Install Beszel to monitor server CPU, RAM, disk, and network metric
 
 
 :ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
-# Beszel
-
-::note
-🎯 __Objectives:__
-
-- Install Beszel
-- Monitor the local server
-- Monitor a remote server
-- Expose Beszel with Swag
-::
 
 [Beszel](https://beszel.dev/) is a container that gives you real-time access to hardware information from your servers and allows historical tracking. CPU activity, disk usage, temperatures, RAM: nothing escapes your monitoring. Beszel also lets you configure notifications and alerts when your predefined thresholds are exceeded.
 
@@ -37,6 +27,9 @@ tree:
 ---
 ::
 
+::steps{level="3"}
+### Deploy the stack
+
 Open Dockge, click `compose`, name the stack `beszel`, and paste the following:
 
 ```yaml [compose.yaml]
@@ -79,6 +72,8 @@ services:
 ```
 ::
 
+### Set your environment variables
+
 Fill out the `.env` file, for example:
 
 ```properties [.env]
@@ -90,6 +85,9 @@ For the `KEY` value, you'll need to launch Beszel once to get it.
 
 Deploy the container and go to `http://yourserverip:8090`. Your Beszel web UI is now accessible!
 
+### Done !
+::
+
 ::caution
 
 __If it fails:__ check your firewall rules.
@@ -153,12 +151,15 @@ Beszel does not support multi-factor authentication. Exposing it on the internet
 
 If you want to access Beszel remotely from all your devices, expose it using Swag.
 
-::note
+::note{icon=""}
 📋 __Prerequisite:__
 <br/><br/>
 You must have created a DNS subdomain like `beszel.mydomain.com` with a `CNAME` pointing to `mydomain.com`. Unless you're using Cloudflare Zero Trust, you must also have forwarded port `443` on your router to your server’s `443` port via [NAT rules](/general/networking/nat).
 ::
 
+::steps{level="3"}
+### Add Beszel's network to SWAG
+
 In Dockge, edit Swag's compose file and add Beszel’s network:
 
 ```yaml [compose.yaml]
@@ -185,6 +186,8 @@ Redeploy the stack and wait for Swag to become fully operational.
 We assume the network name is `beszel_default`. You can check connectivity by visiting Swag's dashboard at `http://yourserverip:81`.
 ::
 
+### Create the subdomain.conf file
+
 In Swag’s config folders, create `beszel.subdomain.conf`.
 
 ::tip{icon=""}
@@ -243,6 +246,9 @@ server {
 
 Press :kbd{value="Ctrl+O"}, then :kbd{value="Enter"} to save, and :kbd{value="Ctrl+X"} to exit.
 
+### Done !
+::
+
 That’s it! Beszel is now exposed!
 
 ## Protecting Beszel with TinyAuth
@@ -314,6 +320,6 @@ server {
 The `location /tinyauth` block runs inside SWAG's own container, so SWAG needs to be on TinyAuth's Docker network to reach it by name (`tinyauth` here). This should already be set up from [exposing TinyAuth itself](/serveex/security/tinyauth#exposing-tinyauth-with-swag). If you run into an error, double-check SWAG's compose file still has that network attached.
 ::
 
-::tip
+::tip{icon=""}
-✨ You can protect this app with Authentik instead of TinyAuth by opening `beszel.subdomain.conf` and removing the `#` in front of `include /config/nginx/authentik-server.conf;` and `include /config/nginx/authentik-location.conf;`. Don’t forget to [create an application and provider in Authentik](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
+✨ You can protect this app with [Authentik](/serveex/advanced/authentik) instead of TinyAuth by opening `beszel.subdomain.conf` and removing the `#` in front of `include /config/nginx/authentik-server.conf;` and `include /config/nginx/authentik-location.conf;`. Don’t forget to [create an application and provider in Authentik](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
 ::

content/en/3.serveex/4.monitoring/5.upsnap.md

@@ -5,14 +5,6 @@ description: Install UpSnap to remotely wake up machines on your local network v
 
 
 :ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
-# UpSnap
-
-::note
-🎯 __Goals:__
-
-- Install UpSnap
-- Expose UpSnap with Swag
-::
 
 [UpSnap](https://github.com/seriousm4x/UpSnap) is a container that allows you to remotely power on, shut down, or put your machines to sleep. It mainly uses Wake-On-Lan (WoL) over the network and offers advanced features.
 
@@ -32,6 +24,9 @@ tree:
 ---
 ::
 
+::steps{level="3"}
+### Deploy the stack
+
 Open Dockge, click on `compose`, name the stack `upsnap`, then copy and paste the following:
 
 ```yaml [compose.yaml]
@@ -70,6 +65,8 @@ services:
     ```
 ::
 
+### Set your environment variables
+
 Fill in the `.env`, for example:
 
 ```properties [.env]
@@ -79,6 +76,9 @@ DNS=192.168.1.1 # DNS IP to resolve domain names, typically your router’s IP
 
 Deploy the container and go to `http://yourserverip:8095`. Just follow the steps to create your account!
 
+### Done !
+::
+
 ::caution
 
 __If it fails:__ check your firewall rules.
@@ -93,12 +93,15 @@ UpSnap does not support multi-factor authentication. Exposing it on the internet
 
 You may want to access it remotely from all your devices. To do so, we'll expose UpSnap via Swag.
 
-::note
+::note{icon=""}
 📋 __Beforehand:__
 <br/><br/>
 We assume you've created a subdomain in your [DNS zone](/general/networking/dns), such as `upsnap.yourdomain.com` with a `CNAME` to `yourdomain.com`. Also, unless you're using Cloudflare Zero Trust, you should have already forwarded port `443` from your router to port `443` on your server in your [NAT rules](/general/networking/nat).
 ::
 
+::steps{level="3"}
+### Add UpSnap's network to SWAG
+
 Go to Dockge, and edit the SWAG compose by adding the UpSnap network:
 
 ```yaml [compose.yaml]
@@ -125,6 +128,8 @@ Restart the stack by clicking "deploy" and wait for SWAG to be fully operational
 Here we assume the network name for upsnap is `upsnap_default`. You can check the connection in the SWAG dashboard at `http://yourserverip:81`.
 ::
 
+### Create the subdomain.conf file
+
 In the Swag folders, create the file `upsnap.subdomain.conf`.
 
 ::tip{icon=""}
@@ -189,6 +194,9 @@ server {
 
 Press :kbd{value="Ctrl+O"}, then :kbd{value="Enter"} to save, and :kbd{value="Ctrl+X"} to exit.
 
+### Done !
+::
+
 And that’s it! You’ve exposed UpSnap!
 
 ## Protecting UpSnap with TinyAuth
@@ -267,6 +275,6 @@ server {
 The `location /tinyauth` block runs inside SWAG's own container, so SWAG needs to be on TinyAuth's Docker network to reach it by name (`tinyauth` here). This should already be set up from [exposing TinyAuth itself](/serveex/security/tinyauth#exposing-tinyauth-with-swag). If you run into an error, double-check SWAG's compose file still has that network attached.
 ::
 
-::tip
+::tip{icon=""}
-✨ You can protect this app with Authentik instead of TinyAuth by opening `upsnap.subdomain.conf` and removing the `#` in front of `include /config/nginx/authentik-server.conf;`{lang=nginx} and `include /config/nginx/authentik-location.conf;`{lang=nginx}. Don’t forget to [create an application and provider in Authentik](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
+✨ You can protect this app with [Authentik](/serveex/advanced/authentik) instead of TinyAuth by opening `upsnap.subdomain.conf` and removing the `#` in front of `include /config/nginx/authentik-server.conf;`{lang=nginx} and `include /config/nginx/authentik-location.conf;`{lang=nginx}. Don’t forget to [create an application and provider in Authentik](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
 ::