Edit: This is an on-going project. Check out the blog for current updates.

A commandline tool for Linux, written from scratch in c/c++, used for making this very website.

For implementation details, please check out the blog series.

Main Features

  1. Converting Markdown text to corresponding html.
  2. A custom template system able to generate all page permutations from one source file.

Markdown to Html

Markdown is a widely used markup language designed for writing for the web. All content on this site is written in it and as mentioned, this tool handles the conversion of the source text to usable html.

Conversion Sample

Input Markdown

# Header
## Subheader
Paragraph.
>Quote
* Unordered list.
1. Ordered list.
```
// Code block
foo = bar;
```

Output Html

<h1>Header</h1>
<h2>Subheader</h2>
<div class="Section2">
<p>Paragraph.</p>
<blockquote>Quote</blockquote>
<ul><li>Unordered list.</li></ul>
<ol><li>Ordered list.</li></ol>
<div class="CodeBlock">
<pre>
// Code block
foo = bar;</pre>
</div>
</div>

Extended Markdown Features

Syntax Highlighting

Currently supporting c/c++, Markdown and html.

// Example c code.
struct Type
{
	u32 mem0 = 0xFF23;
	f32 mem1 = 12.45f;
};

#define Macro(a, b) a << b

void main(s32 numArgs, char** args)
{
	// Main function body.
	s32 a = 3 + 2;
	return 0;
}

Post Meta

Ability to pass variables to the template system via Markdown references, such as post title, date and tags.

[meta]: Name "Post Title"
[meta]: Date "2024,October,1st"
[meta]: Tags "One;Two;Three"

Automatic Indentation

According to header level.

Header

Paragraph.

SubHeader

Another paragraph.

Looping Slide Span

Used for compact image galleries.
More of a feature of the site itself since it requires additional javascript to function. Still the Markdown syntax had to be extended to allow its generation.

?[alt text](Image_##.jpg "Title" imageCount)

Turntable Span

Used for prerendered 360 views. Same approach as with looping slide span.

~[alt text](Image_##.jpg "Title" frameCount)

Video Span

Much like the default image span.

^[alt text](Video.mp4 "Title")

Media Span Pixel Dimensions

Automatic retrieval of pixel dimensions for image and video tags that reference local files. A measure to reduce layout shift.
Currently supporting jpeg, png and mp4.

<img width="800" height="600" src="..."/>
<video width="800" height="600" src="..."/>

The Template System

The input template is a regular html file with additional syntax that instructs the template processor.

Scopes can be best thought of as sub-templates, defining which parts of the template can be processed at a given time. They can have multiple instances running in succession. Most notable example of its use being the posts themselves.

Variables holds actual content to be inserted.

Example template

<header>...</header>
<div class="ContentBody">
<!--Scope included if "Blog" was defined-->
[:Blog]
{
	<!--"Input" is predefined scope reserved for markdown input.-->
	[Input]
	{
		<div class="Post">
			<div class="PostHeader">[Name]</div>
			<!--
			"Date" scope is by default file date.
			"Edited" scope is optional.
			-->
			<div class="PostDate">[Date]{[0]-[1]-[2]}[Edit]{ (Edited [0]-[1]-[2])}</div>
			<!--
			Variables can also be instanced.
			In this case used for tags.
			-->
			<div class"PostTags">[Tags]{<div class="Tag">[0]</div>}</div>
			
			<div class="PostContent">
			<!--"Content" also predefined. Holds resulting Markdown html.-->
			[Content]
			</div>
		</div>
	}
}
<!--Scope included if "About" was defined-->
[:About]
{
	<p>The backstory of my life...</p>
}
</div>