first guides commit

.editorconfig

@@ -11,3 +11,6 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 120
+
+[*.md]
+trim_trailing_whitespace = false

docs/widgets/authoring/api.md

@@ -0,0 +1,50 @@
+---
+title: API Guide
+description: How to fetch data from an API in Homepage widgets.
+---
+
+Homepage provides the `useWidgetAPI` hook to help you fetch data from an API. This hook insures that the data is fetched using a proxy, and is critical for security.
+
+Here is an example of how the `useWidgetAPI` hook looks:
+
+```js title="Fetch data from the stats endpoint"
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+ const { data, error } = useWidgetAPI(widget, "stats");
+}
+```
+
+## `useWidgetAPI`
+
+`useWidgetAPI` takes three possible arguments:
+
+- `widget`: The widget metadata object.
+- `endpoint`: The name of the endpoint to fetch data from.
+- `params`: An optional object containing query parameters to pass to the API.
+
+### `widget`
+
+The `widget` argument is the metadata object for the widget. It contains information about the API endpoint, proxy handler, and mappings. This object is used by the `useWidgetAPI` hook to fetch data from the API. This is generally passed in as a prop from the parent component.
+
+### `endpoint`
+
+The `endpoint` argument is the name of the endpoint to fetch data from. This is [defined in the widget metadata object](widget.md#endpoint). The `useWidgetAPI` hook uses this argument to determine which endpoint to fetch data from.
+
+If no endpoint is provided, the `useWidgetAPI` hook will call the API endpoint defined in the widget metadata object directly.
+
+### `params`
+
+The `params` argument is an optional object containing query parameters to pass to the API. This is useful for filtering data or passing additional information to the API. This object is passed directly to the API endpoint as query parameters.
+
+Here is an example of how to use the `params` argument:
+
+```js title="Fetch data from the stats endpoint with query parameters"
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+ const { data, error } = useWidgetAPI(widget, "stats", { start: "2021-01-01", end: "2021-12-31" });
+}
+```
+
+The `params` must be [whitelisted in the widget metadata object](widget.md#params). This is done to prevent arbitrary query parameters from being passed to the API.

docs/widgets/authoring/component.md

@@ -0,0 +1,65 @@
+---
+title: Component Guide
+description: How to create and configure Homepage widget components.
+---
+
+Homepage widgets are built using React components. These components are responsible for fetching data from the API and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.
+
+## A Basic Widget Component
+
+Here is an example of a basic widget component:
+
+```js
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+ const { t } = useTranslation();
+ const { widget } = service;
+ const { data, error } = useWidgetAPI(widget, "info");
+
+ if (error) {
+ return <Container service={service} error={error} />;
+ }
+
+ if (!data) {
+ return (
+ <Container service={service}>
+ <Block label="yourwidget.key1" />
+ <Block label="yourwidget.key2" />
+ <Block label="yourwidget.key3" />
+ </Container>
+ );
+ }
+
+ return (
+ <Container service={service}>
+ <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+ <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
+ <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
+ </Container>
+ );
+}
+```
+
+### Breakdown
+
+We'll cover two sections of the widget component: hooks and components.
+
+#### Hooks
+
+**`useTranslation`**
+
+This hook is used to translate text and numerical content in widgets. Homepage provides a set of helpers to help you localize your widgets. You can learn more about translations in the [Translations Guide](translations.md).
+
+**`useWidgetAPI`**
+
+This hook is used to fetch data from the API. We cover this hook in more detail in the [API Guide](api.md).
+
+#### Components
+
+- `<Container>`: This component is a wrapper for the widget. It provides a consistent layout for all widgets.
+- `<Block>`: This component is used to display a key-value pair. It takes a label and value as props.