add mtu 1450 for hetzner

assets/css/compiled/main.css

@@ -1746,6 +1746,14 @@ body:has(#menu-controller:checked) {
   top: 0px;
 }
 
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.bottom-1 {
+  bottom: 0.25rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1762,6 +1770,10 @@ body:has(#menu-controller:checked) {
   z-index: 30;
 }
 
+.-z-10 {
+  z-index: -10;
+}
+
 .order-first {
   order: -9999;
 }
@@ -2045,6 +2057,16 @@ body:has(#menu-controller:checked) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-full {
+  --tw-translate-x: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-full {
+  --tw-translate-y: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -2164,6 +2186,11 @@ body:has(#menu-controller:checked) {
   border-bottom-left-radius: 0.5rem;
 }
 
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 .rounded-tr-none {
   border-top-right-radius: 0px;
 }
@@ -2172,6 +2199,14 @@ body:has(#menu-controller:checked) {
   border-bottom-left-radius: 0px;
 }
 
+.rounded-br-none {
+  border-bottom-right-radius: 0px;
+}
+
+.rounded-tl-none {
+  border-top-left-radius: 0px;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -2256,6 +2291,11 @@ body:has(#menu-controller:checked) {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .bg-orange-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(234 88 12 / var(--tw-bg-opacity));
@@ -2326,11 +2366,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
 
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
@@ -2678,6 +2713,11 @@ body:has(#menu-controller:checked) {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity)) !important;
 }
 
+.hover\:\!bg-blue-500:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important;
+}
+
 .hover\:\!bg-orange-500:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity)) !important;
@@ -2722,11 +2762,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
 }
 
-.hover\:\!bg-blue-500:hover {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important;
-}
-
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@@ -2992,6 +3027,11 @@ body:has(#menu-controller:checked) {
   background-color: rgb(22 101 52 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-orange-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -3050,11 +3090,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-neutral-800), 0.5);
 }
 
-.dark .dark\:bg-blue-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -3137,6 +3172,11 @@ body:has(#menu-controller:checked) {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity)) !important;
 }
 
+.dark .dark\:hover\:\!bg-blue-700:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity)) !important;
+}
+
 .dark .dark\:hover\:\!bg-orange-700:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(194 65 12 / var(--tw-bg-opacity)) !important;
@@ -3172,11 +3212,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:\!bg-blue-700:hover {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity)) !important;
-}
-
 .dark .dark\:hover\:text-primary-400:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));

assets/css/custom.css

@@ -0,0 +1,3 @@
+.highlight-file .chroma {
+    padding-bottom: 2rem;
+}

content/posts/04-build-your-own-docker-swarm-cluster-part-3/index.md

@@ -47,6 +47,37 @@ When done use `docker node ls` on manager node in order to confirm the presence
 
 Yeah, cluster is already properly configured. Far less overwhelming than Kubernetes, I should say.
 
+#### Hetzner & MTU
+
+{{< alert >}}
+Just one last important thing before continue, specific to Hetzner. Their private network is set to **1450 MTU** by default, which is **not compatible with Docker Swarm overlay network**. You must change it to 1450 MTU in order to avoid any further dysfunctions between node swarm communication. Many thanks to [DcapCode](https://github.com/DcapCode) to reported it ❤️. [See here](https://www.reddit.com/r/portainer/comments/qt1mne/swarm_deployment_woes/) for further explanation.
+{{< /alert >}}
+
+Recreate the `ingress` network with the correct MTU :
+
+```sh
+docker network rm ingress
+docker network create -d overlay --ingress --opt com.docker.network.driver.mtu=1450 ingress
+```
+
+The trade-off is that you will have to specify this MTU for every further networks that we'll create inside further docker-compose (stacks). Example for traefik stack :
+
+{{< highlight host="manager-01" file="~/traefik-stack.yml" >}}
+
+```yml
+version: "3.8"
+
+services:
+  # ...
+
+networks:
+  public:
+    driver_opts:
+      com.docker.network.driver.mtu: 1450
+```
+
+{{< /highlight >}}
+
 ### CLI tools & environment labels
 
 [`ctop`](https://github.com/bcicen/ctop) is a very useful CLI tools that works like `htop` but dedicated for docker containers. Install it on every docker hosts :

layouts/shortcodes/highlight.html

@@ -1,4 +1,4 @@
-<div class="relative">
+<div class="highlight-file 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">{{ if .Get "host" }}<strong>{{ .Get "host" }}</strong>{{ end }}{{ if and (.Get "host") (.Get "file") }} - {{ end }}{{ if .Get "file" }}{{ .Get "file" }}{{ end }}</span>
     {{- .Inner | markdownify -}}