dev tabs system

assets/css/custom.css

@@ -2,6 +2,10 @@
   position: static
 }
 
+.m-1 {
+  margin: 0.25rem
+}
+
 .mt-0 {
   margin-top: 0px
 }
@@ -22,6 +26,30 @@
   margin-top: 0.25rem
 }
 
+.ml-auto {
+  margin-left: auto
+}
+
+.-mb-px {
+  margin-bottom: -1px
+}
+
+.mr-1 {
+  margin-right: 0.25rem
+}
+
+.mt-2 {
+  margin-top: 0.5rem
+}
+
+.-mt-2 {
+  margin-top: -0.5rem
+}
+
+.-mt-4 {
+  margin-top: -1rem
+}
+
 .inline-block {
   display: inline-block
 }
@@ -50,6 +78,14 @@
   width: 9rem
 }
 
+.w-full {
+  width: 100%
+}
+
+.max-w-md {
+  max-width: 28rem
+}
+
 .flex-grow {
   flex-grow: 1
 }
@@ -74,6 +110,12 @@
   gap: 1rem
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
 .rounded {
   border-radius: 0.25rem
 }
@@ -86,10 +128,31 @@
   border-radius: 9999px
 }
 
+.rounded-xl {
+  border-radius: 0.75rem
+}
+
+.rounded-lg {
+  border-radius: 0.5rem
+}
+
+.rounded-md {
+  border-radius: 0.375rem
+}
+
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem
+}
+
 .border-2 {
   border-width: 2px
 }
 
+.border {
+  border-width: 1px
+}
+
 .border-b-8 {
   border-bottom-width: 8px
 }
@@ -98,15 +161,72 @@
   border-bottom-width: 2px
 }
 
+.border-b {
+  border-bottom-width: 1px
+}
+
+.border-l {
+  border-left-width: 1px
+}
+
+.border-t {
+  border-top-width: 1px
+}
+
+.border-r {
+  border-right-width: 1px
+}
+
 .border-purple-500 {
   --tw-border-opacity: 1;
   border-color: rgb(168 85 247 / var(--tw-border-opacity))
 }
 
+.border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 232 255 / var(--tw-border-opacity))
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+
+.bg-blue-900\/20 {
+  background-color: rgb(30 58 138 / 0.2)
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity))
+}
+
+.bg-purple-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity))
+}
+
+.bg-purple-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 28 135 / var(--tw-bg-opacity))
+}
+
 .p-4 {
   padding: 1rem
 }
 
+.p-6 {
+  padding: 1.5rem
+}
+
+.p-1 {
+  padding: 0.25rem
+}
+
+.p-3 {
+  padding: 0.75rem
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem
@@ -117,6 +237,41 @@
   padding-bottom: 0.5rem
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem
+}
+
 .pb-2 {
   padding-bottom: 0.5rem
 }
@@ -125,6 +280,10 @@
   padding-bottom: 0.25rem
 }
 
+.pt-4 {
+  padding-top: 1rem
+}
+
 .text-center {
   text-align: center
 }
@@ -144,6 +303,11 @@
   line-height: 2rem
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem
+}
+
 .font-extrabold {
   font-weight: 800
 }
@@ -152,6 +316,18 @@
   font-weight: 700
 }
 
+.font-semibold {
+  font-weight: 600
+}
+
+.font-medium {
+  font-weight: 500
+}
+
+.leading-5 {
+  line-height: 1.25rem
+}
+
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity))
@@ -162,12 +338,80 @@
   color: rgb(115 115 115 / var(--tw-text-opacity))
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity))
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity))
+}
+
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity))
+}
+
 .\!no-underline {
   -webkit-text-decoration-line: none !important;
           text-decoration-line: none !important
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.ring-white {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))
+}
+
+.ring-opacity-60 {
+  --tw-ring-opacity: 0.6
+}
+
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px
+}
+
+.ring-offset-blue-400 {
+  --tw-ring-offset-color: #60a5fa
+}
+
+.hover\:bg-white\/\[0\.12\]:hover {
+  background-color: rgb(255 255 255 / 0.12)
+}
+
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity))
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
 @media (prefers-color-scheme: dark) {
+  .dark\:border-purple-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(88 28 135 / var(--tw-border-opacity))
+  }
+
   .dark\:text-neutral-400 {
     --tw-text-opacity: 1;
     color: rgb(163 163 163 / var(--tw-text-opacity))
@@ -178,6 +422,11 @@
   .sm\:flex-row {
     flex-direction: row
   }
+
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px
+  }
 }
 
 @media (min-width: 768px) {

content/posts/2022-02-13-build-your-own-docker-swarm-cluster.md

@@ -173,3 +173,29 @@ If you don't need of `worker` and `runner` nodes, with only one simple standalon
 If you intend to have your own self-hosted GitLab for an enterprise grade CI/CD workflow, you should run it on node with **8 GB** of RAM.  
 **4 GB** is doable if you run just one single GitLab container on it with Prometheus mode disabled and external PostgreSQL.
 {{< /alert >}}
+
+## Let's party
+
+Before continue I presume you have :
+
+* Hetzner cloud account ready
+* Configured [hcloud cli](https://github.com/hetznercloud/cli)
+
+Firstly create the new context for your new project :
+
+{{< tabs tabTotal="2" >}}
+{{< tab tabName="Bash" >}}
+
+```sh
+cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 64 | head -n 1
+```
+
+{{< /tab >}}
+{{< tab tabName="Powershell" >}}
+
+```powershell
+-join ((48..57) + (65..90) + (97..122) | Get-Random -Count 64 | % {[char]$_})
+```
+
+{{< /tab >}}
+{{< /tabs >}}

layouts/partials/extend-footer.html

@@ -0,0 +1 @@
+<script src="//unpkg.com/alpinejs" defer></script>

layouts/shortcodes/tab.html

@@ -0,0 +1,8 @@
+{{ $tabName := .Get "tabName" }}
+{{ .Parent.Scratch.Add "tabName" (slice $tabName) }}
+
+<div class="" x-show="openTab === {{ .Ordinal }}">
+
+    {{ $.Inner | markdownify }}
+
+</div>

layouts/shortcodes/tabs.html

@@ -0,0 +1,25 @@
+<div x-data="{ openTab: 0 }">
+
+    <nav class="flex p-1 space-x-1 bg-blue-900/20 rounded-md">
+
+        {{ $tabTotal := .Get "tabTotal" }}
+        {{ $tabName := .Scratch.Get "tabName" }}
+
+        {{ range $i, $sequence := (seq $tabTotal) }}
+
+        <button @click="openTab = {{ $i }}" class="w-full py-2.5 text-sm rounded-md focus:outline-none"
+            :class="openTab === {{ $i }} ? 'bg-primary-100 dark:bg-primary-900 shadow' : 'hover:bg-white/[0.12] hover:text-white'"
+            href="#">{{
+            (replaceRE "(\\s)" "" (index $tabName $i)) }}</button>
+
+        {{ end }}
+
+    </nav>
+
+    <div class="-mt-4">
+
+        {{ .Inner }}
+
+    </div>
+
+</div>