@measured/puck 0.3.1 → 0.3.2

package/README.md

@@ -7,13 +7,14 @@ The self-hosted, drag and drop editor for React.
 - ✍️ **Inline editing**: Author content directly via puck for convenience
 - ⭐️ **No vendor lock-in**: Self-host or integrate with your existing application
 
-![puck](https://github.com/measuredco/puck/assets/985961/10257000-ece7-4728-9e71-6204d2f1540e)
-
 [See demo](https://puck-demo-six.vercel.app/custom/edit)
 
 ## Example
 
+Render the editor:
+
 ```jsx
+// Editor.jsx
 import { Puck } from "puck";
 
 // Create puck component config
@@ -31,20 +32,25 @@ const config = {
 };
 
 // Describe the initial data
-const data = {
-  content: [
-    {
-      type: "HeadingBlock",
-      props: {
-        title: "Home Page",
-      },
-    },
-  ],
-};
+const initialData = {};
+
+// Save the data to your database
+const save = (data) => {};
+
+// Render Puck editor
+export function Editor() {
+  return <Puck config={config} data={data} onPublish={save} />;
+}
+```
+
+Render the page:
+
+```jsx
+// Page.jsx
+import { Render } from "puck";
 
-// Render Puck
 export function Page() {
-  return <Puck config={config} data={data} />;
+  return <Render config={config} data={data} />;
 }
 ```
 
@@ -80,8 +86,6 @@ Puck can be configured to work with plugins. Plugins can extend the functionalit
 
 The plugin API follows a React paradigm. Each plugin passed to the Puck editor can provide three functions:
 
-#### `Plugin`
-
 - `renderPage` (`Component`): Render the root node of the preview content
 - `renderPageFields` (`Component`): Render the page fields
 - `renderFields` (`Component`): Render the fields for the currently selected component
@@ -106,6 +110,24 @@ const myPlugin = {
 
 ## Reference
 
+### `<Puck>`
+
+The `<Puck>` component renders the Puck editor.
+
+- **config** (`Config`): Puck component configuration
+- **data** (`Data`): Initial data to render
+- **onChange** (`(Data) => void` [optional]): Callback that triggers when the user makes a change
+- **onPublish** (`(Data) => void` [optional]): Callback that triggers when the user hits the "Publish" button
+- **renderHeader** (`Component` [optional]): Render function for overriding the Puck header component
+- **plugins** (`Plugin[]` [optional]): Array of plugins that can be used to enhance Puck
+
+### `<Render>`
+
+The `<Render>` component renders a user-facing page using Puck data.
+
+- **config** (`Config`): Puck component configuration
+- **data** (`Data`): Data to render
+
 ### `Config`
 
 The `Config` object describes which components Puck should render, how they should render and which inputs are available to them.
@@ -134,6 +156,8 @@ A `Field` represents a user input field shown in the Puck interface.
 - **options** (`object[]`): array of items to render for select-type inputs
   - **label** (`string`)
   - **value** (`string`)
+- **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
+- **adaptorParams** (`object`): Paramaters passed to the adaptor
 
 ### `Data`
 
@@ -147,6 +171,23 @@ The `Data` object stores the state of a page.
   - **props** (object):
     - **[prop]** (string): User defined data from component fields
 
+### `Adaptor`
+
+An `Adaptor` can be used to load content from an external content repository, like Strapi.js.
+
+- **name** (`string`): The human-readable name of the adaptor
+- **fetchList** (`(adaptorParams: object) => object`): Fetch a list of content and return an array
+
+> NB Using an adaptor on the reserved field name `_data` will spread the resulting data over your object, and lock the overridden fields.
+
+### `Plugin`
+
+Plugins that can be used to enhance Puck.
+
+- **renderPage** (`Component`): Render the root node of the preview content
+- **renderPageFields** (`Component`): Render the page fields
+- **renderFields** (`Component`): Render the fields for the currently selected component
+
 ## License
 
 MIT © [Measured Co.](https://github.com/measuredco)

package/dist/index.js

@@ -1036,7 +1036,8 @@ function Puck({
                       {
                         style: {
                           textAlign: "center",
-                          color: "var(--puck-color-grey-6)"
+                          color: "var(--puck-color-grey-6)",
+                          fontFamily: "var(--puck-font-stack)"
                         },
                         children: "Add items to your page"
                       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",