Skip to content
This repository was archived by the owner on Nov 16, 2022. It is now read-only.

Commit 5e74b7e

Browse files
committed
Added new pages
1 parent 26dbdf7 commit 5e74b7e

File tree

13 files changed

+313
-68
lines changed

13 files changed

+313
-68
lines changed

docs/static/js/185.18bcddc0.chunk.js.map

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
-3.51 MB
Loading

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"license": "MIT",
3131
"dependencies": {
3232
"@craco/craco": "^5.6.4",
33-
"@material-docs/core": "^0.4.9",
33+
"@material-docs/core": "^0.5.3",
3434
"@material-docs/react-components-docs-extension": "^0.2.0",
3535
"@material-ui/core": "^4.11.0",
3636
"@material-ui/icons": "^4.9.1",

src/Documentation.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import LangProviderAPI from "./pages/APIs/LangProviderAPI";
7272
import LocaleAPI from "./pages/APIs/LocaleAPI";
7373
import LandingAPI from "./pages/APIs/LandingAPI";
7474
import LinkAPI from "./pages/APIs/LinkAPI";
75+
import HostingMaterialDocsOnGHPages from "./pages/Tutorials/HostingMaterialDocsOnGHPages";
7576

7677

7778
export default function Documentation() {
@@ -114,6 +115,7 @@ export default function Documentation() {
114115
</PagesGroup>
115116
<PagesGroup name={"Tutorials"} order={2}>
116117
<CreatingMaterialDocs/>
118+
<HostingMaterialDocsOnGHPages/>
117119
</PagesGroup>
118120
<PagesGroup name={"Components"} order={3}>
119121
<CodeDemo/>

src/locale/EN.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,47 @@
33
"label": "English",
44
"locale": {
55
"pages": {
6+
"CreatingMaterialDocsTutorial": {
7+
"headers": {
8+
"creatingMaterialDocs": "Creating Material Docs",
9+
"creatingProject": "Creating project",
10+
"materialDocsSetup": "Material Docs setup",
11+
"indexSetup": "Setting up index.html",
12+
"extraFilesDeleting": "Extra files deletion",
13+
"creatingDocs": "Создание документации",
14+
"basicStructure": "Basic structure",
15+
"creatingPage": "Creating page",
16+
"creatingPageComponent": "Creating page component",
17+
"creatingAnotherPage": "Creating another page",
18+
"pagesGrouping": "Группирование страниц",
19+
"pagesRedirecting": "Redirecting between pages",
20+
"result": "Result",
21+
"gitHubSources": "GitHub sources"
22+
},
23+
"creatingProjectText": "Let's create a new project using the utility __create-react-app__. More about this utility [here](&&createReactAppLink). \nWe named the project _material-docs-example-project_ :).",
24+
"setup": "After the project is created, you need to install Material Docs. ",
25+
"withYarn": "Using __yarn__:",
26+
"withNpm": "Using __npm__:",
27+
"indexSetup": "Material Docs uses the _Roboto_ font, let's install it.\nIn the directory __public__ add to file ___index.html___ the next:\n",
28+
"indexOverview": "File ___index.html___ should look something like this:",
29+
"deleteFiles": "You can delete files:",
30+
"basicStructure": "First, let's create the following structure in the __index.js__ file:",
31+
"indexJsDescription": "This is the basic structure for a Material Docs app. \nWe have specified the following parameters for the component ```<DocsLayout/>```:",
32+
"props": {
33+
"name": "Documentation name.",
34+
"version": "Documentation version.",
35+
"logo": "Path to logo image.",
36+
"keywords": "Key words of the page so that search engines can index it.",
37+
"description": "Page description for metadata.",
38+
"author": "Author's name."
39+
},
40+
"moreInfo": "You can get more information on components in the __Component APIs__ section of this documentation. For example, here is [__documentation of the component__ ```<DocsLayout/>```](). \n\nIn the ```<DocsMenu/>``` component stored information about menu structure. Component ```<AutoDocsMenu/>``` allows don't think about creating the menu manually. \n\nInside ```<DocsPages/>``` component there will be pages. ",
41+
"creatingPage": "Let's start writing the information page. Create a page about yourself:",
42+
"creatingPageComponent": "In order to make it easier to edit pages, we recommend creating page components and placing them in separate files. For example, let's wrap our page in a component:",
43+
"pagesGrouping": "In order for the automatic menu to create groups of pages, they must be wrapped in a ```<PagesGroup/>``` component. \nLet's wrap the FirstPage in a group \"My Group\"",
44+
"redirecting": "The ```<Link/>``` component has ___page___ prop,in which the path is passed to the inner page. \nSince the page we want to redirect to is in the __My Group__, the path will look like this:",
45+
"githubExample": "You can find this example on GitHub [here](&&gitHubSource)"
46+
},
647
"TablesDemo": {
748
"searchDescription": "Demo of Table parts components.",
849
"searchTags": {

src/locale/RU.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,47 @@
33
"label": "Русский",
44
"locale": {
55
"pages": {
6+
"CreatingMaterialDocsTutorial": {
7+
"headers": {
8+
"creatingMaterialDocs": "Создание Material Docs",
9+
"creatingProject": "Создание проекта",
10+
"materialDocsSetup": "Установка Material Docs",
11+
"indexSetup": "Настройка index.html",
12+
"extraFilesDeleting": "Удаление ненужных файлов",
13+
"creatingDocs": "Создание документации",
14+
"basicStructure": "Базовая структура",
15+
"creatingPage": "Создание страницы",
16+
"creatingPageComponent": "Создание страничного компонента",
17+
"creatingAnotherPage": "Создадим еще одну страницу",
18+
"pagesGrouping": "Группирование страниц",
19+
"pagesRedirecting": "Переадресация между страницами",
20+
"result": "Результат",
21+
"gitHubSources": "Исходники на GitHub"
22+
},
23+
"creatingProjectText": "Создадим новый проект с помощью утилиты __create-react-app__. Подробнее об этой утилите [здесь](&&createReactAppLink). \nМы назвали проект _material-docs-example-project_ :).",
24+
"setup": "После того, как проект создан - надо установить Material Docs. ",
25+
"withYarn": "С помощью __yarn__:",
26+
"withNpm": "С помощью __npm__:",
27+
"indexSetup": "Material Docs использует шрифт _Roboto_, давайте установим его.\nВ директории __public__ добавьте в файл ___index.html___ следующее:\n",
28+
"indexOverview": "Файл ___index.html___ должен выглядеть примерно так:",
29+
"deleteFiles": "Вы можете удалить файлы:",
30+
"basicStructure": "Для начала, создадим в файле __index.js__ следующую структуру:",
31+
"indexJsDescription": "Это базовая структура для приложения Material Docs. \nМы указали следующие параметры для компонента ```<DocsLayout/>```:",
32+
"props": {
33+
"name": "Название документации.",
34+
"version": "Версия документации.",
35+
"logo": "Путь к картинке логотипу.",
36+
"keywords": "Ключевые слова страницы для того, чтоб поисковые движки могли проиндексировать её.",
37+
"description": "Описание страницы для метаданных.",
38+
"author": "Имя автора."
39+
},
40+
"moreInfo": "Больше информации о компонентах вы можете получить в разделе __Component APIs__ этой документации. К примеру,\nвот [__документация компонента__ ```<DocsLayout/>```](). \n\nВ компоненте ```<DocsMenu/>``` хранится информация о структуре меню. Компонент ```<AutoDocsMenu/>``` позволяет \nне задумываться о создании меню вручную. \n\nВнутри компонента ```<DocsPages/>``` будут находиться страницы. ",
41+
"creatingPage": "Приступим к написанию страницы с информацией. Создадим страницу о себе:",
42+
"creatingPageComponent": "Для того, чтоб было удобнее редактировать страницы мы рекомендуем создавать страничные компоненты и размещать их в \nотдельных файлах. Например, обернем нашу страницу в компонент:",
43+
"pagesGrouping": "Для того, чтоб автоматическое меню могло создавать группы страниц, их надо оборачивать в компонент ```<PagesGroup/>```. \nДавайте обернём страницу FirstPage в группу \"My Group\"",
44+
"redirecting": "У компонента ```<Link/>``` есть параметр ___page___, в который передается путь внутренней странице. \nТак как страница, на которую мы хотим сделать переадресацию находится в группе __My Group__ - путь будет выглядеть так:",
45+
"githubExample": "Вы можете найти этот пример на GitHub [здесь](&&gitHubSource)"
46+
},
647
"TablesDemo": {
748
"searchDescription": "Demo of Table parts components.",
849
"searchTags": {

src/pages/Tutorials/CreatingMaterialDocs/CreatingMaterialDocs.md

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
# Создание Material Docs
2-
## Создание проекта
3-
Создадим новый проект с помощью утилиты __create-react-app__. Подробнее об этой утилите [здесь](https://reactjs.org/docs/create-a-new-react-app.html).
4-
Мы назвали проект _material-docs-example-project_ :).
5-
```{"type": "code", "theme": "darcula", "language": "javascript"}
1+
# &{&&locale/headers/creatingMaterialDocs}&
2+
## &{&&locale/headers/creatingProject}&
3+
&{&&locale/creatingProjectText}&
4+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
65
$ npx create-react-app material-docs-example-project
76
```
8-
## Установка Material Material Docs
9-
После того, как проект создан - надо установить Material Docs.
10-
С помощью __yarn__:
11-
```{"type": "code", "theme": "darcula", "language": "javascript"}
7+
## &{&&locale/headers/materialDocsSetup}&
8+
&{&&locale/setup}&
9+
&{&&locale/withYarn}&
10+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
1211
$ yarn add @material-docs/core
1312
```
14-
С помощью __npm__:
15-
```{"type": "code", "theme": "darcula", "language": "javascript"}
13+
&{&&locale/withNpm}&
14+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
1615
$ npm install @material-docs/core
1716
```
18-
### Настройка index.html
19-
Material Docs использует шрифт _Roboto_, давайте установим его.
20-
В директории __public__ добавьте в файл ___index.html___ следующее:
21-
```{"type": "code", "theme": "darcula", "language": "javascript"}
17+
### &{&&locale/headers/indexSetup}&
18+
&{&&locale/indexSetup}&
19+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
2220
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
2321
```
24-
Файл ___index.html___ должен выглядеть примерно так:
25-
```{"type": "expansion-code", "theme": "darcula", "language": "javascript", "name": "index.html"}
22+
&{&&locale/indexOverview}&
23+
```{"type": "expansion-code", "themeLight": "darcula", "language": "javascript", "name": "index.html"}
2624
<!DOCTYPE html>
2725
<html lang="en">
2826
<head>
@@ -45,19 +43,19 @@ Material Docs использует шрифт _Roboto_, давайте уста
4543
</body>
4644
</html>
4745
```
48-
### Удаление ненужных файлов
49-
Вы можете удалить файлы:
46+
### &{&&locale/headers/extraFilesDeleting}&
47+
&{&&locale/deleteFiles}&
5048
* App.css
5149
* App.test.js
5250
* App.js
5351

5452
Они нам не понадобятся.
55-
## Создание документации
56-
### Базовая структура
57-
![Basic structure](&&BasicStructureImage)
58-
Для начала, создадим в файле __index.js__ следующую структуру:
53+
## &{&&locale/headers/creatingDocs}&
54+
### &{&&locale/headers/basicStructure}&
55+
![{"alt": "Basic structure", "src": "&&BasicStructureImage", "fullWidth": true, "frame": true}]()
56+
&{&&locale/basicStructure}&
5957
##### index.js
60-
```{"type": "code", "theme": "darcula", "language": "javascript"}
58+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
6159
import React from 'react';
6260
import ReactDOM from 'react-dom';
6361
import * as serviceWorker from './serviceWorker';
@@ -90,28 +88,21 @@ ReactDOM.render(
9088
9189
serviceWorker.unregister();
9290
```
93-
Это базовая структура для приложения Material Docs.
94-
Мы указали следующие параметры для компонента DocsLayout:
95-
* ___name___ - Название документации.
96-
* ___version___ - версия документации.
97-
* ___logo___ - путь к картинке логотипу.
98-
* ___keywords___ - Ключевые слова страницы для того, чтоб поисковые движки могли проиндексировать её.
99-
* ___description___ - описание страницы для метаданных.
100-
* ___author___ - Имя автора.
91+
&{&&locale/indexJsDescription}&
92+
* ___name___ - &{&&locale/props/name}&
93+
* ___version___ - &{&&locale/props/version}&
94+
* ___logo___ - &{&&locale/props/logo}&
95+
* ___keywords___ - &{&&locale/props/keywords}&
96+
* ___description___ - &{&&locale/props/description}&
97+
* ___author___ - &{&&locale/props/author}&
10198

102-
Больше информации о компонентах вы можете получить в разделе __Component APIs__ этой документации. К примеру,
103-
вот [__документация компонента__ ```DocsLayout```]().
99+
&{&&locale/moreInfo}&
104100

105-
В компоненте ```DocsMenu``` хранится информация о структуре меню. Компонент ```AutoDocsMenu``` позволяет
106-
не задумываться о создании меню вручную.
107-
108-
Внутри компонента ```DocsPages``` будут находиться страницы.
109-
110-
## Создание страницы
111-
![Page image](&&PageAboutMeImage)
112-
Приступим к написанию страницы с информацией. Создадим страницу о себе:
101+
## &{&&locale/headers/creatingPage}&
102+
![{"alt": "Page image", "src": "&&PageAboutMeImage", "fullWidth": true, "frame": true}]()
103+
&{&&locale/creatingPage}&
113104
##### index.html
114-
```{"type": "code", "theme": "darcula", "language": "javascript"}
105+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
115106
import React from 'react';
116107
import ReactDOM from 'react-dom';
117108
import * as serviceWorker from './serviceWorker';
@@ -165,10 +156,9 @@ ReactDOM.render(
165156
166157
serviceWorker.unregister();
167158
```
168-
### Создание страничного компонента
169-
Для того, чтоб было удобнее редактировать страницы мы рекомендуем создавать страничные компоненты и размещать их в
170-
отдельных файлах. Например, обернем нашу страницу в компонент:
171-
```{"type": "expansion-code", "theme": "darcula", "language": "javascript", "name": "FirstPage.js"}
159+
### &{&&locale/headers/creatingPageComponent}&
160+
&{&&locale/creatingPageComponent}&
161+
```{"type": "expansion-code", "themeLight": "darcula", "language": "javascript", "name": "FirstPage.js"}
172162
import React from "react";
173163
import DocsPage from "@material-docs/core/components/DocsPage";
174164
import H1 from "@material-docs/core/components/H1";
@@ -199,7 +189,7 @@ export default function FirstPage() {
199189
);
200190
}
201191
```
202-
```{"type": "expansion-code", "theme": "darcula", "language": "javascript", "name": "index.js"}
192+
```{"type": "expansion-code", "themeLight": "darcula", "language": "javascript", "name": "index.js"}
203193
import React from 'react';
204194
import ReactDOM from 'react-dom';
205195
import * as serviceWorker from './serviceWorker';
@@ -233,8 +223,8 @@ ReactDOM.render(
233223
234224
serviceWorker.unregister();
235225
```
236-
### Создадим еще одну страницу
237-
```{"type": "expansion-code", "theme": "darcula", "language": "javascript", "name": "SecondPage.js"}
226+
### &{&&locale/headers/creatingAnotherPage}&
227+
```{"type": "expansion-code", "themeLight": "darcula", "language": "javascript", "name": "SecondPage.js"}
238228
import React from "react";
239229
import DocsPage from "@material-docs/core/components/DocsPage";
240230
import H1 from "@material-docs/core/components/H1";
@@ -285,10 +275,9 @@ export default function SecondPage() {
285275
);
286276
}
287277
```
288-
### Группирование страниц
289-
Для того, чтоб автоматическое меню могло создавать группы страниц, их надо оборачивать в компонент ```PagesGroup```.
290-
Давайте обернём страницу FirstPage в группу "My Group"
291-
```{"type": "expansion-code", "theme": "darcula", "language": "javascript", "name": "index.js"}
278+
### &{&&locale/headers/pagesGrouping}&
279+
&{&&locale/pagesGrouping}&
280+
```{"type": "expansion-code", "themeLight": "darcula", "language": "javascript", "name": "index.js"}
292281
import React from 'react';
293282
import ReactDOM from 'react-dom';
294283
import * as serviceWorker from './serviceWorker';
@@ -327,16 +316,19 @@ ReactDOM.render(
327316
328317
serviceWorker.unregister();
329318
```
330-
### Переадресация между страницами
331-
У компонента ```Link``` есть параметр ___page___, в который передается путь внутренней странице.
332-
Так как страница, на которую мы хотим сделать переадресацию находится в группе __My Group__ - путь будет выглядеть так:
319+
### &{&&locale/headers/pagesRedirecting}&
320+
&{&&locale/redirecting}&
333321
```
334322
["My Group", "Page about me"]
335323
```
336324
#### SecondPage.js
337-
```{"type": "code", "theme": "darcula", "language": "javascript"}
325+
```{"type": "code", "themeLight": "darcula", "language": "javascript"}
338326
<Link page={["My Group", "Page about me"]}>Redirect to Page About Me</Link>
339327
```
340-
341-
#### Исходники на GitHub
342-
Вы можете найти этот пример на GitHub [здесь](https://github.com/material-docs/material-docs-example-project/tree/creating-material-docs)
328+
## &{&&locale/headers/result}&
329+
##### Page about me (```FirstPaage.js```)
330+
![{"alt": "Результат", "src": "&&ResultImage1", "fullWidth": true, "frame": true}]()
331+
##### Features page (```SecondPage.js```)
332+
![{"alt": "Результат", "src": "&&ResultImage2", "fullWidth": true, "frame": true}]()
333+
## &{&&locale/headers/gitHubSources}&
334+
&{&&locale/githubExample}&
240 KB
Loading
84 KB
Loading

0 commit comments

Comments
 (0)