archive/givemoneyto.me
Archived
1
Fork 0
Code Releases Packages Activity

Add in content template

Browse source 
Unfortunately, parcel is a bit of a bitch, and tries to find `src/{{ image }}`, which sucks.
This commit is contained in:
Jake Howard 2019-06-29 18:54:19 +01:00
parent 3541719aee
commit 7d30d1900a
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 53 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.ts
View file

@ -7,7 +7,7 @@ import Bundler from 'parcel-bundler';
import { dirname, join } from 'path'; import { dirname, join } from 'path';
import ProgressBar from 'progress'; import ProgressBar from 'progress';
import rimraf from 'rimraf'; import rimraf from 'rimraf';
import { range } from 'underscore'; import { mapObject, range } from 'underscore';
interface Account { interface Account {
image: string; image: string;
@ -29,6 +29,16 @@ const BUNDLER_OPTIONS = {
minify: true, minify: true,
}; };
function readAccounts(): ReadonlyArray<Account> {
const rawAccounts: Object = jsyaml.safeLoad(readFileSync(join(__dirname, 'accounts.yml')).toString());
return Object.values(mapObject(rawAccounts, (val, key) => {
return {
...val,
name: key
};
}));
}
function statusOutput(message: string) { function statusOutput(message: string) {
console.log('> ' + message + '...'); console.log('> ' + message + '...');
@ -52,10 +62,11 @@ function writeTemplate(
rimraf.sync(BUILD_DIR); rimraf.sync(BUILD_DIR);
statusOutput("Reading accounts") statusOutput("Reading accounts")
const accounts: ReadonlyArray<Account> = jsyaml.safeLoad(readFileSync(join(__dirname, 'accounts.yml')).toString()); const accounts = readAccounts();
statusOutput('Creating template'); statusOutput('Creating template');
const bundler = new Bundler(join(SRC_DIR, 'template.html'), BUNDLER_OPTIONS); const bundler = new Bundler(join(SRC_DIR, 'template.html'), BUNDLER_OPTIONS);
console.log((bundler as any));
await bundler.bundle(); await bundler.bundle();
statusOutput('Compiling HTML template'); statusOutput('Compiling HTML template');

10
package-lock.json generated
View file

@ -4001,6 +4001,11 @@
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
}, },
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
"js-beautify": { "js-beautify": {
"version": "1.10.0", "version": "1.10.0",
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.0.tgz", "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.0.tgz",
@ -4836,6 +4841,11 @@
"resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==" "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
}, },
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
},
"posix-character-classes": { "posix-character-classes": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",

4
package.json
View file

@ -26,12 +26,14 @@
"@types/rimraf": "^2.0.2", "@types/rimraf": "^2.0.2",
"@types/underscore": "^1.9.1", "@types/underscore": "^1.9.1",
"animate.css": "3.7.0", "animate.css": "3.7.0",
"bootstrap": "4.2.1", "bootstrap": "^4.2.1",
"glob": "^7.1.4", "glob": "^7.1.4",
"handlebars": "^4.1.2", "handlebars": "^4.1.2",
"jquery": "^3.4.1",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"parcel-bundler": "1.12.3", "parcel-bundler": "1.12.3",
"popper.js": "^1.15.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"progress": "^2.0.3", "progress": "^2.0.3",
"rimraf": "^2.6.3", "rimraf": "^2.6.3",

28
src/template.html
View file

@ -1,8 +1,34 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss" />
<link rel="stylesheet" href="../node_modules/animate.css/animate.min.css" />
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />
</head> </head>
<body> <body>
{{ value }} <div class="jumbotron mb-0 jumbotron-fluid text-center vertical-center">
<div class="container">
<h1 class="display-1"></h1>
<p class="lead">You should give me money. Here's how:</p>
<h1>
<i class="fas fa-chevron-down mt-5 animated infinite slideInDown"></i>
</h1>
</div>
</div>
<div class="jumbotron mb-0 jumbotron-fluid">
<div class="container">
<div class="card-deck">
{{#list accounts }}
<div class="card text-center mx-5">
<a href="{{ link }}" class="colour-invert">
<img src="{{ image }}" class="card-img-top my-3 mx-3" alt="{{ name }} logo" style="max-width:40%" />
</a>
</div>
{{/list}}
</div>
</div>
</div>
<script type="text/javascript" src="../node_modules/bootstrap/js/src/index.js"></script>
</body> </body>
</html> </html>