A simple markdown-to-html web-component
In the last entry, I presented a way to use typescript in basic static html pages with a simple compile task, along with how to use external modules' type definitions while still relying only on their CDNs for the actual code and css loading.
Here, I'm going to add a little my dynamics to the page. I have 2 core features I wanted on the page. First is to be able to write sections of the page in the slightly more readable markdown syntax. Second was to fetch the RSS feeds from my various blogs and render just the first entry in a reasonable layout consistent with the page styles.
While both of these features could be done with a server side language or a full static-site generator, I'll be honest: I'm tired of php, and I find the SSGs to be overkill for something like the simple home landing page I'm making (I also don't like how in general they pollute the file system of the root folder with all of their cruft that could easily be stored in a subfolder to keep things isolated and easier to manage when you restructure a site).
So the basic idea - I have a "card" of the markdown content deployed on the host site with the index page. I want to fetch it, convert it to html, and render it. Yes, this could be done straight in javascript right on the index, but I'm a sucker for some encapsulation. Thus the ideal self-contained solution would be a web-component.
The syntax should be simple - just specify the card content and then some classnames or styles. (Any header/other styling would happen from the beercss library already being used to style the whole page.) A web-component needs a name in a hyphenated form to differentiate it from any current or future standard HTMLElement.
Here, I'm going to add a little my dynamics to the page. I have 2 core features I wanted on the page. First is to be able to write sections of the page in the slightly more readable markdown syntax. Second was to fetch the RSS feeds from my various blogs and render just the first entry in a reasonable layout consistent with the page styles.
While both of these features could be done with a server side language or a full static-site generator, I'll be honest: I'm tired of php, and I find the SSGs to be overkill for something like the simple home landing page I'm making (I also don't like how in general they pollute the file system of the root folder with all of their cruft that could easily be stored in a subfolder to keep things isolated and easier to manage when you restructure a site).
So the basic idea - I have a "card" of the markdown content deployed on the host site with the index page. I want to fetch it, convert it to html, and render it. Yes, this could be done straight in javascript right on the index, but I'm a sucker for some encapsulation. Thus the ideal self-contained solution would be a web-component.
The syntax should be simple - just specify the card content and then some classnames or styles. (Any header/other styling would happen from the beercss library already being used to style the whole page.) A web-component needs a name in a hyphenated form to differentiate it from any current or future standard HTMLElement.
<aji-md card="cards/bio.md" class="aji-summary line-clamp-8"/>
Continue reading "A simple markdown-to-html web-component"