From df49634fd4ac35f8adbe96dc5a9ddc66879f5545 Mon Sep 17 00:00:00 2001 From: Adrien Beaudouin Date: Wed, 16 Feb 2022 22:12:11 +0100 Subject: [PATCH] dev tabs system --- assets/css/custom.css | 249 ++++++++++++++++++ ...-13-build-your-own-docker-swarm-cluster.md | 26 ++ layouts/partials/extend-footer.html | 1 + layouts/shortcodes/tab.html | 8 + layouts/shortcodes/tabs.html | 25 ++ 5 files changed, 309 insertions(+) create mode 100644 layouts/partials/extend-footer.html create mode 100644 layouts/shortcodes/tab.html create mode 100644 layouts/shortcodes/tabs.html diff --git a/assets/css/custom.css b/assets/css/custom.css index 4282e2c..1dfff9e 100644 --- a/assets/css/custom.css +++ b/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) { diff --git a/content/posts/2022-02-13-build-your-own-docker-swarm-cluster.md b/content/posts/2022-02-13-build-your-own-docker-swarm-cluster.md index f1b1358..b63ec66 100644 --- a/content/posts/2022-02-13-build-your-own-docker-swarm-cluster.md +++ b/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 >}} diff --git a/layouts/partials/extend-footer.html b/layouts/partials/extend-footer.html new file mode 100644 index 0000000..1e7ab13 --- /dev/null +++ b/layouts/partials/extend-footer.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html new file mode 100644 index 0000000..43793d0 --- /dev/null +++ b/layouts/shortcodes/tab.html @@ -0,0 +1,8 @@ +{{ $tabName := .Get "tabName" }} +{{ .Parent.Scratch.Add "tabName" (slice $tabName) }} + +
+ + {{ $.Inner | markdownify }} + +
\ No newline at end of file diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html new file mode 100644 index 0000000..696352b --- /dev/null +++ b/layouts/shortcodes/tabs.html @@ -0,0 +1,25 @@ +
+ + + +
+ + {{ .Inner }} + +
+ +
\ No newline at end of file