Pr/mermaid

docs/intro/how-it-works.md

@@ -9,6 +9,21 @@ import DocsCards from '../../src/components/global/DocsCards';
 
 ![contember diagram](/assets/contember-diagram.svg)
 
+```mermaid
+graph LR
+    id1("Website")
+    id2("Mobile app")
+    id3("Contember Interface (optional)")
+    id4{"Contember API"}
+    id5{{"Custom microservices (optional)"}}
+    id6[("PostgreSQL")]
+
+    id5 -- GraphQL --> id4
+    id5 -. SQL .-> id6
+    id1 -. Custom API .-> id5
+    id1 & id2 & id3 -- GraphQL --> id4 -- SQL --> id6
+```
+
 ## Contember Engine: Simplified Backend Operations
 
 **Contember Engine** empowers developers to define data models using TypeScript, subsequently generating a corresponding GraphQL API. This engine functions as a standalone server, offering two main components:

docusaurus.config.js

@@ -17,6 +17,10 @@ const config = {
 		contemberApiBaseUrl: process.env.CONTEMBER_API_URL,
 		contemberProjectName: process.env.CONTEMBER_PROJECT_NAME,
 	},
+	themes: ['@docusaurus/theme-mermaid'],
+	markdown: {
+		mermaid: true,
+	},
 	themeConfig:
 		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
 		({
@@ -118,8 +122,7 @@ const config = {
 				},
 				theme: {
 					customCss: [
-						require.resolve('@contember/admin/style.css'),
-						require.resolve('./src/index.sass'),
+						require.resolve('./src/index.css'),
 					],
 				},
 				blog: false,
@@ -129,7 +132,6 @@ const config = {
 	],
 	plugins: [
 		path.join(__dirname, '/src/plugins/webpack-configuration-plugin'),
-		'docusaurus-plugin-sass',
 	]
 }
 

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/preset-classic": "^2.4.0",
+    "@docusaurus/theme-mermaid": "^2.4.1",
     "react": "^17",
     "react-dom": "^17"
   },
@@ -31,9 +32,9 @@
     ]
   },
   "devDependencies": {
-    "@contember/admin": "^1.2.0-alpha.5",
-    "@contember/cms-layout": "^1.2.0-alpha.5",
-    "@contember/layout": "^1.2.0-alpha.5",
+    "@contember/admin": "^1.2.0-beta.3",
+    "@contember/cms-layout": "^1.2.0-beta.3",
+    "@contember/layout": "^1.2.0-beta.3",
     "@contember/schema": "1.2.1",
     "@contember/schema-definition": "1.2.1",
     "@docusaurus/module-type-aliases": "^2.4.0",
@@ -47,7 +48,6 @@
     "chroma-js": "^2.4.2",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
-    "docusaurus-plugin-sass": "^0.2.3",
     "dotenv": "^16.0.3",
     "file-loader": "^6.2.0",
     "raw-loader": "^4.0.2",

src/apiDoc/style.css

@@ -0,0 +1,70 @@
+.typeNode {
+	width: 100%;
+}
+
+.typeNode__title {
+	display: none;
+}
+
+.typeNode--union {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	border-radius: 0.25rem;
+	background-color: var(--ifm-font-color-base);
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+	border: 1px solid var(--ifm-font-color-base);
+}
+
+.typeNode--union>.typeNode__title {
+	color: white;
+	display: block;
+}
+
+.typeNode--union>.typeNode__content>.typeNode__item {
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+	border: 1px solid var(--ifm-font-color-base);
+	padding: 1rem;
+	background: #fff;
+}
+
+.typeNode--interface>.typeNode__title,
+.typeNode--reflection>.typeNode__title {
+	display: block;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-weight: 700;
+	color: var(--ifm-menu-color);
+	margin-top: 2em;
+}
+
+.typeNode--interface>.typeNode__content>.typeNode__item,
+.typeNode--reflection>.typeNode__content>.typeNode__item {
+	border-bottom: 1px solid var(--ifm-font-color-base);
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.propList {
+	display: flex;
+	margin: 0 auto;
+	max-width: 1200px;
+}
+
+.property__name {
+	margin: 0.5em 0;
+}
+
+.property__type {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: var(--contember-green-text);
+	margin: 0.5em 0;
+}
+
+.textSummary {
+	margin-bottom: 1rem;
+}