For me only

This post is for me only. It contains shortcodes to create this website.

Frontmatter 🔗

layout: post # or `page` or `base`
title: "For me only"
descriptopm: description of the post
tags: [Others] # base: Project-based Learning, MOOC, Machine Learning,
               #       Data Science, Deep Learning, Time Series,
               #       NLP, MLOps, Python, R Lang, Linear Algebra,
               #       Prob & Stats, JavaScript, Web Dev, Algorithms
               #       Skills, Others
icon: "/img/header/customize.svg" # can be "customize.svg"
                                  # if it's in /img/header/
keywords: "for me only customize edit this site box font blocks" # used for searching
toc: true # `false` to hide toc
notfull: true # if the post is not good enough
hide: true # if don't want to show it on index

Other components 🔗

Mark: ==Text==.
Keyboard: [[Ctrl]].
Reference: {% ref "url" %} (mush have "").
Inline text color: {color:red}text{color} (without space)
{:.noindent} before a list, not indent a list.
{:.indent} before a list, indent a list.
{:target="_blank"} after an url.

Insert figures 🔗

# NORMAL WITH CUSTOM CLASS
![description](/path/to/figure){:.img-full-100}
# There are class .img-full-{number}
# where, {number} are 30 to 100, step 5.

# WITH DESCRIPTION
![description](/path/){:.custom-class}
__Description texts__

Background white 🔗

![Description](/path/to){:.bg-white}
# with other classes?
{:.bg-white .custom-class}

Default img path 🔗

{% assign img-url = '/img/post/python' %}

Inser codes 🔗

# Highlight line 2
``` js/2
// lines of codes
```

# Highlight line 2 to 4
``` js/2-4
// lines of codes
```

# Highlight line 2, 4
``` js/2,4
// lines of codes
```

# Delete line 2 (red highlight) and add line 4 (green highlight)
``` js/4/2
// lines of codes
```

Raw code 🔗

~~~ js {% raw %}
# line of codes
{% endraw %}
~~~

Code inside a list 🔗

For problems with tab/spaces in markdown rendering.

1. Item # below is a blank line

  ``` bash
  # codes with 2 spaces (as tab indented)
  ```
2. Another item.

  ``` bash
  # code
  ```

Columns 🔗

Content - figure / table 🔗

Using class columns-2,

<div class="columns-2" markdown="1">
<div>

Content containing markdown blocks
</div>

![Description](/path/to/figure){:.custom-class}
</div>

There are also others: .columns-2.size-2-1 (1-2, 3-2, 2-3, 1-1).

Two cols list 🔗

<div class="col-2-list">

<!-- list (a line break above is required!) -->
</div>

Code & output 🔗

Equal widths: ::: code-output-equal.
Flexible widths: ::: code-output-flex.

Two columns 🔗

<!-- flexible width -->
::: col-2-flex

<!-- 2 equal colmuns -->
<div class="col-2-equal">

Content
</div>

<!-- or use (not recommended) -->
::: col-2-equal
Content
:::

Boxes 🔗

Hide / Show box 🔗

// The box must have a title
::: hsbox Title Name
Content
:::

Or using liquid tag,

{% hsbox "Long title" %}
# content
{% endhsbox %}

HSBox with indent 🔗

{% hsbox %}
- Item 1
- Item 2

  <div ><div class="hsbox">
	<div class="hs__title">
		More detail
	</div>
	<div class="hs__content">

  //code
  </div>
  </div>

  - Sub item.
- Item
{% endhsbox %}

Alert boxes 🔗

// info
::: info
Content
:::

// warning
::: warning
Content
:::

// danger
::: danger
Content
:::

// success
::: success
Content
:::

Math 🔗

If using with list and indent -> DON'T break line in math formulas,

# instead of
- Item

  $$
  \dfrac{1}{2}
  $$
- Item

# use
- Item

  $$\dfrac{1}{2}$$ # ALl in 1 line
- Item

Dev 🔗

Locally developing mode 🔗

We can use a different config file (instead of .eleventy.js).

npm run eleventy --config=.eleventy.dev.js

Other command lines can be found here or using npx @11ty/eleventy --help.

PurgeCSS 🔗

Becare full on PurgeCSS,

/*! purgecss start ignore */
// css classes
/*! purgecss end ignore */

Custom tags / shortcodes 🔗

The main guide is here.

// In .eleventy.js
module.exports = function(eleventyConfig) {
	eleventyConfig.addShortcode("ref", function(url) {
    return '<a href="' + url + '">[ref]</a';
  });
}

Usage,

{% ref https://dinhanhthi.com %}

Custom classes 🔗

Usage,

# paragraph
A pragraph {:.custom-class}

# image
![](){:.custom-class}

# table
{:.custom-class}
table

# heading
# Heading{:#heading-id}

Multi-classes: {:.custom-1 .custom-2} (with spaces)!

We define CSS like that,

p.custom-class + table{}
// and
p.custom-class{display: none;}
// instead of
table.custom-class{}

`.eleventy.dev.js` vs `.main.js` 🔗

The only difference is the line

// comment out in .dev.js
eleventyConfig.addPlugin(require("./_11ty/img-dim.js"));

Building index for search 🔗

If there is new post / keywords in some old posts -> remove line of pages/search-index.json.njk in .eleventyignore.

Using markdown inside njk 🔗

Using {% markdown %}{% endmarkdown %} (no need spaces between content).

Other vars of `page` 🔗

Besise page.url, there are others at here.

Errors? 🔗

// Problem of "Content-Security-Policy" (CSP)
// _data/csp.js
const CSP = {
  regular: serialize([
    // Inline CSS is allowed.
    ["style-src", SELF, "https://fonts.googleapis.com/", quote("unsafe-inline")],
    ["font-src", SELF, "https://fonts.gstatic.com/"],
  ]),
};

// equivalent phrase (put in <head>)
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">
// quote() -> for '', e.g. 'self'
// "abc" -> doesn't mean 'abc' in <meta>

Search full content 🔗

.eleventy.js: uncomment line //"content": page.templateContent,.
src/main.js: uncomment lines below // use content??? & below -- uncomment below if ...