This document describes how the website is built. I am not providing links as you can easily google it.

For all the technical articles, you can visit Technical section.

Step 1: Start with 11ty-sass-skeleton

I could have started with simple css, but I prefer Sass to CSS. Anyways, it is compatible with plain CSS.

I started with a template from https://github.com/5t3ph/11ty-sass-skeleton. I could have crated one by myself, but I think this is not opinionated and lets me do what I want. Here are the changes I did:

  1. Output folder changed to _site. Originally it is set to public; I think it is too common to keep in .gitignore. I set it to _site and updated .gitignore.
  2. _includes, sass etc moved out of src. I want only the user written text in src. That way, we can easily create a docker file that generates the website.
  3. I adjusted the eleventy.js to reflect this change.

Step 2: Customizing eleventy and css

This is how I customized the eleventy.

  1. With admonitions markdown-it-admon: To support the styling, I copied the css into scss in the assets/scss folder.
  2. With mermaid @kevingimbel/eleventy-plugin-mermaid: This supports mermaid. I added the local mermaid.js so that we do not have to depend on cdn.
  3. With syntax highlighter @11ty/eleventy-plugin-syntaxhighlight: This supports syntax highlighting with prism. I took the prism.css and adjusted the css to add bit more of styling -- line numbers and border etc.
  4. I added css from classless.de. I had to remove the pre and code customization as it was interfering with prism.css.

I used adobe clean fonts. But, in the end, I reverted to using system-ui, just like tailwind, so that we do not have to download fonts.

Features

We can have any other Here is the way you can do syntax highlighting. Notice the following:

  1. Line numbers work.
  2. The selection skips the line numbers.
  3. Highlighting of some lines will work.
def singleton(cls):
instances = {}

@wraps(cls)
def wrapper(*args, **kwargs):
if cls not in instances:
instances[cls] = cls(*args, **kwargs)
return instances[cls]

return wrapper

and javascript:

function myFunction() {
// …
return true;
}

Here is the way we can write admonitions:

!!! warning
    *here be dragons*
    **This better be bold**
    Here we can use any warning.

When rendered, it will look this way:

Warning

here be dragons This better be bold Here we can use any warning.

Here are all the ones that are supported, grouped by color and icon.:

'note',
'summary', 'abstract', 'tldr',
'info', 'todo',
'tip', 'hint',
'success', 'check', 'done',
'question', 'help', 'faq',
'warning', 'attention', 'caution',
'failure', 'fail', 'missing',
'danger', 'error', 'bug',
'example', 'snippet',
'quote', 'cite'

You can nest matter. Here is an example:

How to use logging

The following code shows how to use logging in our system. Notice that we use aganitha_base_utils to setup the logconfig.

    import logging
from aganitha_base_utils.logconfig import setup_logging
setup_logging()

An interesting thing to check out is mermaid. It is supported in github also. Here are the several variations.

First, we can do a sequence diagram:

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

Or, we can do a flow chart:

%%{init: {'theme':'base'}}%% graph TD A(Coffee machine
not working) --> B{Machine has power?} B -->|No| H(Plug in and turn on) B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water) C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter) D -->|No| F(Send for repair)

Or, it can be a simple graph:

%%{init: {'theme':'forest'}}%% graph LR; A(Start)-->B; A-->C; B-->D[End]; C-.->D;

Or, we can do a simple pie chart:

pie title Pie Chart "Dogs" : 386 "Cats" : 85 "Rats" : 150

Here are the things yet to be done, in the order of priority.

  1. Setting up checkbox.
  2. TOC. I set it up, but did not test well. I think it is matter of a little tweaking to get it all to work.
  3. Search. It may take a bit of time.

To be done

Here are the tobe done tasks.

  1. Setup more templates. For homepage, docs, blogs and persons.
  2. Write a docker based script so that nothing needs installing. The command will use a docker to generate the site and be done. Optionally serve the pages.