scroll one line at a time, render div and details elements

not very big news here, but now you can:

• scroll just one line at a time instead of a whole renderable/element at once
• render div and details properly! now you can click on a details element to open and close it! this didn’t even take too long
• more technical, but i switched to mostly using the opentui renderable api which uses classes like TextRenderable or BoxRenderable that return a Renderable instance instead of functions like Text and Box which return a ProxiedVNode<T>. this is mostly because there’s a bunch of things a Renderable has that a ProxiedVNode doesn’t

anyways im currently working on adding footnotes, so see you in a few days

Changelog

• (64f6ed8) Add footnote plugin (usage WIP) (errors on run)
• (ddd5c46) Add indicators to details elements and opening on click/space/enter
• (344806a) Add support for rendering div and details elements
• (d3b4a1d) Fix small layout issues
• (5eb11b9) Scroll only one line at a time and convert (mostly) to Renderable API

table of contents feature is done!

took only 10 hours, but im done with the table of contents thing! you can press shift+j to go down to the next heading, and i forgot to add shift+k 😭 anyway this took a while since i couldn’t figure out how to position the box properly and how to style it. this was fucking ass icl. i usually have much more to talk about but this wasn’t the most fun so here’s the commits:

Changelog

• (5ccec11) Remove unnecessary focusing ToC
• (927cae9) Add tab cycling
• (ae72d3d) Scroll ToC menu to selected index instead of blindly 1 down
• (249d61a) Implement scrolling ToC on pressing J
• (a2ae0f2) Get table of contents feature working
• (a6c7744) Add scrolling to next heading on pressing J
• (49f8fec) Add “? - Help” hint to end of bottom bar

figlet headings, small headings, bottom bar, help menu and keybinds

we’ve got a lot of new stuff!

• firstly we’ve got a bottom bar! all it does for now is show reMDer with a green bg and the file name next to it, but i’ll add more later!
• next we’ve got figlet headings! at the start i was thinking about using figlet for headings but i gave up on that. but now, i’m back to using it! this took a good chunk of the overflowing hours here but they look really cool too!
• passing a --no-render-headings or -H flag will make the headings render as normal text with colors instead of figlet fonts now!
• there’s now a tiny help menu in the corner! it only shows two keybinds right now–oh and speaking of keybinds…
• keybindings are now in! for now you can press q to quit, ? to toggle the help menu, and C (shift+c) to open the console in debug mode and that’s about it

next steps?

here’s what i’m gonna do next:

• add support for horizontal rules
• add a table of contents feature like that of the leaf markdown viewer
• add some stuff to the bottom bar
• add an option to put the bottom bar at the top instead
• add support for a config file using YAML

Changelog

• (9557586) Add help menu
• (a4149e2) Add keybinds: q to quit, C to toggle console
• (4b18153) Finish figlet fonts support
• (d23466d) Start trying figlet again for ASCII art
• (33d52ea) Start working on ASCII art for h2 headings
• (b0e1668) Add option to not print big headings
• (c58369c) Start with bottom bar

code blocks, alerts, emojis and task lists!

we’ve got loads of new cool stuff that get rendered now!

• first, github alerts/callouts now render nicely! they look like this:

  > [!TAG]
  > content
  

  where TAG can be NOTE, IMPORTANT, TIP, WARNING or CAUTION. they also have these cool icons next to them, but the catch is you need a nerd font for it. i’ll add an option to not need it and only use ascii characters

• next, we have highlighted code blocks! the renderer can highlight hundreds of languages using shiki! you might not even have heard of some of the languages that it can highlight! imo its really nice looking and i love it!

• the bulk of this time came from adding support for task list items because i couldn’t figure out how to do it. eventually after some tinkering i’ve got it to work! it looks kinda cool too tbh

• i also got emoji support using an extension. it automatically converts :emoji: to the corresponding emoji if its in the unicode specification.

• finally, i added a simple height option that just sets the height of the renderer. it allows you to set the height of the renderer manually and that’s about it lmao

Changelog

• (b4f69ad) Add height option
• (beea3a6) Add task list items support
• (4c42c84) Add emoji support
• (564a761) Upgrade markdown-it, fix breaking changes
• (963d910) Add alerts support
• (5e266e8) Add icons in code blocks
• (0bf0af7) Add code block support

finished hardy heron article

its been a month since my last devlog, and that’s because i’ve been focusing more on my other project. it takes a lot of time to write these articles! i hope i can do this faster cuz its too time-consuming

anyways, i’ve completed the hardy heron article and updated some information!

Changelog

• (3003ef9) Finish Hardy Heron article
• (5332bcb) Update macOS Tahoe info
• (e194a23) Add 6 lines to Hardy Heron article
• (e4909df) Start work on Hardy Heron article, update/fix some information

holy fuck, you can pipe into stdin and tables render properly!

while this is quite out of schedule (i usually post every 2-3 days), today brings some peak stuff! the peakest part is at the end

firstly, i have in fact fixed tables! the issue was i was pushing the accumulated cells array to the rows array in the wrong loop. i was doing this in the loop that iterates over the cells in a row, so it was causing it to repeatedly push the same strings over and over. the fix was putting it in the loop just outside, that is, the loop that iterates over the rows in the table token!

i’ve also improved the image handling! now Image classes have the buffer property renamed to content, and has a new property called properties, which is always {}. with this, it has all the properties of ProcessedToken, so my lsp won’t complain that some property doesn’t exist on Image

speaking of ProcessedToken, its now an interface instead of a type. there’s also a new TableToken interface that extends ProcessedToken, with an alignment property. this makes it a bit easier to handle tables since the content property is narrowed. also, it seems like opentui’s tables don’t support alignment, so i might have to make a custom table function.

i also upgraded opentui from 0.5.7 to 0.5.8! i have no idea what changed, but whatever

i’ve also stopped using chalk to color my errors since the opentui console doesn’t support ansi

now the peakest part is you can pipe markdown into the program. this is pretty peak and you must agree since there’s a lot of stuff you can do with this. for example, you could render arbitrary markdown without having to create a file first!

it has a limitation though: if you’re on windows, you can’t use the interactive mode, and the rendered content is forced to print to stdout. this is because of a bug with bun. if you’re piping into the program, it’ll get the input by calling await Bun.stdin.text(), but this stops sending keypresses to opentui because of a bug in the bun runtime, so you can’t scroll down. i solved this issue (or rather, chatgpt solved this issue) by opening a read stream on /dev/tty. the issue with this is that /dev/tty doesn’t exist on windows since its not unix-like. my idea was to just, not let you do interactive mode on windows if you’re piping content to it. again, this is a bug with bun, and i’ll remove this limitation once one of the two is merged. that’s right, there’s two! here’s one for reference: https://github.com/oven-sh/bun/pull/32153

shit that was long

Changelog

• (dd07e14) Upgrade packages
• (77e6d34) Add support for piping into renderer.ts from stdin
• (1995f45) Improve image and ANSI handling, stop using chalk in errors
• (22cfacd) Improve table handling, switch some types to interfaces

pls like

better types. debug mode and stdout!

from my last devlog:

next up:

• code blocks (~2-4 hours)
• fixes to table rendering (<30 mins)
• fix image handling (it doesn’t handle relative paths correctly) (<1hr?)

of these, i’ve done none! what i have done though is add flags and types! i spent a while dealing with type errors because i decided to specify types instead of just putting any on ProcessedToken.content. i also added a debug flag, but literally all it does is show the console

i also fixed the width thing, so the content is only as wide as the space you give it so cooll!!

the main part of this is that i added a --print-to-stdout flag that just prints the formatted markdown to stdout! you can just scroll in your terminal instead of having a whole ass tui its kinda borked and incomplete though, so i’ll fix it up! it does print some garbage at the beginning so that’s not great

anyways, i’d better do what i said i’ll do last devlog! i went off track for this lmao

Changelog

• (b1c0489) Implement half-baked print to stdout option
• (aa3c029) Add debug flag, fix logic errors
• (aa33e84) Specify types for ProcessedToken.content instead of any

(back to) opentui!

if you’ve read my last devlog, you might remember that i was considering the jsvision library. however, i came back to opentui because its still much simpler. also, i found that there are libs to adapt ansi! or at least chatgpt did at first i was doing ghostty-opentui, but i realized after some time that it was literally a whole terminal. then i got chatgpt to find me this package called ansi-sequence-parser (https://www.npmjs.com/package/ansi-sequence-parser) and its perfect! so now im using that to render the bold and italics! tbh i could just eliminate the middle stage (stylize.ts), but i put a lot of work into it and i’m extremely vulnerable to the sunken cost fallacy, so i’m doing this bloat lmao.
also, i got ordered lists, bullet lists, and blockquotes working! they look so cool!
as for the menu, its not doing very fine, but that’s because i’ve not worked on it! i’ll get to it, don’t worry!

next up:

• code blocks (~2-4 hours)
• fixes to table rendering (<30 mins)
• fix image handling (it doesn’t handle relative paths correctly) (<1hr?)

Changelog

• (8b44667) Add blockquotes and 1 row bottom margin to second-level renderables
• (3e5182f) Add oredered list handling
• (d997aff) Switch back to OpenTUI, get things working

generational fuck up

well i’ve messed up big time, sunken cost fallacy is real and it got me

you see, i was using opentui earlier, but i decided to change because i realized that it doesn’t support ansi escape sequences. i landed on neo-neo-blessed, and it seemed cool, until i realized the list selection thing got fucked up because it didn’t handle scrolling list options with heights greater than 1 row properly which is a deal breaker. i also spent a lot of time patching its types, in fact that’s what most of this time went to

i think i’ll use jsvision. it seems interesting and i’ve got nothing to lose. the only issue is it has one maintainer and 9 stars, but gpt found it, and it seems cool. also they have demos of the unmodified lib running in the browser which i wanted to do, so this will be fun

Changelog

• (33e1c91) Start using neo-neo-blessed and do a generational fuck up

TUI!

i’ve got news: the TUI renders!

for this tui, im using opentui! right now, the tui only shows an interactive list of files, and its supposed to render the file content if you select one, but that’s not happening right now. i’ve been working on the function to make opentui render the markdown. while opentui does have its own thing for markdown rendering ( ), i’m gonna render my own markdown. im currently trying to get tables working!

Changelog

• (c8ab716) Work further on rendering, start with rendering tables
• (dc8b0be) Start using OpenTUI for rendering TUI
• (86347cf) Render unknown HTML correctly (without showing tags)

it works

holy shit it works, the problem was that i was running a function but i wasn’t putting it in a console.log. the test function for reference returned a string. also, unknown tags are handled somewhat properly. i need to actually fix that, but once i do, im gonna start on the tui!! its been 96+ hours now what a crazy thing, i expected this to take 10-20 hours and now look at this…
anyways, i’ll go fix the unknown tag thing! after that i’ll start working on the tui

Changelog

• (c1461c3) Get unknown HTML tags rendering

headings! unknown tag handling (that doesn’t work)!

well we’ve got some nice stuff now! here’s a list of everything, including problems!:

• just whitespace? no more!: tokens that are just whitespace get omitted
• typescript lsp doesn’t complain: oh my god finally that was so annoying
• what’s this tag?: if it doesn’t have a handler, it falls back to the default, that is, it turns into a string! this doesn’t work properly though, i have to fix this
• ching chong ruby tags: now ruby tags are supported!
• is that a highlighter?: mark elements are now supported, which just put a yellow bg on some text
• is this a block element or not?: now the renderer can tell by looking at a token’s block property
• proper heading rendering?!?!?: chatgpt wrote the entirety of this part because you cannot bother me to make an efficient function that wraps giant text art letters based on width
• where’s the inline code?: that’s right, it doesn’t work and gets completely omitted!

Changelog

• (456161f) Trim content, add boolean property
• (07da8a6) Add handlers type to make the LSP shut up, trim strings in test file
• (b4d251c) Add handling for unknown tags
• (d903b48) Add support for dfn, samp, ruby tags
• (813d934) Fix code to stop TypeScript (vtsls lsp) warnings

typescript!

i’ve moved to typescript, cleaned up some code, finished that image function from last devlog, and upgraded packages!

• finished the image function: now it works perfectly!
• upgraded packages: shiki was upgraded! its the code coloring package btw
• added a test: i can’t keep pressing the arrow keys in bun repl i have to do this
• moved to typescript: this is the main thing. devs on discord kept telling me to use and i said i’d do it soon. i wasn’t planning on it at this time, but i did because i got fed up with a stupid bug where i was accidentally setting token types to a boolean instead of a string. that prompted me to just do it™ and now i’m fixing a bunch of bugs! still not sure why the language server is just complaining about cases that can’t happen, but that’s what typescript is for i guess

Changelog

• (688afd8) Start moving to TypeScript
• (ac99373) Switch to map for aliases, add test, clean up code
• (c62c57b) Upgrade packages, clean up code
• (f98e65c) Finish revamping image function

WIP WORK // INCOMPLETE //

this was a lot of work, and i’m still not done with html in the stylizer! here’s a list of changes with explanations:

• add more aliases to the aliases array in the html parsing section: this makes it so that html tokens and markdown tokens have the same types
• convert the array of allowed html tags into a set: sets have a .has() function that lets us find an element in O(1) time complexity which is much faster compared to Array.prototype.includes() which has an O(n) time complexity
• properly implement disallowed tags: these tags show as plain text because they are disallowed and shouldn’t be processed in markdown
• put non-block tokens as children of an inline token: non-block tokens only got parsed in the part where inline tokens were processed
• set attributes: the objects returned by the stylize function now have a properties key
• better error handling: now, where it used to just throw an error about being undefined or whatever, it will catch it, and throw a more useful error with better debug info
• [BUGFIX] make sure that arrays don’t get nested: this was a bug where arrays would get nested for some reason
• [BUGFIX] set token.level and token.nesting properly when processing html: this is necessary because the while loop depends on the nesting to know when to stop accumulating tokens and process them
• [WIP] html handling:
  • any tokens having the substring _open in their .type property
    are handled all together, with a handlers object made up of functions.
    this handling is recursive
  • token with types that don’t match the substring _open get handled
    through other branches of the if statement (else if(...) {..})
• [WIP] bullet list handling: i did not realize that there were more markdown-it tokens that i had not added handling for in the stylize function. i also need to do this for some more token types too
• [WIP] revamp image handling: instead of just a complicated function, i added a class called Image that has a function to render the image. its nearly complete but it has some errors that i committed because i need to commit often lmao

chatpgt usage

now here i used chatgpt a lot for debugging. here’s exactly what i used it for:

• why tokens weren’t being processed: this is the problem the array nesting bugfix fixed
• fixing infinite recursion: i accidentally did that lmfao
• replacing top-level non-block tokens with an inline token that contains those top-level non-block tokens as children
• figuring how to set the level property of the tokens
• questions about syntax and mutation of global vars

Changelog

• (5e931f7) Revamp image function (WIP)
• (0ce066f) Improve error handling and fix token.level assignment
• (0f28b75) Process details element in stylizer
• (0e154f3) Start improving stylizer (WIP)

why such long devlogs?

you may have noticed i’ve been going more and more time without devlogging. that’s because i like devlogging when there’s a big new thing, not for every small little thing. my plan for this devlog was to announce that i was done with processing html in the stylize function, but that hasn’t happened yet because well, there were a latta bugs here and there, and i had to fix those too. as for the length of the devlog text, i like writing about my progress here because its the only place where it makes sense to talk about it in-depth

HTML parsing is now complete

its been nearly 2 weeks and i have great news: html parsing is complete
what this means is that html blocks get processed into token streams like the one’s markdown-it makes. now, i must clarify that these html blocks were already in a token stream but they were distinctly html, having the type html_block, and if i didn’t convert those html blocks into markdown-it’s _open/_close tokens, i’d have to parse it in the file that styles the tokens, and many html tags do the exact same thing as their markdown counterparts so i could reuse some functions. i must also clarify that i have NOT done anything for stylizing html in the stylize.js file, which deals with processing text formatting and image processing

next up: stylizing html!

Changelog

• (c5a5ce0) Finish HTML parsing
• (841ba42) Start work on HTML parsing

finished gutsy gibbon article

this is really not good. if it takes this long to do one article…
i still have 36 articles left. if i need like 5 hours for each article, that’s 180 hours well this won’t be fun. im going to create a template for this then, should make it easier.

this devlog is supposed to be short, yes, literally nothing else

Changelog

• (104ae23) Finish Gutsy Gibbon article

improvements and fixes to inline rendering

this is way earlier than my normal schedule, but that’s because i’ve got something to show. basically, inline rendering was bugged, and not only did i fix it, i also made it so that it works better! that’s all you need to know, do NOT read the rest of this if you don’t want to be bored to death, its a really lengthy explanation of this

the initial bug was that inline rendering wouldn’t work at all. i figured out the problem was that i wasn’t pushing "inline" to the state array somewhere. i realized that it wasn’t working when called in the table rendering function, and that was because i wasn’t pushing "inline" to the state array.
‎
the reason for this is because the renderInline function slices the state array at the index after the "inline" string, so if its something like ["paragraph", "inline", "bold", "italic"], the function slices at index 2 because "inline" is at index 1, and we get ["bold", "italic"]. the problem is, if "inline" doesn’t exist, running indexOf("inline") returns -1, so it slices at -1 + 1, which is 0, so its just the whole array. but anything before “inline” isn’t a valid style, and since the function for that is undefined, it goes kaboom and throws an error saying that it’s not a function.

also gpt found 5 other bugs but they’re kinda irrelevant

the fix was making it so that the renderInline function itself pushed "inline' to the state array instead of depending on it being already there. this also removed the need for making sure that the inline string was already there. i might do this with the rest of the functions too actually also removed unnecessary state.pop() occurrences since the pop method is destructive and can mess up everything

as for the improvement, you might see in the first screenshot that there’s a bunch of text tokens together. yk, they could be squished together into one token… oh right, that’s what i did! i changed the renderInline function to make a variable where the text accumulates until there’s no more text or if there’s an image, on which it gets pushed to the contents array

now the most important thing is that there’s only one more thing left to do: html rendering. this is the last thing before i get to actually rendering stuff on the screen! this is exciting!

Changelog

• (9de477d) Fix, improve inline rendering

please like this took more than an hour to write

THAT WAS SO LONG WHAT ON EARTH

in short, tables now work and the inline rendering function is fixed! this took a while because i genuinely had no idea what i was doing. now the long stuff:

tables go brr

i got distracted while writing this and realized everything’s actually borked, but tables do somewhat work! its still borked tho–

also i realized that my whole code is borked, but…

inline rendering includes links now!

still have no idea how i missed that

other

i just changed image function so that it returns an object with a prototype function instead of unnecessarily repeating the function as a property of all the image objects, so if there’s 10 pictures in a file, there will only be one function to render each as opposed to 10 instances of that function

Changelog

• (d8feb46) Add table support, fix inline rendering

oh fuck, my code is COMPLETELY borked

WELCOME TO THE EXPERIMENT

we will now cheese stardance’s algorithm into giving me tons of views
and i will explain how
jump to the bottom to skip the technical stuff

how stardance’s algorithm shows things:

so it checks for actions in the last 7 days and here are the most
important ones by order:

• likes
• reposts
• views
• project followers
• comments
  BUT stardance also recommends content based on WHO liked followed the
  project etc and thats the key

instructions

i need you to leave a comment just with your project and if its cool i
will promote it here
then i need you to like repost and follow the project thats it

special people

these people should be the key to everything here they all are from one
specific interest and should make me pop up to everyone thats the same
and that intrest is: i dont know, i will try to tag all the people that i
think the project they work on is very universal

for the special people

its very important each of you do the instructions thats why i tagged
you
we will start with the person i stole this idea from and all the people
he tagged:
@jam06452
@vejas
@kingvon
@Keyboard1000n17
@SeradedStripes
@Rupnil
and others
@Lightfury
@PAPER_01
@sol4r_on_hackclub
@tjingi_
@water

also

lets add funny pictures for engagement and a cat + dog