Comment by joegibbs | Hacker News Reader

Comment by joegibbs | Hacker News Reader

Inspired by https://news.ycombinator.com/item?id=25170078.

This is pretty much a simple Python script and a bit of scaffolding that will create a single-page website by faking different pages using anchors.

The main advantage is that by doing it manually it can become a little bit cumbersome when you start having too many "pages" on your page, so this will let you split those pages up into separate files, the same way that you'd do it if you were writing a regular site.

How exactly is it faking different pages using anchors? I read your code but I can't find the logic behind it

It does it by this CSS:

    main > * {
        display: none;
    }

    main > *:last-child {
        display: block;
    }

    main > *:target {
        display: block;
    }

    main > *:target ~ * {
        display: none;
    }

Which hides all children of the <main> element except the last element, which is the default page. Then when an element is targeted by its ID it's displayed, otherwise it's hidden.

It saves that into a CSS file and injects that into the <head>.

Reply on news.ycombinator.com