add highlitght label support

assets/css/custom.css

@@ -2,6 +2,26 @@
   position: static
 }
 
+.absolute {
+  position: absolute
+}
+
+.relative {
+  position: relative
+}
+
+.bottom-0 {
+  bottom: 0px
+}
+
+.right-0 {
+  right: 0px
+}
+
+.z-10 {
+  z-index: 10
+}
+
 .mb-4 {
   margin-bottom: 1rem
 }
@@ -26,6 +46,18 @@
   margin-top: 0.25rem
 }
 
+.-mb-4 {
+  margin-bottom: -1rem
+}
+
+.-mb-40 {
+  margin-bottom: -10rem
+}
+
+.-mb-6 {
+  margin-bottom: -1.5rem
+}
+
 .block {
   display: block
 }
@@ -108,6 +140,10 @@
   border-radius: 9999px
 }
 
+.rounded-sm {
+  border-radius: 0.125rem
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem
@@ -118,6 +154,14 @@
   border-bottom-left-radius: 0.375rem
 }
 
+.rounded-tr-none {
+  border-top-right-radius: 0px
+}
+
+.rounded-bl-none {
+  border-bottom-left-radius: 0px
+}
+
 .border-2 {
   border-width: 2px
 }
@@ -189,6 +233,21 @@
   background-color: rgb(30 58 138 / 0.2)
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity))
+}
+
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity))
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity))
+}
+
 .p-1 {
   padding: 0.25rem
 }
@@ -197,6 +256,14 @@
   padding: 1rem
 }
 
+.p-3 {
+  padding: 0.75rem
+}
+
+.p-2 {
+  padding: 0.5rem
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem
@@ -217,6 +284,16 @@
   padding-bottom: 0.25rem
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem
+}
+
 .pb-2 {
   padding-bottom: 0.5rem
 }
@@ -257,6 +334,10 @@
   font-weight: 700
 }
 
+.italic {
+  font-style: italic
+}
+
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity))
@@ -317,6 +398,14 @@
   outline-offset: 2px
 }
 
+[dir="ltr"] .ltr\:pr-3 {
+  padding-right: 0.75rem
+}
+
+[dir="rtl"] .rtl\:pl-3 {
+  padding-left: 0.75rem
+}
+
 .dark .dark\:border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity))
@@ -357,6 +446,11 @@
   color: rgb(163 163 163 / var(--tw-text-opacity))
 }
 
+.dark .dark\:text-neutral-300 {
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity))
+}
+
 .dark .dark\:hover\:\!bg-green-700:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity)) !important

content/posts/03-build-your-own-docker-swarm-cluster-part-2/index.md

@@ -24,21 +24,21 @@ Initiate the project by following this simple steps :
 
 1. Create the project through the UI (I will use `swarmrocks` as project's name here)
 2. Navigate to security > API tokens
-3. Generate new API key with Read Write permissions and copy the generated token
+3. Generate new API key with *Read Write* permissions and copy the generated token
 
 [![Hetzner API Token](hetzner-api-token.png)](hetzner-api-token.png)
 
-Then go to the terminal and prepare the new context
+Then go to the terminal and prepare the new context.
 
 ```sh
 hcloud context create swarmrocks # set the copied token at prompt
 hcloud context list # check that your new project is active
 
-# set your ssh key to the project
+# set your ssh public key to the project, mine is .ssh/id_ed25519.pub
 hcloud ssh-key create --name swarm --public-key-from-file .ssh/id_ed25519.pub
 ```
 
-Now we are ready to set up the above architecture !
+Note as we don't need to return to the Hetzner UI anymore, all the rest is pure CLI. We're ready to set up the cluster architecture presented in the first part !
 
 ## Create the cloud servers and networks ☁️
 
@@ -62,7 +62,7 @@ hcloud server create --name runner-01 --ssh-key swarm --image ubuntu-20.04 --typ
 hcloud server create --name data-01 --ssh-key swarm --image ubuntu-20.04 --type cx21 --location nbg1 --network network-01
 
 # create the volume that will be used by gluster and automount it to the data server (fstab will be already setted)
-hcloud volume create --name volume-01 --size 60 --server data-01 --automount --format ext4
+hcloud volume create --name volume-01 --size 20 --server data-01 --automount --format ext4
 ```
 
 {{< alert >}}
@@ -71,7 +71,7 @@ Location is important ! Choose wisely between Germany, Finland and US. Here I go
 
 ## Prepare the servers 🛠️
 
-It's time to do the classic minimal boring viable security setup for each server. Use `hcloud server ssh xxxxxx-01` for ssh connect and do the same for each.
+It's time to do the classic minimal boring viable security setup for each server. Use `hcloud server ssh xxxxxx-01` for ssh connect and apply the same following commands for each nodes.
 
 ```sh
 # ensure last upgrades
@@ -81,7 +81,7 @@ apt update && apt upgrade -y && reboot
 dpkg-reconfigure locales
 dpkg-reconfigure tzdata
 
-# create your default non root and sudoer user (swarm in this sample)
+# create your default non root user (swarm in this sample)
 adduser swarm # enter any strong password at prompt
 
 # set the user to sudoer group and sync the same ssh root key
@@ -98,38 +98,50 @@ service ssh reload
 ```
 
 {{< alert >}}
-The change of SSH port is not only for better security, but also for allowing more later git ssh access into your custom git provider as GitLab, Gitea, etc. that go through Traefik 22 port, as it will far more practical.
+The change of SSH port is not only for better security, but also for allowing more later git ssh operations into your custom git provider as GitLab, Gitea, etc. that will pass through Traefik 22 port, which will be far more practical.
 {{< /alert >}}
 
 Finally, test your new `swarm` user by using `hcloud server ssh --user swarm --port 2222 xxxxxx-01` for each server and be sure that the user can do commands as sudo before continue.
 
-Then edit `/etc/hosts` file for each server accordingly in order to add private IPs :
+Then edit `/etc/hosts` file for each server accordingly for internal DNS :
 
 {{< tabs >}}
 {{< tab tabName="manager-01" >}}
 
+{{< highlight filename="/etc/hosts" >}}
+
 ```txt
 10.0.0.3 worker-01 sw-worker-01
 10.0.0.4 runner-01 sw-runner-01
 10.0.0.5 data-01 sw-data-01
 ```
 
+{{< /highlight >}}
+
 {{< /tab >}}
 {{< tab tabName="worker-01" >}}
 
+{{< highlight filename="/etc/hosts" >}}
+
 ```txt
 10.0.0.2 manager-01
 10.0.0.5 data-01
 ```
 
+{{< /highlight >}}
+
 {{< /tab >}}
 {{< tab tabName="runner-01" >}}
 
+{{< highlight filename="/etc/hosts" >}}
+
 ```txt
 10.0.0.2 manager-01
 10.0.0.5 data-01
 ```
 
+{{< /highlight >}}
+
 {{< /tab >}}
 {{< /tabs >}}
 

layouts/shortcodes/highlight.html

@@ -0,0 +1,7 @@
+<div class="relative">
+    <span
+        class="absolute bottom-0 right-0 bg-primary-100 dark:bg-primary-800 rounded-md rounded-tr-none rounded-bl-none px-4 py-1 text-sm z-10 italic">{{
+        .Get
+        "filename" }}</span>
+    {{- .Inner | markdownify -}}
+</div>