How this site was made

Motivation

My goal was to display a tree-shaped directory that encourages visitors to break out of the traditional vertical scrolling experience.

The vertical and horizontal lines of the tree graph invite one to swipe/scroll left and right as much as up and down, exploring the content in an open-ended way.

However, building a ASCII-style tree in HTML is not a trivial task.

Requirements

• A script which converts an annotated tree data structure into valid HTML markup.
• Support for different types of nodes, including plaintext, hyperlink, and image nodes.
• Accessibility support. Allow screen readers to navigate the tree in the intended order, without encountering any text used purely for presentation purposes, such as whitespace or ASCII graph lines.

How I did it

First, I found an existing library that generates plaintext trees. I borrowed the text export function from the phylogenetic graphing software, ETE Toolkit, and adapted it to generate trees in HTML format. Link to my forked code.

Then, I expanded the ETE library’s input data structure, allowing node metadata for links and images.

After drafting an outline of the homepage structure, I generated the full HTML markup and inserted that into the predefined tag in the home page’s source code.

The resulting HTML is compliant with accessibility standards.

Tabbing through the links should work normally, as should navigating the page using a screen reader, in spite of the fact that the entire page body is in fact a single multiline string.

Code (calls forked library)

from htmltrees import Tree, insert_text_into_html

t = Tree({'name':'Jan'}, [
    Tree({'name':'Photo', 'py':2, 'cpy0':3}, [
        Tree({
            'name':'Slitscan',
            'type':'link',
            'href':'photo/aquadom.html'}, [
                Tree({
                    'name':'Fish photo 1',
                    'type':'img',
                    'src':'/images/aquadom/V1-0001_C0364-horizontal-reverse-(12,0)px-thirds_02.jpg',
                    'href':'photo/aquadom.html',
                    'width':'150',
                })
            ]),
    ]),
    Tree({'name':'Film'}, [
        Tree({
            'name':"Run Slow",
            'type':'link',
            'href':'https://vimeo.com/875121292?share=personalsite'
        }),
    ]),
    Tree({'name':'Code'}, [
        Tree({
            'name':'MTG Creature Subtype Explorer',
            'type':'link',
            'href':'toys/mtg.php'
        }),
    ]),
    Tree({
        'name':'About me',
        'type':'link',
        'href':'about.html'
    }),
    Tree({
        'name':'How this site was made',
        'type':'link',
        'href':'how.html'
    })
])

output_string = t.to_str(
    px0=1,
    px=1,
    py=1,
    py0=0,
    props=['name'],
    show_internal=True,
    render_html=True
)

filename = 'html/index.html'
css_selector = 'div[id="tree-target"]'
markup = f'<div class="ascii-art pre-like-tree" id="tree-target">{output_string}</div>'
insert_text_into_html(filename, css_selector, markup)

Back to home