From da215f4b7b48de5e87b0c98476ec2c884a07fe59 Mon Sep 17 00:00:00 2001
From: "Steven R. Loomis" <srl295@gmail.com>
Date: Fri, 6 Sep 2024 10:15:18 -0500
Subject: [PATCH 1/2] CLDR-17803 site: popup menu for subpages

---
 docs/site/assets/css/page.css   | 22 +++++++++++++++++++---
 docs/site/assets/js/cldrsite.js |  9 +++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
index 5b1117833d5..f664feac2a8 100644
--- a/docs/site/assets/css/page.css
+++ b/docs/site/assets/css/page.css
@@ -43,20 +43,36 @@ header .nav ul b {
     color: gray;
 }
 
+.title ul.subpages {
+    display: none;
+}
+
+.title:hover ul.subpages {
+    display: block;
+}
+
 header .nav .crumb {
     color: white;
     margin: .5em;
 }
 
 header .nav ul {
-    display: inline-flexbox;
-    width: 90%;
+    display: inline;
+    /* width: 90%; */
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    background-color: navy;
+    /* background-color: white;
+    position: absolute; */
+    padding: 0.5３m；
 }
 
 header .nav ul li {
-    display: inline-flex;
+    display: block;
     padding: .5em;
+    font-size: medium;
     margin: 0;
+    /* color: black !important; */
 }
 
 header .message {
diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
index e229fb988b3..390be9ff373 100644
--- a/docs/site/assets/js/cldrsite.js
+++ b/docs/site/assets/js/cldrsite.js
@@ -204,8 +204,11 @@ const app = Vue.createApp(
         <span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
           <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
         </span>
-        <span class="title"> {{ ourTitle }} </span>
-        <ul class="subpages">
+        <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
+        <div v-else class="title"><span class="hamburger">≡</span>
+
+        {{ ourTitle }}
+                 <ul class="subpages">
             <li v-for="subpage of siblingPages" :key="subpage.path">
                 <span v-if="path == subpage.html">
                     <b>{{ subpage.title }}</b>
@@ -215,6 +218,8 @@ const app = Vue.createApp(
                 </a>
             </li>
         </ul>
+  </div>
+
     </div>`,
   },
   {

From 3110117993866bbfbd45830543a16f8b0aa9c738 Mon Sep 17 00:00:00 2001
From: "Steven R. Loomis" <srl295@gmail.com>
Date: Fri, 6 Sep 2024 11:03:02 -0500
Subject: [PATCH 2/2] CLDR-17803 site: run prettier, remove dead code

- also formatted
---
 docs/site/assets/css/page.css   | 122 +++++++++++++++++---------------
 docs/site/assets/js/cldrsite.js |  67 +++++++++---------
 2 files changed, 98 insertions(+), 91 deletions(-)

diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
index f664feac2a8..6e0af2c98e4 100644
--- a/docs/site/assets/css/page.css
+++ b/docs/site/assets/css/page.css
@@ -1,136 +1,142 @@
 /* mirror of div.body */
 section.body {
-    margin: 3em;
+  margin: 3em;
 }
 
 header {
-    width: "100%";
-    background-color: #5555ff;
-    border-bottom: 0.5em solid #EEEEFE;
-    padding: 0.5em;
+  width: "100%";
+  background-color: #5555ff;
+  border-bottom: 0.5em solid #eeeefe;
+  padding: 0.5em;
 }
 
 header div.navparent {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
-header .navparent  a.icon {
-    display: table-cell;
-    margin-top: 40;
+header .navparent a.icon {
+  display: table-cell;
+  margin-top: 40;
 }
 
 header .navparent > div {
-    display: table-cell;
+  display: table-cell;
 }
 
 header .title {
-    display: table-cell;
-    color: yellow;
-    font-size: 1.5em;
+  display: table-cell;
+  color: yellow;
+  font-size: 1.5em;
 }
 
-header .nav, header .nav > div {
-    display: inline;
+header .nav,
+header .nav > div {
+  display: inline;
 }
 
 header .nav a {
-    color: white;
+  color: white;
 }
 
 header .nav ul b {
-    color: gray;
+  color: gray;
 }
 
 .title ul.subpages {
-    display: none;
+  display: none;
 }
 
 .title:hover ul.subpages {
-    display: block;
+  display: block;
 }
 
 header .nav .crumb {
-    color: white;
-    margin: .5em;
+  color: white;
+  margin: 0.5em;
 }
 
 header .nav ul {
-    display: inline;
-    /* width: 90%; */
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-    background-color: navy;
-    /* background-color: white;
-    position: absolute; */
-    padding: 0.5３m；
+  display: inline;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  background-color: navy;
+  padding: 0.5em;
 }
 
 header .nav ul li {
-    display: block;
-    padding: .5em;
-    font-size: medium;
-    margin: 0;
-    /* color: black !important; */
+  display: block;
+  padding: 0.5em;
+  font-size: medium;
+  margin: 0;
 }
 
 header .message {
-    color: lightblue;
-    display: list-item;
+  color: lightblue;
+  display: list-item;
 }
 
 footer {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-    border-top: 0.5em solid #eeeefe;
-    font-size: smaller;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  border-top: 0.5em solid #eeeefe;
+  font-size: smaller;
 }
 
-
 /* copied from tr35.css */
 
 .markdown-alert {
-    border-left: 0.25em;
-    padding-left: .5em;
-    border-left-style: solid;
+  border-left: 0.25em;
+  padding-left: 0.5em;
+  border-left-style: solid;
 }
 
 .markdown-alert-title {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .markdown-alert-title svg {
-    margin-right: .5em;
+  margin-right: 0.5em;
 }
 
 .markdown-alert-note {
-    border-color: blue;
+  border-color: blue;
 }
 
 .markdown-alert-note .markdown-alert-title {
-    color: blue;
+  color: blue;
 }
 
 .markdown-alert-important {
-    border-color: blueviolet;
+  border-color: blueviolet;
 }
 
 .markdown-alert-important .markdown-alert-title {
-    color: blueviolet;
+  color: blueviolet;
 }
 
 /* unusable header and stuff from old Sites. */
-svg.K4B8Y, div.Xb9hP, div.hBW7Hb, div.WIdY2d, span.Lw7GHd,  svg.K4B8Y, path.MrYMx, path.K4B8Y, span.Ce1Y1c, svg.hmuWb, svg.wFCWne {
-    display: none;
+svg.K4B8Y,
+div.Xb9hP,
+div.hBW7Hb,
+div.WIdY2d,
+span.Lw7GHd,
+svg.K4B8Y,
+path.MrYMx,
+path.K4B8Y,
+span.Ce1Y1c,
+svg.hmuWb,
+svg.wFCWne {
+  display: none;
 }
 
 header#atViewHeader {
-    display: none !important;
+  display: none !important;
 }
 
 div > header {
-    display: none !important;
+  display: none !important;
 }
diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
index 51e6e54a178..70e5538cb20 100644
--- a/docs/site/assets/js/cldrsite.js
+++ b/docs/site/assets/js/cldrsite.js
@@ -2,9 +2,9 @@ const { ref } = Vue;
 
 // site management
 
-let myPath = window.location.pathname.slice(1) || "index.html"
+let myPath = window.location.pathname.slice(1) || "index.html";
 if (!/\.html/.test(myPath)) {
-    myPath = `${myPath}.html`; // cloudflare likes to drop the .html
+  myPath = `${myPath}.html`; // cloudflare likes to drop the .html
 }
 
 /** replace a/b/c.md with a/b */
@@ -143,18 +143,19 @@ const app = Vue.createApp(
         if (!this.tree?.value) return [];
         let dirForPage = this.ourDir;
         if (this.tree.value.allIndexes.indexOf(this.mdPath) != -1) {
-            const dirPages = Object.entries(this.tree?.value?.allDirs)
-            .filter(([k, {index}]) => index == this.mdPath)[0];
-            if (dirPages) {
-                // our page is an index -so, show the subpages instead of the siblings.
-                dirForPage = dirPages[0]; // the adjusted index
-              } else {
-                return []; // no sibling pages;
-              }
+          const dirPages = Object.entries(this.tree?.value?.allDirs).filter(
+            ([k, { index }]) => index == this.mdPath
+          )[0];
+          if (dirPages) {
+            // our page is an index -so, show the subpages instead of the siblings.
+            dirForPage = dirPages[0]; // the adjusted index
           } else {
-            return []; // no sibling pages
+            return []; // no sibling pages;
           }
-          let thePages = this.tree?.value?.allDirs[dirForPage].pages ?? [];
+        } else {
+          return []; // no sibling pages
+        }
+        let thePages = this.tree?.value?.allDirs[dirForPage].pages ?? [];
         if (dirForPage === "") {
           thePages = [...thePages, ...this.tree?.value?.allDirs["index"].pages];
         }
@@ -167,52 +168,52 @@ const app = Vue.createApp(
             title: this.tree.value.title[path] ?? path,
           }))
           .sort((a, b) => c.compare(a.title, b.title))
-          .filter(({html}) => html != t.path); // skip showing the index page in the subpage list
+          .filter(({ html }) => html != t.path); // skip showing the index page in the subpage list
       },
       ancestorPages() {
         const pages = [];
         // if we are not loaded, or if we're at the root, then exit
-        if (!this.tree?.value || !this.path || this.path == 'index.html') return pages;
+        if (!this.tree?.value || !this.path || this.path == "index.html")
+          return pages;
         // traverse
         let path = this.path;
         do {
           // calculate the immediate ancestor
           const pathMd = html2md(path);
           const dir = path2dir(path);
-          const nextIndex = this.tree.value.allDirs[dir].index || 'index.md'; // falls back to top
+          const nextIndex = this.tree.value.allDirs[dir].index || "index.md"; // falls back to top
           const nextIndexHtml = md2html(nextIndex);
           const nextIndexTitle = this.tree.value.title[nextIndex];
           // prepend
           pages.push({
-            href: '/'+nextIndexHtml,
+            href: "/" + nextIndexHtml,
             title: nextIndexTitle,
           });
           if (nextIndexHtml == path) {
-            console.error('Loop detected from ' + this.path);
-            path = 'index.html'; // exit
+            console.error("Loop detected from " + this.path);
+            path = "index.html"; // exit
           }
           path = nextIndexHtml;
-        } while(path && path != 'index.html'); // we iterate over 'path', so html
+        } while (path && path != "index.html"); // we iterate over 'path', so html
         pages.reverse();
         return pages;
-      }
+      },
     },
-    template: `<div>
-        <div class='status' v-if="status">{{ status }}</div>
-        <div class='status' v-if="!tree">Loading…</div>
-
+    template: `
+    <div>
+       <div class='status' v-if="status">{{ status }}</div>
+       <div class='status' v-if="!tree">Loading…</div>
        <a class="icon" href="http://www.unicode.org/"> <img border="0"
 					src="/assets/img/logo60s2.gif"  alt="[Unicode]" width="34"
 					height="33"></a>&nbsp;&nbsp;
 
-        <span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
-          <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
-        </span>
-        <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
-        <div v-else class="title"><span class="hamburger">≡</span>
-
-        {{ ourTitle }}
-                 <ul class="subpages">
+       <span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
+         <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
+       </span>
+       <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
+       <div v-else class="title"><span class="hamburger">≡</span>
+            {{ ourTitle }}
+        <ul class="subpages">
             <li v-for="subpage of siblingPages" :key="subpage.path">
                 <span v-if="path == subpage.html">
                     <b>{{ subpage.title }}</b>
@@ -222,7 +223,7 @@ const app = Vue.createApp(
                 </a>
             </li>
         </ul>
-  </div>
+      </div>
 
     </div>`,
   },