Skip to content

Commit 0f8ad41

Browse files
aeksandlaaeksandla
authored
chore: add quick start guide (#1175)
1 parent 6c1f339 commit 0f8ad41

File tree

2 files changed

+196
-20
lines changed

2 files changed

+196
-20
lines changed

‎README-ru.md

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,112 @@
1414
npm install @gravity-ui/page-constructor
1515
```
1616

17-
## Необходимые зависимости
17+
## Быстрый старт
1818

19-
Для начала работы с пакетом в проекте необходимо предварительно установить следующие зависимости: `@diplodoc/transform`, `@gravity-ui/uikit`, `react`. Подробную информацию можно найти в разделе `peerDependencies` файла `package.json`.
19+
Для начала нам понадобится проект на react и какой-нибудь сервер. Например, можно сделать react проект с использованием Vite и сервер на express или можно создать Next.js приложение - в нем сразу будет клиентская и серверная часть.
2020

21-
### Начало работы
21+
Устанавливаем необходимые зависимости:
2222

23-
Конструктор страниц импортируется в виде React-компонента. Для корректной работы его необходимо обернуть в `PageConstructorProvider`:
23+
```shell
24+
npm install @gravity-ui/page-constructor @diplodoc/transform @gravity-ui/uikit
25+
```
2426

25-
```jsx
27+
Подключаем `PageConstructor` на страницу. Для корректной работы его необходимо обернуть в `PageConstructorProvider`:
28+
29+
```tsx
2630
import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
31+
import '@gravity-ui/page-constructor/styles/styles.scss';
32+
33+
const App = () => {
34+
const content = {
35+
blocks: [
36+
{
37+
type: 'header-block',
38+
title: 'Hello world',
39+
background: {color: '#f0f0f0'},
40+
description:
41+
'**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
42+
},
43+
],
44+
};
45+
46+
return (
47+
<PageConstructorProvider>
48+
<PageConstructor content={content} />
49+
</PageConstructorProvider>
50+
);
51+
};
2752

28-
const Page: React.PropsWithChildren<PageProps> = ({content}) => (
29-
<PageConstructorProvider>
30-
<PageConstructor content={content} />
31-
</PageConstructorProvider>
32-
);
53+
export default App;
54+
```
55+
56+
Это был самый простой пример подключения. Чтобы заработала YFM разметка, нужно обрабатывать content на сервере и получать его на клиенте.
57+
58+
Если ваш сервер это отдельное приложение, то нужно установить page-constructor:
59+
60+
```shell
61+
npm install @gravity-ui/page-constructor
62+
```
63+
64+
Для обработки YFM во всех базовых блоках вызовите `contentTransformer` и передайте туда контент и опции:
65+
66+
```ts
67+
const express = require('express');
68+
const app = express();
69+
const {contentTransformer} = require('@gravity-ui/page-constructor/server');
70+
71+
const content = {
72+
blocks: [
73+
{
74+
type: 'header-block',
75+
title: 'Hello world',
76+
background: {color: '#f0f0f0'},
77+
description:
78+
'**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
79+
},
80+
],
81+
};
82+
83+
app.get('/content', (req, res) => {
84+
res.send({content: contentTransformer({content, options: {lang: 'en'}})});
85+
});
86+
87+
app.listen(3000);
88+
```
89+
90+
На клиенте добавляем вызов эндпоинта для получения контента:
91+
92+
```tsx
93+
import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
94+
import '@gravity-ui/page-constructor/styles/styles.scss';
95+
import {useEffect, useState} from 'react';
96+
97+
const App = () => {
98+
const [content, setContent] = useState();
99+
100+
useEffect(() => {
101+
(async () => {
102+
const response = await fetch('http://localhost:3000/content').then((r) => r.json());
103+
setContent(response.content);
104+
})();
105+
}, []);
106+
107+
return (
108+
<PageConstructorProvider>
109+
<PageConstructor content={content} />
110+
</PageConstructorProvider>
111+
);
112+
};
113+
114+
export default App;
33115
```
34116

117+
### Готовый шаблон
118+
119+
Чтобы начачать новый проект с нуля можно использовать [готовый шаблон на Next.js](https://github.com/gravity-ui/page-constructor-website-template) который мы подготовили.
120+
121+
## Документация
122+
35123
### Параметры
36124

37125
```typescript

‎README.md

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,112 @@ For the format of input data and list of available blocks, see the [documentatio
1414
npm install @gravity-ui/page-constructor
1515
```
1616

17-
## Required dependencies
17+
## Quick start
1818

19-
Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `@gravity-ui/uikit`, `react`. Check out the `peerDependencies` section of `package.json` for accurate information.
19+
First, we need a React project and some kind of server. For example, you can create a React project using Vite and an Express server, or you can create Next.js application - it will have a client and server side at once.
2020

21-
### Getting started
21+
Install the required dependencies:
2222

23-
The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
23+
```shell
24+
npm install @gravity-ui/page-constructor @diplodoc/transform @gravity-ui/uikit
25+
```
2426

25-
```jsx
27+
Insert the `Page Constructor` to the page. To work correctly, it must be wrapped in a `PageConstructorProvider`:
28+
29+
```tsx
2630
import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
31+
import '@gravity-ui/page-constructor/styles/styles.scss';
32+
33+
const App = () => {
34+
const content = {
35+
blocks: [
36+
{
37+
type: 'header-block',
38+
title: 'Hello world',
39+
background: {color: '#f0f0f0'},
40+
description:
41+
'**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
42+
},
43+
],
44+
};
45+
46+
return (
47+
<PageConstructorProvider>
48+
<PageConstructor content={content} />
49+
</PageConstructorProvider>
50+
);
51+
};
2752

28-
const Page: React.PropsWithChildren<PageProps> = ({content}) => (
29-
<PageConstructorProvider>
30-
<PageConstructor content={content} />
31-
</PageConstructorProvider>
32-
);
53+
export default App;
54+
```
55+
56+
This was the simplest example of a connection. In order for YFM markup to work, you need to process content on the server and receive it on the client.
57+
58+
If your server is a separate application, then you need to install page-constructor:
59+
60+
```shell
61+
npm install @gravity-ui/page-constructor
62+
```
63+
64+
To process YFM in all base blocks, call the `contentTransformer` and pass the content and options there:
65+
66+
```ts
67+
const express = require('express');
68+
const app = express();
69+
const {contentTransformer} = require('@gravity-ui/page-constructor/server');
70+
71+
const content = {
72+
blocks: [
73+
{
74+
type: 'header-block',
75+
title: 'Hello world',
76+
background: {color: '#f0f0f0'},
77+
description:
78+
'**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
79+
},
80+
],
81+
};
82+
83+
app.get('/content', (req, res) => {
84+
res.send({content: contentTransformer({content, options: {lang: 'en'}})});
85+
});
86+
87+
app.listen(3000);
88+
```
89+
90+
On the client, add an endpoint call to receive content:
91+
92+
```tsx
93+
import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
94+
import '@gravity-ui/page-constructor/styles/styles.scss';
95+
import {useEffect, useState} from 'react';
96+
97+
const App = () => {
98+
const [content, setContent] = useState();
99+
100+
useEffect(() => {
101+
(async () => {
102+
const response = await fetch('http://localhost:3000/content').then((r) => r.json());
103+
setContent(response.content);
104+
})();
105+
}, []);
106+
107+
return (
108+
<PageConstructorProvider>
109+
<PageConstructor content={content} />
110+
</PageConstructorProvider>
111+
);
112+
};
113+
114+
export default App;
33115
```
34116

117+
### Ready-made template
118+
119+
To start a new project, you can use the [ready-made template on Next.js ](https://github.com/gravity-ui/page-constructor-website-template) which we have prepared.
120+
121+
## Documentation
122+
35123
### Parameters
36124

37125
```typescript

0 commit comments

Comments
 (0)