sira04 4 days ago

This is quite neat. Every page is a <section id="pageid"> and css is

  section {display:none}
  section:target {display:block}
So they use the target selector which becomes active when #pageid is in the url. But the html for all the pages is outputted, so this won't scale with a big blog. I wonder how SEO is for this, and if there's a way to make this better with something like the <object> element.

I would also make it so the url was example.com/#/pageid, so the id is "/pageid". Looks a bit better I think.

  • erremerre 4 days ago

    What do you have in mind?

    I was thinking in using it for a blog, but I am afraid of having everything in a single file, and that making some mistake will render the whole site useless.

    Also not sure how hard would be to manage once it starts to grow... Maybe it needs to grow significantly more than I can before this is a road block.

    • sira04 4 days ago

      I think that would become unwieldy very fast. I think it's alright for a lightweight site like this one with very little content.

      If you don't want to use a static site generator I think you're better off with just html files for each page/blog entry, or you could use something like htmx and load stuff in that way.

thro1 3 days ago

Nice one.

Pro-tips: switch styles to show all content (and buttons) then use contenteditable - for the whole page or allow it at element levels, allow copying/removing specific element ("template"), POST new version, HTTP Authenticated, to the server or just save :)

nbbaier 4 days ago

I love this site and concept and have been thinking about moving to this method for my own site

  • benchly 4 days ago

    Same. This would work really well for my site, I think, although I worry slightly about latency as it scales and I add more and more photos. That is not so much a problem right now, but it might impose some latency later.

    • nbbaier 4 days ago

      Yeah. I don't know if it scales to adding a blog either, which I have been thinking about doing.