Overview

The goal of the package is to create a working CMS using TinaCMS and Directus. It provides a component that wraps a React application, optimized for NextJS, and allows for easy page editing functionality through React Hooks. The package currently offers authentication management, dynamic form field addition based on configuration, and Directus integration. The setup process is demonstrated in a NextJS application.

Features

• Authentication management: The package includes functionality for managing authentication within the CMS.
• Dynamic form fields: It allows for the dynamic addition of form fields based on configuration.
• Directus integration: The package seamlessly integrates with Directus, providing access to its features and resources.

Installation

To install and set up the package in a NextJS application, follow these steps:

1. Add all the required peer dependencies.
2. Create a wrapper component in the pages/_app.js file for NextJS applications. Use dynamic imports to import the Tina component only when needed.
3. Set up the Tina component by providing the Directus API URL and project information.
4. Export a preview prop from the getStaticProps() function of the page you want to enable preview mode for.
5. Optionally, use the PreviewProvider component to access the usePreview() hook inside nested components.
6. Validate the token for the custom login page using the Directus API during the preview mode lambda function.
7. Set up the page by importing the preview component dynamically and checking the value of the usePreview hook to determine if it’s in preview mode.
8. In the getStaticProps method, create a Directus Client for the server-side code and manipulate it based on the enabled preview mode.
9. Access the defined variables in the props object within the Home function or any other relevant component.
10. Implement the necessary logic for interacting with TinaCMS within the PreviewComponent, using the provided useDirectusFields hook.

Summary

The package aims to simplify the creation of a CMS using TinaCMS and Directus. It provides authentication management, dynamic form field addition, and Directus integration. The setup process involves adding the required dependencies, setting up a wrapper component, enabling preview mode, and utilizing the provided hooks and components for interaction with TinaCMS.