1.3.0 • Published 12 months ago
angeldav-loaderhtml v1.3.0
angeldav-loaderhtml
This package is recommended to be used with express
Importing the packages
const express = require('express');
const app = express();
const package = require('angeldav-loaderhtml');Setup
package.url = "localhost:1234" // set url of the website to replace __rooturl in the html files to the chosen url
package.default.notfound:`${__dirname}/notfound.html` // Page to show when a page is not found
package.default.template = `${__dirname}/template.html` // Base template for the pages
// OPTIONAL
// replaces tags like <¡foo> to the html content inside this value in all pages
package.default.other = {
"foo":"<input type='button' value='button'>" // raw html
"navigator":`${__dirname}/public/components/nav.html` // html directory
}How to load the loader
// loader
new package.loader( /* config table */ ) // creates page
.load() // loads pageConfig table
{
"res":res, // http response
"req":req, // http request
"basetemplate":`${__dirname}/custom_template.html`, // Sets template if default template was not set or custom template is needed
"content":`${__dirname}/index.html`, // Sets content directory
"content": "<p>Hello</p>", // Or set html content directly
"other": {
"foo":"<input type='button' value='button'>" // replaces tags like <¡foo> to the content inside this value
}
}examples
Example of index.js
const express = require('express');
const app = express();
const package = require('angeldav-loaderhtml');
package.templateDefault = `${__dirname}/template.html` // sets the base template for the pages
app.get('/', (req, res) => {
new package.loader({
"res":res,
"req":req,
"title":"title",
"content":`${__dirname}/view/index.html`,
"other":{
"foo":"hello"
}
}).load()
});
const listener = app.listen(3000, () => {
console.log("Your app is listening on port " + listener.address().port);
})Example of template.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
</head>
<body>
<section class="<¿templatesectionclass>">
<¿templatesectionmain> <!-- required for loader content to show -->
</section>
</body>
</html>Example of view/index.html
<h3><¡foo></h4>
<p>Hello!</p>default.preload
package.default.preload sets javascript code to run before fully loading a page, it lets you modify the template page before any more changes with the base variable.
Useful when adding logged in username, custom themes and other stuff.
example usage of preload
index.js
const package = require('angeldav-loaderhtml');
package.preload = `${__dirname}/default_preload.js`default_preload.js
function getCookie(cookie, name) {
if (cookie.includes(name+"=") == false || name == "") return ""
var result = cookie.slice(cookie.indexOf(name))
if (result.includes(";")) result = result.slice(0, result.indexOf(";"))
result = result.split("=")
return result[result.length-1]
}
module.exports = async function(req, res, data) {
let theme = getCookie(req.headers.cookie, "theme")
if (theme == "special") return {
base: fs.readFileSync(`${__dirname}/../templates/special.html`).toString()
}
}module.exports function parameters
| Parameter | Description |
|---|---|
request | Used for express requests |
response | Used for express responses |
data | Gives useful information to edit before the loader finishes the response |
data information
| Parameter | Description |
|---|---|
htmltemplate | A custom html template used as a base if a default is not available or defined |
section | content that's going to replace <¿templatesectionmain> in the template |
classmain | Content that's going to replace <¿templatesectionclass> in the template |
other | Table that list objects to be replaced in an item tag <¡key> |
The data information is given as a parameter and can be returned back to be able to change it's values before the templater loads
tags
__pagetitle <!-- Displays the title chosen in the config table -->
__rooturl <!-- Returns the website url stated in package.url -->404 error tags
<¡errortitle> <!-- Displays error title example: 404: Page not found -->
<¡errormessage> <!-- Displays error message ex: {page name} isn't a valid page -->
<¡errorcode> <!-- Displays error code ex: 404 -->page.templater example
var numbers = ""
for (let i = 0; i < 10; i++) {
numbers += new page.templater({
"content": `<p><¡content></p>`,
"other": {
content: i
}
}).load()
}