buimp node, create image thumbnails
This commit is contained in:
parent
5625b2eb87
commit
e8ec49a810
94
.eleventy.js
94
.eleventy.js
|
|
@ -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",
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
5330
package-lock.json
generated
File diff suppressed because it is too large
Load diff
19
package.json
19
package.json
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
191
style/style.scss
191
style/style.scss
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue