buimp node, create image thumbnails

This commit is contained in:
stefan burke 2024-04-14 23:13:53 +01:00
parent 5625b2eb87
commit e8ec49a810
7 changed files with 1995 additions and 3650 deletions

View file

@ -1,69 +1,99 @@
const fg = require('fast-glob');
const fg = require("fast-glob");
const placeImages = fg.sync(['place/*/*.jpg', '!**/_site']);
const placeImages = fg.sync([
"place/*/*.jpg",
"!**/_site",
"!place/*/*-thumb.jpg",
]);
const Image = require("@11ty/eleventy-img");
module.exports = function (config) {
config.addShortcode("image", async (src, alt, sizes) => {
let metadata = await Image(src, {
widths: [150, 300],
formats: ["webp", "jpeg"],
outputDir: "./_site/img/"
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
// You bet we throw an error on a missing alt (alt="" works okay)
return Image.generateHTML(metadata, imageAttributes);
});
module.exports = function(config) {
// Aliases are in relation to the _includes folder
config.addLayoutAlias('default', 'layouts/default.liquid');
config.addLayoutAlias('home', 'layouts/home.liquid');
config.addLayoutAlias('page', 'layouts/page.liquid');
config.addLayoutAlias('place', 'layouts/place.liquid');
config.addLayoutAlias('tag', 'layouts/tag.liquid');
config.addLayoutAlias('tags', 'layouts/tags.liquid');
config.addLayoutAlias("default", "layouts/default.liquid");
config.addLayoutAlias("home", "layouts/home.liquid");
config.addLayoutAlias("page", "layouts/page.liquid");
config.addLayoutAlias("place", "layouts/place.liquid");
config.addLayoutAlias("tag", "layouts/tag.liquid");
config.addLayoutAlias("tags", "layouts/tags.liquid");
let sortedPlaces = (api) => {
return api.getAll().filter((a) => {
return a.data.tags && a.data.tags.indexOf("places") != -1;
}).sort((a, b) => {
return a.data.name.localeCompare(b.data.name);
});
}
return api
.getAll()
.filter((a) => {
return a.data.tags && a.data.tags.indexOf("places") != -1;
})
.sort((a, b) => {
return a.data.name.localeCompare(b.data.name);
});
};
config.addCollection("sorted_places", (api) => sortedPlaces(api));
config.addCollection("shops", (api) =>
sortedPlaces(api).filter((a) => a.data.permalink && a.data.shop));
sortedPlaces(api).filter((a) => a.data.permalink && a.data.shop)
);
config.addCollection("restaurants", (api) =>
sortedPlaces(api).filter((a) => a.data.permalink && a.data.restaurant));
sortedPlaces(api).filter((a) => a.data.permalink && a.data.restaurant)
);
config.addCollection("deliveries", (api) =>
sortedPlaces(api).filter((a) => a.data.permalink && a.data.delivery));
sortedPlaces(api).filter((a) => a.data.permalink && a.data.delivery)
);
config.addWatchTarget("./style/style.scss");
config.addCollection("place_images", (collection) => placeImages);;
config.addCollection("place_images", (collection) => placeImages);
config.addPassthroughCopy("place/*/*.jpg");
config.addPassthroughCopy({"static/robots.txt": "/robots.txt"});
config.addPassthroughCopy({"static/not_found.html": "/not_found.html"});
config.addPassthroughCopy({"static/favicon.ico": "/favicon.ico"});
config.addPassthroughCopy({ "static/robots.txt": "/robots.txt" });
config.addPassthroughCopy({ "static/not_found.html": "/not_found.html" });
config.addPassthroughCopy({ "static/favicon.ico": "/favicon.ico" });
config.addFilter('where', (array, key, value) => {
return (array || []).filter(item => {
const keys = key.split('.');
config.addFilter("where", (array, key, value) => {
return (array || []).filter((item) => {
const keys = key.split(".");
const reducedKey = keys.reduce((object, key) => {
return object[key];
}, item);
return (reducedKey == value ? item : false);
return reducedKey == value ? item : false;
});
});
config.addFilter('where_includes', (array, key, value) => {
return (array || []).filter(item => {
const keys = key.split('.');
config.addFilter("where_includes", (array, key, value) => {
return (array || []).filter((item) => {
const keys = key.split(".");
const reducedKey = keys.reduce((object, key) => {
return object[key];
}, item);
return (reducedKey && reducedKey.indexOf(value) != -1 ? item : false);
return reducedKey && reducedKey.indexOf(value) != -1 ? item : false;
});
});
return {
dir: {
input: "./",
output: "./_site"
}
output: "./_site",
},
};
};

View file

@ -23,12 +23,13 @@ layout: default
{% capture absolute_url %}/{{image}}{% endcapture %}
{% assign folder_size = absolute_url.size | minus: 6 %}
{% capture absolute_folder %}{{ absolute_url | slice: 0, folder_size }}{% endcapture %}
{% capture filename %}{{ absolute_url | slice: 1, 999 }}{% endcapture %}
{% if absolute_folder == page.url %}
<a
href="{{absolute_url}}"
href="{{ absolute_url }}"
title="{{ title }}"
>
<img src="{{ absolute_url }}" alt="{{ title }}">
{% image filename, name, "150px" %}
</a>
{% endif %}
{% endfor %}

View file

@ -6,7 +6,7 @@
{%- if email -%}"email": "{{ email }}",{%- endif -%}
{%- if phone -%}"telephone": "{{ phone }}",{%- endif -%}
{%- if web -%}"url": "{{ web }}",{%- endif -%}
{%- if facebook || instagram -%} "sameAs": [
{%- if facebook or instagram -%} "sameAs": [
{%- if facebook -%}"{{ facebook }}"{%- endif -%}
{%- if facebook and instagram -%},{%- endif -%}
{%- if instagram -%}"{{ instagram }}"{%- endif -%}

5330
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,15 +1,16 @@
{
"devDependencies": {
"@11ty/eleventy": "^2.0.0-beta.1"
"@11ty/eleventy": "^3.0.0-alpha"
},
"dependencies": {
"cross-env": "^7.0.3",
"fast-glob": "^3.2.12",
"html-minifier": "^4.0.0",
"lightningcss": "^1.22.0",
"lightningcss-cli": "^1.15.1",
"npm-run-all": "^4.1.5",
"sass": "^1.54.9"
"@11ty/eleventy-img": "*",
"cross-env": "*",
"fast-glob": "*",
"html-minifier": "*",
"lightningcss": "*",
"lightningcss-cli": "*",
"npm-run-all": "*",
"sass": "*"
},
"scripts": {
"watch:sass": "sass --no-source-map --watch style:_site/style",
@ -20,7 +21,7 @@
"build:minify_css": "lightningcss --minify --targets '> 0.25%, not IE 11' _site/style/*.css -o _site/style/*.css",
"build:minify_html": "html-minifier --input-dir _site --output-dir _site --collapse-whitespace --file-ext html",
"build:jampack": "npx --yes @divriots/jampack ./_site",
"start": "npm-run-all build:sass --parallel watch:*",
"start": "npm-run-all build:rm build:sass --parallel watch:*",
"build": "npm-run-all build:rm build:sass build:minify_css build:eleventy build:minify_html",
"build_pt1": "npm-run-all build:rm build:sass",
"build_pt2": "npm-run-all build:eleventy build:minify_html build:jampack"

View file

@ -7,7 +7,7 @@ eleventyExcludeFromCollections: true
{% for page in collections.all %}
<url>
<loc>{{ site.url }}{{ page.url | url }}</loc>
{%- assign date = page.data.last_modified_at || page.date %}
{%- assign date = page.data.last_modified_at or page.date %}
<lastmod>{{ date }}</lastmod>
</url>
{% endfor %}

View file

@ -11,9 +11,9 @@ $spacing-unit: 30px;
$text-color: #111;
$background-color: #fdfdfd;
$brand-color: #20399D;
$brand-color: #20399d;
$green: #00D13D;
$green: #00d13d;
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
@ -24,158 +24,157 @@ $on-palm: 600px;
$on-laptop: 800px;
html {
font-size: $base-font-size;
font-size: $base-font-size;
}
h1,
h2,
h3,
h4 {
border-bottom: 1px solid $grey-color-light;
border-bottom: 1px solid $grey-color-light;
}
hr {
margin: 2em;
border: 0;
border-top: 1px solid #c8e3d0;
height: 0;
margin: 2em;
border: 0;
border-top: 1px solid #c8e3d0;
height: 0;
}
ul {
line-height: 180%;
line-height: 180%;
}
.small {
font-size: smaller;
font-size: smaller;
}
.places-list {
&--detailed {
color: $grey-color;
&--detailed {
color: $grey-color;
li {
margin-bottom: 10px;
li {
margin-bottom: 10px;
p {
margin-bottom: auto;
}
}
p {
margin-bottom: auto;
}
}
}
&__address {
font-size: small;
&__address {
font-size: small;
}
&__contact {
font-size: small;
a {
margin-right: 5px;
}
}
&__contact {
font-size: small;
a {
margin-right: 5px;
}
}
&__tags {
font-size: small;
opacity: 0.6;
}
&__tags {
font-size: small;
opacity: 0.6;
}
}
.place-meta {
font-size: 14px;
background: $grey-color-light;
padding: 10px 20px;
border-radius: 5px;
margin: 0 0 10px;
font-size: 14px;
background: $grey-color-light;
padding: 10px 20px;
border-radius: 5px;
margin: 0 0 10px;
strong {
color: #797;
margin-right: 5px;
}
strong {
color: #797;
margin-right: 5px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
hr {
margin: 10px 0;
}
hr {
margin: 10px 0;
}
}
.place-images {
a {
display: inline-block;
width: 150px;
height: 150px;
border: 2px solid white;
overflow: hidden;
margin: 0 10px 10px 0;
background-size: cover;
a {
display: inline-block;
width: 150px;
height: 150px;
border: 2px solid white;
overflow: hidden;
margin: 0 10px 10px 0;
&:hover {
border: 2px solid $green;
}
img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
}
&:hover {
border: 2px solid $green;
}
img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
}
}
}
.place-tags {
color: $grey-color;
color: $grey-color;
}
.contribute {
font-size: 12px;
list-style-type: circle;
font-size: 12px;
list-style-type: circle;
}
.avoid-break {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.site-footer {
text-align: center;
text-align: center;
}
.site-header {
border-top: none;
border-top: none;
}
@media screen and (min-width: 401px) {
.columns {
column-count: 3;
column-gap: 20px;
}
.columns {
column-count: 3;
column-gap: 20px;
}
}
@media screen and (min-width: 801px) {
.place-meta {
float: right;
width: 270px;
margin: 0 0 20px 20px;
}
.place-meta {
float: right;
width: 270px;
margin: 0 0 20px 20px;
}
.row {
display: flex;
flex-wrap: wrap;
.row {
display: flex;
flex-wrap: wrap;
&>.col {
flex-grow: 1;
flex-basis: 220px;
margin: 10px;
}
& > .col {
flex-grow: 1;
flex-basis: 220px;
margin: 10px;
}
}
.columns {
column-count: 4;
column-gap: 20px;
}
}
.columns {
column-count: 4;
column-gap: 20px;
}
}