about projects

Testing Page

This is a page for testing, it's not actually a project. You can ignore this page. It's just already in git and I can't bother taking it out at the moment. asdf excerpt is here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H2

## H2

This is a level 2 heading

H3

### H3

This is a level 3 heading

H4

#### H4

This is a level 4 heading

H5
##### H5

This is a level 5 heading

H6
###### H6

This is a level 6 heading

Another H3

(this is just for checking how the table of contents looks)

Markdown Tests

Testing how various markdown syntax renders

Inline (italic, bold, strikethrough, code, LaTeX\LaTeX)

_italic_
**bold**
~~strikethrough~~
`code`
$\LaTeX$

$$
\begin{aligned}
  \begin{bmatrix} \cos(\theta) & -\sin(\theta) \\ \sin(\theta) & \cos(\theta) \end{bmatrix} ~|~ (\theta = 0)
  &= 
  \begin{bmatrix} \cos(0) & -\sin(0) \\ \sin(0) & \cos(0) \end{bmatrix}
\\
  &= \begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}
\end{aligned}
$$

Interleave italic, bold, strikethrough, code, and LaTeX\LaTeX within text (or, for not LaTeX\LaTeX, even headings!)

Block LaTeX\LaTeX equations can be used as well:

[cos⁡(θ)−sin⁡(θ)sin⁡(θ)cos⁡(θ)] ∣ (θ=0)=[cos⁡(0)−sin⁡(0)sin⁡(0)cos⁡(0)]=[1001]\begin{aligned} \begin{bmatrix} \cos(\theta) & -\sin(\theta) \\ \sin(\theta) & \cos(\theta) \end{bmatrix} ~|~ (\theta = 0) &= \begin{bmatrix} \cos(0) & -\sin(0) \\ \sin(0) & \cos(0) \end{bmatrix} \\ &= \begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix} \end{aligned} 
[link](/)
https://github.com
[email protected]

See this link (this link just goes to the homepage). Some text also automatically links, such as https://github.com or [email protected]

hr

Content
---
Other content

Below is a horizontal line break

Above is a horizontal line break

Paragraphs

owo. This is a very long paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes

> This is a blockquote
>
> > and this is a nested blockquote

These could use some better styling, but I'm not really using that much at the moment so they're lower priority.

This is a blockquote

and this is a nested blockquote

Below is a captioned blockquote

some deep and insightful sounding quote

- some famous person who didn't actually say the quote, it was just misattributed to them

Footnotes

See footnote [^1]

[^1]: this is a footnote

See footnote 1. Also see this named footnote 2

Code blocks

```
to be or not to be
that is the question
```

```js
// This is some code in a code block
console.log('owo')
```

Below is an unformatted code block

to be or not to be
that is the question

Below is a code block with JS syntax highlighting specified

// This is some code in a code block
console.log('owo')

Tables

| table | headers
| :--   | :--
| col1  | col2
| row2  | wow

Below is a table with headers

tableheaders
col1col2
row2wow

Below is a table with no headers

table withno headers
row2col2

Lists

- unordered list

1. ordered list
    1. nested
        1. double nested

below is an unordered list

below is an ordered list

  1. list item 1

  2. list item 2

    1. nested
      1. double nested

  3. t

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  4. e

  5. s

  6. t

  7. i

  8. n

  9. g

  10. !

Details/Summary [TODO]

<details>
<summary>expand me!</summary>

much details much wow
</details>
expand me!

much details much wow

Images

![alt text](./path/to/image.png "image title")
this is the ogImage
image used for testingtesting

Directives

Several custom markdown directives are defined to improve the authoring experience.

Zoom

:::zoom{margin=16}
insert content here (e.g. an image)
:::zoom

The zoom directive makes the contents enclosed within it zoomable, expanding to fill the screen (excluding the sticky header).

A custom margin can be passed between the zoomed in image and the closest edge of the screen (default: 16).

Below is a zoomable image.

Fancy enumeration

:::fancy-enumeration
1. Step 1. The `title`. $formatting$ is preserved.

    Any additional contents in the step go here.

2. Step 2
    Lorem ipsum

3. Step 3

4. Step 4

5. Step 5
:::
  1. 1

    Step 1. The title. formattingformatting is preserved.

    Any additional contents in the step go here.

  2. 2

    Step 2 Lorem ipsum

  3. 3

    Step 3

  4. 4

    Step 4

  5. 5

    Step 5

Layout

row and col power a 12-column grid layout system.

:::row
::col[![](/static/og/og.png)]
::col[look an image]{w=2}
:::

export const ColItem = ({ text }) => <div style={{backgroundColor: "var(--col-bg)", textAlign: "center", padding: "1rem" }}>{text}</div>

<div style={{display: "flex", flexDirection: "column", padding: "2rem 0", gap: "2rem", "--col-bg": "var(--color-background-surface)" }}>
:::row
::col[<ColItem text="11" />]{w=11}
::col[<ColItem text="1" />]{w=1}
:::
:::row
::col[<ColItem text="10" />]{w=10}
::col[<ColItem text="2" />]{w=2}
:::
:::row
::col[<ColItem text="9" />]{w=9}
::col[<ColItem text="3" />]{w=3}
:::
:::row
::col[<ColItem text="8" />]{w=8}
::col[<ColItem text="4" />]{w=4}
:::
:::row
::col[<ColItem text="7" />]{w=7}
::col[<ColItem text="5" />]{w=5}
:::
:::row
::col[<ColItem text="6" />]{w=6}
::col[<ColItem text="6" />]{w=6}
:::
:::row
::col[<ColItem text="4" />]{w=4}
::col[<ColItem text="4" />]{w=4}
::col[<ColItem text="4" />]{w=4}
:::
:::row
::col[<ColItem text="3" />]{w=3}
::col[<ColItem text="3" />]{w=3}
::col[<ColItem text="3" />]{w=3}
::col[<ColItem text="3" />]{w=3}
:::
:::row
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="2" />]{w=2}
:::
:::row
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
::col[<ColItem text="1" />]{w=1}
:::
:::row
::col[<ColItem text="equal" />]
::col[<ColItem text="equal" />]
:::
:::row
::col[<ColItem text="equal" />]
::col[<ColItem text="equal" />]
::col[<ColItem text="equal" />]
:::
:::row
::col[<ColItem text="2" />]{w=2}
::col[<ColItem text="3, offset 2" />]{w=3 o=2}
::col[<ColItem text="offset 1" />]{o=1}
:::
:::row
::col[<ColItem text="offset 6" />]{o=6}
:::
:::row{spacing=4rem}
::col[<ColItem text="equal, spacing=4rem" />]
::col[<ColItem text="equal, spacing=4rem" />]
:::
</div>
look an image
11
1
10
2
9
3
8
4
7
5
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
equal
equal
equal
equal
equal
2
3, offset 2
offset 1
offset 6
equal, spacing=4rem
equal, spacing=4rem

Footnotes

  1. this is a footnote ↩

  2. this is a named footnote ↩