GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-10-22 09:27:30 +00:00
Code Issues Activity

Add colored placeholder for thumbnails

Browse source
This commit is contained in:
Tixie 2022-02-10 21:07:25 +01:00
parent d1674d369b
commit db8bd389c1
5 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.eleventy.js
View file

@ -1,5 +1,5 @@
const glob = require("glob-promise")
const fs = require("fs")
const fs = require("fs/promises")
const { URL } = require("url")
const sharpPlugin = require("eleventy-plugin-sharp")
@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addCollection('plugins', async () => {
const files = (await glob('plugins/*.json')).map(filename => {
return fs.promises.readFile(filename, { encoding: 'utf-8' })
return fs.readFile(filename, { encoding: 'utf-8' })
})
const plugins = await Promise.all(files)
return plugins.map(JSON.parse).sort((a, b) => b.id - a.id)
@ -30,6 +30,9 @@ module.exports = function (eleventyConfig) {
return url;
}
});
eleventyConfig.addFilter("base64", async (url) => {
return fs.readFile(url, 'base64')
});
eleventyConfig.addShortcode("titleGenerator", (title, site, pageUrl, pagination) => {
let endTitle = `${site.name} • ${site.description}`

5
src/_includes/plugin.js
View file

@ -28,9 +28,10 @@ module.exports = function (plugin) {
srcset="${plugin.imagePng.image92} 1x,
${plugin.imagePng.image184} 2x">
<img
src="${plugin.image308}" alt="${plugin.title}"
srcset="${plugin.image616} 2x"
src="${plugin.imagePng.image308}" alt="${plugin.title}"
srcset="${plugin.imagePng.image616} 2x"
width="308" height="195"
style="background-image: url(data:image/png;base64,${plugin.bg});"
loading="lazy">
</picture>
</a>

1
src/api.11ty.js
View file

@ -9,6 +9,7 @@ class Main {
const list = (await Promise.all(data.collections.plugins.map(async plugin => {
return {
...plugin,
bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),

1
src/index.11ty.js
View file

@ -18,6 +18,7 @@ class Main {
const list = (await Promise.all(data.plugins.map(async plugin => {
return card({
...plugin,
bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),

3
src/sass/5-modules/plugin.scss
View file

@ -9,7 +9,8 @@
.plugin__visual img {
width: 100%;
font-size: 0;
background: #e8e7e6;
background-color: #e8e7e6;
background-size: 100%;
border-radius: .5rem;
box-shadow: 0 .1rem .3rem 0 lighten($color-primary, 32);
}