Improve README

This commit is contained in:
srosset81
2026-07-27 16:55:11 +02:00
parent 85a3c4b771
commit 3d3a69d3f6
2 changed files with 18 additions and 14 deletions
+11 -11
View File
@@ -1,22 +1,22 @@
# Refine providers for NextGraph # Refine providers for NextGraph
Data, auth and live providers that can be used in any Refine application Data, auth and live providers that can be used in any [Refine](https://refine.dev/core/) application.
## Usage ## Usage
> For a quick overview, have a look at our [example app](./examples/antd-app/). > For a quick overview, have a look at our [example app](./examples/antd-app/).
Refine relies on the concept of "resources", which are data types, to manage your application in a structured way. On the other side, NextGraph identifies data types using [ShEx shapes](https://shex.io/) which are transformed into "shape types" using [its own tool](https://docs.nextgraph.org/en/reference/shex-orm/). So naturally our data provider needs to receive a list of shape types in order to identify resources.
### 1. Define your shapes ### 1. Define your shapes
Refine relies on the concept of "resources", which are data types, to manage your application in a structured way. NextGraph identifies data types using ShEx shapes which are transformed into "shape types" using [its own tool](https://docs.nextgraph.org/en/reference/shex-orm/). Create a `/shapes` directory and, within it, two subdirectories: `/shex` and `/orm`
Create a `/shapes` directory and, within it, create two subdirectories: `/shex` and `/orm`
Within the `/shapes/shex` directory, create a ShEx file with the shape of the data you want to handle. Within the `/shapes/shex` directory, create a ShEx file with the shape of the data you want to handle.
Here's an example of a shape for an ActivityStreams Note: Here's an example of a shape for an ActivityStreams `Note`, saved under the `note.shex` filename:
````shex ```shex
PREFIX as: <https://www.w3.org/ns/activitystreams#> PREFIX as: <https://www.w3.org/ns/activitystreams#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
@@ -25,7 +25,7 @@ as:Note {
as:title xsd:string ; as:title xsd:string ;
as:content xsd:string ? ; as:content xsd:string ? ;
} }
```` ```
### 2. Pass the shape types to the data provider ### 2. Pass the shape types to the data provider
@@ -35,7 +35,7 @@ Go to the `/shapes` directory and run the following command:
npx rdf-orm build --input ./shex --output ./orm npx rdf-orm build --input ./shex --output ./orm
``` ```
This will generate three files in the `/orm` subdirectory: If you created a `note.shex` file, this will generate three files in the `/orm` subdirectory:
- `note.schema.ts` - `note.schema.ts`
- `note.shapeTypes.ts` - `note.shapeTypes.ts`
@@ -56,7 +56,7 @@ export default shapeTypes;
### 3. Add the providers to Refine ### 3. Add the providers to Refine
```ts ```tsx
import { authProvider, dataProvider, liveProvider } from "@ng-org/refine-providers"; import { authProvider, dataProvider, liveProvider } from "@ng-org/refine-providers";
import shapeTypes from "./shapes/shapeTypes"; import shapeTypes from "./shapes/shapeTypes";
@@ -83,7 +83,7 @@ For `useForm`, `useTable`, `useShow`, you can pass the `Note` generated by NextG
Here's an example of a simple list view: Here's an example of a simple list view:
```ts ```tsx
import { List, useTable } from "@refinedev/antd"; import { List, useTable } from "@refinedev/antd";
import { Table } from "antd"; import { Table } from "antd";
import { Note } from "./shapes/orm/notes.typings"; import { Note } from "./shapes/orm/notes.typings";
@@ -104,7 +104,7 @@ export const PostList = () => {
## Commands ## Commands
``` ```bash
pnpm build pnpm build
pnpm watch pnpm watch
``` ```
+7 -3
View File
@@ -1,10 +1,14 @@
## Simple app for NextGraph ## Simple Ant Design app for NextGraph
A simple app that use Refine providers compatible with NextGraph A simple app that use [Refine](https://refine.dev/core/) providers compatible with NextGraph and the [Ant Design](https://ant.design/) design system.
## Quick start ## Quick start
``` Run the following commands:
```bash
pnpm install pnpm install
pnpm run dev pnpm run dev
``` ```
You'll need to create a wallet on [NextGraph.eu](https://nextgraph.eu) to store your data.