Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 Daniel Legt
|
f9c7b13b0d |
|
|
@ -1,5 +1,7 @@
|
|||
## Description
|
||||
A simple `API-Oriented` boilerplate for `ExpressJS` using `TypeScript`, for the "`FrameWork`" check out the branches or Wiki for more info
|
||||
A boilerplate for `ExpressJS` using `TypeScript` and `HandleBars` as a templating engine, this is most useful
|
||||
for people that wish to create a website that is server-side rendered using nodejs, in my opinion that's a great idea
|
||||
it's super manageable when you have a nice project layout ( such as this one ).
|
||||
|
||||
## Dev Running
|
||||
```bash
|
||||
|
|
@ -11,4 +13,4 @@ nodemon ./src/app.ts
|
|||
```bash
|
||||
# Run the following command in the root of the folder
|
||||
npm build
|
||||
```
|
||||
```
|
||||
|
|
@ -44,6 +44,12 @@
|
|||
"@types/serve-static": "*"
|
||||
}
|
||||
},
|
||||
"@types/express-handlebars": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/express-handlebars/-/express-handlebars-3.1.0.tgz",
|
||||
"integrity": "sha512-Bn6j/tfhAnZEAbMtcNUFk6ESu1I6PE2pYLbUn1PR1MyNonUuQErlQ71n9DPppHK7uAuMCfgcF0oT28Lh0ej4SQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/express-serve-static-core": {
|
||||
"version": "4.17.19",
|
||||
"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz",
|
||||
|
|
@ -55,6 +61,24 @@
|
|||
"@types/range-parser": "*"
|
||||
}
|
||||
},
|
||||
"@types/handlebars": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/handlebars/-/handlebars-4.1.0.tgz",
|
||||
"integrity": "sha512-gq9YweFKNNB1uFK71eRqsd4niVkXrxHugqWFQkeLRJvGjnxsLr16bYtcsG4tOFwmYi0Bax+wCkbf1reUfdl4kA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"handlebars": "*"
|
||||
}
|
||||
},
|
||||
"@types/hbs": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hbs/-/hbs-4.0.1.tgz",
|
||||
"integrity": "sha512-kbgeYPLGOG8LQhqNlAvMm7vMz6Iu3IaXDEufpkEYT/viTko1ZlIrj+b6lvo4cAIDRkh6eg+JdKVZkriDGTisEw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"handlebars": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
|
||||
|
|
@ -103,6 +127,11 @@
|
|||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"body-parser": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
|
||||
|
|
@ -120,11 +149,25 @@
|
|||
"type-is": "~1.6.17"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
"bytes": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
|
||||
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
|
||||
},
|
||||
"content-disposition": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
|
||||
|
|
@ -228,6 +271,16 @@
|
|||
"vary": "~1.1.2"
|
||||
}
|
||||
},
|
||||
"express-handlebars": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/express-handlebars/-/express-handlebars-5.3.2.tgz",
|
||||
"integrity": "sha512-iGR7HXP+x+SfJQo9m00ocqcr7hU8ZzcssTLE/4wBX+jsqcblO6sFJEbEAEFjiNze3XMz9Y26Zs1WN5Bb4zxivQ==",
|
||||
"requires": {
|
||||
"glob": "^7.1.7",
|
||||
"graceful-fs": "^4.2.6",
|
||||
"handlebars": "^4.7.7"
|
||||
}
|
||||
},
|
||||
"finalhandler": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
|
|
@ -242,6 +295,11 @@
|
|||
"unpipe": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"foreachasync": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/foreachasync/-/foreachasync-3.0.0.tgz",
|
||||
"integrity": "sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY="
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
|
||||
|
|
@ -252,6 +310,50 @@
|
|||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
|
||||
},
|
||||
"fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.1.7",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
|
||||
"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
|
||||
"requires": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^3.0.4",
|
||||
"once": "^1.3.0",
|
||||
"path-is-absolute": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.2.6",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
|
||||
"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
|
||||
},
|
||||
"handlebars": {
|
||||
"version": "4.7.7",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
|
||||
"integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
|
||||
"requires": {
|
||||
"minimist": "^1.2.5",
|
||||
"neo-async": "^2.6.0",
|
||||
"source-map": "^0.6.1",
|
||||
"uglify-js": "^3.1.4",
|
||||
"wordwrap": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"hbs": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/hbs/-/hbs-4.1.2.tgz",
|
||||
"integrity": "sha512-WfBnQbozbdiTLjJu6P6Wturgvy0FN8xtRmIjmP0ebX9OGQrt+2S6UC7xX0IebHTCS1sXe20zfTzQ7yhjrEvrfQ==",
|
||||
"requires": {
|
||||
"handlebars": "4.7.7",
|
||||
"walk": "2.3.14"
|
||||
}
|
||||
},
|
||||
"http-errors": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
|
||||
|
|
@ -272,6 +374,15 @@
|
|||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
}
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
||||
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
|
||||
"requires": {
|
||||
"once": "^1.3.0",
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
|
|
@ -315,6 +426,19 @@
|
|||
"mime-db": "1.47.0"
|
||||
}
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
|
|
@ -325,6 +449,11 @@
|
|||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
|
||||
"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
|
||||
},
|
||||
"neo-async": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
|
||||
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
|
||||
},
|
||||
"npm": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/npm/-/npm-7.14.0.tgz",
|
||||
|
|
@ -2118,11 +2247,24 @@
|
|||
"ee-first": "1.1.1"
|
||||
}
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
|
||||
|
|
@ -2211,6 +2353,11 @@
|
|||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
|
||||
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"statuses": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
||||
|
|
@ -2230,6 +2377,12 @@
|
|||
"mime-types": "~2.1.24"
|
||||
}
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.13.8",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.8.tgz",
|
||||
"integrity": "sha512-PvFLMFIQHfIjFFlvAch69U2IvIxK9TNzNWt1SxZGp9JZ/v70yvqIQuiJeVPPtUMOzoNt+aNRDk4wgxb34wvEqA==",
|
||||
"optional": true
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
|
|
@ -2244,6 +2397,24 @@
|
|||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
|
||||
},
|
||||
"walk": {
|
||||
"version": "2.3.14",
|
||||
"resolved": "https://registry.npmjs.org/walk/-/walk-2.3.14.tgz",
|
||||
"integrity": "sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==",
|
||||
"requires": {
|
||||
"foreachasync": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"wordwrap": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
|
||||
"integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
"dependencies": {
|
||||
"dotenv": "^10.0.0",
|
||||
"express": "^4.17.1",
|
||||
"express-handlebars": "^5.3.2",
|
||||
"hbs": "^4.1.2",
|
||||
"npm": "^7.14.0"
|
||||
},
|
||||
"name": "boilerplate",
|
||||
|
|
@ -10,7 +12,10 @@
|
|||
"devDependencies": {
|
||||
"@types/body-parser": "^1.19.0",
|
||||
"@types/dotenv": "^8.2.0",
|
||||
"@types/express": "^4.17.11"
|
||||
"@types/express": "^4.17.11",
|
||||
"@types/express-handlebars": "^3.1.0",
|
||||
"@types/handlebars": "^4.1.0",
|
||||
"@types/hbs": "^4.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rm -rf dist/* && tsc",
|
||||
|
|
|
|||
37
src/app.ts
37
src/app.ts
|
|
@ -2,9 +2,12 @@
|
|||
import http from 'http';
|
||||
import express from 'express';
|
||||
import config from './config/config';
|
||||
import exphbs from 'express-handlebars';
|
||||
import path from 'path';
|
||||
|
||||
// Routes
|
||||
import sampleRoutes from './routes/Sample';
|
||||
import Homepage from './routes/Homepage';
|
||||
|
||||
//#endregion
|
||||
|
||||
|
|
@ -13,6 +16,12 @@ const NAMESPACE = `App`;
|
|||
// Setup the expressJS instance
|
||||
const router = express();
|
||||
|
||||
// Set the view engine as Handlebars
|
||||
router.set('view engine', 'hbs');
|
||||
|
||||
router.engine("hbs", exphbs({
|
||||
extname: 'hbs'
|
||||
}));
|
||||
|
||||
// Setup the router to log all activity that is happening
|
||||
router.use((req, res, next) => {
|
||||
|
|
@ -48,13 +57,35 @@ router.use((req, res, next) => {
|
|||
|
||||
// Routing
|
||||
|
||||
router.use('/sample', sampleRoutes);
|
||||
// Register the public folder where you can serve static/public data
|
||||
router.use(`/public`, express.static('./src/public/'));
|
||||
|
||||
// Handle the homepage
|
||||
router.get("/", Homepage);
|
||||
|
||||
// An example API route
|
||||
router.use('/api', sampleRoutes);
|
||||
|
||||
|
||||
{ // Error handling
|
||||
router.use((req, res, next) => {
|
||||
const error = new Error(`Api Route Not Found`);
|
||||
// Generate an error
|
||||
const error = new Error(`Page Not Found`);
|
||||
|
||||
return res.status(404).json({
|
||||
// Set the response to 404
|
||||
res.status(404)
|
||||
|
||||
// Read the request's preffered response type ( default text/html )
|
||||
if ( !!req.headers.accept ) {
|
||||
// Check if HTML is acceptable
|
||||
console.log(req.headers.accept);
|
||||
if ( req.headers.accept.includes(`text/html`) ) {
|
||||
return res.sendFile(`./views/errors/404.html`, { root: __dirname });
|
||||
}
|
||||
}
|
||||
|
||||
// If text/html is not accepted, then simply return a JSON
|
||||
return res.json({
|
||||
message: error.message
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import { Request, Response, NextFunction, Router } from 'express';
|
||||
|
||||
const homepage = ( req:Request, res:Response, next:NextFunction ) => {
|
||||
|
||||
// Make sure that the browser isn't caching this
|
||||
res.setHeader(`Cache-Control`, `no-cache, must-revalidate`);
|
||||
res.setHeader(`Pragma`, `no-cache`);
|
||||
res.setHeader(`Expires`, `Sat, 26 Jul 1997 05:00:00 GMT`);
|
||||
|
||||
// Render the home page
|
||||
res.render('home', {
|
||||
// This is a simple variable
|
||||
title: 'Page Title',
|
||||
// A simple list example for the loops
|
||||
listExample: {
|
||||
0: {id: 0, name: `ZERO`},
|
||||
1: {id: 1, name: `First`, disabled: true},
|
||||
2: {id: 2, name: `Second`},
|
||||
3: {id: 3, name: `Third`},
|
||||
},
|
||||
// layout: 'main', // Change this from main to your layout ( from the layouts folder ) if you so wish, it's basically the wrapper of it all
|
||||
time: new Date().toLocaleDateString()
|
||||
});
|
||||
}
|
||||
|
||||
export default { homepage }
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import express from 'express';
|
||||
import controller from '../controllers/Homepage';
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get("/", controller.homepage);
|
||||
|
||||
export = router;
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<!-- Simple HttpErrorPages | MIT License | https://github.com/HttpErrorPages -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>We've got some trouble | 400 - Bad Request</title>
|
||||
<style type="text/css">
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
button,
|
||||
html [type=button] {
|
||||
-webkit-appearance: button
|
||||
}
|
||||
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=button]:-moz-focusring,
|
||||
[type=reset]:-moz-focusring,
|
||||
[type=submit]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid silver;
|
||||
margin: 0 2px;
|
||||
padding: .35em .625em .75em
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=number]::-webkit-inner-spin-button,
|
||||
[type=number]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-cancel-button,
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
|
||||
details,
|
||||
menu {
|
||||
display: block
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
template {
|
||||
display: none
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none
|
||||
}
|
||||
|
||||
/*! Simple HttpErrorPages | MIT X11 License | https://github.com/AndiDittrich/HttpErrorPages */
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #21232a
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .8);
|
||||
box-shadow: inset 0 0 100px rgba(0, 0, 0, .8);
|
||||
display: table;
|
||||
font-family: "Open Sans", Arial, sans-serif
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
font-size: 36px
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 68%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #777
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: inherit;
|
||||
border-bottom: dotted 1px #707070
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: silver;
|
||||
font-size: 21px;
|
||||
line-height: 1.4
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 0 20px
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #a0a0a0;
|
||||
font-size: 14px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cover">
|
||||
<h1>Bad Request <small>400</small></h1>
|
||||
<p class="lead">We've been looking far and wide, yet couldn't find what you're looking for 😢
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<style>
|
||||
:root {
|
||||
--primary-color: #fff;
|
||||
--background-color: #e5e5e5;
|
||||
--text-color: #2d2d2d;
|
||||
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* 'light' or 'dark' options */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #455363;
|
||||
--background-color: #1f2935;
|
||||
--text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>About</h1>
|
||||
<p>Hey there, this is the main body of the content, over here you can see that this file is individual from the other
|
||||
ones</p>
|
||||
<p>It is completely isolated and has nothing to do with the header or the footer</p>
|
||||
<br>
|
||||
<h1>Examples</h1>
|
||||
<p>Wanna know what date it is? It's --> {{{time}}}</p>
|
||||
<br>
|
||||
<h1>Example Listing</h1>
|
||||
<p>
|
||||
This is just some filler text 😊
|
||||
</p>
|
||||
<p>
|
||||
Sorry about the lack of style, but I really wanted to keep this as vanilla and minimal as possible
|
||||
whilst still providing a solid example for as many
|
||||
things as possible.<br>
|
||||
It is quite a bit more complex than the <code>master</code> branch, but it's still super useful!
|
||||
</p>
|
||||
<p>
|
||||
Here's an example of how to use for-loops, if you are new I think this will come in handy, I know that
|
||||
it was quite a bother for me to find a working example, the following works amazingly well with this
|
||||
project setup.
|
||||
</p>
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{{#each listExample as | row |}}
|
||||
{{!-- Sadly, handlebars can not handle Javascript inside of these little --}}
|
||||
{{!-- brackets, so you have to create helpers, it's quite simple but annoying. --}}
|
||||
<tr id="row-{{row.id}}" class="{{#if row.disabled }}disabled{{else}}enabled{{/if}}">
|
||||
<td>{{row.id}}</td>
|
||||
<td>{{row.name}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{{> header}}
|
||||
{{{body}}}
|
||||
|
||||
<script>
|
||||
console.log(`Layouts are awesome for when you need to do something "globally", maybe have a layout for articles, one for information pages and one more for other stuff such as a different theme!`);
|
||||
console.log(`These messages will show in all pages that are using the main layout!`);
|
||||
</script>
|
||||
|
||||
{{> footer}}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{!-- Configuration Tags --}}
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="cache-control" content="no-cache"/>
|
||||
<meta http-equiv="expires" content="exercise date in seconds"/>{{!-- How long for the cached page to be available for --}}
|
||||
<meta name="robots" content="index, follow">
|
||||
{{!-- Some public information of your website --}}
|
||||
<meta name="keywords" content="keyword 1, keyword 2, keyword 3"/>
|
||||
<meta name="author" content="Kato Twofold" />
|
||||
<meta name="copyright" content="Kato Twofold" />
|
||||
<meta name="description" content="An example website for you to use as a guide, the description should be up to 160 characters" />
|
||||
{{!-- The title of your website --}}
|
||||
<title>Example Website</title>
|
||||
</head>
|
||||
<body>
|
||||
Loading…
Reference in New Issue