Further improved the new theme

Making changes to the Bootstrap 4 theme

In the previous article, I mentioned the blog was migrated to use Bootstrap 4. Here are some new changes:

• Removed Font Awesome and use Feather Icons instead. But the icon for Reddit is missing in Feather Icons.
• Removed the need of the CSS from the Slate theme. Now I only need to use the original bootstrap.min.css and load my own nero.css file.
• Fixed the Scroll Spy, it is now working for articles with TOC.
• Changed more CSS, Javascript and fonts to use CDN.

The old search system - Tipue Search

The Pelican SSG comes with a plugin called Tipue Search. The problem is that when users perform a search, the complete search database (in JSON format) needs to be sent to the user. This puts the load to the client and may not be desirable if search database is large.

What are the options?

There are lots of options but some of them are not free or need some memory (in GB) to run it.

Possible options are:

• ElasticSearch and Solr (Java based and need lots of memory)
• Manticore, Sphinx Search, Open Semantic Search and Typesense (They are written in C++ and some of them require a relational database)
• Algolia. It's cloud based and have free tier. It is a popular choice
• Datasette, written in Python
• Sonic and MeiliSearch (Github). Both are written in Rust language

MeiliSearch was chosen

After checking out those options, I had chosen MeiliSearch (blog). It is memory efficient and it comes with two important components:

• The document scraper and
• The search bar for front end usage

The document scraper would be able to get all articles in your site and send to the MeiliSearch server so that the server could index it.

For the search bar, there is an example provided in the Github. I made minimal changes and then I could use it.

You are welcome to test it in the right sidebar. It would search as you type, has typo tolerance, and support highlighting. It's very simliar to blogs intergated with Algolia but it's free. You can self hosted it and thus without search operations limit per month.

An update about Meilisearch

Thanks to Clémentine, she explained to me about how to configure the docs scraper and provided some reference configuration. The related discussion with Clémentine is in here.

Here is my new config for the scraper (use with version 0.9.3):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

{
  "index_uid": "docs",
  "start_urls": [
    "https://www.kappawingman.com"
  ],
  "stop_urls": [
    "https://www.kappawingman.com/archives/",
    "https://www.kappawingman.com/posts/2020/",
    "https://www.kappawingman.com/tags/",
    "https://www.kappawingman.com/categories/",
    "https://www.kappawingman.com/category/",
    "https://www.kappawingman.com/authors/",
    "https://www.kappawingman.com/author/kappa/"
  ],
  "selectors": {
    "lvl0": {
      "selector": ".navbar-nav .active",
      "global": true,
      "default_value": "Kappa ICT Wingman"
    },
    "lvl1": "#content h1",
    "lvl2": "#content h2",
    "text": "#content p, #content li"
  },
  "custom_settings": {
    "synonyms": {
      "static site generator": [
        "ssg"
      ],
      "ssg": [
        "static site generator"
      ]
    },
    "stopWords": [
      "a", "and", "as", "at", "be", "but", "by",
      "do", "does", "doesn't", "for", "from",
      "in", "is", "it", "no", "nor", "not",
      "of", "off", "on", "or",
      "so", "should", "than", "that", "that's", "the",
      "then", "there", "there's", "these",
      "this", "those", "to", "too",
      "up", "was", "wasn't", "what", "what's", "when", "when's",
      "where", "where's", "which", "while", "who", "who's",
      "with", "won't", "would", "wouldn't"
    ]
  },
  "scrap_start_urls": false,
  "nb_hits": 232
}

• Photo credit: Fab Lentz (Unsplash license)