I hope today is the day

It's really turning into a slog, so like, the thing is almost everything turns into a slog if you keep creeping the scope, so it's not unexpected.

... I made some great progress learning about how Marked extensions work and I am confident I can deploy an ANSI escape code markdown code block rendering solution, which is awesome.

Something less awesome is that I discovered https://github.com/mermaid-js/mermaid/issues/3650 after getting super confused about why a JS API is missing for mermaid. Apparently mermaid has always been rendering on the client and there are some significant (though hopefully not insurmountable) barriers to being able to just convert mermaid text definitions into svgs I can embed from a node process. We do have mermaid-cli but it's some nonstarter of a monstrocity that uses puppeteer to do it!

For now it seems like I'll be able to make Mermaid work quickly by doing clientside rendering. What I would do for that is only insert that into the HTML of the relevant pages. I'm really trying to keep my blog javascript free if possible. Of course I will pull out the stops and do insane javascript things in many one-off special pages which I've gone over before, but in the typical case of markdown posts I fully intend to SSR into S3 for CDN serving. Maximum possible efficiency.

So I'm definitely very sad I cannot get uber fast Mermaid diagram rendered SVG embedded in, but it seems like if that ticket gets resolved we may get it at some point in the future, and barring that I'm fine with it taking a second to render. If I really end up using mermaid a lot I may try to roll my own JSDOM/SVGDOM or Playwright based renderer to achieve that with.

Anyway, now that I have Marked extensions demystified, here's a test for ansi escapes!

regular text red text green text regular again

All I have to do is put in raw escape sequences into this code block. It definitely works!

The HTML that it renders to:

regular text <span style="color:rgb(187,0,0)">red text</span><span style="color:rgb(0,187,0)"> green text</span> regular again

OK I'm really satisfied with this. All that stands between me and going live are:

• Hack together a page navigation design
• Put the all important aws s3 cp in place where all I'll need to do to publish the site is sync my stage/ dir into my bucket I already prepared for this domain.
• whip up some css (markdeep and marked both already have some great css starting points)

I'm also really excited for the css themability that comes with going hard on markdown. And with all this Marked knowledge I just gained I feel really confident I'll be able to extend markdown to anywhere I might want to take it, which is going to involve really pushing its limits sooner or later. Like, I already did it once with ansi escape sequences. By the way, here's the implementation of that!

marked.use({ renderer: {
  code: ({ lang, text }) => lang === 'ansi' && ansi_up.ansi_to_html(text)
}});

It's absurdly simple.

I have css work in progress now. Luckily it's not work involving tweaking css, I just need to pick some combination of styles that come with these tools that go well together.

Since I'm already so close with mermaid I'm going to enable mermaid and a highlight.js css theme (loaded hosted from my domain, not CDN) so i can see how that is. then next up will be a marked theme. Going to be trying really hard not to scope creep a whole theme system before golive.

I also realized I will need to design a theme system to take into account the ansi_up solution too! That one I may need to fork the library (though I already in-tree'd it) to change it from utilizing inline HTML styles.

Also just decided I'm going to slash the page dir ('saga') post combination thing that I was going to do. Mainly because skipping this will let me postpone the need to do manipulations on markdeep CSS vs marked CSS. It wouldn't be a big lift to deal with that but I do expect it to spawn a lot of little issues here and there.

Upon enabling the ansi escape code blocks so i can dump in colorized terminal output, I ran into and solved a bunch of issues:

• UTF8 encoding wasn't specified, but adding it to HTML got that handled
• I initially had this content doubly-html-escaped, which isn't hard to recognize if you've seen it before. This is because marked helpfully provides it encoded in the text input from its tokenizer. The trick is to use the raw output from the tokenizer instead and manually cull its code fences.
• I forgot to wrap it with a pre tag earlier.
• Need to add a class to let it piggyback and pretend to be a highlight.js code block.

marked.use({ renderer: {
  code: ({ lang, raw }) => {
    const raw_without_fences = raw.replace(new RegExp('^```' + lang), '').replace(/\n```\s*$/m, '');
    return lang === 'ansi' && `<pre><code class="hljs">${ansi_up.ansi_to_html(raw_without_fences)}</code></pre>`;
  }
}});

Still pretty concise!

I'm sorta impressed with the default highlight.js CSS theme. It keeps Times New Roman, which, man, this font feels like a meme at this point. Throughout school I seem to recall much of the time we were required to use this font. And I gotta be honest, it's really readable and I must truly admit, it's elegant. That's my age showing, I guess. It's just also insanely vanilla.

At any rate, themeability will let me really go nuts with the styling so I'm going to leave it as-is. It's already got a lot of old school 90's webpage charm, there is a no-frills feel to it.