Featured field

docs/api/add-post-type.md

@@ -143,6 +143,7 @@ Indiekit provides automatic support for the following field types:
 
 - `category`
 - `content`
+- `featured`
 - `geo`
 - `location`
 - `name`

indiekit.config.js

@@ -41,6 +41,20 @@ const config = {
     },
     enrichPostData: true,
     postTypes: {
+      article: {
+        name: "Article",
+        fields: {
+          name: { required: true },
+          summary: {},
+          featured: {},
+          content: { required: true },
+          category: {},
+          geo: {},
+          "post-status": {},
+          published: { required: true },
+          visibility: {},
+        },
+      },
       like: {
         name: "Favourite",
         fields: {

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 %}

packages/endpoint-posts/includes/post-types/featured.njk

@@ -0,0 +1,8 @@
+{% set html %}
+<figure>
+  <img src="{{ property[0].url | url(publication.me) }}" alt="{{ property[0].alt }}">
+</figure>
+{% endset -%}
+{{- prose({
+  html: html
+}) if property }}

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 },

packages/endpoint-posts/locales/de.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Geben Sie einige Inhalte ein"
       },
+      "featured-alt": {
+        "empty": "Geben Sie eine Beschreibung dieses Bildes ein"
+      },
       "geo": {
         "invalid": "Geben Sie gültige Koordinaten ein"
       },
@@ -43,6 +46,10 @@
         "label": "Inhalt"
       },
       "continue": "Fortsetzen",
+      "featured": {
+        "alt": "Barrierefreie Beschreibung",
+        "label": "Ausgewähltes Bild"
+      },
       "geo": {
         "hint": "Breitengrad und Längengrad, zum Beispiel %s",
         "label": "Koordinaten des Standorts"

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"

packages/endpoint-posts/locales/es-419.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Introducir algún contenido"
       },
+      "featured-alt": {
+        "empty": "Introduzca una descripción de esta imagen"
+      },
       "geo": {
         "invalid": "Introduce coordenadas válidas"
       },
@@ -43,6 +46,10 @@
         "label": "Contenido"
       },
       "continue": "Continuar",
+      "featured": {
+        "alt": "Descripción accesible",
+        "label": "Imagen destacada"
+      },
       "geo": {
         "hint": "Latitud y longitud, por ejemplo %s",
         "label": "Coordenadas de ubicación"

packages/endpoint-posts/locales/es.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Introducir algún contenido"
       },
+      "featured-alt": {
+        "empty": "Introduzca una descripción de esta imagen"
+      },
       "geo": {
         "invalid": "Introduce coordenadas válidas"
       },
@@ -43,6 +46,10 @@
         "label": "Contenido"
       },
       "continue": "Continuar",
+      "featured": {
+        "alt": "Descripción accesible",
+        "label": "Imagen destacada"
+      },
       "geo": {
         "hint": "Latitud y longitud, por ejemplo %s",
         "label": "Coordenadas de ubicación"

packages/endpoint-posts/locales/fr.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Saisir du contenu"
       },
+      "featured-alt": {
+        "empty": "Entrez une description de cette image"
+      },
       "geo": {
         "invalid": "Saisir des coordonnées valides"
       },
@@ -43,6 +46,10 @@
         "label": "Contenu"
       },
       "continue": "Continuer",
+      "featured": {
+        "alt": "Description accessible",
+        "label": "Image en vedette"
+      },
       "geo": {
         "hint": "Latitude et longitude, par exemple %s",
         "label": "Coordonnées de localisation"

packages/endpoint-posts/locales/hi.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "कुछ सामग्री दर्ज करें"
       },
+      "featured-alt": {
+        "empty": "इस छवि का विवरण दर्ज करें"
+      },
       "geo": {
         "invalid": "मान्य निर्देशांक दर्ज करें"
       },
@@ -43,6 +46,10 @@
         "label": "कॉन्टेंट"
       },
       "continue": "जारी रखें",
+      "featured": {
+        "alt": "सुलभ वर्णन",
+        "label": "विशेष रुप से प्रदर्शित छवि"
+      },
       "geo": {
         "hint": "उदाहरण के लिए, अक्षांश और देशांतर %s",
         "label": "स्थान निर्देशांक"

packages/endpoint-posts/locales/id.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Masukkan beberapa konten"
       },
+      "featured-alt": {
+        "empty": "Masukkan deskripsi gambar ini"
+      },
       "geo": {
         "invalid": "Masukkan koordinat yang valid"
       },
@@ -43,6 +46,10 @@
         "label": "Konten"
       },
       "continue": "Lanjutkan",
+      "featured": {
+        "alt": "Deskripsi yang dapat diakses",
+        "label": "Gambar unggulan"
+      },
       "geo": {
         "hint": "Lintang dan bujur, misalnya %s",
         "label": "Koordinat lokasi"

packages/endpoint-posts/locales/nl.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Voer wat inhoud in"
       },
+      "featured-alt": {
+        "empty": "Voer een beschrijving van deze afbeelding in"
+      },
       "geo": {
         "invalid": "Voer geldige coördinaten in"
       },
@@ -43,6 +46,10 @@
         "label": "Inhoud"
       },
       "continue": "Doorgaan",
+      "featured": {
+        "alt": "Toegankelijke beschrijving",
+        "label": "Uitgelichte afbeelding"
+      },
       "geo": {
         "hint": "Lengte- en breedtegraad, bijvoorbeeld %s",
         "label": "Locatiecoördinaten"

packages/endpoint-posts/locales/pl.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Wprowadź jakąś zawartość"
       },
+      "featured-alt": {
+        "empty": "Wprowadź opis tego obrazu"
+      },
       "geo": {
         "invalid": "Wprowadź poprawne współrzędne"
       },
@@ -43,6 +46,10 @@
         "label": "Zawartość"
       },
       "continue": "Kontynuuj",
+      "featured": {
+        "alt": "Dostępny opis",
+        "label": "Wyróżniony obraz"
+      },
       "geo": {
         "hint": "Szerokość i długość geograficzna, na przykład %s",
         "label": "Współrzędne lokalizacji"

packages/endpoint-posts/locales/pt.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Insira algum conteúdo"
       },
+      "featured-alt": {
+        "empty": "Insira uma descrição desta imagem"
+      },
       "geo": {
         "invalid": "Insira coordenadas válidas"
       },
@@ -43,6 +46,10 @@
         "label": "Conteúdo"
       },
       "continue": "Continuar",
+      "featured": {
+        "alt": "Descrição acessível",
+        "label": "Imagem em destaque"
+      },
       "geo": {
         "hint": "Latitude e longitude, por exemplo %s",
         "label": "Coordenadas de localização"

packages/endpoint-posts/locales/sr.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Unesite neki sadržaj"
       },
+      "featured-alt": {
+        "empty": "Unesite opis ove slike"
+      },
       "geo": {
         "invalid": "Unesite važeće koordinate"
       },
@@ -43,6 +46,10 @@
         "label": "Sadržaj"
       },
       "continue": "Nastavi",
+      "featured": {
+        "alt": "Pristupačan opis",
+        "label": "Istaknuta slika"
+      },
       "geo": {
         "hint": "Geografska širina i dužina, na primer %s",
         "label": "Koordinate lokacije"

packages/endpoint-posts/locales/sv.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "Ange innehåll"
       },
+      "featured-alt": {
+        "empty": "Ange en beskrivning av den här bilden"
+      },
       "geo": {
         "invalid": "Ange giltiga koordinater"
       },
@@ -43,6 +46,10 @@
         "label": "Innehåll"
       },
       "continue": "Fortsätt",
+      "featured": {
+        "alt": "Tillgänglig beskrivning",
+        "label": "Utvald bild"
+      },
       "geo": {
         "hint": "Latitud och longitud, till exempel %s",
         "label": "Platskoordinater"

packages/endpoint-posts/locales/zh-Hans-CN.json

@@ -14,6 +14,9 @@
       "content": {
         "empty": "输入一些内容"
       },
+      "featured-alt": {
+        "empty": "输入此图片的描述"
+      },
       "geo": {
         "invalid": "输入有效坐标"
       },
@@ -43,6 +46,10 @@
         "label": "内容"
       },
       "continue": "继续",
+      "featured": {
+        "alt": "无障碍描述",
+        "label": "特色图片"
+      },
       "geo": {
         "hint": "纬度和经度，例如 %s",
         "label": "位置坐标"