Include CSS, revamp development structure
This commit is contained in:
parent
d7315ceffe
commit
966387b5c7
32
README.md
32
README.md
|
@ -1,2 +1,32 @@
|
||||||
# FWDekker Template
|
# FWDekker Template
|
||||||
The template used on many pages on fwdekker.com.
|
The base template for pages on fwdekker.com.
|
||||||
|
|
||||||
|
This module contains templating functions (e.g. `header`, `footer`), CSS libraries, and some common utility methods that
|
||||||
|
are used on nearly all pages anyway.
|
||||||
|
|
||||||
|
|
||||||
|
## Development
|
||||||
|
### Requirements
|
||||||
|
* [npm](https://www.npmjs.com/)
|
||||||
|
|
||||||
|
### Setting up
|
||||||
|
```shell script
|
||||||
|
# Install dependencies (only needed once)
|
||||||
|
$> npm ci
|
||||||
|
```
|
||||||
|
|
||||||
|
### Building
|
||||||
|
```shell script
|
||||||
|
# Build the application in `build/` for development
|
||||||
|
$> npm run dev
|
||||||
|
# Build the application in `build/` for deployment
|
||||||
|
$> npm run deploy
|
||||||
|
```
|
||||||
|
|
||||||
|
### Publishing
|
||||||
|
```shell script
|
||||||
|
# Log in to npm
|
||||||
|
$> npm login
|
||||||
|
# Push to npm
|
||||||
|
$> npm publish --access public
|
||||||
|
```
|
||||||
|
|
Binary file not shown.
20
package.json
20
package.json
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "0.0.5",
|
"version": "0.0.6",
|
||||||
"description": "The template used on many pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Felix W. Dekker (https://fwdekker.com)",
|
"author": "Felix W. Dekker (https://fwdekker.com)",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"homepage": "https://git.fwdekker.com/FWDekker/fwdekker-template",
|
"homepage": "https://git.fwdekker.com/FWDekker/fwdekker-template",
|
||||||
|
@ -12,8 +12,20 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
|
"url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
|
||||||
},
|
},
|
||||||
"main": "src/main/js/Template.js",
|
"module": "dist/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack --mode=development",
|
||||||
|
"deploy": "webpack --mode=production"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"hyperscript": "^2.0.2"
|
"hyperscript": "^2.0.2",
|
||||||
|
"milligram": "^1.3.0",
|
||||||
|
"normalize.css": "^8.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"css-loader": "^3.5.3",
|
||||||
|
"style-loader": "^1.2.1",
|
||||||
|
"webpack": "^4.42.1",
|
||||||
|
"webpack-cli": "^3.3.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,124 @@
|
||||||
|
:root {
|
||||||
|
--fwdekker-theme-color: #0033cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 9rem; /* Vertical footer paddings + 1 */
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Make arrow next to dropdown visible */
|
||||||
|
select {
|
||||||
|
-webkit-appearance: menulist;
|
||||||
|
-moz-appearance: menulist;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Override color scheme */
|
||||||
|
/* Replaces #9b4dca with #0033cc */
|
||||||
|
.button,
|
||||||
|
button,
|
||||||
|
input[type='button'],
|
||||||
|
input[type='reset'],
|
||||||
|
input[type='submit'] {
|
||||||
|
background-color: var(--fwdekker-theme-color);
|
||||||
|
border: 0.1rem solid var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button[disabled]:focus, .button[disabled]:hover,
|
||||||
|
button[disabled]:focus,
|
||||||
|
button[disabled]:hover,
|
||||||
|
input[type='button'][disabled]:focus,
|
||||||
|
input[type='button'][disabled]:hover,
|
||||||
|
input[type='reset'][disabled]:focus,
|
||||||
|
input[type='reset'][disabled]:hover,
|
||||||
|
input[type='submit'][disabled]:focus,
|
||||||
|
input[type='submit'][disabled]:hover {
|
||||||
|
background-color: var(--fwdekker-theme-color);
|
||||||
|
border-color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-outline,
|
||||||
|
button.button-outline,
|
||||||
|
input[type='button'].button-outline,
|
||||||
|
input[type='reset'].button-outline,
|
||||||
|
input[type='submit'].button-outline {
|
||||||
|
color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
|
||||||
|
button.button-outline[disabled]:focus,
|
||||||
|
button.button-outline[disabled]:hover,
|
||||||
|
input[type='button'].button-outline[disabled]:focus,
|
||||||
|
input[type='button'].button-outline[disabled]:hover,
|
||||||
|
input[type='reset'].button-outline[disabled]:focus,
|
||||||
|
input[type='reset'].button-outline[disabled]:hover,
|
||||||
|
input[type='submit'].button-outline[disabled]:focus,
|
||||||
|
input[type='submit'].button-outline[disabled]:hover {
|
||||||
|
color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-clear,
|
||||||
|
button.button-clear,
|
||||||
|
input[type='button'].button-clear,
|
||||||
|
input[type='reset'].button-clear,
|
||||||
|
input[type='submit'].button-clear {
|
||||||
|
color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
|
||||||
|
button.button-clear[disabled]:focus,
|
||||||
|
button.button-clear[disabled]:hover,
|
||||||
|
input[type='button'].button-clear[disabled]:focus,
|
||||||
|
input[type='button'].button-clear[disabled]:hover,
|
||||||
|
input[type='reset'].button-clear[disabled]:focus,
|
||||||
|
input[type='reset'].button-clear[disabled]:hover,
|
||||||
|
input[type='submit'].button-clear[disabled]:focus,
|
||||||
|
input[type='submit'].button-clear[disabled]:hover {
|
||||||
|
color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border-left: 0.3rem solid var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='email']:focus,
|
||||||
|
input[type='number']:focus,
|
||||||
|
input[type='password']:focus,
|
||||||
|
input[type='search']:focus,
|
||||||
|
input[type='tel']:focus,
|
||||||
|
input[type='text']:focus,
|
||||||
|
input[type='url']:focus,
|
||||||
|
input[type='color']:focus,
|
||||||
|
input[type='date']:focus,
|
||||||
|
input[type='month']:focus,
|
||||||
|
input[type='week']:focus,
|
||||||
|
input[type='datetime']:focus,
|
||||||
|
input[type='datetime-local']:focus,
|
||||||
|
input:not([type]):focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
border-color: var(--fwdekker-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--fwdekker-theme-color);
|
||||||
|
}
|
|
@ -1,4 +1,33 @@
|
||||||
const h = require("hyperscript");
|
import h from "hyperscript";
|
||||||
|
import "milligram/dist/milligram.css";
|
||||||
|
import "normalize.css/normalize.css";
|
||||||
|
import "../css/common.css";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Alias for `document.querySelector`.
|
||||||
|
*
|
||||||
|
* @param q {string} the query string
|
||||||
|
* @returns {HTMLElement} the element identified by the query string
|
||||||
|
*/
|
||||||
|
export const $ = q => document.querySelector(q);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs the given function once the page is loaded.
|
||||||
|
*
|
||||||
|
* This function can be used multiple times. It does not overwrite existing callbacks for the page load event.
|
||||||
|
*
|
||||||
|
* @param fun {function(...*): *} the function to run
|
||||||
|
*/
|
||||||
|
export const doAfterLoad = function (fun) {
|
||||||
|
const oldOnLoad = window.onload || (() => {
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = (() => {
|
||||||
|
oldOnLoad();
|
||||||
|
fun();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -8,14 +37,14 @@ const h = require("hyperscript");
|
||||||
* @param description {string} the description to display
|
* @param description {string} the description to display
|
||||||
* @returns {HTMLElement} a header element
|
* @returns {HTMLElement} a header element
|
||||||
*/
|
*/
|
||||||
exports.header = function ({title, description}) {
|
export const header = function ({title, description}) {
|
||||||
return h("header.header",
|
return h("header.header",
|
||||||
h("section.container",
|
h("section.container",
|
||||||
h("h1", title),
|
h("h1", title),
|
||||||
h("p", h("em", description))
|
h("p", h("em", description))
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a footer element with the given data.
|
* Creates a footer element with the given data.
|
||||||
|
@ -29,7 +58,7 @@ exports.header = function ({title, description}) {
|
||||||
* @param [version] {string} the page version
|
* @param [version] {string} the page version
|
||||||
* @returns {HTMLElement} a footer element
|
* @returns {HTMLElement} a footer element
|
||||||
*/
|
*/
|
||||||
exports.footer = function ({author, authorURL, license, licenseURL, vcs, vcsURL, version}) {
|
export const footer = function ({author, authorURL, license, licenseURL, vcs, vcsURL, version}) {
|
||||||
return h("footer.footer",
|
return h("footer.footer",
|
||||||
h("section.container",
|
h("section.container",
|
||||||
footerLink("Made by ", author, authorURL, ". "),
|
footerLink("Made by ", author, authorURL, ". "),
|
||||||
|
@ -38,7 +67,7 @@ exports.footer = function ({author, authorURL, license, licenseURL, vcs, vcsURL,
|
||||||
h("div", version || "", {style: {"float": "right"}})
|
h("div", version || "", {style: {"float": "right"}})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -60,4 +89,4 @@ const footerLink = function (prefix, text, url, suffix) {
|
||||||
: h("span", text),
|
: h("span", text),
|
||||||
h("span", suffix)
|
h("span", suffix)
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/main/js/Template.js",
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.js$/i,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/i,
|
||||||
|
use: ["style-loader", "css-loader"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".js", ".css"],
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
library: "fwdekker-template",
|
||||||
|
libraryTarget: "umd",
|
||||||
|
filename: "index.js",
|
||||||
|
path: path.resolve(__dirname, "dist"),
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue