"Left Sidebar": Harlowe (only v2.1.0 or later)

Summary

Harlowe v2.1.0 or later includes a built-in named hook named ?Sidebar. When combinded with the (append:) macro, dynamic content can be added to the left, blank area containing the default Undo and Redo links. A "footer" tagged passage is used to update the dynamic content after each passage transition, and CSS is used to resize and postion the existing tw-sidebar element.

Live Example

Twee Code

:: StoryTitle
Left Sidebar in Harlowe (v2.1.0 or later)

:: UserStylesheet [stylesheet]
/*
    Reposition the Sidebar 'footer' tagged passage.
*/
tw-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;                        /* padding-right of the tw-story element. */
    max-height: 100%;
    margin-top: 5%;                    /* padding-top of the tw-story element. */
    padding: 0 0.5em 0.5em 0.5em;
    text-align: right;
    background-color: transparent;
}
tw-icon {
    text-align: right;
    padding-right: 0.75em;
}

:: Start
(set: $name to "Jane Doe", $location to "Work")\
[[Another passage]]

:: Sidebar [footer]
(append: ?SideBar)[\
Name: $name
Location: $location
]

:: Another passage
(set: $name to "John Smith", $location to "Shop")\
[[Start]]

Download: Twee Code

See Also

CSS and Passage Tags