Setup the quick-notes template
The journal-manager project comes with the quick-notes template. This journal-manager template adds a dynamic functionality to the static web page built by journal-manager.
The first step is to register the quick-notes template. If you have cloned the journal-manager repository, you can run the command below:
$ jm template register quick-notes <JOURNAL_MANAGER_PATH>/templates/quick-notes
Otherwise, download the quick-notes template direct from the repository and use its path instead.
quick-notes: A journal-manager template
This template is based on the MkDocs material theme. It sets a collection of plugins and adds two buttons to the top menu.
Index button: Go to the index page generated by journal-manager.
Quick-note button: Opens an input text field to write markdown test to be included in the Quick Notes page.
Setup
This template adds a dynamic action to the static web page generated by MkDocs. In order to activate the quick-note button, you need to setup a an API with the following interface:
GET <API_BASE_URL>/journal_name/quick-note/add: Returns an html page which contains a text input field to write down a markdown text.
POST <API_BASE_URL>/journal_name/quick-note/add: Register the markdown text in the quick-note page.
In this tutorial we are going to setup the quick-notes template in a test environment.
Build the journal using --with-http-server
The fist step consists in creating a journal using the quick-notes template and
then build it with the --with-http-server flag.
$ jm journal create "nlp" --template-name "quick-notes"
$ jm build --build-location ~/my-built-journals --jn "nlp" --with-http-server
This creates the following folders in ~/my-build-journals:
file-monitor: script to monitor file updates.
http-server: basic nodejs http-server.
site: static web pages.
Open your browser and navigate to localhost:4960. You should see the index page
created by journal-manager. The index will contain the journal nlp only. Click
on it.
Notice that two new buttons appear in the top menu of the material theme:
Index button: Go to the index page.
Quick-note button: Go to the add quick-note page.
The quick-note button does nothing yet. We need to implement the HTTP API in our HTTP server.
Implementing the quick-notes HTTP API
Stop the http-server and then add the following lines in http-server/init.js:
//Handle default form post requests
app.use(express.urlencoded({
extended: true,
limit: "2Mb"
})); //To populate req.body with submitted form data.
app.get('/:journal_name/quick-note/add', (req,res) => {
res.sendFile(`${HTTP_SERVER_ROOT}/add-quick-note.html`)
});
app.post('/:journal_name/quick-note/add', (req,res) => {
let journal_name = req.params["journal_name"];
// .replaceAll is only available for node.js 15.0 and after.
let text = req.body.text.replace(/\r/g,"");
add_quick_note(journal_name, text)
.then( () => {
res.redirect(`/${journal_name}`)
})
.catch( error => {
res.send("Oups! An error occurred!")
});
});
function add_quick_note(journal_name, text) {
let BIN_DIR = path.resolve(__dirname,"./bin");
const addQuickNotes = `${BIN_DIR}/add-quick-note/add-quick-note.sh`;
let wd = p_execFile(addQuickNotes, [journal_name, text]);
return wd.then(result => new Promise(function(resolve) {
console.info("[add-quick-note][stdout]:",result.stdout);
console.error("[add-quick-note][stderr]:",result.stderr);
resolve(result.stdout);
}))
.catch( error => {
console.log(error);
throw error;
});
}
The code above creates the GET and POST methods required by the quick-notes template.
Next we need to create the file add-quick-note.html containing the text input field.
This file should be stored in http-server.
<!DOCTYPE html>
<html>
<head>
<title>Add quick note</title>
<meta name="viewport" content="width=width-device, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
body{
margin: 20px 20px 0px 20px;
}
div{
margin: 0px;
padding: 0px;
}
.container{
width: 100%;
height: 100%;
}
.text-input{
width: 100%;
height: calc(100% - 80px);
}
.send-button{
height: 60px;
width: 100%;
}
form, textarea, button{
width: 100%;
height: 100%;
}
textarea{
font-size: 14px;
resize: none;
box-sizing:border-box;
}
</style>
<script>
function submit_form(){
document.getElementById('quick-note-form').submit();
}
</script>
</head>
</html>
<body>
<div class="container">
<div class="text-input">
<form id="quick-note-form" method="POST">
<textarea name="text" id="text"></textarea>
</form>
</div>
<div class="send-button">
<button onclick="submit_form()">Send</button>
</div>
</div>
</body>
Finally, we setup the script add-quick-note.sh that will consume the markdown text entered
in the html page above. This script must be located at http-server/bin/add-quick-note.
Important
You need to have the quick-notes project installed.
#! /usr/bin/env bash
SCRIPT_PATH="$( cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_PATH="${SCRIPT_PATH%add-quick-note*}add-quick-note"
INPUT_FOLDER="${SCRIPT_PATH}/input"
OUTPUT_FOLDER="${SCRIPT_PATH}/output"
mkdir -p "${OUTPUT_FOLDER}"
JOURNAL_NAME="${1}"
TEXT_NOTE="${2}"
JOURNAL_LOCATION_FOLDER="$(journal-manager journal show "${JOURNAL_NAME}" "location_folder")"
QUICK_NOTES_MARKDOWN="${JOURNAL_LOCATION_FOLDER}/docs/quick-notes.md"
if [[ ! -e "${QUICK_NOTES_MARKDOWN}" ]]
then
touch "${QUICK_NOTES_MARKDOWN}"
fi
QUICK_NOTES_TOML="$(mktemp -t -p"${OUTPUT_FOLDER}" )"
quick-notes generate-toml "${QUICK_NOTES_MARKDOWN}" > "${QUICK_NOTES_TOML}"
quick-notes generate-quick-note "${TEXT_NOTE}" >> "${QUICK_NOTES_TOML}"
quick-notes generate-markdown "${QUICK_NOTES_TOML}" > "${QUICK_NOTES_MARKDOWN}"
# This is necessary to trigger `entr`. Otherwise, the build job is not executed.
touch "${QUICK_NOTES_MARKDOWN}"
rm "${QUICK_NOTES_TOML}"
Now we need to restart the server:
$ nodejs http-server/init.js
Important
In order to not loose the modifications done in the http-server folder, next time
you will build your journals, do not use the --with-http-server flag and start your
http server manually with the command above.