AIO components on this site

Last modified 2 years ago

This note is used to show the compoents I created to use in this site. It's for me only. I use it as a reference when I wanna create some components for the notes.

👉 Note: For me only (This is another technical note used for this site only).

Inline components

  • Highlight inline texts.
  • Keyboards like Ctrl + V or + V.
  • Reference[ref].
  • Inline text color.
  • Some emoji symbols with codes: 👉, 🔅, ❓, ❗, 🇻🇳 (check more here)

Headings

Inside heading

Adjacent headings

Heading H1

Heading H2 (adjacent to H1)

Heading H3 (adjacent to H2)

Heading H4 (adjacent to H3)

Headings next to other components

Heading with other components behind

A paragraph

Another inside heading

Nothing inside.

Blockquotes

This is a blockquote.
Another line?

List

Ordered list,

  1. This is an item
  2. This is an item
    1. This is a nested item.
    2. This is a nested item.
  3. This is an item
    • This is a nested item.
    • This is a nested item.
    • This is a nested item.
  4. This is an item which has a very long length. I use this to test the wrap of text inside an item of the list.
  5. This is an item

Unordered list,

  • This is an item
  • This is an item
  • This is an item
    • This is an item
    • This is an item
  • This is an item
    1. This is a nested item.
    2. This is a nested item.
  • This is an item
List inside a box
  • This is an item
    • This is an item
    • This is an item
  • This is an item
Warning icon
  • This is an item
    • This is an item
    • This is an item
  • This is an item

Two columns list

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Alert boxes

Warning icon

Warning: The content with a link inside!

Hide / Show box inside

Content

Success icon

Success: The content with a link inside!

Hide / Show box

Content

Info icon

Info: The content with a link inside!

Info: This one uses directly html markups and doesn't have any icon like the others.

Hide / Show box inside

Content

Idea icon

Tip: The content with a link inside!

Danger icon

Danger: The content with a link inside!

Hide / Show box inside

Content

Inside other components

Inside a list,

  1. Item

    Warning icon

    Content

    • Item

      Success icon

      Content

    • Item

  2. Item

Inside hide/show box,

Title

Content of the hide/show box.

Warning icon

Content of the warning box.

Box > List > Box
  1. Item

    Success icon

    Content

  2. Item

Math

SDR(S,O)Standard Deviation Reduction=SD(S)SD before splitjP(OjS)×SD(S,Oj)weighted SD after split\underbrace{SDR(S,O)}_{\text{Standard Deviation Reduction}}= \underbrace{SD(S)}_{\text{SD before split}}- \underbrace{\sum_j P(O_j | S) \times SD(S,O_j)}_{\text{weighted SD after split}}
Inside a list
  1. Calculate the Standard Deviation (SDSD) of the current node (let's say SS, parent node) by using MSE or MAE,

    SD(S)=1ni=1n(yiyˉi)2,or SD(S)=1ni=1nyiyˉi,\begin{aligned}SD(S) &= \frac{1}{n} \sum_{i=1}^{n} (y_i - \bar{y}_i)^2, \\\text{or } SD(S) &= \frac{1}{n}\sum_{i=1}^n \vert y_i - \bar{y}_i \vert,\end{aligned}

    where yiy_i\in the target values (Hours Played in the above example), yˉ=Σyn\bar{y}=\frac{\Sigma y}{n} is the mean value and nn is the number of examples in this node.

  2. Calculate the Standard Deviation Reduction (SDR) after splitting node SS on each attribute (for example, consider attribute OO). The attribute w.r.t. the biggest SDR will be chosen!

    SDR(S,O)Standard Deviation Reduction=SD(S)SD before splitjP(OjS)×SD(S,Oj)weighted SD after split\underbrace{SDR(S,O)}_{\text{Standard Deviation Reduction}}= \underbrace{SD(S)}_{\text{SD before split}}- \underbrace{\sum_j P(O_j | S) \times SD(S,O_j)}_{\text{weighted SD after split}}

    where jj \in number of different properties in OO and P(Oj)P(O_j) is the propability of property OjO_j in OO. Note that, SD(S,Oj)SD(S,O_j) means the SD of node OjO_j which is also a child of node SS.

  3. After splitting, we have new child nodes. Each of them becomes a new parent node in the next step. Go back to step 1

Two columns

# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
Title
# Test
# Test
# Test
# Test
# Test
Warning icon
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test
# Test

Insert codes

Inline codes without background

Inline codes without background: code, without border code or both code.

Raw codes

We can insert liquid tag here: {% icon "danger" %}.

Normal inserting

a = (1, 2, 3) # tuple
x = list(a)
a = (1, 2, 3) # tuple
x = list(a)

Codes side by side

Equal sizes

a = (1, 2, 3) # tuple
x = list(a)
<div class="columns-2" markdown="1">
<div>

Flexible sizes

a = (1, 2, 3) # tuple
x = list(a)
<div class="columns-2" markdown="1">
<div>

Codes with highlights

a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)
a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)
a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)
a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)

Codes with differences

+function myFunction() {
// …
- return true;
}

Codes with results

a = (1, 2, 3) # very long code box will have wider length
x = list(a)

print(a)
print(x)
(1, 2, 3)
[1, 2, 3]
a = (1, 2, 3) # very long code box doesn't have wider length
x = list(a)

print(a)
print(x)
(1, 2, 3)
[1, 2, 3]

Codes with figures

Equal heights,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Center align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Top align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Bottom align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Codes inside a list

  1. The first item

    # Codes
    1+1
    # Codes

    Other contents.

    # Other codes
    # Code 1
    # Code 2
    # Code 3
    # Code 4
    • Sub item 1

      # Codes
      # Codes
    • Sub item 2

      # Code 1
      # Code 2
      # Code 3
      # Code 4
  2. Another item.

    # code

Hide / Show boxes

Warning box inside

The content

Warning icon

Content of the warning

Other content of the boxes.

Toggle hidden content!

This box uses default title.

Title Name without "" and use markdown

Content

Using liquid tag instead (Title with "")

Note that, above we use '' instead of "" because inside the title, there is another ""!

Using **HTML tags** with ability of being showed by default

Yes! There is a blank line above! And we cannot use markdown inside the title when using HTML tag.

const func = () => {
// content
}
But we can with this one!

Content

Boxes inside a list
  • Item 1

  • Item 2

    More detail
    // codes
    • Sub item.
  • Item

Inside other components

Alert box,

Success icon

Success:The content with a link inside!

Hide / Show box

Content

Danger icon

Box > List > Box,

  1. Item

    Title

    Content of hsbox.

  2. Item

Inside a list,

  • We don't have to use directly <div>, we can use :::!

    Hide / Show box

    Content

    1. Item

      Hide / Show box

      Content

    2. Item

  • Item

Insert figures

Insert inline icons

Available icons: warning, info, danger, success, draft, idea, time.

Check line eleventyConfig.addShortcode("icon" in .eleventy.js for more icon names.

Different sizes

My home

My home

My home

My home
This one has a description.

My home

My home

My home
This is the smallest one!

Tables

Tables side by side

Col_1Col_2
0A1
1E3
2CNaN
3DNaN
4B2
Col_1Col_2
0A1
1B2
2C-3
3F-4
4ENaN

Table and figure

Col_1Col_2
0A1
1E3
2CNaN
3DNaN
4B2

My home