diff options
| -rw-r--r-- | _gallery/testigalleria.json | 7 | ||||
| -rw-r--r-- | build.js | 45 | ||||
| -rw-r--r-- | package-lock.json | 16 | ||||
| -rw-r--r-- | package.json | 7 | ||||
| -rw-r--r-- | src/admin/config.yml | 16 | ||||
| -rw-r--r-- | src/index.html.mustache (renamed from src/index.html) | 28 |
6 files changed, 93 insertions, 26 deletions
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.mustache index 732a318..d01df1a 100644 --- a/src/index.html +++ b/src/index.html.mustache @@ -18,27 +18,21 @@ <img id="logo" src="logo.svg" alt="">
</header>
- <h3>Graphic Design</h3>
-
+ {{#galleries}}
+ {{#show_title}}
+ <h3>{{title}}</h3>
+ {{/show_title}}
<div class="gallery">
+ {{#columns}}
<div class="column">
- <a target="_blank" href="https://via.placeholder.com/400x400">
- <img src="https://via.placeholder.com/200x200">
- </a>
- <a target="_blank" href="https://via.placeholder.com/400x400">
- <img src="https://via.placeholder.com/300x150">
- </a>
- </div>
- <div class="column">
- <a target="_blank" href="https://via.placeholder.com/400x400">
- <img src="https://via.placeholder.com/400x250">
- </a>
- </div>
- <div class="column">
- <a target="_blank" href="https://via.placeholder.com/400x400">
- <img src="https://via.placeholder.com/400x250">
+ {{#.}}
+ <a target="_blank" href="{{&src_hiq}}">
+ <img src="{{&src_thumbnail}}" alt="{{title}}">
</a>
+ {{/.}}
</div>
+ {{/columns}}
</div>
+ {{/galleries}}
</body>
</html>
\ No newline at end of file |