[Code showers Demo] Finished Code showers demo page.

DanilAndreev · DanilAndreev · commit 1a59f6a921d6 · 2020-09-23T13:25:00.000+03:00
[APIs] Added links to demos.
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@craco/craco": "^5.6.4",
     "@material-docs/core": "^0.4.5",
-    "@material-docs/react-components-docs-extension": "^0.1.9",
+    "@material-docs/react-components-docs-extension": "^0.2.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "clsx": "^1.1.1",
diff --git a/src/Documentation.js b/src/Documentation.js
@@ -66,7 +66,8 @@ import RCDEReactComponentApiPageAPI
 import RCDEStyleAPI from "./pages/Extensions/ReactComponentsDocsExtension/APIs/StyleAPI";
 import ReactComponentApiPageDemo
     from "./pages/Extensions/ReactComponentsDocsExtension/Components/ReactComponentApiPageDemo";
-import CodeDemo from "./pages/Components/Code";
+import CodeDemo from "./pages/Components/CodeDemo";
+import TablesDemo from "./pages/Components/TablesDemo";
 
 
 export default function Documentation() {
@@ -115,6 +116,7 @@ export default function Documentation() {
                     <MarkdownDemo/>
                     <TextStylingDemo/>
                     <ImagesDemo/>
+                    <TablesDemo/>
                 </PagesGroup>
                 <PagesGroup name={"Component APIs"}>
                     <DocsLayoutAPI/>
@@ -159,11 +161,11 @@ export default function Documentation() {
                 </PagesGroup>
                 <PagesGroup name={"Extensions"}>
                     <PagesGroup name={"React Components Docs Extension"}>
-                        <ReactComponentApiPageDemo />
+                        <ReactComponentApiPageDemo/>
                         <PagesGroup name={"Component API"}>
-                            <RCDEPropAPI />
-                            <RCDEStyleAPI />
-                            <RCDEReactComponentApiPageAPI />
+                            <RCDEPropAPI/>
+                            <RCDEStyleAPI/>
+                            <RCDEReactComponentApiPageAPI/>
                         </PagesGroup>
                     </PagesGroup>
                 </PagesGroup>
diff --git a/src/locale/EN.json b/src/locale/EN.json
@@ -1,13 +1,21 @@
 {
-  "name": "english",
+  "name": "en-us",
   "label": "English",
   "locale": {
     "pages": {
       "CodeDemo": {
-        "searchDescription": "",
+        "searchDescription": "Demo of Code showers components.",
         "searchTags": {
-
-        }
+          "demo": "demo",
+          "code": "code",
+          "showing": "showing",
+          "demonstration": "demonstration"
+        },
+        "globalDetails": "Code showers - these are React components created to enable the user to showcase the source code.",
+        "componentsHeader": "Components",
+        "codeDetails": "You can use the ```Code``` component to showcase your sources or other code.",
+        "expansionCodeDetails": "If you want your code to have additional features such as:\n* Ability to collapse code\n* Ability to copy code to clipboard\n* Ability to add additional actions.\n\n\n  Then ```ExpansionCode``` is the right choice.",
+        "demoWithCodeDetails": "The ```DemoWithCode``` component is used to demonstrate the functionality that the code implements. It expands the capabilities of the [```ExpansionCode```](#<expansioncode>) component"
       },
       "ImagesDemo": {
         "pageAbout": "Pictures are needed in order to visually demonstrate some information",
diff --git a/src/locale/RU.json b/src/locale/RU.json
@@ -1,8 +1,24 @@
 {
-  "name": "russian",
+  "name": "ru-ru",
   "label": "Русский",
   "locale": {
     "pages": {
+      "CodeDemo": {
+        "searchDescription": "Демонстрация космпонентов Code showers",
+        "searchTags": {
+          "demo": "demo",
+          "code": "code",
+          "showing": "showing",
+          "demonstration": "demonstration",
+          "code_ru": "код",
+          "demo_ru": "демо"
+        },
+        "globalDetails": "Code showers - это React компоненты, созданные для того, чтоб дать возможность пользователю продемонстрировать исходный код.",
+        "componentsHeader": "Компоненты",
+        "codeDetails": "Вы можете использовать компонент ```Code``` для демонстрации своих исходников или другого кода.",
+        "expansionCodeDetails": "Если вы хотите, чтоб ваш код имел дополнительные фишки, такие как:\n* Возможность свернуть код\n* Возможность скопировать код в буфер обмена\n* Возможность добавить дополниельные действия.  \n\n\n Тогда ```ExpansionCode``` - правильный выбор.",
+        "demoWithCodeDetails": "Компонент ```DemoWithCode``` используется для того, чтоб продемонстрировать функционал, который реализовывает код. Он расширяет возможности компонента [```ExpansionCode```](#<expansioncode>)"
+      },
       "ImagesDemo": {
         "pageAbout": "Картинки нужны для того, чтоб визуально продемонстрировать какую-то информацию",
         "infoBlock": "Вы можете не переживать за скорость загрузки страницы из-за больших изображений. Компонент __Image__ поддерживает технологию __ленивой загрузки__."
diff --git a/src/pages/APIs/ImageAPI/index.js b/src/pages/APIs/ImageAPI/index.js
@@ -34,7 +34,7 @@ export default function ImageAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link page={["Components", "Text decorators"]}>Text styling</Link></ListItem>
+                <ListItem><Link page={["Components", "Images"]}>Text styling</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/PagesGroupAPI/index.js b/src/pages/APIs/PagesGroupAPI/index.js
@@ -4,12 +4,12 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
 
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function PagesGroupAPI() {
     const {lang} = useLang();
@@ -30,7 +30,7 @@ export default function PagesGroupAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Lists</Link></ListItem>
+                <ListItem><Link page={["Components", "Layout"]}>Layout</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/TableAPI/index.js b/src/pages/APIs/TableAPI/index.js
@@ -4,12 +4,11 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
-
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function TableAPI() {
     const {lang} = useLang();
@@ -37,7 +36,7 @@ export default function TableAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Tables</Link></ListItem>
+                <ListItem><Link page={["Components", "Tables"]}>Tables</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/TableBodyAPI/index.js b/src/pages/APIs/TableBodyAPI/index.js
@@ -4,12 +4,11 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
-
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function TableBodyAPI() {
     const {lang} = useLang();
@@ -34,7 +33,7 @@ export default function TableBodyAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Tables</Link></ListItem>
+                <ListItem><Link page={["Components", "Tables"]}>Tables</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/TableCellAPI/index.js b/src/pages/APIs/TableCellAPI/index.js
@@ -4,12 +4,11 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
-
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function TableCellAPI() {
     const {lang} = useLang();
@@ -48,7 +47,7 @@ export default function TableCellAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Tables</Link></ListItem>
+                <ListItem><Link page={["Components", "Tables"]}>Tables</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/TableHeadAPI/index.js b/src/pages/APIs/TableHeadAPI/index.js
@@ -4,12 +4,11 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
-
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function TableHeadAPI() {
     const {lang} = useLang();
@@ -31,7 +30,7 @@ export default function TableHeadAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Tables</Link></ListItem>
+                <ListItem><Link page={["Components", "Tables"]}>Tables</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/APIs/TableRowAPI/index.js b/src/pages/APIs/TableRowAPI/index.js
@@ -4,11 +4,10 @@
  */
 
 import React from "react";
-import {Link} from "@material-ui/core";
-
 import {H2, List, ListItem, useLang} from "@material-docs/core";
 import ApiPage from "../../../components/ApiPage";
 import importCode from "./importCode.md";
+import Link from "@material-docs/core/components/Link";
 
 export default function TableRowAPI() {
     const {lang} = useLang();
@@ -36,7 +35,7 @@ export default function TableRowAPI() {
         >
             <H2>Demos</H2>
             <List>
-                <ListItem><Link>Tables</Link></ListItem>
+                <ListItem><Link page={["Components", "Tables"]}>Tables</Link></ListItem>
             </List>
         </ApiPage>
     );
diff --git a/src/pages/Components/CodeDemo/index.js b/src/pages/Components/CodeDemo/index.js
@@ -25,6 +25,7 @@ import {TaggingContext} from "@material-docs/core/hooks/useTags"
 
 import demoWithCodeCode from "../../../examples/Code/expansionCodeExample.md";
 import DemoWithCodeExample from "../../../examples/Code/DemoWithCodeExpample";
+import H2 from "@material-docs/core/components/H2";
 
 export default function CodeDemo() {
     const {lang} = useLang();
@@ -38,9 +39,11 @@ export default function CodeDemo() {
         >
             <H1>Code showers</H1>
             <H3 noTag noDivider>Code showers - React components, designed to help you to share your source code.</H3>
-            <Markdown>asd</Markdown>
+            <Markdown>{locale.globalDetails}</Markdown>
+            <H2>{locale.componentsHeader}</H2>
+            <H3 noDivider>{"<Code/>"}</H3>
+            <Markdown>{locale.codeDetails}</Markdown>
             <DemoWithCode
-                name={"<Code/>"}
                 code={codeCode}
                 theme={"darcula"}
                 paperContainer
@@ -50,8 +53,9 @@ export default function CodeDemo() {
                     <CodeExample />
                 </Box>
             </DemoWithCode>
+            <H3 noDivider>{"<ExpansionCode/>"}</H3>
+            <Markdown>{locale.expansionCodeDetails}</Markdown>
             <DemoWithCode
-                name={"<ExpansionCode/>"}
                 code={expansionCodeCode}
                 theme={"darcula"}
                 paperContainer
@@ -63,8 +67,9 @@ export default function CodeDemo() {
                     </TaggingContext.Provider>
                 </Box>
             </DemoWithCode>
+            <H3 noDivider>{"<DemoWithCode/>"}</H3>
+            <Markdown>{locale.demoWithCodeDetails}</Markdown>
             <DemoWithCode
-                name={"<DemoWithCode/>"}
                 code={demoWithCodeCode}
                 theme={"darcula"}
                 actions={[{label: "Source code", link: ""}]}
diff --git a/src/pages/Components/TablesDemo/index.js b/src/pages/Components/TablesDemo/index.js
@@ -0,0 +1,18 @@
+/*
+ * Author: Andrieiev Danil |  danssg08@gmail.com | https://github.com/DanilAndreev
+ * Copyright (C) 2020.
+ */
+
+import React from "react";
+import DocsPage from "@material-docs/core/components/DocsPage";
+import H1 from "@material-docs/core/components/H1";
+
+export default function TablesDemo() {
+    return (
+        <DocsPage
+            name={"Tables"}
+        >
+            <H1>Tables</H1>
+        </DocsPage>
+    );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1331,10 +1331,10 @@
     react-syntax-highlighter "^13.0.0"
     routing-manager "^2.0.4"
 
-"@material-docs/react-components-docs-extension@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@material-docs/react-components-docs-extension/-/react-components-docs-extension-0.1.9.tgz#17af89e13e990328fcaf8813a8d43377442546e1"
-  integrity sha512-YHGH+EgRQUeWFctx/f6D2zZG0pcXDo3n9CS81Gf29GliQpZvfkFhIOW3N3uXAbE7rM+qbEjEepWEE9BQUNKslw==
+"@material-docs/react-components-docs-extension@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@material-docs/react-components-docs-extension/-/react-components-docs-extension-0.2.0.tgz#8179354884a696a1dff04ec0259d7fbfe42fd790"
+  integrity sha512-bPaKv4eKIRB1P0IJ//jFX1RxuV2H4YIPUH+jIrMu8xj0rvSwA/qs9f498W4JHWI+mjpPAgRbRmMGPCm5QPXTMg==
   dependencies:
     "@material-ui/core" "^4.11.0"
     "@material-ui/styles" "^4.10.0"

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export default function ImageAPI() {`
`34`	`34`	`>`
`35`	`35`	`<H2>Demos</H2>`
`36`	`36`	`<List>`
`37`		`- <ListItem><Link page={["Components", "Text decorators"]}>Text styling</Link></ListItem>`
	`37`	`+ <ListItem><Link page={["Components", "Images"]}>Text styling</Link></ListItem>`
`38`	`38`	`</List>`
`39`	`39`	`</ApiPage>`
`40`	`40`	`);`