From b1448daca8de579815bad6effcaa56d0b821d3da Mon Sep 17 00:00:00 2001 From: mortendk Date: Tue, 27 Jun 2023 15:00:29 +0200 Subject: [PATCH 01/19] opengraph + seo settings for pages --- src/_system/11ty/shortcode/image.js | 4 +- src/_system/11ty/shortcode/imageurl.js | 73 ++++++++++--------- .../_decapcms/contenttypes/page.liquid | 12 ++- src/_system/_decapcms/fields/card.liquid | 2 +- src/_system/_decapcms/fields/menu.liquid | 4 +- src/_system/_decapcms/fields/opengraph.liquid | 9 +++ src/_system/_decapcms/settings/site.liquid | 3 +- .../_decapcms/settings/verification.liquid | 4 +- src/_system/head/opengraph.liquid | 31 ++++---- src/_system/head/seo.liquid | 3 + src/theme-grunn/includes/card.liquid | 2 +- src/theme-grunn/includes/header.liquid | 14 ++-- src/theme-grunn/includes/image.liquid | 7 +- src/theme-grunn/includes/imageurl.liquid | 17 +++++ src/theme-grunn/layouts/page/frontpage.liquid | 4 +- 15 files changed, 106 insertions(+), 83 deletions(-) create mode 100644 src/_system/_decapcms/fields/opengraph.liquid create mode 100644 src/_system/head/seo.liquid create mode 100644 src/theme-grunn/includes/imageurl.liquid diff --git a/src/_system/11ty/shortcode/image.js b/src/_system/11ty/shortcode/image.js index 784a1f6c..5679f067 100644 --- a/src/_system/11ty/shortcode/image.js +++ b/src/_system/11ty/shortcode/image.js @@ -3,13 +3,12 @@ const fs = require("fs"); const Image = require("@11ty/eleventy-img"); module.exports = async function (file, widths, format, alttext, sizes, loading, css) { - // src = "src" + file; if (fs.existsSync("src" + file)) { src = "src" + file; } else if (file.indexOf("http://") === 0 || file.indexOf("https://") === 0) { src = file; } else { - console.log(` missing src: ${file} - ${src}`); + console.log(`missing file: ${file} - src ${src}`);Β  } const theCss = css || ""; @@ -18,7 +17,6 @@ module.exports = async function (file, widths, format, alttext, sizes, loading, const theLoading = loading || "lazy"; const theWidths = widths || ["640", "1024", "1563"]; - let metadata = await Image(src, { widths: theWidths, formats: theFormat , diff --git a/src/_system/11ty/shortcode/imageurl.js b/src/_system/11ty/shortcode/imageurl.js index 1c5a5588..7f09bba1 100644 --- a/src/_system/11ty/shortcode/imageurl.js +++ b/src/_system/11ty/shortcode/imageurl.js @@ -2,43 +2,44 @@ const path = require("path"); const fs = require("fs"); const Image = require("@11ty/eleventy-img"); -// Returns an url for an image -module.exports = async function (image, width, format) { - const src = "src" + image; - const widths = width || ["750"];; - const formats = format || ["jpeg"]; +module.exports = async function (file, width, format) { + if (fs.existsSync("src" + file)) { + src = "src" + file; + } else if (file.indexOf("http://") === 0 || file.indexOf("https://") === 0) { + src = file; + } else { + console.log(`🚨 missing file: ${file} - src ${src}`); + } + + const theFormat = format || "webp"; + const theWidth = width || ["1024"]; - // console.log(`🎈 imageurl generate: ${src}`); - //does the image exist - we dont want to break the build. - if (fs.existsSync(src)) { - let options = { - widths : widths, - formats: formats, - urlPath: "/img/", - outputDir: "./_site/img/", - // sensible filenames: - // filenameFormat: function (src, width, format) { - // const extension = path.extname(src); - // const name = path.basename(src, extension); - // return `${name}-${width}w.${format}`; - // }, - }; - // console.log(`🎈 imageurl next: ${options}`); - // Generate the image - Image(src, options); - metadata = Image.statsSync(src, options); + let options = await Image(src, { + widths: theWidth, + formats: theFormat , + urlPath: "/img/", + outputDir: "_site/img/", + cacheOptions: { + duration: "1d", + directory: ".cache", + removeUrlQueryParams: false, + }, + filenameFormat: function (id, src,theWidth, formats) { + return `${id}-${theWidth}w.${formats}`; + }, + }); - let filename; - if (formats == "jpeg") { - filename = metadata.jpeg[0].url; - } else if (format == "png") { - filename = metadata.png[0].url; - } else if (format == "gif") { - filename = metadata.gif[0].url; - } else { - filename = metadata.webp[0].url; - } - // console.log(`🎈 filename: ${filename}`); - return filename; + // console.log("🦐 Object: %o", options) + let filename; + if (theFormat == "jpeg") { + filename = options.jpeg[0].url; + } else if (format == "png") { + filename = options.png[0].url; + } else if (format == "gif") { + filename = options.gif[0].url; + } else { + filename = options.webp[0].url; } + + return filename; }; diff --git a/src/_system/_decapcms/contenttypes/page.liquid b/src/_system/_decapcms/contenttypes/page.liquid index 3075d7ea..e0cbfadf 100644 --- a/src/_system/_decapcms/contenttypes/page.liquid +++ b/src/_system/_decapcms/contenttypes/page.liquid @@ -43,10 +43,6 @@ hint: "" %} -{% include "_system/_decapcms/fields/card.liquid" %} - -{% include "_system/_decapcms/fields/component.liquid" %} - {% include "_system/_decapcms/widgets/image", name: "image", label: "Image", @@ -65,6 +61,10 @@ hint: "" %} +{% include "_system/_decapcms/fields/component.liquid" %} + +{% include "_system/_decapcms/fields/card.liquid" %} + {% include "_system/_decapcms/fields/tags.liquid" %} {% include "_system/_decapcms/widgets/number", @@ -88,4 +88,8 @@ {% include "_system/_decapcms/fields/menu.liquid" %} +{% include "_system/_decapcms/fields/opengraph.liquid" %} + +{% include "_system/_decapcms/fields/seo.liquid" %} + {% include '_system/_decapcms/widgets/template-relation.liquid', collection: 'pagetemplates', folder: "page" %} diff --git a/src/_system/_decapcms/fields/card.liquid b/src/_system/_decapcms/fields/card.liquid index 33141000..8922dd5f 100644 --- a/src/_system/_decapcms/fields/card.liquid +++ b/src/_system/_decapcms/fields/card.liquid @@ -2,7 +2,7 @@ label: πŸ™ card widget: object collapsed: true - summary: "{% raw %}{{fields.image}} {{fields.teaser}}{% endraw %}" + summary: "{% raw %}Title: '{{fields.title}}' | Image: {{fields.image}} | Text: '{{fields.text}}'{% endraw %}" fields: - { label: "title", name: "title", widget: "string", required: false } - { label: "Image", name: "image", widget: "image", required: false, choose_url: true } diff --git a/src/_system/_decapcms/fields/menu.liquid b/src/_system/_decapcms/fields/menu.liquid index 6a62c70a..0404ed11 100644 --- a/src/_system/_decapcms/fields/menu.liquid +++ b/src/_system/_decapcms/fields/menu.liquid @@ -1,8 +1,8 @@ - name: eleventyNavigation - label: πŸ” Navigation + label: πŸ” Menu widget: object collapsed: true - summary: "{% raw %}{{fields.key}} | {{fields.parent}} {% endraw %}" + summary: "{% raw %} Title: {{fields.title}} | Parent: {{fields.parent}} | Text: {{fields.text}} | Key: {{fields.key}} | Order: {{fields.order}} | {% endraw %}" fields: - { label: "title", name: "title", widget: "string", required: false} - name: "parent" diff --git a/src/_system/_decapcms/fields/opengraph.liquid b/src/_system/_decapcms/fields/opengraph.liquid new file mode 100644 index 00000000..917058f6 --- /dev/null +++ b/src/_system/_decapcms/fields/opengraph.liquid @@ -0,0 +1,9 @@ + - name: opengraph + label: πŸ‘‹ Opengraph + widget: object + collapsed: true + summary: "{% raw %}Title: '{{fields.title}}' | Image: {{fields.image}} | Description: '{{fields.description}}'{% endraw %}" + fields: + - { label: "Image", name: "image", widget: "image", required: false, choose_url: true } + - { label: "Title", name: "title", widget: "string", required: false, hint: 'Opengraph Card title' } + - { label: "Description", name: "description", widget: "text", required: false } diff --git a/src/_system/_decapcms/settings/site.liquid b/src/_system/_decapcms/settings/site.liquid index 56e64a8c..f883188a 100644 --- a/src/_system/_decapcms/settings/site.liquid +++ b/src/_system/_decapcms/settings/site.liquid @@ -3,7 +3,8 @@ file: "src/content/_data/site.json" fields: - { label: Title, name: title, widget: string } - - { label: "shortname", name: shortname, widget: string } + - { label: "Shortname", name: shortname, widget: string } + - { label: "Description", name: description, widget: text } - { label: πŸŒ‡ (fave)icon, name: icon, widget: image, choose_url: false, required: false, hint: "The icon is used to create favions Only takes square images - preferable an svg"} - { label: Icon color, name: faviconcolor, widget: color, required: true, enableAlpha : true } - { label: Browesercolor, name: color, widget: color, required: false } diff --git a/src/_system/_decapcms/settings/verification.liquid b/src/_system/_decapcms/settings/verification.liquid index 91136ca7..257f5755 100644 --- a/src/_system/_decapcms/settings/verification.liquid +++ b/src/_system/_decapcms/settings/verification.liquid @@ -1,4 +1,4 @@ - - label: "Verification & Seo" + - label: "Verification & Header Scripts" name: "verification" file: "src/content/_data/verification.json" fields: @@ -22,5 +22,3 @@ hint: "can be found on https://www.pinterest.dk/settings/claim", } - { label: πŸ‘Ύ Header (tracking scripts), name: header, widget: text, required: false, hint: "Data block placed inside the header tag ex for tracking scripts" } - - { label: πŸ”Ž Seo default Description, name: description, widget: text, required: false } - - { label: πŸ”Ž Seo default Keywords, name: keywords, widget: text, required: false } diff --git a/src/_system/head/opengraph.liquid b/src/_system/head/opengraph.liquid index 0fb21041..e24ab95b 100644 --- a/src/_system/head/opengraph.liquid +++ b/src/_system/head/opengraph.liquid @@ -1,36 +1,31 @@ -{%- if env.mode != 'prod' %} - -{%- endif -%} +{%- if env.mode != 'prod' %}{%- endif -%} -{% comment %} Image {% endcomment %} -{%- capture ogimage -%} - {% assign width = '1200' | split: ', ' %} - {%- if image -%} - {{ env.url }}{%- imageurl image, width -%} - {%- else -%} - {{ env.url }}{%- imageurl site.opengraph, width -%} - {%- endif -%} -{%- endcapture -%} +{% comment %} Image{% endcomment %} +{% capture ogimage %} + {% if image %} + {% render 'imageurl.liquid', file: image, widths: "1200",format: "webp" %} + {% endif %} +{% endcapture %} -{% assign url = env.url | append: url %} +{% assign url = env.url %} +{% assign img = ogimage | strip | prepend: url %} - + - + - - - + + {% if some.twitter %} diff --git a/src/_system/head/seo.liquid b/src/_system/head/seo.liquid new file mode 100644 index 00000000..ce6fd5ea --- /dev/null +++ b/src/_system/head/seo.liquid @@ -0,0 +1,3 @@ + + + diff --git a/src/theme-grunn/includes/card.liquid b/src/theme-grunn/includes/card.liquid index 5bc0492f..6fb6690b 100644 --- a/src/theme-grunn/includes/card.liquid +++ b/src/theme-grunn/includes/card.liquid @@ -22,7 +22,7 @@ {% endcomment %}
- +
{% if image %} diff --git a/src/theme-grunn/includes/header.liquid b/src/theme-grunn/includes/header.liquid index 3648eed6..ceb94d44 100644 --- a/src/theme-grunn/includes/header.liquid +++ b/src/theme-grunn/includes/header.liquid @@ -21,17 +21,15 @@
{% if site.rss %} -
- {% render 'image.liquid', + {% render 'image/image.liquid', file: component.image, alt: component.title, sizes: "(max-width: 640px) 50vw, 100vw", diff --git a/src/theme-grunn/includes/components/images/images-grid.liquid b/src/theme-grunn/includes/components/images/images-grid.liquid index e3aaca3b..f76c23ed 100644 --- a/src/theme-grunn/includes/components/images/images-grid.liquid +++ b/src/theme-grunn/includes/components/images/images-grid.liquid @@ -19,7 +19,7 @@ {% assign gallery = component.images %} {% for item in gallery %}
- {% render 'image.liquid', + {% render 'image/image.liquid', file: item.image, alt: item.title, sizes: "(max-width: 640px) 50vw, 100vw", diff --git a/src/theme-grunn/includes/components/images/images.liquid b/src/theme-grunn/includes/components/images/images.liquid index 44481348..b7725451 100644 --- a/src/theme-grunn/includes/components/images/images.liquid +++ b/src/theme-grunn/includes/components/images/images.liquid @@ -55,7 +55,7 @@