GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-12-30 11:51:57 +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 glob = require("glob-promise")
const fs = require("fs") const fs = require("fs/promises")
const { URL } = require("url") const { URL } = require("url")
const sharpPlugin = require("eleventy-plugin-sharp") const sharpPlugin = require("eleventy-plugin-sharp")
@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addCollection('plugins', async () => { eleventyConfig.addCollection('plugins', async () => {
const files = (await glob('plugins/*.json')).map(filename => { 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) const plugins = await Promise.all(files)
return plugins.map(JSON.parse).sort((a, b) => b.id - a.id) return plugins.map(JSON.parse).sort((a, b) => b.id - a.id)
@ -30,6 +30,9 @@ module.exports = function (eleventyConfig) {
return url; return url;
} }
}); });
eleventyConfig.addFilter("base64", async (url) => {
return fs.readFile(url, 'base64')
});
eleventyConfig.addShortcode("titleGenerator", (title, site, pageUrl, pagination) => { eleventyConfig.addShortcode("titleGenerator", (title, site, pageUrl, pagination) => {
let endTitle = `${site.name} • ${site.description}` 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, srcset="${plugin.imagePng.image92} 1x,
${plugin.imagePng.image184} 2x"> ${plugin.imagePng.image184} 2x">
<img <img
src="${plugin.image308}" alt="${plugin.title}" src="${plugin.imagePng.image308}" alt="${plugin.title}"
srcset="${plugin.image616} 2x" srcset="${plugin.imagePng.image616} 2x"
width="308" height="195" width="308" height="195"
style="background-image: url(data:image/png;base64,${plugin.bg});"
loading="lazy"> loading="lazy">
</picture> </picture>
</a> </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 => { const list = (await Promise.all(data.collections.plugins.map(async plugin => {
return { return {
...plugin, ...plugin,
bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
imageWebp: { imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))), 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 }))), 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 => { const list = (await Promise.all(data.plugins.map(async plugin => {
return card({ return card({
...plugin, ...plugin,
bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
imageWebp: { imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))), 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 }))), 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 { .plugin__visual img {
width: 100%; width: 100%;
font-size: 0; font-size: 0;
background: #e8e7e6; background-color: #e8e7e6;
background-size: 100%;
border-radius: .5rem; border-radius: .5rem;
box-shadow: 0 .1rem .3rem 0 lighten($color-primary, 32); box-shadow: 0 .1rem .3rem 0 lighten($color-primary, 32);
} }