Restructured toolchain to its own workspace
This commit is contained in:
18
src/index.ts
Normal file
18
src/index.ts
Normal 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();
|
||||
BIN
src/notes/1-initial-commit/assets/git.png
Normal file
BIN
src/notes/1-initial-commit/assets/git.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
77
src/notes/1-initial-commit/note.md
Normal file
77
src/notes/1-initial-commit/note.md
Normal 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
|
||||
|
||||

|
||||
17
src/notes/2-ideas/note.md
Normal file
17
src/notes/2-ideas/note.md
Normal 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?
|
||||
37
src/notes/3-markdown-parser/note.md
Normal file
37
src/notes/3-markdown-parser/note.md
Normal 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.
|
||||
21
src/notes/4-markdown-parser-part-2/note.md
Normal file
21
src/notes/4-markdown-parser-part-2/note.md
Normal 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.
|
||||
12
src/notes/5-pomodoro-timer/note.md
Normal file
12
src/notes/5-pomodoro-timer/note.md
Normal 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
15
src/templates/404.html
Normal 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
11
src/templates/index.html
Normal 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
11
src/templates/note.html
Normal 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>
|
||||
Reference in New Issue
Block a user