From 8640f11fec849d6967b7a35a34beae6a1d2b7622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Fri, 9 Jun 2023 15:41:27 +0200
Subject: [PATCH] readded complex dropdown as modular, added instructions for
 cloudflare

---
 assets/images/global/comments.svg |  7 ++++
 assets/images/global/piechart.svg |  8 ++++
 assets/images/global/stars.svg    |  7 ++++
 cloudflare.md                     | 16 ++++++++
 hugo.yaml                         | 30 ++++++++++++--
 hugo.yaml.exampleSite             | 30 ++++++++++++--
 layouts/index.html                | 16 ++++----
 layouts/partials/nav.html         | 65 ++++++++++++++++++++++++++++++-
 8 files changed, 164 insertions(+), 15 deletions(-)
 create mode 100644 assets/images/global/comments.svg
 create mode 100644 assets/images/global/piechart.svg
 create mode 100644 assets/images/global/stars.svg
 create mode 100644 cloudflare.md

diff --git a/assets/images/global/comments.svg b/assets/images/global/comments.svg
new file mode 100644
index 0000000..3194e8d
--- /dev/null
+++ b/assets/images/global/comments.svg
@@ -0,0 +1,7 @@
+<svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path
+                                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
+                                        </path>
+                                    </svg>
diff --git a/assets/images/global/piechart.svg b/assets/images/global/piechart.svg
new file mode 100644
index 0000000..2bdb6f0
--- /dev/null
+++ b/assets/images/global/piechart.svg
@@ -0,0 +1,8 @@
+<svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z">
+                                        </path>
+                                        <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
+                                        </path>
+                                    </svg>
diff --git a/assets/images/global/stars.svg b/assets/images/global/stars.svg
new file mode 100644
index 0000000..5544426
--- /dev/null
+++ b/assets/images/global/stars.svg
@@ -0,0 +1,7 @@
+<svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path
+                                              d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
+                                        </path>
+                                    </svg>
diff --git a/cloudflare.md b/cloudflare.md
new file mode 100644
index 0000000..d2b9600
--- /dev/null
+++ b/cloudflare.md
@@ -0,0 +1,16 @@
+# Deploying to cloudflare pages
+Use `Hugo` preset and change the command to:
+```sh
+npm install && hugo --gc --minify
+```
+
+# Cloudflare Pages v1
+Version 1 uses old Hugo, Go and Node.js version (0.54.0, 1.14.4 and 12.18.0), you need to switch to a supported ones (>= 0.104.0, 1.20, 18) using env vars:
+```sh
+HUGO_VERSION=0.111.3
+GO_VERSION=1.20.3
+NODE_VERSION=18.16.0
+```
+
+# Cloudflare Pages v2
+Version 2 uses appropriate versions of Hugo, Go and Node.js by default.
\ No newline at end of file
diff --git a/hugo.yaml b/hugo.yaml
index 606b71d..b01f7cb 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -86,14 +86,19 @@ menu:
       name: About
       url: /about/
       weight: 20
-    - identifier: dropdown_categories
+    - identifier: categories
+      pre: dropdown
       name: Categories
       weight: 30
+    - identifier: dropdown
+      pre: complexdropdown
+      name: Dropdown
+      weight: 40
     - identifier: contact
       name: Contact
       url: /contact/
-      weight: 40
-  dropdown_categories:
+      weight: 50
+  categories:
     - identifier: prose
       name: Prose
       url: /prose/
@@ -102,6 +107,25 @@ menu:
       name: About
       url: /about/
       weight: 20
+  dropdown:
+    - identifier: appearance
+      pre: stars # can be stars, comments or piechart
+      name: Appearance
+      post: "Easy customization"
+      url: "#"
+      weight: 10
+    - identifier: comments
+      pre: comments # can be stars, comments or piechart
+      name: Comments
+      post: "Check your latest comments"
+      url: "#"
+      weight: 20
+    - identifier: analytics
+      pre: piechart # can be stars, comments or piechart
+      name: Analytics
+      post: "Take a look at your statistics"
+      url: "#"
+      weight: 30
   footer:
     - identifier: about
       name: About
diff --git a/hugo.yaml.exampleSite b/hugo.yaml.exampleSite
index a60d1e6..180dede 100644
--- a/hugo.yaml.exampleSite
+++ b/hugo.yaml.exampleSite
@@ -85,14 +85,19 @@ menu:
       name: About
       url: /about/
       weight: 20
-    - identifier: dropdown_categories
+    - identifier: categories
+      pre: dropdown
       name: Categories
       weight: 30
+    - identifier: dropdown
+      pre: complexdropdown
+      name: Dropdown
+      weight: 40
     - identifier: contact
       name: Contact
       url: /contact/
-      weight: 40
-  dropdown_categories:
+      weight: 50
+  categories:
     - identifier: prose
       name: Prose
       url: /prose/
@@ -101,6 +106,25 @@ menu:
       name: About
       url: /about/
       weight: 20
+  dropdown:
+    - identifier: appearance
+      pre: stars # can be stars, comments or piechart
+      name: Appearance
+      post: "Easy customization"
+      url: "#"
+      weight: 10
+    - identifier: comments
+      pre: comments # can be stars, comments or piechart
+      name: Comments
+      post: "Check your latest comments"
+      url: "#"
+      weight: 20
+    - identifier: analytics
+      pre: piechart # can be stars, comments or piechart
+      name: Analytics
+      post: "Take a look at your statistics"
+      url: "#"
+      weight: 30
   footer:
     - identifier: about
       name: About
diff --git a/layouts/index.html b/layouts/index.html
index fa59311..b6cf026 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,15 +4,15 @@
         <div class="max-w-screen-xl px-4 py-8 mx-auto">
             <div class="grid items-center gap-8 mb-8 sm:mb-0 lg:gap-12 lg:grid-cols-12">
                 <div class="col-span-6 px-4 text-center sm:mb-6 lg:text-left lg:mb-0">
-                    <h1
-                        class="mb-2 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white">
-                        {{ .Site.Title }}</h1>
+                    <h1 class="mb-2 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white">
+                        {{ .Site.Title }}
+                    </h1>
                     <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
                         {{ .Site.Params.Moto }}
                     </h2>
-                    <p
-                       class="max-w-xl mx-auto mb-6 font-normal text-gray-900 lg:mx-0 xl:mb-2 md:text-lg xl:text-xl dark:text-gray-50">
-                        {{ .Site.Params.Description}}</p>
+                    <p class="max-w-xl mx-auto mb-6 font-normal text-gray-900 lg:mx-0 xl:mb-2 md:text-lg xl:text-xl dark:text-gray-50">
+                        {{ .Site.Params.Description}}
+                    </p>
                 </div>
                 <div class="col-span-6">
                     {{ $hero := resources.GetMatch "images/pages/tailbliss-rocket-indigo.png" }}
@@ -52,7 +52,7 @@
                     <div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
                         {{ $p1image := resources.Get .Site.Params.P1.Image }}
                         {{ with $p1image }}
-                        {{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
+                        {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
                         <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
                              class="absolute inset-0 object-cover w-full h-full" alt="P1"
                              loading="lazy" />
@@ -117,7 +117,7 @@
                     <div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
                         {{ $p2image := resources.Get .Site.Params.P2.Image }}
                         {{ with $p2image }}
-                        {{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
+                        {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
                         <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
                              class="absolute inset-0 object-cover w-full h-full" alt="P2"
                              loading="lazy" />
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 8016d05..a0392af 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -24,7 +24,70 @@
         <nav :class="{'flex': open, 'hidden': !open}"
              class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
             {{ range site.Menus.main }}
-            {{ if (findRE "dropdown_" .Identifier) }}
+            {{ if (eq "complexdropdown" .Pre) }}
+            <div @click.away="open = false" class="relative" x-data="{ open: false }">
+                <button @click="open = !open"
+                        class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
+                    <span>{{ .Name }}</span>
+                    <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}"
+                         class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
+                        <path fill-rule="evenodd"
+                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                              clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+                <div x-show="open" x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="transform opacity-0 scale-95"
+                     x-transition:enter-end="transform opacity-100 scale-100"
+                     x-transition:leave="transition ease-in duration-75"
+                     x-transition:leave-start="transform opacity-100 scale-100"
+                     x-transition:leave-end="transform opacity-0 scale-95"
+                     class="absolute right-0 z-30 w-full mt-2 origin-top-right md:max-w-sm md:w-screen">
+                    <div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg text-zinc-900">
+                        <div class="grid grid-cols-1 gap-4">
+                            {{ range (index site.Menus .Identifier) }}
+                            <a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
+                               href="{{ .URL | absLangURL }}">
+                                <div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900">
+                                    {{ if (eq .Pre "stars") }}
+                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path
+                                              d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
+                                        </path>
+                                    </svg>
+                                    {{ else if (eq .Pre "comments") }}
+                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path
+                                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
+                                        </path>
+                                    </svg>
+                                    {{ else }}
+                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
+                                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                                         class="w-4 h-4 md:h-6 md:w-6">
+                                        <path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z">
+                                        </path>
+                                        <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
+                                        </path>
+                                    </svg>
+                                    {{ end }}
+                                    
+                                </div>
+                                <div class="ml-3">
+                                    <p class="font-semibold">{{ .Name }}</p>
+                                    <p class="text-sm">{{ .Post }}</p>
+                                </div>
+                            </a>
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{ else if (eq "dropdown" .Pre) }}
             <div @click.away="open = false" class="relative" x-data="{ open: false }">
                 <button @click="open = !open"
                         class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">