the home site for me: also iteration 3 or 4 of my site
feat: update example post
+26
-86
+26
-86
content/blog/2024-10-11_example_post.md
+26
-86
content/blog/2024-10-11_example_post.md
···
1
1
+++
2
-
title = "Test Post"
2
+
title = "The *Mega* test case"
3
3
date = 2024-10-11
4
-
slug = "test-post"
5
-
description = "Testing out styling and features."
4
+
slug = "mega"
5
+
description = "How I write / leme check if that broke anything page"
6
6
7
7
[taxonomies]
8
8
tags = ["meta"]
···
23
23
can be [linked to](#section-headers) directly. To link to them, the header's text needs to be
24
24
*kebab-cased*, so the above would be `#section-headers`.
25
25
26
-
### But what about sub-headers?
27
-
28
-
I usually use `###` sub-headers to ask the question I think the reader is (or should be) asking at
29
-
this point in the article. For example, if I just posted some code with an obvious error, I might
30
-
follow that up with `### Wait, won't that crash?` or something similar. Using this approach lets
31
-
me write posts in a conversational way, and helps me continually frame myself in the mind of the
32
-
reader.
26
+
Not quite a section header, the `<!-- more -->` tag is used to indicate where a post should be split for rss purposes. This should generally be right after the first paragraph.
33
27
34
28
### Table of Contents
35
29
···
42
36
has_toc = true
43
37
```
44
38
45
-
I don't like content that is nested more than 2 layers deep, so only `##` and `###` should be used
46
-
to divide things up.
39
+
The table of contents will only ever be generated for `##` and `###` headers. I don't particularly love the look of it and tend to write shorter posts so I hardly use it.
47
40
48
41
## Embedding Code
49
42
50
-
This is prominently a coding blog, so code will show up a lot. First off, a monospaced text block is
51
-
denoted by wrapping the text in triple back-tick characters <code>```</code>.
52
-
53
-
```
54
-
┌──────────────────────────┐
55
-
│ This text is monospaced. │
56
-
│ This │
57
-
│ text │
58
-
│ is │
59
-
│ monospaced. │
60
-
└──────────────────────────┘
61
-
```
43
+
I tend to do this alot so this is an important bit of the blog. All code blocks with a code type are progressively enhanced with a copy button.
62
44
63
45
### Syntax Highlighting
64
46
65
47
If you want syntax coloring, you put the name of the programming language immediately after the ticks.
66
48
So writing this:
67
49
68
-
~~~
50
+
~~~md
69
51
```rust
70
52
fn main() {
71
53
println!("Hello, world!");
···
85
67
86
68
Sometimes it can help to give a header to a code block to signal what it represents. To do this, you put
87
69
a single-line block quote immediately before the code block. So by prepending the following code with
88
-
`> src/main.rs`, I can produce this:
89
-
90
-
> src/main.rs
91
-
```rust
92
-
fn main() {
93
-
println!("This code is in main.rs!");
94
-
}
95
-
```
96
-
97
-
This can be useful to explicitly state the programming language or format being used:
98
-
99
-
> TOML
100
-
```toml
101
-
title = "Test Post"
102
-
slug = "test-post"
103
-
description = "Testing out styling and features."
70
+
`> src/index.ts`, I can produce this:
104
71
105
-
[taxonomies]
106
-
tags = ["meta"]
72
+
> src/index.ts
73
+
```ts
74
+
Bun.serve({
75
+
port: 3000,
76
+
fetch(req) {
77
+
return new Response("Hello, world!");
78
+
}
79
+
});
107
80
```
108
81
109
82
### Inline Code
110
83
111
84
As seen above, sometimes code items are mentioned in regular paragraphs, but you want to
112
-
draw attention to them. To do this, you can wrap it in ` back-tick quotes. For
85
+
draw attention to them. To do this, you can wrap it in back-tick (\`) quotes. For
113
86
example, if I wanted to mention Rust's `Vec<T>` type.
114
87
115
88
```md
···
130
103
wrap it in a `blockquote` tag:
131
104
132
105
> "This text will appear italicized in a quote box!"
133
-
134
-
### Reader Questions
135
-
136
-
When displaying reader questions, I start the block quote with a bolded name, like so:
137
-
138
-
> **SonicFan420x69 asks:**
139
-
>
140
-
> “What is your opinion of the inimitable video game character, Sonic the Hedgehog? Please
141
-
> answer soon as it is a matter of life or death.”
142
106
143
107
### Cited Quotations
144
108
···
150
114
>
151
115
> <cite>Bilbo Baggins</cite>
152
116
153
-
## Icons & Images
154
-
155
-
They were shown in the previous section, but icons (provided by [Remix Icon](https://remixicon.com/)),
156
-
can be used anywhere by inserting an `<i>` tag with the icon's class. These are useful for adding
157
-
some detail and decorating to the pages, and is another way to break up text.
158
-
159
117
## Embedding Media
160
118
161
119
Images and videos are a great way to break up content and prevent text fatigue.
···
175
133
176
134
You can also add captions to images:
177
135
178
-
<figure>
179
-
<img src="https://img.itch.zone/aW1hZ2UvNTU2NDU0LzI5MTYzNzkucG5n/original/8LIdCb.png" alt="NOISE1 screenshot">
180
-
<figcaption>
181
-
NOISE1 is a dark sci-fi hacker-typing stealth game.
182
-
</figcaption>
183
-
</figure>
184
-
185
-
But there is no way to do this in markdown so you have to use the `<figure>` tag like so:
186
-
187
-
```html
188
-
<figure>
189
-
<img src="/path/to/image.png" alt="Alt text goes here.">
190
-
<figcaption>Caption text goes here.</figcaption>
191
-
</figure>
136
+
```terra
137
+
{{/* img(id="https://url.com/image.png" alt="alt text" caption="this can be ommited if you want or added! It's optional :)") */}}
192
138
```
193
139
194
-
### Videos
140
+
{{ img(id="https://cloud-owp7vmln1-hack-club-bot.vercel.app/0img_1846_1_.jpg" alt="MacBook proprietary blade SSD" caption="it really was a rather sleek design; shame that apple got rid of it in favor of soldered on storage") }}
195
141
196
-
To embed a video, you use the `youtube` shortcode e.g.
197
-
198
-
> post.md
199
-
```md
200
-
{{/* youtube(id="kiWvNwuBbEE") */}}
201
-
```
142
+
### Videos
202
143
203
-
You can also add the `autoplay=true` flag to make the video autoplay.
144
+
To embed a video, you use the `youtube(id="", autoplay?=bool)` shortcode e.g.
204
145
205
146
{{ youtube(id="NodwjZF7uZw") }}
206
147
207
-
The shortcode is processed into an iframe which looks like this:
148
+
### Bluesky posts
208
149
209
-
> post.html
210
-
```html
211
-
{{ youtube(id="kiWvNwuBbEE") }}
212
-
```
150
+
This is handled by a shortcode `bluesky(post="")` and takes the post url as a parameter. These will automatically attach images and videos.
151
+
152
+
{{ bluesky(post="https://bsky.app/profile/svenninifl.bsky.social/post/3lnkivz3ans2k") }}
213
153
214
154
## Miscellaneous
215
155