init mdx

.gitignore

@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/logos-documentation-website-template.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/logos-documentation-website-template.iml" filepath="$PROJECT_DIR$/.idea/logos-documentation-website-template.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

docs/mdx-playground.mdx

@@ -0,0 +1,13 @@
+import FeatureList from '@site/src/components/mdx/FeatureList';
+import FeatureCard from '@site/src/components/mdx/FeatureCard';
+
+:::info
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+
+<FeatureList>
+    <FeatureCard title={"Feature title"} text={"Some text ..."}/>
+</FeatureList>

src/components/mdx/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  title: string
+  text: string
+  index?: string
+  link?: string
+  children: React.ReactNode
+}
+
+const ln = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X']
+
+export const FeatureCard = (props: TProps): JSX.Element => {
+  const { index, text, title, link } = props
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        {index && <span className={styles.latinNumber}>{ln[index]}</span>}
+        <h3>{title}</h3>
+      </div>
+      <p className={styles.cardText}>{text}</p>
+    </div>
+  )
+}

src/components/mdx/FeatureCard/index.tsx

@@ -0,0 +1 @@
+export * from './FeatureCard'

src/components/mdx/FeatureCard/style.module.scss

@@ -0,0 +1,8 @@
+.card {
+  .cardHeader {
+    .latinNumber {
+    }
+  }
+  .cardText {
+  }
+}

src/components/mdx/FeatureList/FeatureList.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+export const FeatureList = ({ children }: TProps): JSX.Element => {
+  return <div className={styles.FeatureList}>{children}</div>
+}

src/components/mdx/FeatureList/index.tsx

@@ -0,0 +1 @@
+export * from './FeatureList'

src/components/mdx/FeatureList/style.module.scss

@@ -0,0 +1,2 @@
+.FeatureList {
+}