From 3d3a69d3f6cedf2ed42405a9334655956c8b4e05 Mon Sep 17 00:00:00 2001 From: srosset81 Date: Mon, 27 Jul 2026 16:55:11 +0200 Subject: [PATCH] Improve README --- README.md | 22 +++++++++++----------- examples/antd-app/README.md | 10 +++++++--- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 93accfb..ede28d4 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,22 @@ # 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 > 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 -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, create two subdirectories: `/shex` and `/orm` +Create a `/shapes` directory and, within it, two subdirectories: `/shex` and `/orm` 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: PREFIX xsd: @@ -25,7 +25,7 @@ as:Note { as:title xsd:string ; as:content xsd:string ? ; } -```` +``` ### 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 ``` -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.shapeTypes.ts` @@ -56,7 +56,7 @@ export default shapeTypes; ### 3. Add the providers to Refine -```ts +```tsx import { authProvider, dataProvider, liveProvider } from "@ng-org/refine-providers"; 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: -```ts +```tsx import { List, useTable } from "@refinedev/antd"; import { Table } from "antd"; import { Note } from "./shapes/orm/notes.typings"; @@ -104,7 +104,7 @@ export const PostList = () => { ## Commands -``` +```bash pnpm build pnpm watch ``` \ No newline at end of file diff --git a/examples/antd-app/README.md b/examples/antd-app/README.md index a276b6b..7371478 100644 --- a/examples/antd-app/README.md +++ b/examples/antd-app/README.md @@ -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 -``` +Run the following commands: + +```bash pnpm install pnpm run dev ``` + +You'll need to create a wallet on [NextGraph.eu](https://nextgraph.eu) to store your data.