You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+136-1Lines changed: 136 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# codethoughts
2
2
3
-
This is the code for the blog [codethoughts.io]](https://codethoughts.io).
3
+
This is the code for the blog [codethoughts.io](https://codethoughts.io), where Christian Kjær (Tehnix) dumps his thoughts every now and then.
4
4
5
5
```bash
6
6
$ just
@@ -13,3 +13,138 @@ Available recipes:
13
13
help# Display help information.
14
14
install-tooling # Install tooling for working with the codethoughts blog.
15
15
```
16
+
17
+
The normal workflow would be:
18
+
-`just code` to open the project in VS Code/Cursor/whichever editor you've configured to open `.code-workspace` files.
19
+
-`just dev` to run the `zola` development server, and `tailwindcss` in parallel.
20
+
- Write you draft posts in `content/drafts/` and move them to `content/posts/` when you're ready to publish.
21
+
22
+
# Stack
23
+
24
+
-[`zola`](https://www.getzola.org/documentation/getting-started/overview/) for static site generation.
25
+
-[`tailwindcss`](https://tailwindcss.com/) for styling (defined in `styles/input.css` and compiled to `static/styles/output.css`).
26
+
-[`bun`](https://bun.sh/) for package management and any javascript/typescript code.
27
+
-[`just`](https://just.systems/) for running commands.
28
+
29
+
And then we pull in:
30
+
-[`mermaid`](https://mermaid.js.org/) for diagrams.
31
+
32
+
Static files are served from `static/`.
33
+
34
+
# Syntax and Shortcodes
35
+
36
+
There's a few custom [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that are used to add extra functionality to the blog, and make certain things a bit easier. They are all defined in `templates/shortcodes/`.
37
+
38
+
You can see most of these in action in the [component-overview](drafts/component-overview/index.md) draft post, or live at [https://codethoughts.io/drafts/component-overview/](https://codethoughts.io/drafts/component-overview/).
39
+
40
+
### Excerpts
41
+
42
+
To mark the end of the part of a post that is shown as a preview, you can use the `<div></div><!-- more -->` tag.
43
+
44
+
```markdown
45
+
<div></div><!-- more -->
46
+
```
47
+
48
+
NOTE: Without this tag, there will be no preview/summary generated for the post.
49
+
50
+
This will be the part of the post that is shown previews, such as on [the home page](https://codethoughts.io/), accessible as the `page.summary` (used in the [index.html](templates/index.html) template).
51
+
52
+
53
+
### Table of Contents
54
+
55
+
Generates a table of contents for the current page. It's placed after the summary cutoff point, and will generate a table of contents for the current page.
56
+
57
+
Simply just place it where you want the table of contents to be generated, like this:
58
+
59
+
```markdown
60
+
{{ toc() }}
61
+
```
62
+
63
+
### Aside/Callouts 💡
64
+
65
+
Adds an aside block to the current page. It's placed after the summary cutoff point, and will add an aside block to the current page.
66
+
67
+
```markdown
68
+
{% aside() %}
69
+
I will show up as a callout block on the page with a nice lightbulb icon (💡) in front of it.
70
+
{% end %}
71
+
```
72
+
73
+
### Images
74
+
75
+
Colocated images (placed in the same folder as the `index.md` of the post) can be loaded like this:
This automatically resizes the image to the width specified keeping the aspect ratio, and adds a caption if provided.
83
+
84
+
85
+
### Mermaid Diagrams
86
+
87
+
Mermaid diagrams are conditionally loaded, based on the `mermaidjs` extra field in the post frontmatter. If it is set to `true`, the diagram will be loaded, otherwise it will be ignored.
88
+
89
+
```markdown
90
+
+++
91
+
...
92
+
[extra]
93
+
mermaidjs = "true"
94
+
+++
95
+
```
96
+
97
+
You can then make diagrams using `<pre class="mermaid">` tags, like this:
98
+
99
+
```markdown
100
+
<preclass="mermaid">
101
+
graph TD
102
+
A --> B
103
+
%% ...etc
104
+
105
+
</pre>
106
+
```
107
+
108
+
### Code from files
109
+
110
+
To load code from a colocated file, you can use the `load_code` shortcode.
111
+
112
+
````markdown
113
+
```typescript,hide_lines=1-5 10-15
114
+
{{ load_code(path="example.ts") }}
115
+
```
116
+
````
117
+
118
+
This will load the code from the file `example.ts` and display it in a code block.
119
+
120
+
### Medium link
121
+
122
+
To standardize linking to Medium comments, you can use the `medium_comments` shortcode, usually at the end of the post:
Which will generate something like this, linking to the Medium post:
129
+
130
+
```
131
+
👉 Let me know what you think over on Medium or in the comments below 👇
132
+
```
133
+
134
+
This is defined in `templates/shortcodes/medium_comments.html`.
135
+
136
+
### Snapshot style sections ⌜ ｣
137
+
138
+
To make a snapshot style section, like on [https://codethoughts.io/pages/about/](https://codethoughts.io/pages/about/), you can use the `snapshot_section_wrapper` shortcode together with the `icon_section` shortcode.
139
+
140
+
```
141
+
{{ snapshot_section_wrapper(part="start") }}
142
+
143
+
{% icon_section(name="pencil-square", title="About the blog") %}
144
+
Codethoughts is a place where I ...
145
+
{% end %}
146
+
147
+
{{ snapshot_section_wrapper(part="end") }}
148
+
```
149
+
150
+
The available svg icons are defined in `templates/macros/icon.html`.
0 commit comments