CLDR-17803 docs/site: improved nav

docs/site/_config.yml

@@ -19,3 +19,6 @@ defaults:
     values:
       layout: page
 
+include:
+  - node_modules
+

docs/site/_layouts/page.html

@@ -14,31 +14,25 @@
 		<div class="icon"><a href="http://www.unicode.org/"> <img border="0"
 					src="http://www.unicode.org/webscripts/logo60s2.gif" align="middle" alt="[Unicode]" width="34"
 					height="33"></a>&nbsp;&nbsp;
-			<a class="bar" href="/">
-				<font size="3">
-					CLDR Site / {{page.title}}
-				</font>
-			</a>
-		</div>
-		<div class="bar"><a href="http://www.unicode.org" class="bar">Home</a>
-			| <a href="http://www.unicode.org/sitemap/" class="bar">Site
-				Map</a> | <a href="http://www.unicode.org/search/" class="bar">Search</a></div>
 
-			<div class="nav">
-				<div v-scope="{ cc: 999 }">
-					{{click}}
-					<button @click="cc++">inc</button>
-				</div>
-			</div>
+					<div id="nav" class="nav">
+						<!-- Vue mount here -->
+					</div>
+		</div>
+		<!-- <div class="bar"><a href="http://www.unicode.org" class="bar">Home</a>
+			| <a href="http://www.unicode.org/search/" class="bar">Search</a></div> -->
 	</header>
 
+
+
 	<section class="body">
 		{{ content }}
 	</section>
 	<footer>
 		© 1991-2024 Unicode, Inc. Unicode and the Unicode Logo are registered trademarks of Unicode, Inc. in the U.S. and other countries. See <a href="https://www.unicode.org/copyright.html">Terms of Use</a>.
 	</footer>
-	<script defer init src="/node_modules/petite-vue/dist/petite-vue.iife.js"/>
+	<script src="/node_modules/vue/dist/vue.global.prod.js"></script>
+	<script src="/assets/js/cldrsite.js"></script>
 </body>
 
 </html>

docs/site/assets/css/page.css

@@ -17,14 +17,23 @@ header > div {
     display: table-cell;
 }
 
-header > div.nav {
-    display: block !important;
-}
-
 header > div.icon {
     flex-grow: 1;
 }
 
+header .title {
+    color: white;
+    font-size: 1.5em;
+}
+
+header .nav, header .nav > div {
+    display: inline;
+}
+
+header .nav a, header .nav .title {
+    color: white;
+}
+
 footer {
     width: 100%;
     margin-left: auto;

docs/site/assets/js/cldrsite.js

@@ -0,0 +1,207 @@
+const { ref } = Vue;
+
+// site management
+
+/** replace a/b/c.md with a/b */
+function path2dir(p) {
+    const dir = p.split('/').slice(0,-1).join('/');
+    return dir;
+}
+
+/** replace a/b/c.md with a/b/c.html */
+function md2html(p) {
+    return (p.replace(/\.md$/,'.html'));
+}
+
+/** replace a/b/c.html with a/b/c.md */
+function html2md(p) {
+    return (p.replace(/\.html$/,'.md'));
+}
+
+/** load and cook the site data */
+async function siteData() {
+    // load the json
+    const d = await fetch('/assets/json/tree.json');
+    const j = await d.json();
+    const { all } = j;
+
+    // 'all' is an array of { title, fullPath } entries.
+    // Flat list of paths
+    const allPaths = all.map(({fullPath})=>(fullPath));
+    // Find all 'directories' (ending with /)
+    const allDirs = new Set();
+    allPaths.forEach(p => {
+        const segs = p.split('/').slice(0,-1); // ['', 'dir1']
+        for(let n=0; n<=segs.length; n++) {
+            // add all parent paths, so: '', dir1, dir1/dir2 etc.
+            const subpath = segs.slice(0,n).join('/');
+            allDirs.add(subpath);
+        }
+    });
+    j.allDirs = {};
+    j.allIndexes = [];
+    // allDirs:  '', index, downloads, etc…
+    allDirs.forEach(dir => {
+        // presumed index page:  /downloads -> /downloads.md
+        // also / -> /index.md
+        const dirIndex = `${dir || 'index'}.md`;
+        // console.dir({dir, dirIndex});
+        if (allPaths.indexOf(dirIndex) !== -1) {
+            j.allDirs[dir] = {index: dirIndex};
+            j.allIndexes.push(dirIndex);
+        } else {
+            console.error(`No index page: ${dirIndex}`);
+            j.allDirs[dir] = {};
+        }
+        j.allDirs[dir].pages = [];
+    });
+    allPaths.forEach(p => {
+        const dir = path2dir(p);
+        j.allDirs[dir].pages.push(p);
+    });
+    // map md -> title
+    j.title = {};
+    all.forEach(({title, fullPath}) => j.title[fullPath] = title);
+    return j;
+}
+
+
+const app = Vue.createApp({
+    setup(props) {
+        const tree = ref({});
+        const status = ref(null);
+
+        return {
+            tree,
+            status,
+        }
+    },
+    mounted() {
+        const t = this;
+        siteData().then(d => t.tree.value = d, e => t.status = e);
+    },
+    props: {
+        path: String,
+    },
+    computed: {
+        mdPath() {
+            if(this.path) {
+                return html2md(this.path)
+            }
+            return null;
+        },
+        ourDir() {
+            if(this.path) {
+                return path2dir(this.path);
+            }
+            return '';
+        },
+        ourIndex() {
+            if(this.tree?.value) {
+                // first ARE we an index page?
+                if (this.tree.value.allIndexes.indexOf(this.mdPath) != -1) {
+                    return this.mdPath; // we are an index
+                }
+                return this.tree.value.allDirs[this.ourDir].index;
+            }
+            return null;
+        },
+        ourIndexHtml() {
+            if (this.ourIndex) {
+                return md2html(this.ourIndex);
+            } else {
+                return null;
+            }
+        },
+        ourIndexTitle() {
+            if (this.ourIndex && this.tree?.value) {
+                return this.tree.value.title[this.ourIndex] || this.ourIndex;
+            } else {
+                return null;
+            }
+        },
+        ourTitle() {
+            if (this.tree?.value) {
+                if (this.path === '') return this.rootTitle;
+                return this.tree.value.title[html2md(this.path)];
+            }
+        },
+        // title of root
+        rootTitle() {
+            return this.tree?.value?.title['index.md'];
+        },
+        // list of pages for siblings of this dir
+        siblingPages() {
+            if (!this.tree?.value) return [];
+            const dirForPage = this.ourDir;
+            let thePages = this.tree?.value?.allDirs[dirForPage].pages ?? [];
+            if (dirForPage === '') {
+                thePages = [...thePages, ...this.tree?.value?.allDirs['index'].pages];
+            }
+            const c = new Intl.Collator([]);
+            return ( thePages )
+                .map((path) => ({
+                    path,
+                    html: md2html(path),
+                    title: this.tree.value.title[path] ?? path,
+                }))
+                .sort((a, b) => c.compare(a.title, b.title));
+        },
+    },
+    template: `<div>
+        <div class='status' v-if="status">{{ status }}</div>
+        <div class='status' v-if="!tree">Loading…</div>
+        <span v-if="path !== 'index.html'">
+        <a class='uplink' href="/">{{ rootTitle }}</a> |
+        </span>
+
+        <span v-if="path !== '' && ourIndexHtml && (ourIndexHtml != path) && (ourIndexHtml != 'index.html')">
+            <a class='uplink'
+                v-bind:href="'/'+ourIndexHtml"
+                >
+                {{ ourIndexTitle }}
+            </a>
+            |
+        </span>
+        <span class="title"> {{ ourTitle }} </span>
+        <ul class="subpages">
+            <li v-for="subpage of siblingPages" :key="subpage.path">
+                <span v-if="path == subpage.html">
+                    <b>{{ subpage.title }}</b>
+                </span>
+                <a v-else v-bind:href="'/'+subpage.html">
+                    {{ subpage.title }}
+                </a>
+            </li>
+        </ul>
+    </div>`
+}, {
+    // path of / goes to /index.html
+    path: (window.location.pathname.slice(1) || 'index.html'),
+});
+
+app.component(
+    'CldrPage',
+    {
+        setup() {
+
+        },
+        template: `<p>Hello</p>
+        `
+    }
+);
+
+app.component(
+    'CldrList',
+    {
+        setup() {
+
+        },
+        template: `
+        <p>Hullo</p>
+        `
+    }
+);
+
+
+app.mount('#nav');

docs/site/development.md

@@ -0,0 +1,5 @@
+---
+title: CLDR Development
+---
+
+Development pages

docs/site/development/development-process.md

@@ -0,0 +1,5 @@
+---
+title: CLDR Development Process
+---
+
+Pages related to our development process

docs/site/downloads.md

@@ -0,0 +1,4 @@
+---
+title: CLDR Downloads
+---
+

docs/site/index/corrigenda.md

@@ -1,5 +1,5 @@
 ---
-title: CLDR Releases/Downloads
+title: Corrigenda and Errata
 ---
 
 # Corrigenda and Errata
@@ -15,4 +15,4 @@ At this time, there is only one Corrigendum:
 
 Each release of CLDR is a stable release and may be used as reference material or cited as a normative reference by other specifications. Each version, once published, is absolutely stable and will never change. However, implementations may - and are encouraged to - apply fixes for corrigenda and errata to their use of an appropriate version. For example, an implementation may claim conformance to "CLDR 1.3, as amended by Corrigendum 1".
 
-![Unicode copyright](https://www.unicode.org/img/hb_notice.gif)
+![Unicode copyright](https://www.unicode.org/img/hb_notice.gif)