For me only

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

👉 Note: 11ty.
👉 Note: All in one components.

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, API, Algorithms
               #       Skills, Gaming & Puzzles, Others
icon: "/img_src/header/customize.svg" # can be "customize.svg"
                                  # if it's in /notes/img/header/
keywords: "for me only customize edit this site box font blocks" # used for searching
toc: true # `false` to hide toc
          # More: # Headings{:data-toc-exclude} to exclude some headings
notfull: true # if the post is not good enough
hide: true # if don't want to show it on index and result engine
private: true # (if the post comes from external source) a private link
lowQuality: 1 # low quality notes (there will be a badge like "draft" notes)
read: true # reading post type
math: true # using math equations in note?
good: true # (on hold) the note is good written
noOutdated: true # this kind of post doesn't have "outdated" warning box
customJS: ["toggle-notes.js"] # for custom js files which are stored in _includes/scripts/
noHeadingNumbering: true # if you don't want to number headings (default, all blog posts have this)
hideComment: true # Hide the comment section
part: 2 # if this post has many parts
basePartUrl: build-a-website-using-wordpress-and-gatsby # the base url of the path
partname: "Setting up" # the name of the part

For blog posts

Insert images

Using Typora and configure its Preferences/Imgage as

• When insert, Copy image to custom folder (choose notes/img_post/${filename})
• Tick "Apply above rules to local images", "Apply ... online images", "Use relative path if possible
• Local image: using the button in Typora.
• Online image: just type ![description]() and then paste the url inside ().

For other

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.

• Using emoji: use this site.

  👉 :point_right:
  🔅 :low_brightness:
  ❓ :question:
  ❗ :exclamation:
  🇻🇳 :vietnam:

External post

In case you wanna add external posts to an existing category (e.g. post from Notion), just modify file src/_data/cat_ex_posts.json.

Files need to be changed for this sections:

src/_data/cat_ex_position.json # posts (must have enough tags for each post)
index.njk # links to below file
src/_includes/postsList.njk
pages/tags.njk # tag page, also link to above file
pages/search-index.json # search-index.json, may change also .eleventy.js

Insert icons

Just use {%raw%}{% icon "iconRef" %} (mush have ""). Supported iconRefs are: time, danger, success, info, warning.

Insert figures

👉 Exclude from img-dim transform (when update_dat): add class .keep-original to the img tag!

# 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

Note: You have to use "open" ::: and "end" ::: for below shortcodes!

<!-- flexible width -->

<!-- (equal heights) -->
::: col-2-flex

<!-- top align -->
::: col-2-flex flex-start

<!-- bottom align -->
::: col-2-flex flex-end

<!-- center align -->
::: col-2-flex center

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

Content
</div>

<!-- or use -->
<!-- (equal heights) -->
::: col-2-equal

<!-- top align -->
::: col-2-equal flex-start

<!-- bottom align -->
::: col-2-equal flex-end

<!-- center align -->
::: col-2-equal center

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.

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

// headings
# Heading{:#heading-id}

// Exclude some headings from TOC
# Heading{:data-toc-exclude}

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{}

If using list based on "🔅",

<div class="p-list">

</div>

Is using list of things (like in MacOS fresh installation note), use .list-item class or,

::: list-item
Things
:::

.eleventy.dev.js vs .main.js

The only difference is the line

// comment out in .dev.js
eleventyConfig.addPlugin(require("./src/_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)
// src/_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>

// json-ld problem with latex code (math equations)

// ./pages/search-index.json.njk
// TypeError: Cannot read property 'svg' of undefined
// Idea: actually, there are some posts which don't have the right front matter
// Solution: try with below in .eleventy.js
eleventyConfig.addCollection("onlyMarkdown", function(collectionApi) {
	return collectionApi.getFilteredByGlob(["posts/*.*", "posts/others/*.md"]);
});
// and change in ./pages/search-index.json.njk
{{ collections.onlyMarkdown | search | dump | safe | striptags(true) | escape }}

Reason: json-ld.js takes some beginning words to convert to json formats! If there are equation (latex likes $\Rightarrow$) at the very beginning of the notes, there will be error like this!

The err comes from src/json-ld.js and the codes at the bottom of file src/_includes/layouts/post.njk $\Rightarrow$ truncate(140) $\Rightarrow$ If math equations start at character 141, it will be fine!

Solution: Add | dump to the description tag!

Search full content

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