getindiekit · paulrobertlloyd · Apr 12, 2024 · Apr 12, 2024 · Apr 12, 2024 · Apr 12, 2024
diff --git a/helpers/frontend/views/frontend-components.njk b/helpers/frontend/views/frontend-components.njk
@@ -29,6 +29,39 @@
   }]
 }) }}
 
+<h2><code>action-table</code></h2>
+
+{{ actionTable({
+  caption: "Dates and amounts",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Name"
+    },
+    {
+      text: "Age"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "Peter"
+      },
+      {
+        text: "10"
+      }
+    ],
+    [
+      {
+        text: "Paul"
+      },
+      {
+        text: "12"
+      }
+    ]
+  ]
+}) }}
+
 <h2><code>authorize</code></h2>
 
 {{ authorize({

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/endpoint-files/lib/controllers/form.js b/packages/endpoint-files/lib/controllers/form.js
@@ -1,3 +1,4 @@
+import path from "node:path";
 import { validationResult } from "express-validator";
 import { endpoint } from "../endpoint.js";
 
@@ -11,6 +12,9 @@ export const formController = {
 
     if (scope.includes("create") || scope.includes("media")) {
       return response.render("file-form", {
+        back: {
+          href: path.dirname(request.baseUrl + request.path),
+        },
         title: response.locals.__("files.upload.title"),
       });
     }

diff --git a/packages/endpoint-posts/includes/post-types/content-field.njk b/packages/endpoint-posts/includes/post-types/content-field.njk
@@ -8,7 +8,6 @@
     attributes: {
       editor: true,
       "editor-id": (properties.uid or ("new-" + postType)) + "-content",
-      "editor-height": "50vh" if field.required else "6rem",
       "editor-locale": application.locale,
       "editor-image-upload": "false" if postType == "note" or postType == "photo",
       "editor-status": "false" if not field.required

diff --git a/packages/endpoint-posts/includes/post-types/summary-field.njk b/packages/endpoint-posts/includes/post-types/summary-field.njk
@@ -8,7 +8,6 @@
     attributes: {
       editor: true,
       "editor-id": (properties.uid or ("new-" + postType)) + "-summary",
-      "editor-height": "60vh" if field.required else "2rem",
       "editor-locale": application.locale,
       "editor-status": "false",
       "editor-toolbar": "false"

diff --git a/packages/frontend/components/action-table/macro.njk b/packages/frontend/components/action-table/macro.njk
@@ -0,0 +1,3 @@
+{% macro actionTable(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/packages/frontend/components/action-table/styles.css b/packages/frontend/components/action-table/styles.css
@@ -0,0 +1,58 @@
+action-table,
+action-table-filters,
+action-table-no-results {
+  display: block;
+}
+
+action-table {
+  table {
+    inline-size: 100%;
+  }
+
+  & tbody tr {
+    &:hover {
+      background-color: var(--color-offset);
+    }
+  }
+
+  td,
+  th {
+    border-block-end: var(--border-width-thin) solid var(--color-outline);
+    padding-block: var(--space-m);
+    padding-inline-end: var(--space-l);
+    padding-inline-start: var(--space-xs);
+  }
+
+  & button {
+    background: none;
+  }
+
+  & th button {
+    display: flex;
+    gap: var(--space-2xs);
+    place-items: center;
+
+    &::after {
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M3 5 1.5 6.5 8 13l6.5-6.5L13 5l-5 5z"/></svg>');
+      background-repeat: no-repeat;
+      block-size: 1em;
+      content: "";
+      display: block;
+      inline-size: 1em;
+      opacity: 0.25;
+    }
+  }
+
+  & th[aria-sort$="ing"] button::after {
+    opacity: 1;
+  }
+
+  & th[aria-sort="descending"] button::after {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+
+  .s-flow {
+    --font-heading: var(--font-subhead);
+  }
+}
diff --git a/packages/frontend/components/action-table/template.njk b/packages/frontend/components/action-table/template.njk
@@ -0,0 +1,42 @@
+<action-table class="{{ classes("action-table", opts) }}" sort="{{ opts.sort }}"
+  {{- attributes(opts.attributes) }}>
+  <table class="action-table__table">
+{% if opts.caption %}
+    <caption class="action-table__caption">{{- opts.caption -}}</caption>
+{% endif %}
+{% if opts.head %}
+    <thead class="action-table__head">
+      <tr class="action-table__row">
+      {% for item in opts.head %}
+        <th scope="col" class="{{ classes("action-table__header", opts.head) }}"
+          {{- attributes(item.attributes) }}>
+          {{- item.text | safe -}}
+        </th>
+      {% endfor %}
+      </tr>
+    </thead>
+{% endif %}
+    <tbody class="action-table__body">
+{% for row in opts.rows %}
+    {% if row %}
+      <tr class="action-table__row">
+      {% for cell in row %}
+        {% if loop.first and opts.firstCellIsHeader %}
+        <th scope="row" class="{{ classes("action-table__header", cell) }}"
+          {{- attributes(cell.attributes) }}>
+          {{- cell.text | safe -}}
+        </th>
+        {% else %}
+        <td class="{{ classes("action-table__cell", cell) }}"
+          {{- attributes(cell.attributes) }}>
+          {{- cell.text | safe -}}
+        </td>
+        {% endif %}
+      {% endfor %}
+      </tr>
+    {% endif %}
+{% endfor %}
+    </tbody>
+  </table>
+{% if caller %}{{ caller() }}{%- endif %}
+</action-table>
diff --git a/packages/frontend/components/actions/styles.css b/packages/frontend/components/actions/styles.css
@@ -3,7 +3,7 @@
   --icon-margin: var(--space-2xs);
   display: flex;
   flex-wrap: wrap;
-  font: var(--font-caption);
+  font: var(--font-body);
   gap: var(--space-2xs) var(--space-l);
 }
 

diff --git a/packages/frontend/components/heading/styles.css b/packages/frontend/components/heading/styles.css
@@ -1,13 +1,7 @@
 .heading {
-  align-items: end;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: var(--space-s);
-
-  & .actions {
-    margin-block-end: var(--space-2xs);
-    margin-inline-start: auto;
-  }
 }
 
 .heading__photo {

diff --git a/packages/frontend/components/textarea/index.js b/packages/frontend/components/textarea/index.js
@@ -42,7 +42,6 @@ export const TextareaFieldComponent = class extends HTMLElement {
     }
 
     this.editorId = this.getAttribute("editor-id");
-    this.editorHeight = this.getAttribute("editor-height");
     this.editorImageUpload = this.getAttribute("editor-image-upload");
     this.editorLocale = this.getAttribute("editor-locale");
     this.editorStatus = this.getAttribute("editor-status");
@@ -93,7 +92,7 @@ export const TextareaFieldComponent = class extends HTMLElement {
       },
       element: this.$textarea,
       imageUploadFunction: this.uploadFile,
-      maxHeight: this.editorHeight,
+      minHeight: "6rem",
       previewClass: ["editor-preview", "s-flow"],
       status,
       // @ts-ignore

diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk
@@ -1,3 +1,4 @@
+{% from "action-table/macro.njk" import actionTable with context %}
 {% from "add-another/macro.njk" import addAnother with context %}
 {% from "back-link/macro.njk" import backLink with context %}
 {% from "badge/macro.njk" import badge with context %}

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@accessible-components/tag-input": "^0.2.0",
+    "@colinaut/action-table": "^2.4.14",
     "@indiekit/error": "^1.0.0-beta.12",
     "@indiekit/util": "^1.0.0-beta.10",
     "@rollup/plugin-commonjs": "^25.0.3",

diff --git a/packages/frontend/scripts/app.js b/packages/frontend/scripts/app.js
@@ -1,3 +1,5 @@
+import "@colinaut/action-table";
+
 import { AddAnotherComponent } from "../components/add-another/index.js";
 import { CheckboxesFieldComponent } from "../components/checkboxes/index.js";
 import { ErrorSummaryComponent } from "../components/error-summary/index.js";

diff --git a/packages/frontend/styles/app.css b/packages/frontend/styles/app.css
@@ -14,6 +14,7 @@
 @import url("./scopes/flow.css");
 
 /* Components */
+@import url("../components/action-table/styles.css");
 @import url("../components/actions/styles.css");
 @import url("../components/add-another/styles.css");
 @import url("../components/app/styles.css");

diff --git a/packages/frontend/styles/vendor/codemirror.css b/packages/frontend/styles/vendor/codemirror.css
@@ -24,6 +24,15 @@
     color: var(--color-token-comment);
   }
 
+  .cm-spell-error {
+    /* Safari doesn’t accept text-decoration shorthand */
+    text-decoration-color: var(--color-error);
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: 0.125em;
+    text-underline-offset: 0.25em;
+  }
+
   .cm-string {
     color: var(--color-token-string);
   }

diff --git a/packages/indiekit/lib/controllers/plugin.js b/packages/indiekit/lib/controllers/plugin.js
@@ -4,18 +4,24 @@ import { getPackageData } from "../utils.js";
 export const list = (request, response) => {
   const { application } = response.app.locals;
 
-  const plugins = application.installedPlugins.map((plugin) => {
+  const pluginRows = application.installedPlugins.map((plugin) => {
     const _package = getPackageData(plugin.filePath);
-    plugin.photo = {
-      srcOnError: "/assets/plug-in.svg",
-      attributes: { height: 96, width: 96 },
-      url: `/assets/${plugin.id}/icon.svg`,
-    };
-    plugin.title = plugin.name;
-    plugin.description = _package.description;
-    plugin.url = `/plugins/${plugin.id}`;
-
-    return plugin;
+
+    let name = `<h2><a href="/plugins/${plugin.id}">${plugin.name}</a></h2>`;
+
+    if (_package.description) {
+      name += `<p>${_package.description}</p>`;
+    }
+
+    return [
+      {
+        text: name,
+        classes: "s-flow",
+      },
+      {
+        text: _package.version,
+      },
+    ];
   });
 
   response.render("plugins/list", {
@@ -24,7 +30,7 @@ export const list = (request, response) => {
       text: response.locals.__("status.title"),
     },
     title: response.locals.__("status.application.installedPlugins"),
-    plugins,
+    pluginRows,
   });
 };
 

diff --git a/packages/indiekit/views/plugins/list.njk b/packages/indiekit/views/plugins/list.njk
@@ -1,8 +1,12 @@
 {% extends "document.njk" %}
 
 {% block content %}
-  {{ cardGrid({
-    cardSize: "100%",
-    items: plugins
+  {{ actionTable({
+    sort: "name",
+    head: [
+      { text: "Name" },
+      { text: "Version" }
+    ],
+    rows: pluginRows
   }) }}
 {% endblock %}