feat(indiekit): shortcut icons

paulrobertlloyd · paulrobertlloyd · commit 522963416d76 · 2024-04-14T17:47:50.000+01:00
diff --git a/docs/plugins/api/add-endpoint.md b/docs/plugins/api/add-endpoint.md
@@ -76,6 +76,9 @@ Used to register the plug-in. Accepts an `Indiekit` instance to allow its modifi
 `name`
 : A string representing the text shown in the shortcut item. **Required**.
 
+`iconName`
+: A string representing the name of the icon to use for the shortcut item.
+
 `requiresDatabase`
 : A boolean for whether the item should only be displayed if a database has been configured.
 
diff --git a/packages/indiekit/lib/controllers/assets.js b/packages/indiekit/lib/controllers/assets.js
@@ -1,4 +1,4 @@
-import { appIcon, scripts, styles } from "@indiekit/frontend";
+import { appIcon, shortcutIcon, scripts, styles } from "@indiekit/frontend";
 
 export const getAppIcon = async (request, response, next) => {
   const { purpose, size } = request.params;
@@ -12,6 +12,17 @@ export const getAppIcon = async (request, response, next) => {
   }
 };
 
+export const getShortcutIcon = async (request, response, next) => {
+  const { name, size } = request.params;
+
+  try {
+    const png = await shortcutIcon(size, name);
+    return response.type("image/png").send(png).end();
+  } catch {
+    next();
+  }
+};
+
 export const getScripts = async (request, response) => {
   const js = await scripts();
 
diff --git a/packages/indiekit/lib/routes.js b/packages/indiekit/lib/routes.js
@@ -42,6 +42,10 @@ export const routes = (indiekitConfig) => {
     "/assets/app-icon-:size-:purpose.png",
     assetsController.getAppIcon,
   );
+  router.get(
+    "/assets/shortcut-icon-:size-:name.png",
+    assetsController.getShortcutIcon,
+  );
 
   // Plug-in assets
   for (const plugin of application.installedPlugins) {
diff --git a/packages/indiekit/lib/shortcuts.js b/packages/indiekit/lib/shortcuts.js
@@ -20,6 +20,18 @@ export const getShortcuts = (application, response) => {
   for (const item of shortcuts) {
     // Translate text strings
     item.name = response.locals.__(item.name);
+
+    // Add shortcut icon
+    if (item.iconName) {
+      item.icons = [
+        {
+          src: `/assets/shortcut-icon-96-${item.iconName}.png`,
+          sizes: "96x96",
+        },
+      ];
+      delete item.iconName;
+    }
+
     // Remove database requirement check
     delete item.requiresDatabase;
   }
diff --git a/packages/indiekit/test/integration/200-shortcut-icon.js b/packages/indiekit/test/integration/200-shortcut-icon.js
@@ -0,0 +1,20 @@
+import { strict as assert } from "node:assert";
+import { after, describe, it } from "node:test";
+import supertest from "supertest";
+import { testServer } from "@indiekit-test/server";
+
+const server = await testServer();
+const request = supertest.agent(server);
+
+describe("indiekit GET /assets/shortcut-icon-96-tick.png", () => {
+  it("Returns JavaScript", async () => {
+    const result = await request.get("/assets/shortcut-icon-96-tick.png");
+
+    assert.equal(result.status, 200);
+    assert.equal(result.type, "image/png");
+  });
+
+  after(() => {
+    server.close(() => process.exit(0));
+  });
+});
