diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml deleted file mode 100644 index 71ea8eb..0000000 --- a/.github/workflows/nodejs.yml +++ /dev/null @@ -1,25 +0,0 @@ -name: Node CI - -on: [push, pull_request] - -jobs: - build: - runs-on: ubuntu-latest - - strategy: - matrix: - node-version: [10.x, 12.x] - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - name: npm install, build, and test - run: | - npm install - npm run build --if-present - npm test - env: - CI: true diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..d8c4a79 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,18 @@ +name: Test + +on: [push, pull_request] + +jobs: + test: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [14, 16] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm run build --if-present + - run: npm run test diff --git a/README.md b/README.md index 6e2df13..d8281b2 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Contents -- [Demo](#demo) +- [Demo](https://blueimp.github.io/JavaScript-Templates/) - [Description](#description) - [Usage](#usage) - [Client-side](#client-side) @@ -22,20 +22,24 @@ - [Tests](#tests) - [License](#license) -## Demo - -[JavaScript Templates Demo](https://blueimp.github.io/JavaScript-Templates/) - ## Description 1KB lightweight, fast & powerful JavaScript templating engine with zero -dependencies. Compatible with server-side environments like Node.js, module -loaders like RequireJS, Browserify or webpack and all web browsers. +dependencies. +Compatible with server-side environments like [Node.js](https://nodejs.org/), +module loaders like [RequireJS](https://requirejs.org/) or +[webpack](https://webpack.js.org/) and all web browsers. ## Usage ### Client-side +Install the **blueimp-tmpl** package with [NPM](https://www.npmjs.org/): + +```sh +npm install blueimp-tmpl +``` + Include the (minified) JavaScript Templates script in your HTML markup: ```html @@ -77,7 +81,7 @@ var data = { ``` In a real application, this data could be the result of retrieving a -[JSON](http://json.org/) resource. +[JSON](https://json.org/) resource. Render the result by calling the **tmpl()** method with the id of the template and the data object as arguments: @@ -89,10 +93,9 @@ document.getElementById('result').innerHTML = tmpl('tmpl-demo', data) ### Server-side The following is an example how to use the JavaScript Templates engine on the -server-side with [node.js](http://nodejs.org/). +server-side with [Node.js](https://nodejs.org/). -Create a new directory and add the **tmpl.js** file. Or alternatively, install -the **blueimp-tmpl** package with [npm](https://www.npmjs.org/): +Install the **blueimp-tmpl** package with [NPM](https://www.npmjs.org/): ```sh npm install blueimp-tmpl @@ -116,7 +119,7 @@ Add a file **server.js** with the following content: ```js require('http') - .createServer(function(req, res) { + .createServer(function (req, res) { var fs = require('fs'), // The tmpl module exports the tmpl() function: tmpl = require('./tmpl'), @@ -129,7 +132,7 @@ require('http') features: ['lightweight & fast', 'powerful', 'zero dependencies'] } // Override the template loading method: - tmpl.load = function(id) { + tmpl.load = function (id) { var filename = id + '.html' console.log('Loading ' + filename) return fs.readFileSync(filename, 'utf8') @@ -295,7 +298,7 @@ function, e.g. with the following code: ```js var originalFunc = tmpl.func -tmpl.func = function(s, p1, p2, p3, p4, p5, offset, str) { +tmpl.func = function (s, p1, p2, p3, p4, p5, offset, str) { if (p1 && /\s/.test(p1)) { if ( !offset || @@ -386,9 +389,9 @@ The JavaScript Templates project comes with a compilation script, that allows you to compile your templates into JavaScript code and combine them with a minimal Templates runtime into one combined JavaScript file. -The compilation script is built for [node.js](http://nodejs.org/). +The compilation script is built for [Node.js](https://nodejs.org/). To use it, first install the JavaScript Templates project via -[npm](https://www.npmjs.org/): +[NPM](https://www.npmjs.org/): ```sh npm install blueimp-tmpl @@ -425,7 +428,7 @@ There are two different ways to run the tests: - run `npm test` in the Terminal in the root path of the repository package. The first one tests the browser integration, the second one the -[node.js](http://nodejs.org/) integration. +[Node.js](https://nodejs.org/) integration. ## License diff --git a/bin/sync-vendor-libs.sh b/bin/sync-vendor-libs.sh new file mode 100755 index 0000000..c2e27d9 --- /dev/null +++ b/bin/sync-vendor-libs.sh @@ -0,0 +1,5 @@ +#!/bin/sh +cd "$(dirname "$0")/.." +cp node_modules/chai/chai.js test/vendor/ +cp node_modules/mocha/mocha.js test/vendor/ +cp node_modules/mocha/mocha.css test/vendor/ diff --git a/css/demo.css b/css/demo.css index a21cb17..70a2010 100644 --- a/css/demo.css +++ b/css/demo.css @@ -10,66 +10,127 @@ */ body { - max-width: 750px; + max-width: 990px; margin: 0 auto; padding: 1em; - font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; - font-size: 1em; - line-height: 1.4em; - background: #222; - color: #fff; + font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', + Arial, sans-serif; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + line-height: 1.4; + background: #212121; + color: #dedede; } a { - color: orange; + color: #61afef; text-decoration: none; } -img { - border: 0; - vertical-align: middle; +a:visited { + color: #56b6c2; +} +a:hover { + color: #98c379; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 1.5em; + margin-bottom: 0.5em; } h1 { - line-height: 1em; + margin-top: 0.5em; } -textarea, -input { +label { display: inline-block; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; + margin-bottom: 0.25em; +} +button, +select, +input, +textarea, +div.result { + -webkit-appearance: none; box-sizing: border-box; - padding: 10px; - margin: 0 0 10px; - font-family: 'Lucida Console', Monaco, monospace; + margin: 0; + padding: 0.5em 0.75em; + font-family: inherit; + font-size: 100%; + line-height: 1.4; + background: #414141; + color: #dedede; + border: 1px solid #363636; + border-radius: 5px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.07); +} +input, +textarea, +div.result { + width: 100%; + box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07); +} +textarea { + display: block; + overflow: auto; +} +button { + background: #3c76a7; + background: linear-gradient(180deg, #3c76a7, #225c8d); + border-color: #225c8d; + color: #fff; } -.result { - padding: 20px 40px; - background: #fff; - color: #222; +button[type='submit'] { + background: #6fa349; + background: linear-gradient(180deg, #6fa349, #568a30); + border-color: #568a30; } -.error { - color: red; +button[type='reset'] { + background: #d79435; + background: linear-gradient(180deg, #d79435, #be7b1c); + border-color: #be7b1c; +} +button:active { + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); +} + +pre, +textarea.code { + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; } -@media (min-width: 481px) { - .navigation { +@media (prefers-color-scheme: light) { + body { + background: #ececec; + color: #212121; + } + a { + color: #225c8d; + } + a:visited { + color: #378f9a; + } + a:hover { + color: #6fa349; + } + input, + textarea, + div.result { + background: #fff; + border-color: #d1d1d1; + color: #212121; + } +} + +@media (min-width: 540px) { + #navigation { list-style: none; padding: 0; } - .navigation li { + #navigation li { display: inline-block; } - .navigation li:not(:first-child):before { - content: '| '; + #navigation li:not(:first-child)::before { + content: ' | '; } } - -/* IE7 fixes */ -* + html textarea, -* + html input { - width: 460px; -} -* + html .result { - width: 400px; -} diff --git a/index.html b/index.html index 86d6b76..ae27d75 100644 --- a/index.html +++ b/index.html @@ -32,14 +32,13 @@

JavaScript Templates Demo

JavaScript templating engine with zero dependencies.
Compatible with server-side environments like - Node.js, module loaders like - RequireJS, - Browserify or - webpack and all web browsers. + Node.js, module loaders like + RequireJS or + webpack and all web browsers.

-