feat(endpoint-posts): featured field

getindiekit · Dec 2, 2024 · 6fcbdb5 · 6fcbdb5
1 parent 9f53c92
commit 6fcbdb5
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/packages/endpoint-posts/includes/post-types/featured-field.njk b/packages/endpoint-posts/includes/post-types/featured-field.njk
@@ -0,0 +1,30 @@
+{% call fieldset({
+  classes: "fieldset--group",
+  legend: __("posts.form.featured.label"),
+  optional: not field.required
+}) %}
+  {{ fileInput({
+    field: {
+      attributes: {
+        endpoint: application.mediaEndpoint
+      }
+    },
+    name: "featured[url]",
+    type: "url",
+    value: fieldData("featured.url").value,
+    label: __("posts.form.media.label"),
+    accept: "image/*",
+    attributes: {
+      placeholder: "https://"
+    },
+    errorMessage: fieldData("featured.url").errorMessage
+  }) | indent(2) }}
+
+  {{ textarea({
+    name: "featured[alt]",
+    value: fieldData("featured.alt").value,
+    label: __("posts.form.featured.alt"),
+    rows: 1,
+    errorMessage: fieldData("featured.alt").errorMessage
+  }) | indent(2) }}
+{% endcall %}
diff --git a/packages/endpoint-posts/includes/post-types/featured.njk b/packages/endpoint-posts/includes/post-types/featured.njk
@@ -0,0 +1,8 @@
+{% set html %}
+<figure>
+  <img src="{{ item.url | url(publication.me) }}" alt="{{ item.alt }}">
+</figure>
+{% endset -%}
+{{- prose({
+  html: html
+}) if property }}
diff --git a/packages/endpoint-posts/index.js b/packages/endpoint-posts/index.js
@@ -72,6 +72,18 @@ export default class PostsEndpoint {
         exists: { if: (value, { req }) => isRequired(req, "content") },
         notEmpty: true,
       },
+      "featured.url": {
+        errorMessage: (value, { req }) =>
+          req.__(`posts.error.media.empty`, "/photos/image.jpg"),
+        exists: { if: (value, { req }) => isRequired(req, "featured") },
+        notEmpty: true,
+      },
+      "featured.alt": {
+        errorMessage: (value, { req }) =>
+          req.__(`posts.error.featured-alt.empty`),
+        exists: { if: (value, { req }) => req.body?.featured.url },
+        notEmpty: true,
+      },
       geo: {
         errorMessage: (value, { req }) => req.__(`posts.error.geo.invalid`),
         exists: { if: (value, { req }) => req.body?.geo },

diff --git a/packages/endpoint-posts/locales/en.json b/packages/endpoint-posts/locales/en.json
@@ -4,6 +4,9 @@
       "content": {
         "empty": "Enter some content"
       },
+      "featured-alt": {
+        "empty": "Enter a description of this image"
+      },
       "geo": {
         "invalid": "Enter valid coordinates"
       },
@@ -68,6 +71,10 @@
       "content": {
         "label": "Content"
       },
+      "featured": {
+        "label": "Featured image",
+        "alt": "Accessible description"
+      },
       "geo": {
         "label": "Location coordinates",
         "hint": "Latitude and longitude, for example %s"