Merge branch 'new-search-page' into 'develop'

Search page

See merge request R3/howto-cards!89

.ci/build_indices.sh

+#!/bin/bash
+
+DIRECTORY=build
+
+# Install lunr to build the index
+npm install lunr@2.3.8
+
+# Go to the directory...
+cd $DIRECTORY
+
+printf "Found the following build targets inside: \n$(ls -d */)\n\n"
+
+# ...and loop through all the build targets
+for branch in $(ls -d */); do
+    echo "Entering: $branch";
+
+    cd "$branch";
+
+    echo "Generating the index..."    
+    cat documents.js | node $CI_PROJECT_DIR/build_index.js > index.js
+    rm documents.js build_index.js
+
+    echo "...should be completed. First 50 characters of the index: "
+    cat index.js | head -c50
+    echo ""
+
+    cd ..
+    
+done
+
+rm $CI_PROJECT_DIR/build_index.js

.ci/deploy.sh

-mkdir -p public
+mkdir -p build
 artefact="latest"
 
 # loop through all the branches
@@ -14,14 +14,15 @@ for branch in $(git for-each-ref --format='%(refname:strip=3)' refs/remotes); do
     echo $artefact;
     git checkout -f $branch
     git reset --hard $branch
+    git pull
 
     # build the website
     bundle install
-    bundle exec jekyll build --baseurl="howto-cards/$artefact" -d "public/$artefact"
+    bundle exec jekyll build --baseurl="howto-cards/$artefact" -d "build/$artefact"
 
     if [[ $branch == "master" ]]; then
         # set the 404
-        cp howto-cards/$artefact/404.html public/404.html
+        cp howto-cards/$artefact/404.html build/404.html
     fi
 done
 
@@ -31,4 +32,4 @@ git checkout -f $CI_COMMIT_REF_NAME
 git reset --hard origin/$CI_COMMIT_REF_NAME
 
 # set the auto redirection
-cp .ci/.autoRedirect public/index.html
+cp .ci/.autoRedirect build/index.html

.gitlab-ci.yml

 # In case something goes horribly wrong, you can fall back to `image: ruby:2.5`
 image: git-r3lab.uni.lu:4567/r3/docker/jekyll-lcsb:1.1
 
-variables:
-  JEKYLL_ENV: production
+stages:
+  - build
+  - generate_index
+  - deploy
+
+build_pages:
+  stage: build
+  before_script:
+    - apt-get -qq update
+    - apt-get install -y -qq git-lfs
+    - gem install bundler:2.0.2 && bundle install  
+  script:
+    - bash .ci/deploy.sh
+  variables:
+    JEKYLL_ENV: production
+  artifacts:
+    expire_in: 1 day
+    paths:
+      - build
 
-before_script:
-  - apt-get -qq update
-  - apt-get install -y -qq git-lfs
-  - gem install bundler:2.0.2 && bundle install
+
+generate the search index:
+  stage: generate_index
+  image: node:13.8.0-slim
+  rules:
+    - if: $CI_COMMIT_BRANCH == "master"
+    - if: $CI_COMMIT_BRANCH == "develop"
+  script:
+    - bash .ci/build_indices.sh
+    - mv build processed_build
+  artifacts:
+    expire_in: 1 day
+    paths:
+      - processed_build
 
 pages:
+  image: alpine:3.11.3
   stage: deploy
   rules:
     - if: $CI_COMMIT_BRANCH == "master"
     - if: $CI_COMMIT_BRANCH == "develop"
   script:
-    - bash .ci/deploy.sh
-
+    - mv processed_build public
+  rules:
+    - if: $CI_COMMIT_BRANCH == "master"
+    - if: $CI_COMMIT_BRANCH == "develop"
   artifacts:
     expire_in: 1 week
     paths:

_config.yml

@@ -66,6 +66,7 @@ defaults:
       path: "external/*"
     values:
       include_link: true
+      searchable: 1.0 
 
 
 # Exclude from processing. (no need to touch these)

build_index.js

+var lunr = require('lunr'),
+    stdin = process.stdin,
+    stdout = process.stdout,
+    buffer = [];
+
+stdin.resume();
+stdin.setEncoding('utf8');
+
+stdin.on('data', function (data) {
+  buffer.push(data);
+});
+
+stdin.on('end', function () {
+  var documents = JSON.parse(buffer.join(''))
+
+  var idx = lunr(function () {
+    this.ref('id')
+    this.field('title', { boost: 10 })
+    this.field('url')
+    this.field('content')
+
+    documents.forEach(function (doc) {
+      this.add(doc)
+    }, this)
+  })
+
+  stdout.write(JSON.stringify(idx))
+});

documents.js

+---
+---
+
+{% assign the_cards = site.pages | where_exp:"card","card.searchable >= 1.0" %}
+
+[ {% for card in the_cards %} {
+            "id": "{{ card.url | slugify }}",
+            "title": "{{ card.shortcut | xml_escape }}",
+            "content": {{ card.content | markdownify | strip_html | jsonify }},
+            "url": "{{ card.url | xml_escape | relative_url }}"
+        } {% unless forloop.last %},{% endunless %} {% endfor %}
+]

external/contribute/markdown/markdown.md

@@ -253,6 +253,7 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tbody>
 </table>
 
+
 This is an overview of basic Markdown features. For more in-build features, please see various online [documentation](https://www.markdownguide.org/basic-syntax/).
 
 ### Advanced formatting

search.md

+---
+layout: page
+title: Search
+permalink: /search
+order: 4
+---
+
+<link rel="prefetch" href="index.js" />
+
+<style>
+    #search_query {
+        border: solid 2px #eee; 
+        padding: 8px; 
+        height: 20px; 
+        font-size: 20px; 
+        width: 500px; 
+        min-width: 400px;
+    }
+
+    button.search[type=submit] {
+        border: solid 2px #eee; 
+        padding: 1px; 
+        height: 35px; 
+        width: 150px; 
+        font-size: 20px; 
+        color: #4c4c4c; 
+        background: #efefef; 
+        border-radius: 8px;
+        margin-top: 3px;
+    }
+
+    #search_header {
+        margin-top: 50px; 
+        display: none
+    }
+
+    #search_results_table {
+        margin-top: 20px; 
+        width: 100%;
+    }
+
+     #search_results_placeholder_td {
+        border: none;
+     }
+
+    h3.result {
+        font-size: large;
+    }
+</style>
+
+<form>
+    <input class="search" placeholder="What are you looking for?" name="search_query" id="search_query" /><br />
+    <button class="search" type="submit">Find it</button>
+</form>
+
+<h1 id="search_header">Results of your query:</h1>
+
+<table id="search_results_table">
+    <tbody id="search_results_tbody">
+        <tr id="search_results_placeholder" style="display: none">
+            <td id="search_results_placeholder_td"><h3>Please wait, search is in progress...</h3></td>
+        </tr>
+    </tbody>
+</table>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.min.js" integrity="sha256-34Si1Y6llMBKM3G0jQILVeoQKEwuxjbk4zGWXXMT4ps=" crossorigin="anonymous"></script>
+
+<script>
+    var el_table_body = document.getElementById('search_results_tbody');
+    var el_input_query = document.getElementById('search_query');
+    var el_tr_placeholder = document.getElementById('search_results_placeholder');
+    var el_header = document.getElementById('search_header');
+
+    var url_params = new URLSearchParams(window.location.search);
+    var search_term = url_params.get('search_query') || "";
+
+    if (!!search_term.length) {
+        el_input_query.value = search_term;
+        el_header.style.display = "block";
+
+        el_tr_placeholder.style.display = "block";
+    }
+
+    var construct_cell = function(title, content, link) {
+        if (link == '#') {
+            return '<td><h3 class="result">' + title + '</h3><p>' + content + '</p></td>';
+        } else {
+            return '<td><h3><a href="' + link + '">' + title + '</a></h3><p>' + content + '</p></td>';
+        }
+    }
+
+    var capitalize = function(text) {
+        return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+
+    var prettify = function(text) {
+        return text.split(':').map(capitalize).join(' &raquo; ');
+    }
+
+    {% assign the_cards = site.pages | where_exp:"card","card.searchable >= 1.0" %}
+
+    window.content = { {% for card in the_cards %} 
+        "{{ card.url | slugify }}": {
+            "title": "{{ card.shortcut | xml_escape }}",
+            "content": {{ card.content | strip_html | strip_newlines | jsonify }},
+            "url": "{{ card.url | xml_escape | relative_url }}"
+        } {% unless forloop.last %},{% endunless %} {% endfor %}
+    };
+
+    fetch('{{ "index.js" | relative_url }}').then(response => response.text()).then((data) => {
+        var the_index = JSON.parse(data);
+        window.search_index = lunr.Index.load(the_index);
+
+        if (search_term != "") {
+            var results = window.search_index.search(search_term);
+            for (var i = 0; i < results.length; i++) {
+                var node = document.createElement("tr");
+                node.innerHTML = construct_cell(prettify(window.content[results[i].ref].title), 
+                                                window.content[results[i].ref].content.substring(0, 125) + '...',
+                                                window.content[results[i].ref].url);
+                el_table_body.appendChild(node);
+            }
+            if (results.length == 0) {
+                var node = document.createElement("tr");
+                node.innerHTML = construct_cell("No results", 
+                                                'Sorry, we were unable to find anything that matches your query',
+                                                "#");
+                el_table_body.appendChild(node);
+            }
+        }
+
+        el_tr_placeholder.style.display = "none";
+    })
+
+</script>