CLDR-17803 site: add navigation

[srl295]

CLDR-17803

This adds basic navigation so that all pages are accessible. Style and layout can be improved.

Previously, there was no listing of subpages.

Adds build-time and run-time logic. An embedded vue component is used.

Also, fixes metadata and missing pages from other commits that were blocking deployment.

• This PR completes the ticket.

ALLOW_MANY_COMMITS=true

[github-actions]

✨ deployed to https://9d6c500e.cldr.pages.dev

[github-actions]

✨ deployed to https://ee75e54b.cldr.pages.dev

[github-actions]

✨ deployed to https://ff620b4c.cldr.pages.dev

[github-actions]

✨ deployed to https://38324f30.cldr.pages.dev

[github-actions]

✨ deployed to https://6d2dc477.cldr.pages.dev

[github-actions]

✨ deployed to https://9f55edca.cldr.pages.dev

[AEApple]

But we should switch to a left-nav bar before Beta

[macchiati]

see other comment (still writing)

[macchiati]

It's unclear what the goal of this PR is. Picking a It appears to be

• the top line in the header is a horizontal list of bread crumbs (ancestor pages)
• below that in the top bar, there is a vertical list of sibling pages (including the current page)
• below the title is a horizontal list showing children of this level
  (continuing below)

[srl295]

It's unclear what the goal of this PR is. Picking a It appears to be

• the top line in the header is a horizontal list of bread crumbs (ancestor pages)
• below that in the top bar, there is a vertical list of sibling pages (including the current page)
• below the title is a horizontal list showing children of this level
  (continuing below)

That's exactly the goal of the PR. Clarified at the top of the PR.

I'd like to merge this because it makes the pages reachable at all. And then discuss improvements to the layout and style in subsequent PRs.

[macchiati]

Starting at a deep page, a quick run through.

https://6d2dc477.cldr.pages.dev/development/updating-codes/update-language-script-info/language-script-description

• I don't see "Updating codes" in the ancestor line. We don't have that deep a hierarchy, so I think we should show all the ancestors. ">" (or maybe ❱) might be better as a separaotr
• only one page at this level (this page). Should drop "this page" from list of siblings (or possibly gray out)
• no children (fine)

https://6d2dc477.cldr.pages.dev/development/updating-codes/update-language-script-info
Up one level (got there by clicking on the ancestor)

• I now see the parent in the ancestors.
• The vertical list of siblings occupies far too much vertical space. A sidebar would be best (if possible); otherwise we need to think of some other way to save vertical space. Maybe a pull-down?
• I don't see the child of this page.

https://6d2dc477.cldr.pages.dev/development/updating-codes

• Got by clicking on ancestor (good)
• Again, too many siblings to show vertically in the top bar
• Again, don't see the children pages

https://6d2dc477.cldr.pages.dev/development
Mostly same contents.

[macchiati]

Just saw your comment. It doesn't yet work for basic navigation, since we can't see child pages at all. (I think I was mistaken about seeing children below the title, since I didn't see that in the deep dive.

[macchiati]

I think we could go with this for now if we listed child pages, and added a disclaimer at the top:

This navigation UI is temporary, just to give access to the pages.

[srl295]

Good comments but I think the showing children is already fixed in https://9f55edca.cldr.pages.dev/

Could we merge and iterate in another pr? This unblocks deployment.

[srl295]

Yes, it shows only the immediate parent and the route, but we could have it show all parents

[macchiati]

Children are not yet fixed.

[srl295]

Children are not yet fixed.

Is this using the latest deploy URL?

[srl295]

Also notice I'm not asking to replace the production site yet, just to make an incremental improvement.

Note that the preview deployment URL changes as the PR is updated

[macchiati]

Example:

Collation Guidelines shows up in 3 places.

The vertical list shows sibling pages; when I click on "Core Data for New Locales", that is clear.

https://9f55edca.cldr.pages.dev/index/cldr-spec/core-data-for-new-locales

When I go up a level to
https://9f55edca.cldr.pages.dev/index/cldr-spec

Now the vertical list is children, not siblings. This is wildly confusing.

(Minor: changing sizes of item in the top line is distracting. Just use the same size.

[srl295]

Just another thought and I am at end of day here… If you have an existing site that has the kind of navigation you'd like perhaps point me to that as a model.

[macchiati]

For tomorrow, I suggest you just add the disclaimer whenever you are back at work, and we go out with that for the alpha.

You are close to a workable system; we basically need not to take up so much vertical space, and and have consistency of behavior. Let's chat tomorrow morning if you have time then.

[AEApple]

Why can't we just match what we used to have? I have the downloaded nav bar if you'd like?

I do think the breadcrumbs are really cool, I just worry they take up too much space at the top of the page.

[macchiati]

We have a few constraints. Right now, we don't have any ordering of pages, so they are just alphabetical. That is not in order of importance: "Acknowledgments" are at the top! And the folder structure is not optimal. So the first order of business is to have basic navigation to children and parents work reasonably.

I did some searching around, and a lot of sites offer breadcrumbs (eg https://blog.hubspot.com/marketing/navigation-breadcrumbs). I think we can use that model, maybe truncating items with ... if they are really large.

Here's what I suggest for now (subject to feasibility)

Breadcrumbs at the top, and at the end, put a hamburger (≡). People are trained to see hamburgers as something to click for choices. That is a pulldown, and shows the children. So you would see:

Unicode CLDR Project ❱ Internal Development ❱ Updating Codes ≡

(Note: all items are the same font size.)

If you click on the hamburger, you see a pulldown menu (approximated by the following):

Unicode CLDR Project ❱ Internal Development ❱ Updating Codes ≡
          LikelySubtags and Default Content
          Update Currency Codes
          Update Language Script Info
          Update Language/Script/Region Subtags
          Update Time Zone Data for ZoneParser
          Update Validity XML
          Updating External Version Metadata
          Updating Population, GDP, Literacy
          Updating Script Metadata
          Updating Subdivision Codes
          Updating Subdivision Translations
          Updating UN Codes

Clicking on an item goes to that page.

If there are no children, you see no hamburger. Thus you would see

Unicode CLDR Project ❱ Internal Development ❱ Updating Codes ❱ Update Currency Codes

(on https://9f55edca.cldr.pages.dev/development/updating-codes/likelysubtags-and-default-content)

[I realize it is sometimes nice to see children, instead of having to click on the parent, but we want to avoid confusion. We can explore adding that later.]

We could have the last item in the breadcrumb + hamburger be a hoverable pulldown, a la
https://www.w3schools.com/howto/howto_css_dropdown.asp

[github-actions]

✨ deployed to https://32aad244.cldr.pages.dev

[srl295]

✨ deployed to https://32aad244.cldr.pages.dev

Warning message at bottom of blue box

[macchiati]

With the disclaimer, good enough for alpha