Zine static site generator

I didn’t get too much into detail in Zine’s changelog but SuperHTML is more strict than the spec in a few places.

The most notable example is that SuperHTML complains about unclosed elements, even though those would be valid HTML.

<ul>
  <li> first
  <li> second
</ul>

The above is valid HTML but SuperHTML will nevertheless complain.

WRT a slash in void tags, the problem is that it leads to misunderstandings where people who don’t know about void tags might think that a trailing slash could also be given to any random tag to close it (while instead it will get ignored by browsers).

I could add to SuperHTML lenience for trailing slashes in void tags, but I like eradicating ambiguity from files validated by SuperHTML.

3 Likes

That makes perfect sense. The rules around when you can leave off a </p> are particularly insane IMHO.

Accepting a sane and predictable subset of HTML is a reasonable decision. The way you had phrased the release notes made me think that you had the impression that a trailing solidus in void tags was like the normative rules for constructs like You <b> can <i> do </b> this </i>, where the standard defines an algorithm to turn this into what was intended, but it isn’t considered well-formed HTML.

Anyway, that being clarified, congrats on the first point release! I’d like to give the framework a spin one of these days.

3 Likes

The Asset System update!

  • Zine has now an asset system with clearly defined semantics. Previously we kinda implemented informally what other static site generators offered (eg a static asset directory), while now Zine gained it’s own spin on assets

    There’s a new Assets section in the docs, read it to learn how assets now work in Zine. The most notable changes are:

    • Zine can now make use of artifacts generated via the Zig build system!
    • static_dir_path has become assets_dir_path (I also recommend renaming static to assets)
    • Page assets (eg images placed in the content directory next to the page they belong to) now have one extra rule for file placement, see the docs for more info on that (or let the error messages gently guide you)
  • The dev server now by default opens a door port to 1990 if you don’t specify -Dport

  • output_prefix has been renamed to output_path_prefix

  • In MultilingualSite, variants has been renamed to localized variants

  • Scripty has gained a new Asset type and handful of new builtins, including adding the ability to query for the current locale_code in a multilingual website ($site.localeCode())

3 Likes

Zine v0.4.1 is out!

It’s a massive release that features… drum roll… my own fork of Markdown called SuperMD.

It also features a ton of new documentation pages and an overall authoring experience that is complete enough to make it worth trying out even if you’re not into the bleeding edge of static site generators.

So you can go read the docs to see if making yet another Markdown dialect was worth it or not.

As usual, if anybody decides to try it out, I’m happy to answer questions and give support if you get stuck somewhere.

8 Likes

Will it ever support JavaScript libraries for site search and other Hugo like features?

Yes it is planned to add the ability to export content in json form to be consumed by clientside searching libs.

Hey Loris, some really nice noticeable improvements since I tried it out 4 months ago! In particular I’m finding the error messages pretty good, and the asset system is nice. I think a solution for the Sass (scss) I have is the main thing that would block me in considering actually switching my site over, other than that I’d much prefer to use Zine.

A couple of questions and other minor things I couldn’t get working:

  • I mentioned before looking for a migration path for jekyll’s ‘excerpt’, is this possible yet?
  • I tried for a while to implement <p class="tags">Tags: {{ page.tags | join: ", " }}</p> in SuperHTML, is this possible or is there a better way to display tags? [EDIT] I’ve just found this more or less does it: <p class="tags">Tags: <ctx :loop=$page.tags><ctx :text=$loop.it></ctx> </ctx></p>, although maybe a $string.join() would be useful?
  • The ability to make headings into fragment links as sections is neat. However, I would like all my headings in blog posts to be linkable. I currently have a JS snippet that does this with my Jekyll site, is that the recommended approach with Zine? I then also found the problem I couldn’t create a link to a fragment using $link.sibling() in SuperMD.
  • With my Jekyll site I use inline HTML to set the size of an image - should this instead be done with CSS, or just by decreasing the actual size of the image?

Creating link anchors from headings is in the Issues list on Github. Usually a good idea to check the issues list for things that you run across yourself.

Hey Lewis!

You can now access everything about every other blog post so yes you can have excerpts. If you want a character count cutoff, I might need to implement slice for you first, while if you want to create a section of your content to use as the excerpt, that’s already perfectly doable today (check out “content sections” in the supermd docs).

Your code works, you can even use $loop.last.not() to implement the comma.
Join would be good to have yes, a lot of builtins still need to be implemented.

Look at $heading it’s a directive that allows you to give an ID to a supermd heading element.

You can use .ref() to specify an element id for deep linking. It works but Zine needs to be aware of the existance of that ref so you must use $heading.id() (or $section.id(), as that too creates ids) or .id() on any other Zine directive in the page you plan to link to.

Zine doesn’t support autogenerating slug ids and for now I don’t plan to add it.

In Zine you’re generally expected to make good use of CSS for styling. You can give a unique style to an image using its id $image.siteAsset('header.png').id('site-header') or by giving it one or more class names $image.asset('foo.png').attrs('big', 'centered'). The are a few more other solutions, like styling all img elements, etc.

1 Like