From 8d58567f810bd0fb86a856fadd31211602f3d76c Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 11 Jul 2022 22:55:11 +0300 Subject: Add mustache templating --- _gallery/testigalleria.json | 7 +++++-- build.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 16 ++++++++++++++++ package.json | 7 +++++-- src/admin/config.yml | 16 +++++++++++----- src/index.html | 44 -------------------------------------------- src/index.html.mustache | 38 ++++++++++++++++++++++++++++++++++++++ 7 files changed, 120 insertions(+), 53 deletions(-) create mode 100644 build.js delete mode 100644 src/index.html create mode 100644 src/index.html.mustache diff --git a/_gallery/testigalleria.json b/_gallery/testigalleria.json index f1d998a..4d4fc56 100644 --- a/_gallery/testigalleria.json +++ b/_gallery/testigalleria.json @@ -1,12 +1,15 @@ { "column_count": 2, + "show_title": true, "images": [ { - "source": "/media/hassu.png", + "src_thumbnail": "/media/hassu.png", + "src_hiq": "/media/hassu.png", "title": "Hassu naama" }, { - "source": "/media/halo.png", + "src_thumbnail": "/media/halo.png", + "src_hiq": "/media/halo.png", "title": "Halo hajos" } ], diff --git a/build.js b/build.js new file mode 100644 index 0000000..c7b8f39 --- /dev/null +++ b/build.js @@ -0,0 +1,45 @@ +const fs = require("fs"); +const path = require('path'); +const M = require("mustache"); + +// https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript/ +function sliceIntoChunks(arr, chunkSize) { + const res = []; + for (let i = 0; i < arr.length; i += chunkSize) { + const chunk = arr.slice(i, i + chunkSize); + res.push(chunk); + } + return res; +} + +// https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript +function transpose(matrix) { + return matrix[0].map((col, i) => matrix.map(row => row[i])); +} + +const GALLERY_DIR = "_gallery"; +const SRC_DIR = "src"; +const DIST_DIR = "dist"; +const HTML_TEMP_PATH = path.join(SRC_DIR, "index.html.mustache"); +const HTML_OUT_PATH = path.join(DIST_DIR, "index.html"); + +fs.rmSync(DIST_DIR, { recursive: true, force: true }); +fs.cpSync(SRC_DIR, DIST_DIR, { recursive: true }); + +const htmlTemplate = fs.readFileSync(HTML_TEMP_PATH, "utf-8"); + +const galleryJsonList = fs.readdirSync(GALLERY_DIR); +const galleryViews = galleryJsonList + .map((fileName) => fs.readFileSync(path.join(GALLERY_DIR, fileName), "utf-8")) + .map(JSON.parse) + .map((gallery) => { + const rows = sliceIntoChunks(gallery["images"], gallery["column_count"]); + const columns = transpose(rows); + return { + ...gallery, + columns, + }; + }); + +const renderedHtml = M.render(htmlTemplate, { galleries: galleryViews} ); +fs.writeFileSync(HTML_OUT_PATH, renderedHtml); diff --git a/package-lock.json b/package-lock.json index 73f343f..7e4260b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { + "mustache": "^4.2.0", "serve": "^13.0.4" } }, @@ -558,6 +559,15 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, + "node_modules/mustache": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz", + "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==", + "dev": true, + "bin": { + "mustache": "bin/mustache" + } + }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -1400,6 +1410,12 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, + "mustache": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz", + "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==", + "dev": true + }, "negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", diff --git a/package.json b/package.json index 3634b98..482dc50 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,16 @@ "description": "", "main": "index.js", "scripts": { - "build": "cp -r src dist", + "build": "node build.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { - "serve": "^13.0.4" + "serve": "^13.0.4", + "mustache": "^4.2.0" + }, + "dependencies": { } } diff --git a/src/admin/config.yml b/src/admin/config.yml index 9b3044f..2747ca7 100644 --- a/src/admin/config.yml +++ b/src/admin/config.yml @@ -14,6 +14,10 @@ collections: - name: title label: Title widget: string + - name: show_title + label: Show title above gallery? + widget: boolean + default: false - name: column_count label: Column count widget: number @@ -29,11 +33,13 @@ collections: - name: title label: Title widget: string - - name: source - label: Source + - name: src_thumbnail + label: Thumbnail image (smaller file size) + widget: image + allow_multiple: false + choose_url: true + - name: src_hiq + label: High quality image (larger file size) widget: image allow_multiple: false choose_url: true - media_library: - config: - multiple: true diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 732a318..0000000 --- a/src/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - Minni Honka - - - - - - - - - - -
-

Minni Honka

-

Graphic designer & Illustrator

- -
- -

Graphic Design

- -
-
- - - - - - -
-
- - - -
-
- - - -
-
- - \ No newline at end of file diff --git a/src/index.html.mustache b/src/index.html.mustache new file mode 100644 index 0000000..d01df1a --- /dev/null +++ b/src/index.html.mustache @@ -0,0 +1,38 @@ + + + + Minni Honka + + + + + + + + + + +
+

Minni Honka

+

Graphic designer & Illustrator

+ +
+ + {{#galleries}} + {{#show_title}} +

{{title}}

+ {{/show_title}} +
+ {{#columns}} +
+ {{#.}} + + {{title}} + + {{/.}} +
+ {{/columns}} +
+ {{/galleries}} + + \ No newline at end of file -- cgit v1.3