Skip to content

Latest commit

 

History

History
102 lines (69 loc) · 2.46 KB

readme.md

File metadata and controls

102 lines (69 loc) · 2.46 KB
Raw

What is this

The idea is to write simple static websites using html, js, and markdown procedurally in a single .js file, using html and md functions exported in lib.mjs.

Example:

import {md, html} from './lib.mjs';
import {writeFile} from 'fs';

const template = ({title, tags, content}) => html`

    <h1>${title}</h1>

    <ul style="text-align: right;">
        ${
            tags.map(tag => 
                html`<li style="display: inline;"><code>${tag}</code> - </li>`
            )
        }

    </ul>

    ${content}

    ${md`Markdown inside of the \`html\` template because **why not**`}

`;

const blog = md`

    This is a blog.

    Text, text, text, ...

    \`\`\`js
    const a = 56;
    \`\`\`

    End of blog
`

const index_html = html`
    <head>
        <meta charset="utf-8"/>
        <title>Example</title>
    </head>
    <body>
        <${template} title="My Blog" tags=${["blog", "programming"]}content=${blog} />
    </body>
`;

// https://ourcodeworld.com/articles/read/1186/how-to-write-a-file-in-node-js-using-the-utf-8-encoding-with-bom
writeFile('index.html', "\ufeff" + index_html, err => {
    if (err) console.error(err);
});

Build the website with bun example.mjs or node example.mjs.

htm

htm by itself just "traverses" javascript template literals (html`<p>some html stuff</p>`), parses it and then calls the binded (on line 6: const html = htm.bind(vhtml);) function for each triplet (tag_type, tag_properties, ...children) parsed. here is an example:

import htm from 'htm';

function h(type, props, ...children) {
    return { type, props, children };
}

const html = htm.bind(h);

console.log( html`<h1 id=hello>Hello world!</h1>` );
// {
//   type: 'h1',
//   props: { id: 'hello' },
//   children: ['Hello world!']
// }

vhtml

vhtml is a function with a signature function (tag_type, tag_properties, ...children) -> string. The string returned is the valid html string that represents the input triplet.

Combining htm and vhtml we can parse and render (here "render" means to print valid html code) pseudo-html code.

const what = "world";
document.body.innerHTML = html`<h1>Hello ${world}!</h1>`

The vs-code plugin lit-html provides syntax highlighting for html inside js files.

md

md uses marked to parse markdown and then returns a valid html representation of the markdown text.

TODO

  • make a better example
  • fix random commas , appearing, I have no clue why