Restructured toolchain to its own workspace

This commit is contained in:
2024-01-28 20:34:07 +01:00
parent d333ed98af
commit 502946376f
23 changed files with 312 additions and 196 deletions

18
src/index.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Paths, ToolchainBuilder } from "@zblog/toolchain";
const paths: Paths = {
outputDirectory: "dist",
notes: {
rootPath: "src/notes",
assetsDirectoryName: "assets",
noteFileName: "note.md",
},
templates: {
rootPath: "src/templates",
noteTemplateName: "note.html",
indexTemplateName: "index.html",
notFoundName: "404.html",
},
};
new ToolchainBuilder(paths).build();

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -0,0 +1,77 @@
# Initial commit
_2023-09-15_
I've been thinking a long time about having a place to publicly publish things. I'm not really into doing that on social media since it would lock my content in their format and make it hard to move anywhere else so i thought i would just write my "things" in plain markdown and then find a way of hosting them online.
Sure there's a lot of static site generators out there and a couple of them could probably be configured to work the way i want it to. However to me there is a joy in using things that I have built on my own so first i will try building something from scratch.
It will be very simple, atleast in the beginning.
A list of directories will represent individual posts.
Each directory will have a markdown file, asset directory and if needed some picture inside of there as well.
A node script will traverse the directories, keeping track of the name of the post, its markdown content and the assets referenced.
Then the markdown will be converted into html and placed in a post html template that i can use to have common layouts and styling between each every post.
All posts will be copied to an output directory together with an index file that has links to all my posts.
Will it be pretty?
Probably not.
But it's a start!
Oh and I need some test markdown symbols to practice on..
# H1
## H2
### H3
#### H4
##### H5
###### H6
_Italics_
_Italics_ then text
Text then _italics_
**Bold**
**Bold** then text
`Single line of code`
`code` then text
```
Multi
Line
Of
Code
```
```
// Multi line code snippet with typescript syntax highlighting
const x: string = "arst";
const y = () => {
console.log(x);
};
```
- bullet
- bullet
- bullet
- bullet
1. ordered list item
1. ordered list item
1. ordered list item
1. ordered list item
[link to the index](https://blog.zacke.dev)
[link to the index](https://blog.zacke.dev) with text after it
![alt-text](@asset/git.png)

17
src/notes/2-ideas/note.md Normal file
View File

@@ -0,0 +1,17 @@
# Ideas
_2023-09-16_
This morning I was out for a bike ride.
It's something that i really enjoy, and I usually pair it with listening to a couple of episodes from my favorite podcasts (today it was [Syntax](/404)).
After 30 minutes or so i find that I usually enter some kind of creative state and zone in and of actually listening to the podcast (if it isn't very interesting) and coming up with project ideas.
Today I came up with one that i thought was pretty neat, it most probably already exists in another shape or form.
There should be a tool that lets you browse your image library based on location.
You index the location exif data from your whole library and plot that on a map.
You then draw hotspots on the map where images are present, pressing one reveals the images.
Couple this with some nice filtering and perhaps image recognision and it would be pretty neat way to find that picture of that place that you don't really remember where it was physically, but you have a vague recognision of when you took it and what it captured.
The reason I came up with this is that I sometimes stumble upon beautiful or cool places that I would like to revisit on foot, and while I track my rides with GPS I don't have a system for leaving points of interest to then revisit. Since what I guess is most phones already capture this information, why not put it to good use?

View File

@@ -0,0 +1,37 @@
# Markdown parser
_2023-09-16_
While traveling today i thought about ways to structure my markdown parser.
What I want is a function that takes a string containing markdown formatted text and outputs a string of html elements.
My plan is to solve this using a markdown line feed and symbol classes representing the different possible elements.
These symbols are for example headings, list items, code snippets, paragraphs and links.
Each symbol will know how to render itself as well as being able to tell if it's the right symbol for the current line feed line.
Lets say we have a markdown file that looks something like this:
```
# Release notes
Release 1.0.0 contains the following changes:
- We're now able to properly render markdown as html.
```
The line feed consists out of the lines above and can be read one line at a time.
We're ignoring the complexity of recursivly parsing symbols due to nesting for now.
We know that the parsing is complete when the line feed is empty.
We take the first line `# Release notes`.
We iterate through our list of symbols asking them if they're interested in this line.
We arrive at the heading symbol, which identifies the "#" and says yes, we stop the iteration.
We pass the first line to the symbol, alongside the line feed.
The symbol can now decide if it's happy with the one line it claimed or if it wants to continue reading from the line feed.
Symbols can peek at the line feed, the line is not removed unless it is claimed by the symbol.
In this case the heading is a single line symbol, so the symbol strips the line that it claimed from the "#" heading syntax and saves the rest to render as a heading later.
The static symbol instance now returns an instance of a header symbol which we can save to a list for later rendering.
Calling render on a symbol should result in a html string composed of itself plus any child symbols recursivly.

View File

@@ -0,0 +1,21 @@
# Markdown parser part 2
The markdown parser is kind of going according to plan. I realised that with the appoach I decided to take I'm going to need a couple of more steps than just going line by line and deciding what type of element each should be.
Let's take an example:
```
Some **bold** text and then some _cursive_ text
```
This is not only a text line but it has both bold and cursive text.
So in addition to parsing the markdown files line by line (stage 1), I implemented stage 2 processing with the purpose of expanding the identified elements into child elements. So when a text row element containing the text in the example above is requested to peform its stage 2 processing it will take its text and run it once more through the stage 1 processing to divide it into new symbols. It then calls stage 2 processing of all its new children to make sure every element has been processed.
In the end we should have gone from `TextLine` to `PlainText, Bold, PlainText , Italic, Plaintext`.
Here's the result.
Some **bold** text and then some _cursive_ text
Next up is stage 3 processing which will affect elements depending on their position in the list of elements.

View File

@@ -0,0 +1,12 @@
Let's put a pin in developing the markdown parser for a little while.
The last couple of years i've been using a time management technique called the pomodoro technique. It's very simple, you decide on a task, you put a 25 min timer to focus on that task, when the time is up you take 5 min to do something else, then you focus for another 25 minutes. You do this a couple of rounds then you take a longer break.
It's simple and it works for me. It especially helps me to remember to do my stretching to avoid pain from monotonous work.
tbw
digital timer
physical timer
project

15
src/templates/404.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
</div>
</body>
</html>

11
src/templates/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{content}}
</body>
</html>

11
src/templates/note.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{markdown}}
</body>
</html>