Merge pull request #21 from acid-info/mdx

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,53 @@
+import {Hero} from '@site/src/components/mdx/Hero';
+import {FeatureList} from '@site/src/components/mdx/FeatureList';
+import {FeatureCard} from '@site/src/components/mdx/FeatureCard';
+import {Quote} from '@site/src/components/mdx/Quote';
+import {ExternalReferenceCard} from '@site/src/components/mdx/ExternalReferenceCard';
+import {TeamList} from '@site/src/components/mdx/TeamList';
+
+<Hero title={"codex"}
+      subtitle={"Codex is building a Decentralized Durability Engine"}
+      linkText={"PoC0"}
+      linkUrl={"https://github.com/status-im/codex-research/blob/main/Readme.md"}/>
+
+## What is Codex?
+<Quote>
+    Codex is aiming to solve the fundamental issues of data durability in decentralized systems.
+    <br/>
+    Codex is a research group working in all areas of decentralized storage.
+    <br/>
+    Codex is a decentralized storage protocol for durable information.
+</Quote>
+
+## Features
+<FeatureList>
+    <FeatureCard title={"Fast erasure coding"}
+                 text={"Codex uses high-performance Reed-Solomon encoding to guarantee the durabilitty of the datasets."}/>
+    <FeatureCard title={"SNARK-based proof of retrivability"}
+                 text={"To implement space-efficient data retrievability, Codex leverages state-of-the-art SNARK-based proofs."}/>
+    <FeatureCard title={"Low-overhead lazy repair"}
+                 text={"Data repairs in Codex are grouped through lazy repair to decrease network bandwith overhead."}/>
+</FeatureList>
+
+## Resources
+<ExternalReferenceCard linkUrl={"http://Linktowhitepaper"}
+                  linkText={"White-paper"}
+                  referenceType={"pdf"}
+>
+    Read our white-paper to know more about Codex.
+</ExternalReferenceCard>
+<ExternalReferenceCard linkUrl={"https://github.com/status-im/nim-codex"}
+                  linkText={"Nim Codex"}
+                  referenceType={"github"}
+>
+    Play with the first version of Codex.
+</ExternalReferenceCard>
+<ExternalReferenceCard linkUrl={"https://github.com/status-im/codex-research"}
+                  linkText={"Codex Research"}
+                  referenceType={"github"}
+>
+    Checkout our research models and track our progress.
+</ExternalReferenceCard>
+
+## The Codex Team
+<TeamList/>

src/components/Button/Button.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx'
+import React, { HTMLProps } from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+export const Button = (
+  props: TProps & HTMLProps<HTMLButtonElement>,
+): JSX.Element => {
+  const { children, className, ...rest } = props
+  return <button className={clsx('button', className)}>{children}</button>
+}

src/components/Button/ButtonWithIcon.tsx

@@ -0,0 +1,23 @@
+import React, { HTMLProps } from 'react'
+import { Button } from './Button'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  icon: JSX.Element
+}
+
+export const ButtonWithIcon = ({
+  children,
+  icon,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Button {...rest}>
+      <div className={styles.buttonWithIconContainer}>
+        <div>{children}</div>
+        {icon}
+      </div>
+    </Button>
+  )
+}

src/components/Button/LinkButtonWithIcon.tsx

@@ -0,0 +1,26 @@
+import Link from '@docusaurus/Link'
+import React, { HTMLProps } from 'react'
+import { Button } from './Button'
+import { ButtonWithIcon } from './ButtonWithIcon'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  linkProps: HTMLProps<HTMLAnchorElement>
+  icon: JSX.Element
+}
+
+export const LinkButtonWithIcon = ({
+  children,
+  linkProps,
+  icon,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Link {...linkProps}>
+      <ButtonWithIcon {...rest} icon={icon}>
+        {children}
+      </ButtonWithIcon>
+    </Link>
+  )
+}

src/components/Button/index.tsx

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

src/components/Button/style.module.scss

@@ -0,0 +1,8 @@
+.button {
+}
+
+.buttonWithIconContainer {
+  display: flex;
+  gap: 10px;
+  align-content: center;
+}

src/components/Icon/Icon.tsx

@@ -0,0 +1,221 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { clsx } from 'clsx'
+import React, { HTMLProps, SVGProps } from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: JSX.Element
+}
+
+type TSvgProps = {
+  fill?: string
+}
+
+export const Icon = (props: TProps): JSX.Element => {
+  const { children } = props
+  const { colorMode, setColorMode } = useColorMode()
+
+  return (
+    <div
+      className={clsx(
+        styles.icon,
+        colorMode === 'dark' ? styles.dark : styles.light,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const IconArrowRightCircle = ({
+  fill = 'black',
+}: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill={'black'} />
+      <path
+        d="M9 8L11 10L9 12"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconArrowLeftCircle = ({
+  fill = 'black',
+}: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconFolder = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconGithub = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconDiscord = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconStatus = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconTwitter = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconTelegram = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)
+
+export const IconDiscourse = ({ fill = 'black' }: TSvgProps): JSX.Element => (
+  <Icon>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="black" />
+      <path
+        d="M11 12L9 10L11 8"
+        stroke="white"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </Icon>
+)

src/components/Icon/SocialmediaLink.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  IconDiscord,
+  IconDiscourse,
+  IconTwitter,
+  IconGithub,
+  IconStatus,
+  IconTelegram,
+} from './Icon'
+
+type TProps = {
+  handler: string
+  provider:
+    | 'discord'
+    | 'twitter'
+    | 'linkedin'
+    | 'status'
+    | 'github'
+    | 'discourse'
+    | 'telegram'
+}
+
+export const SocialMediaItem = (props: TProps): JSX.Element => {
+  switch (props.provider) {
+    case 'twitter':
+      return (
+        <a href={`https://twitter.com/${props.handler}`} target={'_blank'}>
+          <IconTwitter />
+        </a>
+      )
+    case 'discord':
+      return (
+        <a href={`https://discord.gg/${props.handler}`} target={'_blank'}>
+          <IconDiscord />
+        </a>
+      )
+    case 'github':
+      return (
+        <a href={`https://github.com/${props.handler}`} target={'_blank'}>
+          <IconGithub />
+        </a>
+      )
+    case 'telegram':
+      return (
+        <a href={`https://t.me/${props.handler}`} target={'_blank'}>
+          <IconTelegram />
+        </a>
+      )
+    case 'status':
+      return (
+        <a href={`https://join.status.im/u/${props.handler}`} target={'_blank'}>
+          <IconStatus />
+        </a>
+      )
+    case 'discourse':
+      return (
+        <a
+          href={
+            props.handler.indexOf('http') > -1
+              ? props.handler
+              : `https://${props.handler}`
+          }
+          target={'_blank'}
+        >
+          <IconDiscourse />
+        </a>
+      )
+    default:
+      return null
+  }
+}

src/components/Icon/index.tsx

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

src/components/Icon/style.module.scss

@@ -0,0 +1,12 @@
+.icon {
+  &.dark {
+    .fill {
+      fill: var(--ifm-color-black);
+    }
+    .stroke {
+      stroke: var(--ifm-color-white);
+    }
+  }
+  &.light {
+  }
+}

src/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx

@@ -0,0 +1,45 @@
+import { clsx } from 'clsx'
+import React from 'react'
+import { LinkButtonWithIcon } from '../../Button/LinkButtonWithIcon'
+import { IconArrowRightCircle, IconFolder } from '../../Icon'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  referenceType: 'github' | 'pdf'
+  linkUrl: string
+  linkText: string
+}
+
+export const ExternalReferenceCard = (props: TProps): JSX.Element => {
+  const { children, referenceType, linkText, linkUrl } = props
+
+  const icon = (() => {
+    switch (referenceType) {
+      case 'github':
+        return <IconArrowRightCircle />
+      case 'pdf':
+        return <IconArrowRightCircle />
+      default:
+        return null
+    }
+  })()
+
+  return (
+    <div className={clsx('alert', styles.container)}>
+      <div>
+        <div>{icon}</div>
+        <div>{children}</div>
+        <div>
+          <LinkButtonWithIcon
+            icon={icon}
+            linkProps={{ href: linkUrl, target: '_black' }}
+            className={'button--secondary'}
+          >
+            {linkText}
+          </LinkButtonWithIcon>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/mdx/ExternalReferenceCard/index.tsx

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

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

@@ -0,0 +1,12 @@
+.container {
+  background: gray;
+  border-radius: var(--ifm-global-radius);
+
+  box-shadow: none;
+
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+
+  display: flex;
+  column-gap: 10px;
+}

src/components/mdx/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,27 @@
+import { clsx } from 'clsx'
+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={clsx('card', styles.cardContainer)}>
+      <div className={clsx('card__header', styles.cardHeader)}>
+        {index && <span className={styles.latinNumber}>{ln[index]}</span>}
+        <h3 className={styles.cardTitle}>{title}</h3>
+      </div>
+      <p className={styles.cardDescription}>{text}</p>
+    </div>
+  )
+}

src/components/mdx/FeatureCard/index.tsx

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