Site Demo

intent, structure, navigation, user experience, with demos

About Site Repo
"If you don't like something, change it. If you can't change it, change your attitude."
- Maya Angelo

1.0   The View

The entire site lives inside a single browser tab managed by PageHost.html. A URL bar near the top of the PageHost frame always shows the address of the content page currently on screen, even though the browser’s own address bar never changes. Try it: look at the URL bar in the PageHost frame above this content area and notice it updates each time you navigate to a new page.

2.0   Top Menu Bar — Switching Tracks

The top menu bar in the Explorer contains one button per track (Site, Rust, C++, C#, Python, WebDev, SWDev, Basics, Code) plus drop-down menus for Blogs, Help, and Resources. Clicking a track button replaces the entire Explorer with the Explorer for that track. Try it: click the Rust button in the top menu bar to open the Rust Explorer, then use your browser back button or click Site to return here.

3.0   Left Panel — Track Navigation Links

The left panel of each Explorer shows a scrollable list of links for every page in that track. Clicking a link loads the target page into the right-panel content iframe without reloading the Explorer. The active link is highlighted so you always know where you are. Try it: click Site Map in the left panel, then click Site Demo to return to this page.

4.0   Page Controls Block

The Page Controls block appears in the lower-left corner of the Explorer view. It provides six buttons for fine-grained navigation without touching the left panel:
  • Prev Sect / Next Sect — scroll the content page to the previous or next section heading.
  • Prev Page / Next Page — load the previous or next page in the track.
  • sect list — ask the content page to toggle Visibility of its Sections menu at the top right.
  • pages list — ask the content page to toggle visibility of its Pages menu at the top right.
  • Copy Url — copy the current content page URL to the clipboard.
  • GoTo — ask the content page to show its GoTo navigation menu.
Try it: click pages list in the Page Controls block and watch the Pages menu toggle at the top right of this page.

5.0   Explorer Bottom Menu Bar

The Explorer’s bottom menu bar runs across the bottom of the screen. Toggle ctrl pane (far left) shows or hides the left navigation panel, giving the content area the full width. The right-hand group contains:
  • Controls — show or hide the Page Controls block.
  • About — show the About box for the current content page.
  • Keys — show the keyboard-shortcuts list in the current page.
  • Sections — show the Sections navigation list in the current page.
  • Pages — show the Pages navigation list in the current page.
  • clear — hide all open menus in the current page.
Try it: click Sections in the Explorer bottom menu bar to reveal the section list at the top right of this page, then click it again or click clear to dismiss it.

6.0   Page-level Menus

Each content page owns its own menus rendered at the page bottom: Sections lists the headings on the page and scrolls to them on click; Pages lists every page in the track; Keys shows available keyboard shortcuts. These menus are toggled by buttons in the Explorer bottom menu bar or the Page Controls block — the page receives a postMessage and shows or hides the requested panel. Try it: scroll to the bottom of this page and click a section heading in the Sections list to jump directly to it.