${contentData.content}
A DIY static site generator utility
npm install lem-ssgLem is a Static Site Generator utility, that enable you to create your own DIY custom website. It offers you a set of handy methods, that will help you compile contents of your choice into fully functional static website.
To add it to your project, simply run following command:
``
npm i -D lem-ssg
To start using Lem, first import it to your project and prepare route configuration
`
import Lem from 'lem-ssg';
const engine = new Lem();
`
Lem is able to handle following route types:
Meant to handle a single page without dynamic content, config:
`
{
id: "your-very-own-id-as-a-string-eg-about",
type: "static",
destination: "/your-output-path-eg-about/",
content: {
title: "Lem - Static Site Generator",
tags: "static site generator, lem, JavaScript, js, web development"
any-prop-you-want-to-use-in-your-template: any-value-of-your-custom-prop
},
template: renderFunctionThatTakesSomeFileContentAndReturnsCompiledTemplate,
},
Example render function:
`
const renderAboutMe = (contentData) => {
return
;
}
`$3
Meant to handle dynamic content (so it will handle multiple various content sources), such as blog articles.
Every article will be generated in specified folder with following sub-path:
so that it will be nicely accessible on your server in human readable manner.Config:
`
{
id: "your-very-own-id-as-string-eg-blog-entry"
type: "dynamic",
source: "/path-to-your-markdown-files-eg-content-slash-blog/",
destination: "/your-output-path-for-all-of-your-articles-eg-blog/",
template: renderFunctionThatTakeVariousFileContentAndReturnsCompiledTemplate,
},
Example render function:
const renderBlogNote = (contentData) => {
return Published at ${contentData?.meta?.date}
;
}
`$3
Meant to list all the files from specified folder, e.g.
, Every list page will be generated in specified folder as
index.html file (e.g. /blog/index.html), so that it will be nicely accessible on your server in human readable manner (e.g. as /blog/ page).Config:
`
{
id: "your-very-own-id-as-string-eg-blog-list",
type: "list",
source: "/path-to-your-markdown-files-eg-content-slash-blog",
destination: "/your-output-path-for-all-of-your-articles-eg-blog/",
template: renderFunctionThatTakesDynamicListOfItemsSuchAsBlogNotesAndReturnsCompiledTemplate,
},
Example render function:
const renderArticle = (article) => {
return .replaceAll("\t", "").replaceAll(" ", " ").trim();
}const renderArticles = (articles) => {
let htmlString = '';
if (articles?.length) {
articles.forEach((article) => {
if (!article.meta.draft) {
htmlString += renderArticle(article);
}
});
} else {
htmlString += '
No articles yet, working on it!
'
}
return htmlString;
}const renderBlogNotesList = (contentData) => {
return
;
}
``