Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: backfill next readme with getGlobalStyles() and getTemplateData() #46

Merged
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This guide will walk you through setting up a headless WordPress app using SnapW
### Prerequisites

- **PHP**: v7.4+
- **WordPress**: v6.0+
- **WordPress**: v6.7+
- A **[Block Theme](https://wordpress.org/documentation/article/block-themes/)**

### Installation Steps
Expand Down
52 changes: 42 additions & 10 deletions packages/next/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,16 +167,16 @@ export default function ScriptModuleExample() {
<ScriptModule
src="https://example.com/main.js"
handle="example-main-script"
dependencies=[
{
importType: 'static',
connectedScriptModule: {
handle: '@module',
src: 'http://example.com/index.min.js'
}
}
]
/>
dependencies={[
{
importType: 'static',
connectedScriptModule: {
handle: '@module',
src: 'http://example.com/index.min.js'
}
}
]}
/>
</div>
);
}
Expand Down Expand Up @@ -207,6 +207,38 @@ export default function CustomFonts() {
}
```

### `getGlobalStyles()`

Global styles can be modified by passing the `getGlobalStyles` attribute to the [RootLayout](./src/root-layout/index.tsx) within the `src/app/layout.tsx` file of the frontend application.

`getGlobalStyles` takes an async callback function that returns an object containing global styles.

The default definition for `getGlobalStyles` function passed in `getGlobalStyles` attribute can be found in [@snapwp/query](../packages/query/README.md) package.

Type Definition of `getGlobalStyles`:

```typescript
type getGlobalStyles = () => Promise< GlobalHeadProps >;
```

Type definition of `GlobalHeadProps` can be found in [@snapwp/core](../packages/core/README.md) package.

### `getTemplateData()`

Template data can be modified by passing `getTemplateData` attribute to the [TemplateRenderer](./src/template-renderer/index.tsx) within `src/app/[[...path]]/page.tsx` file of the frontend application.

`getTemplateData` takes an async callback to get template styles and content.

The default definition for `getTemplateData` function passed in `getTemplateData` attribute can be found in [@snapwp/query](../packages/query/README.md) package.

Type Definition of `getTemplateData`:

```typescript
type getTemplateData = ( uri: string ) => Promise< TemplateData >;
```

Type definition of `TemplateData` can be found in [@snapwp/core](../packages/core/README.md) package.

## Contributing

This package is part of [SnapWP's monorepo](https://github.com/rtCamp/snapwp) and is actively maintained by [rtCamp](https://rtcamp.com/). Packages are published to [npm](https://www.npmjs.com/) from the `packages` directory, and can be used standalone in the headless WordPress ecosystem or as part of SnapWP's framework.
Expand Down