Design System

  • 10min read

An example post to keep track of all blog features

Table of contents
Certified organic content, no AI used

Serve#

1
rm -rf public && hugo --gc --ignoreCache && hugo server --buildDrafts --disableFastRender

Add new page#

1
hugo new content posts/name-of-page

Code Blocks#

Normal Rust code:

1
2
3
fn main() {
	println!("Hello, world!");
}

Code with file name:

1
2
3
4
5
6
[package]
name = "beast"
version = "0.1.0"
edition = "2024"

[dependencies]

Code with highlighted lines:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
enum Tile {
	Empty,       // There will be empty spaces on our board "  "
	Player,      // We will need the player "◀▶"
	Block,       // Some tiles will be blocks "░░"
	StaticBlock, // Others will be blocks that can't be moved "▓▓"
}

fn main() {
	println!("Hello, world!");
}

Code with folded code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#[derive(Copy)]
enum Tile {
	Empty,       // There will be empty spaces on our board "  "
	Player,      // We will need the player "◀▶"
	Block,       // Some tiles will be blocks "░░"
	StaticBlock, // Others will be blocks that can't be moved "▓▓"
}

fn main() {
	println!("{:?}", Board::new());
}

Console block with color output:

cargo --color=always run 2>&1 | aha --black | pbcopy
   Compiling beast v0.1.0 (/Users/code/beast)
warning: constant `BOARD_WIDTH` is never used
 --> src/main.rs:1:7
  |
1 | const BOARD_WIDTH: usize = 39;
  |       ^^^^^^^^^^^
  |
  = note: `#[warn(dead_code)]` on by default

warning: associated items `new` and `render` are never used
  --> src/main.rs:19:5
   |
18 | impl Board {
   | ---------- associated items in this implementation
19 |     fn new() -> Self {
   |        ^^^
...
31 |     fn render(&self) -> String {
   |        ^^^^^^

warning: `beast` (bin "beast") generated 6 warnings
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.32s
     Running `target/debug/beast`
This is normal color, this is yellow, and this is normal again

Cleaning:

  • remove HTML at start till <pre> and in footer from </pre>
  • remove <span style="font-weight:bold;"></span>
  • remove filter: contrast(70%) brightness(190%);
  • replace /Users/dominik/Desktop/beast with /Users/code/beast

Code Diff:

1
2
3
4
5
6
7
8
impl Board {
- fn new() -> Self {
- Self {
- buffer: [[Tile::Empty; 39]; 20],
- }
+ fn gen(&self) -> Self
	}
}

Code as Mermaid:

sequenceDiagram
	participant Alice
	participant Bob
	Alice->>John: Hello John, how are you?
	loop Healthcheck
		John->>John: Fight against hypochondria
	end
	Note right of John: Rational thoughts <br/>prevail!
	John-->>Alice: Great!
	John->>Bob: How about you?
	Bob-->>John: Jolly good!

Code as goat:

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 5 0 4 2 6 3 7 + z + y + x v 1 v P 0 X v 3 E y v e 2 R e f r a c t i o n R e f l e c t i o n
L i n u A D C F x n e e e d b n d r i U M t o o a b i o r i n u n s a d n L K X X t t u u u u u b b b b u u u u n n n n t t t t u u u u
A A l l i i c H < c e H e e e l l l l o o A B l o i b c ! e B > ! B o o b b > E n d
S P E T F I L Y R X E A D I N O P R C E T T D R M T N E A U E O T R X C S R I A T S F L I I I O O E N N R | | | | = = = = = = = L " " " { I T F I I [ ( { l " D E A D T " " " e " P E R C E E t " R N M T N R E E E t " O T O T A X X X e D I { R I L P P P r c U F F R R R h C I " { I E E E { a T E | E S S S r I R " F R S S S l a O A I I I e c N " T C O O O t t = E T N N N t e } " R O e r M R " " " r . E ] ) } { X } } " " " } P c R . . . . h E a S r S a I c O t N e r " . } " " . " " " .



Blockquotes#

Normal quote:

This is a quote

Quote with citation:

Quote from a famous person with long lines so we see what the end looks like

—The person who said it



Callouts#



Emojis#

Read more about why this is a good idea in this excellent article: https://adrianroselli.com/2016/12/accessible-emoji-tweaked.html

🙌 🪄

Images#

Figure image:

Placeholder image alt text

Figure half size:

Placeholder image alt text

Figure line height:

Placeholder image alt text

Figure with figcaption:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Figure half size with figcaption:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Figure line height with figcaption:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Figure image left aligned:

Placeholder image alt text

Figure half size left aligned:

Placeholder image alt text

Figure line height left aligned:

Placeholder image alt text

Figure with figcaption left aligned:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Figure half size with figcaption left aligned:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Figure line height with figcaption left aligned:

Placeholder image alt text
My fig caption that is long and will break since the text goes and goes and goes until it finally gives in to the end of the page

Non-block image:

Some text Placeholder image alt text more text.

Non-block image half size:

Some text Placeholder image alt text more text.

Non-block image line height:

Some text Placeholder image alt text more text.


Non-block image inline:

Some text Placeholder image alt text more text.

Non-block image half size inline:

Some text Placeholder image alt text more text.

Non-block image line height inline:

Some text Placeholder image alt text more text.

Terminal recordings#

Use termsvg and run:

1
2
3
4
termsvg rec ~/Desktop/my-cast.cast
cargo run
# do stuff and end program
exit

To convert the cast:

1
termsvg export -m -n -b "rgb(40, 42, 44)" ~/Desktop/my-cast.cast

Fix up:

  • fix up cast to get the right size (slamp width and height)
  • remove frames
  • reset timer
  • remove \ufffd
  • last step: edit SVG
    • fix size to clap even more
    • make font size 19.94px