Here I will collect this website's features.
Since I implemented it on my own (totally from scratch, plain Vanilla),
I also wanted to let you know about all of this.
You can also look at the whole source code in the
`Source Code` section;
.. and there's also the
with more details and more..
BTW: These features are not all features available.
This collection just lists those you will see as user.
The rest is hidden/under-layer and works great. ...
All of my web pages are embedded into the `<main>` element.
They are loaded dynamically. Either by clicking on elements with `href` attribute, or when the location's `hash` changes.
Hint: If you'd like to give someone a link to a specific page of this website, you should use the
(current) `hash` component of the `location`.
But replace the `#` by `?`,
so the link will really get called! If you open a site with a hash, when there's currently another
website open, it'll get ignored..
So you can enforce it with the `?` (which will just get
converted to one of my regular hash links.
Since v4.4.39.0: a hash can now be divided into a low and high part (quasi);
so if you'd like to load another page, define it in the hash.
If there is a local element in there
which you'd like to directly address (on this next page), you can define it after a second hash `#` symbol:
so after loading the new page (and displaying it), the element on this page will automatically be scrolled to. ;-)
If your browser window (or display) width is under a calculated value, both, the
main menu and the (optional) TOC, will be turned off.
This way we save some space to let the real contents shine brighter.. ;-)
Will be calculated each time your screen/window/.. size changes!
Double click/tap to toggle it manually, or use the button on the top/left of the
main element (which is only visible in the mobile view!).
You'll only see it directly if your screen got enough width (so not in the mobile view).
It indexes all real pages on this website (in my `home/`);
and it's dynamically changing it's look when some
loading was done; and this is also animated, like most things on this site..
When (and only when!) your page is bigger than your screen/window/.. there's a Progress
(on the top/right of the MAIN content)
to indicate your current scrolling state (a circle progress form, with the percent value in it's center).
New: Now the STATE bar got it's own scrolling functionality..
On the top there's a 'status bar' which also indicates your scrolling progress,
but not as percent value but a string with the whole path of the current section's `<h*>` ('heading').
The full path is calculated out of the TOC.
On the bottom there's also a 'status bar' which let's you know about some vectors of this web presence:
New since v4.4.39.2: This state/status bar can now be scrolled horizontally, if not every item is visible due to smaller window width (untested, mostly to check on mobile phones).
If the contents got some <h*> elements, they'll be automatically parsed
to create an index on the right (will be automatically toggled).
It's not visible in the mobile view/ (but can be toggled).
BTW: it also scrolls when you do some scrolling in the main content; and it also changes, depending on your behavior..
Some elements got their own help/popup views. But you can't use this
on phones or hardware with touch (or pen) devices - only mouse is supported.
This was a design decision, it's not a bug.
[ UPDATE 2025-05-01 ]
My help's are now also supported on touch/pen devices (smartphones without mouse).
In an easier form: without moving, but by TAP and HOLD 'long' it'll be opened
(if the tapped element or positional parents got some help attributes);
Then by tapping again (anywhere) the open help will be closed. ... but this only
worx on smartphones/.. this way.. with a PC/Desktop/Workstation/ the right mouse CLICK
will be ignored by the `Help` sub system (and usually open some browser's context menu).
Use the <Ctrl> key to enable it, and release it to disable!
It's there for some reasons - the first one was to let Popup/Help
views stay as they are (not reacting to mouse move/click/.. etc.), so if there's a LINK
in such help/popup, you can easily click it.
Another reason was the OSD
feature.
Maybe in the future I'll also pause any animation while this mode is on..
You'll see it when something happens which is worth to mention.
The OSD items start on the top/right and will be counted to the bottom.
You can also manually close any OSD item by clicking/tapping
on it;
or use the info message on the right/bottom to close all at once.
On the right/bottom you see an (24h!) analog clock.
Click/Tap on it to enlarge it; and move your mouse
above it to see a digital view (as Help).
You'll see one or many when something is loading (in the background).
Either the regular circle form (the Clock depends on it),
or just one or many bar(s).
The drawing is done with `Math.sin()` and `Math.cos()`, and more.
It'll be sometimes visible, depending on how you behave.. ;-)
Mostly it'll be shown when you download something: every time you'll be asked if it's really O.K. for you (and never without your permission)!
I also extended the `URL` etc. for my own `github://[/user[/repo[/path]]]` scheme.
There's the creation of a repository list for a GitHub user.
And there's the conversion of
`text/markdown` code (to embed my repository `README.md`s into this website)!
Now fixed to the upper/left. I counted it in here for a maybe important hint: double click on
it to remove it from your screen. Maybe you wanted to make a screenshot without your IP visible.
To re-enable it, you have to reload the whole page.. xD~
Everywhere where a file is provided, there's also a FileInfo which is a general approach to also provide Popup/Help with interesting meta data.