themes/default/layouts/partials: Merge menu

15 files changed, 91 insertions, 76 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index af163a8..cf106eb 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -157,9 +157,9 @@ li:target [role="doc-backlink"][href^="#fnref\:"] {
 
 nav a:focus,
 button:focus,
+menu a:focus,
 code-block a:focus,
-gallery-images a:focus,
-context-control a:focus {
+gallery-images a:focus {
   outline-offset: -0.2rem !important;
 }
 
@@ -608,7 +608,7 @@ pre code {
 
 summary,
 abbr[title] label,
-micro-metadata-menu context-control label {
+menu label {
   cursor: pointer;
 }
 
@@ -625,7 +625,7 @@ a:hover {
 }
 
 a:hover,
-micro-metadata-menu:hover span,
+menu:hover span,
 micro-metadata-view a:hover span,
 micro-metadata-draft a:hover span,
 micro-metadata-handle a:hover span {
@@ -1263,25 +1263,28 @@ micro-metadata-anchored a[data-anchored="marked"] svg {
   fill: #cd5c5c;
 }
 
-micro-metadata-menu {
+menu {
   display: inline-block;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
   position: relative;
 }
 
-micro-metadata-menu context-menu {
+menu context-menu {
   min-width: 10rem;
 }
 
-micro-metadata-menu context-menu svg {
+menu context-menu svg {
   margin-right: 0.25rem;
 }
 
-micro-metadata-menu context-menu a {
+menu context-menu a {
   display: block;
   padding: 0.5rem 1rem;
 }
 
-micro-metadata-menu context-menu a:hover {
+menu context-menu a:hover {
   background-color: #eee;
   background-color: var(--hover-background);
   border-radius: 0.25rem;
@@ -1306,7 +1309,7 @@ micro-metadata context-menu a span {
   text-decoration: none;
 }
 
-micro-metadata-menu span,
+menu span,
 micro-metadata-view a span,
 micro-metadata-name a:hover,
 micro-metadata-draft a span,
@@ -2146,21 +2149,21 @@ context-menu {
   opacity: 0;
 }
 
-context-menu[right] {
+context-menu[position="right"] {
   right: 0;
 }
 
-context-menu[left] {
+context-menu[position="left"] {
   left: 0;
 }
 
-context-menu[anchor] {
+context-menu[position="anchor"] {
   left: -125%;
   top: 0;
 }
 
-context-menu[left],
-context-menu[right] {
+context-menu[position="left"],
+context-menu[position="right"] {
   top: 1rem;
 }
 
diff --git a/assets/js/index.js b/assets/js/index.js
index cc23d2c..61fbe68 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -378,7 +378,7 @@
         }
     };
     self.addEventListener("scroll", function() {
-        const triggers = document.querySelectorAll("micro-metadata-menu input");
+        const triggers = document.querySelectorAll("menu input");
         hide(triggers);
     });
     [
@@ -386,8 +386,8 @@
         "touchstart"
     ].forEach(function(event) {
         self.addEventListener(event, function(event) {
-            const menus = document.querySelectorAll("micro-metadata-menu");
-            const triggers = document.querySelectorAll("micro-metadata-menu input");
+            const menus = document.querySelectorAll("menu");
+            const triggers = document.querySelectorAll("menu input");
             hideIfClickedOutside(menus, triggers, event);
         });
     });
diff --git a/static/js/contextmenu.ts b/static/js/contextmenu.ts
index b19cf9e..5add288 100644
--- a/static/js/contextmenu.ts
+++ b/static/js/contextmenu.ts
@@ -14,14 +14,14 @@
   };
 
   self.addEventListener("scroll", function () {
-    const triggers = document.querySelectorAll("micro-metadata-menu input");
+    const triggers = document.querySelectorAll("menu input");
     hide(triggers);
   });
 
   ["click", "touchstart"].forEach(function (event) {
     self.addEventListener(event, function (event) {
-      const menus = document.querySelectorAll("micro-metadata-menu");
-      const triggers = document.querySelectorAll("micro-metadata-menu input");
+      const menus = document.querySelectorAll("menu");
+      const triggers = document.querySelectorAll("menu input");
       hideIfClickedOutside(menus, triggers, event);
     });
   });
diff --git a/themes/default/layouts/partials/card-meta-header.html b/themes/default/layouts/partials/card-meta-header.html
index 3fcd670..5672972 100644
--- a/themes/default/layouts/partials/card-meta-header.html
+++ b/themes/default/layouts/partials/card-meta-header.html
@@ -10,16 +10,16 @@
 
   {{- partial "meta-handle.html" . -}}
 
-  {{- partial "meta-date-time.html" . -}}
+  {{- partial "meta-datetime.html" . -}}
 
   {{- partial "meta-view.html" . -}}
 
-  {{- partial "meta-context-menu.html" . -}}
+  {{- partial "meta-menu.html" . -}}
 
-  {{- partial "meta-word-count.html" . -}}
+  {{- partial "meta-wordcount.html" . -}}
 
-  {{- partial "meta-read-time.html" . -}}
+  {{- partial "meta-readtime.html" . -}}
 
-  {{- partial "meta-expiry-date.html" . -}}
+  {{- partial "meta-expirydate.html" . -}}
 
 </header>
diff --git a/themes/default/layouts/partials/menu-datetime.html b/themes/default/layouts/partials/menu-datetime.html
new file mode 100644
index 0000000..5b2acf1
--- /dev/null
+++ b/themes/default/layouts/partials/menu-datetime.html
@@ -0,0 +1,22 @@
+{{- $href := print .Permalink -}}
+
+<micro-metadata-datetime>
+  <a href="{{ $href }}">
+    {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/calendar.svg")) -}}
+    <time
+      data-type="localDate"
+      datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}"
+    >
+      {{ .Date | time.Format "Jan 2 2006" -}}
+    </time>
+  </a>
+  <a href="{{ $href }}">
+    {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/clock.svg")) -}}
+    <time
+      data-type="localTime"
+      datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}"
+    >
+      {{ .Date | time.Format "15:04 MST" -}}
+    </time>
+  </a>
+</micro-metadata-datetime>
diff --git a/themes/default/layouts/partials/menu-embed.html b/themes/default/layouts/partials/menu-embed.html
new file mode 100644
index 0000000..7890102
--- /dev/null
+++ b/themes/default/layouts/partials/menu-embed.html
@@ -0,0 +1,8 @@
+{{- $href := print .Permalink -}}
+
+<micro-metadata-embed>
+  <a href="{{ print $href "embed.html" }}">
+    {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/code.svg")) -}}
+    <span>Embed</span>
+  </a>
+</micro-metadata-embed>
diff --git a/themes/default/layouts/partials/meta-markdown.html b/themes/default/layouts/partials/menu-markdown.html
index 7098fa5..7098fa5 100644
--- a/themes/default/layouts/partials/meta-markdown.html
+++ b/themes/default/layouts/partials/menu-markdown.html
diff --git a/themes/default/layouts/partials/meta-permalink.html b/themes/default/layouts/partials/menu-permalink.html
index 2af4e8a..2af4e8a 100644
--- a/themes/default/layouts/partials/meta-permalink.html
+++ b/themes/default/layouts/partials/menu-permalink.html
diff --git a/themes/default/layouts/partials/menu-plain.html b/themes/default/layouts/partials/menu-plain.html
new file mode 100644
index 0000000..3886945
--- /dev/null
+++ b/themes/default/layouts/partials/menu-plain.html
@@ -0,0 +1,9 @@
+{{- $href   := print .Permalink -}}
+{{- $plain  := print $href "index.txt" -}}
+
+<micro-metadata-plain>
+  <a href="{{ $plain }}">
+    {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/notes.svg")) -}}
+    <span>Plaintext</span>
+  </a>
+</micro-metadata-plain>
diff --git a/themes/default/layouts/partials/meta-context-menu.html b/themes/default/layouts/partials/meta-context-menu.html
deleted file mode 100644
index 89f88d2..0000000
--- a/themes/default/layouts/partials/meta-context-menu.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{{- $id     := partial "card-id.html" . -}}
-{{- $href   := print .Permalink -}}
-{{- $plain  := print $href "index.txt" -}}
-
-<micro-metadata-menu>
-  <context-control>
-    <label for="context-metadata-{{ $id }}">
-      {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/arrow-down-circle.svg")) -}}
-      <span>menu</span>
-    </label>
-    <input hidden type="checkbox" id="context-metadata-{{ $id }}" />
-    <context-menu anchor>
-      {{- partial "meta-markdown.html"  . -}}
-      <micro-metadata-plain>
-        <a href="{{ $plain }}">
-          {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/notes.svg")) -}}
-          <span>Plaintext</span>
-        </a>
-      </micro-metadata-plain>
-      <micro-metadata-embed>
-        <a href="{{ print $href "embed.html" }}">
-          {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/code.svg")) -}}
-          <span>Embed</span>
-        </a>
-      </micro-metadata-embed>
-      {{- partial "meta-permalink.html" . -}}
-      <micro-metadata-datetime>
-        <a href="{{ $href }}">
-          {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/calendar.svg")) -}}
-          <time
-            data-type="localDate"
-            datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}"
-          >
-            {{ .Date | time.Format "Jan 2 2006" -}}
-          </time>
-        </a>
-        <a href="{{ $href }}">
-          {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/clock.svg")) -}}
-          <time
-            data-type="localTime"
-            datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}"
-          >
-            {{ .Date | time.Format "15:04 MST" -}}
-          </time>
-        </a>
-      </micro-metadata-datetime>
-    </context-menu>
-  </context-control>
-</micro-metadata-menu>
-{{- /* This comment removes trailing newlines and white spaces. */ -}}
diff --git a/themes/default/layouts/partials/meta-date-time.html b/themes/default/layouts/partials/meta-datetime.html
index 1dc50f3..1dc50f3 100644
--- a/themes/default/layouts/partials/meta-date-time.html
+++ b/themes/default/layouts/partials/meta-datetime.html
diff --git a/themes/default/layouts/partials/meta-expiry-date.html b/themes/default/layouts/partials/meta-expirydate.html
index 6eef09e..6eef09e 100644
--- a/themes/default/layouts/partials/meta-expiry-date.html
+++ b/themes/default/layouts/partials/meta-expirydate.html
diff --git a/themes/default/layouts/partials/meta-menu.html b/themes/default/layouts/partials/meta-menu.html
new file mode 100644
index 0000000..f5e127d
--- /dev/null
+++ b/themes/default/layouts/partials/meta-menu.html
@@ -0,0 +1,23 @@
+{{- $id := partial "card-id.html" . -}}
+
+<menu>
+  <li>
+    <label for="context-metadata-{{ $id }}">
+      {{- safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/arrow-down-circle.svg")) -}}
+      <span>menu</span>
+    </label>
+  </li>
+  <li>
+    <input hidden="" type="checkbox" id="context-metadata-{{ $id }}" />
+    <context-menu position="anchor">
+
+      {{- partial "menu-markdown.html"  . -}}
+      {{- partial "menu-plain.html"     . -}}
+      {{- partial "menu-embed.html"     . -}}
+      {{- partial "menu-permalink.html" . -}}
+      {{- partial "menu-datetime.html"  . -}}
+
+    </context-menu>
+  </li>
+</menu>
+{{- /* This comment removes trailing newlines and white spaces. */ -}}
diff --git a/themes/default/layouts/partials/meta-read-time.html b/themes/default/layouts/partials/meta-readtime.html
index 1af03e7..1af03e7 100644
--- a/themes/default/layouts/partials/meta-read-time.html
+++ b/themes/default/layouts/partials/meta-readtime.html
diff --git a/themes/default/layouts/partials/meta-word-count.html b/themes/default/layouts/partials/meta-wordcount.html
index 5fd5451..5fd5451 100644
--- a/themes/default/layouts/partials/meta-word-count.html
+++ b/themes/default/layouts/partials/meta-wordcount.html