hosted-by-chobble/vegan-prestwich
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

buimp node, create image thumbnails

Browse source
This commit is contained in:
Stefan 2024-04-14 23:13:53 +01:00
parent 5625b2eb87
commit e8ec49a810
7 changed files with 1995 additions and 3650 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
.eleventy.js
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 // Aliases are in relation to the _includes folder
config.addLayoutAlias('default', 'layouts/default.liquid'); config.addLayoutAlias("default", "layouts/default.liquid");
config.addLayoutAlias('home', 'layouts/home.liquid'); config.addLayoutAlias("home", "layouts/home.liquid");
config.addLayoutAlias('page', 'layouts/page.liquid'); config.addLayoutAlias("page", "layouts/page.liquid");
config.addLayoutAlias('place', 'layouts/place.liquid'); config.addLayoutAlias("place", "layouts/place.liquid");
config.addLayoutAlias('tag', 'layouts/tag.liquid'); config.addLayoutAlias("tag", "layouts/tag.liquid");
config.addLayoutAlias('tags', 'layouts/tags.liquid'); config.addLayoutAlias("tags", "layouts/tags.liquid");
let sortedPlaces = (api) => { let sortedPlaces = (api) => {
return api.getAll().filter((a) => { return api
return a.data.tags && a.data.tags.indexOf("places") != -1; .getAll()
}).sort((a, b) => { .filter((a) => {
return a.data.name.localeCompare(b.data.name); 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("sorted_places", (api) => sortedPlaces(api));
config.addCollection("shops", (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) => 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) => 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.addWatchTarget("./style/style.scss");
config.addCollection("place_images", (collection) => placeImages);; config.addCollection("place_images", (collection) => placeImages);
config.addPassthroughCopy("place/*/*.jpg"); config.addPassthroughCopy("place/*/*.jpg");
config.addPassthroughCopy({"static/robots.txt": "/robots.txt"}); config.addPassthroughCopy({ "static/robots.txt": "/robots.txt" });
config.addPassthroughCopy({"static/not_found.html": "/not_found.html"}); config.addPassthroughCopy({ "static/not_found.html": "/not_found.html" });
config.addPassthroughCopy({"static/favicon.ico": "/favicon.ico"}); config.addPassthroughCopy({ "static/favicon.ico": "/favicon.ico" });
config.addFilter('where', (array, key, value) => { config.addFilter("where", (array, key, value) => {
return (array || []).filter(item => { return (array || []).filter((item) => {
const keys = key.split('.'); const keys = key.split(".");
const reducedKey = keys.reduce((object, key) => { const reducedKey = keys.reduce((object, key) => {
return object[key]; return object[key];
}, item); }, item);
return (reducedKey == value ? item : false); return reducedKey == value ? item : false;
}); });
}); });
config.addFilter('where_includes', (array, key, value) => { config.addFilter("where_includes", (array, key, value) => {
return (array || []).filter(item => { return (array || []).filter((item) => {
const keys = key.split('.'); const keys = key.split(".");
const reducedKey = keys.reduce((object, key) => { const reducedKey = keys.reduce((object, key) => {
return object[key]; return object[key];
}, item); }, item);
return (reducedKey && reducedKey.indexOf(value) != -1 ? item : false); return reducedKey && reducedKey.indexOf(value) != -1 ? item : false;
}); });
}); });
return { return {
dir: { dir: {
input: "./", input: "./",
output: "./_site" output: "./_site",
} },
}; };
}; };

5
_includes/layouts/place.liquid
View file

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

2
_includes/place-json-ld.liquid
View file

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

5330
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

19
package.json
View file

@ -1,15 +1,16 @@
{ {
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^2.0.0-beta.1" "@11ty/eleventy": "^3.0.0-alpha"
}, },
"dependencies": { "dependencies": {
"cross-env": "^7.0.3", "@11ty/eleventy-img": "*",
"fast-glob": "^3.2.12", "cross-env": "*",
"html-minifier": "^4.0.0", "fast-glob": "*",
"lightningcss": "^1.22.0", "html-minifier": "*",
"lightningcss-cli": "^1.15.1", "lightningcss": "*",
"npm-run-all": "^4.1.5", "lightningcss-cli": "*",
"sass": "^1.54.9" "npm-run-all": "*",
"sass": "*"
}, },
"scripts": { "scripts": {
"watch:sass": "sass --no-source-map --watch style:_site/style", "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_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:minify_html": "html-minifier --input-dir _site --output-dir _site --collapse-whitespace --file-ext html",
"build:jampack": "npx --yes @divriots/jampack ./_site", "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": "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_pt1": "npm-run-all build:rm build:sass",
"build_pt2": "npm-run-all build:eleventy build:minify_html build:jampack" "build_pt2": "npm-run-all build:eleventy build:minify_html build:jampack"

2
sitemap.liquid
View file

@ -7,7 +7,7 @@ eleventyExcludeFromCollections: true
{% for page in collections.all %} {% for page in collections.all %}
<url> <url>
<loc>{{ site.url }}{{ page.url | url }}</loc> <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> <lastmod>{{ date }}</lastmod>
</url> </url>
{% endfor %} {% endfor %}

193
style/style.scss
View file

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