For me only

04-03-2021 / Edit on Github

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

👉 Note: 11ty.

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
private: true # (if the post comes from external source) a private link

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:
    ❓ :qusetion:
    ❗ :exclamation:
    🇻🇳 :vietnam:

External post #

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

Files need to be changed for this sections:

_data/cat_ex_position.json # posts (must have enough tags for each post)
index.njk # links to below file
_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 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 #

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

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("./_11ty/img-dim.js"));

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>

// 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 _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 ...