WH

Common Template

Common content that belongs on multiple pages should be situated in a template which should be shared globally. An example of would be a footer, the bottom of the page content that persists across pages. Looking at Tera, the template engine for Zola, the include feature within a template offers the capability to reference other templates.

Markdown Table Formatter

A markdown table's formatting often tends to go awry when there is a need to change the words in the headers which affects the width of columns. It is a laborious process to have to realign all the column content that fall underneath the changed header.

To solve this issue, use the Markdown Table Formatter extension to format markdown tables. This extension will format the 'basic markdown tables' such as the following:

| Food Item  | Items Bought |
|------------|--------------|
| Pineapples | 4            |
| Tomatoes   | 3            |

However, it does not work with Pandoc's grid table markdown output.

Check on Aliases Defined in .bashrc

If you so happen to have many alias commands in your .bashrc file and want to be reminded of them, you can list them out using the following

alias

More Log Information when Vite Server Runs

Using the -d option with the Vite command in the npm script to have more verbose output for debugging.

// ...
    "scripts": {
        "dev": "vite -d",
        "build": "vite build",
        "preview": "vite preview"
    }
// ...

Use the 'configure-server'

Create a Vite application from the new project command with a template option. This command will create a simple TypeScript project.

npm create vite@latest a-vite-test -- --template vanilla-ts

Assign Git Profiles for Different Repositories

On occasions where you wish to associate different Git profiles to different repositories, such as when you have a work account and a personal account, one can achieve this by running a Git config command on repository level basis.

Linking Stylesheet in the Template

To use even a basic css library will cause some styles to be applied globally to the entire page, but you wish to localize the styling to just the web component which you are defining.

Importing the third party css library in the static style definition will not bring in the styles.

static styles = css`

// This won't work
@import 'bulma/css/bulma.css';

...
`