Pagine admin e widget React

I plugin nativi possono estendere il pannello admin con pagine React personalizzate, widget dashboard, widget di campo e colonne di lista contenuti — i plugin sandboxed descrivono la loro UI come Block Kit, poiché caricare JavaScript del plugin nell’admin romperebbe l’isolamento del sandbox.

Se il tuo plugin necessita solo di un modulo di impostazioni, il modulo auto-generato admin.settingsSchema (vedi Il tuo primo plugin nativo) copre la maggior parte dei casi senza scrivere React.

Punto di ingresso admin

import { SEOSettingsPage } from "./components/SEOSettingsPage";
import { SEODashboardWidget } from "./components/SEODashboardWidget";

export const widgets = { "seo-overview": SEODashboardWidget };
export const pages = { "/settings": SEOSettingsPage };

{ "exports": { ".": "./dist/index.js", "./admin": "./dist/admin.js" } }

definePlugin({
	id: "seo",
	version: "1.0.0",
	admin: {
		entry: "@my-org/plugin-seo/admin",
		pages: [{ path: "/settings", label: "SEO Settings", icon: "settings" }],
		widgets: [{ id: "seo-overview", title: "SEO Overview", size: "half" }],
	},
});

Pagine admin

Le pagine admin sono componenti React montati sotto /_emdash/admin/plugins/<plugin-id>/<percorso>. Dichiara le label in inglese — l’admin le passa attraverso l’istanza condivisa Lingui per la localizzazione automatica.

Hook API del plugin

usePluginAPI() chiama le rotte del tuo plugin con il prefisso dell’id del plugin e l’header CSRF X-EmDash-Request: 1 aggiunto automaticamente.

Widget dashboard

Pannelli dell’editor di contenuto

Un plugin React affidabile può aggiungere sezioni alla barra laterale delle impostazioni per le entry di contenuto salvate.

import type { ContentEditorPanelContext } from "@emdash-cms/admin";

function ContentInsights({ entry, locale }: ContentEditorPanelContext) {
	return <p>Analisi per {entry.slug} in {locale ?? "il locale predefinito"}</p>;
}

export const contentEditorPanels = [
	{ id: "content-insights", title: "Approfondimenti contenuto", component: ContentInsights, collections: ["posts", "pages"], minRole: 40, order: 10 },
];

Colonne di lista contenuti

I plugin React affidabili possono aggiungere colonne di sola lettura alle liste di collezioni di contenuto attive.

UI impostazioni auto-generata

admin: {
	settingsSchema: {
		apiKey: { type: "secret", label: "API Key" },
		enabled: { type: "boolean", label: "Enabled", default: true },
	},
},

Configurazione build

export default {
	entry: { index: "src/index.ts", admin: "src/admin.tsx" },
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

export default {
	entry: ["src/index.ts", "src/admin.tsx"],
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

Abilitare/disabilitare plugin

Quando un plugin è disabilitato: i link della barra laterale sono nascosti, i widget non sono renderizzati, le colonne di lista non sono renderizzate, le pagine admin restituiscono 404, gli hook backend continuano a eseguire.

const enabled = await ctx.kv.get<boolean>("_emdash:enabled");