Slots · Hodi SDK

A plugin doesn't show things just anywhere: it fills slots, precise places in Hodi made for plugins. Each card below bears the name of a slot, as it is written in the code, and leads to its page: where the slot is in Hodi, an example and what Hodi gives the component.

settingsPageA card of the plugin in Server › Plugins, under its settings, for what a setting alone can't do.pageA page of the plugin in Settings, for what each profile of the household sets or looks up itself.serverSectionsA group of sections in the Server space, for what only the server admin should see and manage.overviewCardsA card of the plugin on the server's dashboard, with a number or a chart over the chosen period.readerActionA button under an open article, next to Read the original, so the plugin can act on that article.signInExtrasA button or a link of the plugin under the Sign in form, such as Create my household.afterSignInA step of the plugin right after signing in, before entering the app, such as Which household?.whoIsReadingFooterA button of the plugin next to Manage profiles, under the profiles of Who's in?.ageConsentA text of the plugin after the I'm at least 13 box, such as and I accept the terms.feedsFeeds of articles the plugin provides, which a household follows like any other source.setupStepsSteps of the plugin in Hodi's setup, for what it must know from the very first start.accountRowsRows of the plugin at the end of the Your account card, in Settings › Account and data.avatarMenuEntries of the plugin in the avatar's menu, such as Switch household.

What a slot is

Hodi keeps control of its own screens. A plugin can't change a page of Hodi, nor add a button wherever it likes. Instead, Hodi provides slots: an entry in Settings, a card on the server's dashboard, a button under an article…

For each slot, the plugin gives a React component. Hodi shows this component in the right place, at the right time, and only to the right people.

Declaring a slot

The web part calls definePlugin() once, in web/index.tsx. definePlugin() receives an object: each key of this object is the name of a slot, and the key's value is what the plugin shows in this slot.

web/index.tsx

import { definePlugin } from 'hodi:sdk'

definePlugin({
  settingsPage: HelloCard,
  readerAction: ReportButton
})

In this example, the plugin fills two slots:

settingsPage: the HelloCard card, on the plugin's page in Server › Plugins;
readerAction: the ReportButton button, under each open article.

A slot the plugin doesn't give stays empty. If a plugin's component crashes, Hodi removes this component, and the rest of the page keeps working.