I've really got to get some things working instead of continuing to collect ideas or the project will collapse under a morass of constraints foisted by too many outlandish fun ideas.
Rendering two markdown dialects (markdeep, followed by a more vanilla one) to html, assembling the documents, and autogenerating both navigation and metadata.
Then, I will be able to tweak visuals with css. That paves the way for the beginning of a theme system.
Probably build the embedded images/videos workflow next after this so I can get into quickly making build logs of whatever kind of stuff I get up to.
Last time, I got the convert.ts function working. I took the markdeep-offline js code, shoved it into a file I named convert.ts and started to hack on it. I also use ESM in all typescript projects now. It did not take much coaxing, and so far, it's been working reliably when launched via npx tsx to convert my markdeep test blog files into true html documents. Yep, I haven't even brought in any esbuild transpiling process into this project yet, and I'm going to try to see how far I can get without special build processes.
This is a working command right now: mkdir -p stage/blog/blog-engine; for file in blog/blog-engine/*.deep.md; do echo file $file; npx tsx scripts/convert.ts --input $file --output stage/$file.html --html; done
First thing to do is since the execution of that conversion is a bit slow (no doubt because I'm launching each with tsx), I'm going to modularize it a bit so I can call into convert from my new build.ts entrypoint so i can switch my build to that from the build.sh shell script that is the current solution.
I found a very interesting tool marked-cli which is purpose built to be a very simple markdown live viewing cli tool. This clearly has most of the components that I need, I will just want to bring its behavior over to execute under my environment, which is just typescript code under tsx at the moment (chosen due to passing familiarity and extreme ease of use). This might not be the very best starting point as it:
But I really like this little project because the code is insanely readable and I feel like I already learned so much just from scanning through it a bit. It's taught me that KaTeX is a far superior web math renderer than MathJax and overall it seems like really good choices have been made including support for Mermaid diagrams. It attempts to as cleanly as possible implement Github's markdown environment, and I've got to say GitHub's markdown environment is top notch and is absolutely the correct choice of North Star, at least at the present time.
After testing it a bit, I'm pleased with the mermaid behavior (it also doesnt include the weird default nav buttons), but KaTeX seems to be missing a few basic equation related features, and has some issues with newlines which I'm not sure if it's specific to marked-cli or not. I think I will continue from here to more or less ape the simple aspects of handling Mermaid markdown blocks to render the diagrams and insert them, but probably leave KaTeX functionality out for the time being, or only do a feeble attempt of it, since I hope it's just a simple CSS related problem with the mtable failures I was seeing. Other small stuff I saw marked-cli brought in seem like straightforward usage of various marked plugins, so there does not seem to be much secret sauce in there.
Once I get marked up and running, I will integrate it, and streamline and integrate the markdeep convert functionality, into the build.ts script as routines I can use to convert markdown files to html documents. Then, I can build out a representation of the website's structure based off of the filesystem layout under the blog/ dir, and grab metadata out of the git repo. This structure can (for now) be straightforwardly mapped to a bit of navigation UI for the site, and I may establish a simple convention for little nav snippets to inject into each already-rendered page. Perhaps some simple page model would make sense here if I end up doing a lot of that sort of thing.
I will probably want to collapse all docs in markdown folders (I may refer to these, as I already did earlier, as "sagas" for lack of a better term) to collect "project"-specific series of posts into a single big HTML page, so this would maybe interface with that page model where applicable. For now probably will do a bunch of straightforward html string manipulation. Might be too early to worry about caching and edit time checking to cache the rendering, but I might as well do that since I have live editing workflow ambitions, so having the build/render process do something approaching reasonably optimal will be valuable.
I would want to keep in mind to incorporate vanilla html/js "subproject" pages identified under blog/ for special treatment, that is, verbatim delivery. I suppose the little WebGL testbed project will be a great first example for this post paradigm. It will have an accompanying markdown blog post. It also gives me the idea that I could embed an iframe of the special page (gosh i need to coin a name for these types of pages/posts too) into the blog post which would be neat.
I need a better place to collect these ideas, but i got another idea off of that, which is some kind of user event "tutorial/wizard" walkthrough framework, hopefully something that is capable of a lot of basic mouse manipulation, and a layer to show the mouse, so i could execute scripts in the frontend to demonstrate interactions with UI in a frame. Likely need to be injected into the frame. Not sure how practical such a thing would be but it would be a project on its own. Another approach that might make more sense could be to just do such a thing by building a playwright test and somehow embedding a playwright trace of that test into a markdown post.
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
$$ [\begin{aligned} y &= \frac{1}{3} r^3 \ \therefore \frac{dy}{dr} &= \frac{1}{3} 3 r^{3-1} \ \frac{dy}{dx} &= r^2 \ \therefore dy &= r^2 \cdot dr = r \cdot dr \cdot r \end{aligned}] $$
$$ \begin{equation} e^{\pi i} + 1 = 0 \end{equation} $$
The beautiful equation $\ref{eu_eqn}$ is known as the Euler equation.
$$ \begin{align*} x&=y & w &=z & a&=b+c\ 2x&=-y & 3w&=\frac{1}{2}z & a&=b\ -4 + 5x&=2+y & w+2&=-1+w & ab&=cb \end{align*} $$
$$ \begin{CD} A @>a>> B \ @VbVV @AAcA \ C @= D \end{CD} $$
something $\overbrace{a+b+c}^{\text{note}}$ or other
abc $$ \mathbf{P} = \begin{pmatrix} 3 & 1 \ 2 & 4 \end{pmatrix} $$ def
abc $\mathbf{P} = \begin{pmatrix} 3 & 1 \ 2 & 4 \end{pmatrix}$ def
$$ \begin{equation} e^{i \pi} + 1 = 0 \end{equation} $$
$$ \begin{equation} \label{linear} \mathbf{A}^{-1}\vec{b} = \vec{x} \end{equation} $$