fix build errors

packages/docusaurus-playground/docs/index.md

@@ -40,6 +40,18 @@ You can type this command into Command Prompt, Powershell, Terminal, or any othe
 
 The command also installs all necessary dependencies you need to run Docusaurus.
 
+```
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+const Hello = () => {
+const {siteConfig} = useDocusaurusContext();
+  const {title, tagline} = siteConfig;
+
+  return <div>{`${title} · ${tagline}`}</div>;
+};
+```
+
 ## Start your site
 
 Run the development server:

packages/docusaurus-playground/src/theme/CodeBlock/Container/styles.module.css

@@ -1,7 +0,0 @@
-.codeBlockContainer {
-  background: var(--prism-background-color);
-  color: var(--prism-color);
-  margin-bottom: var(--ifm-leading);
-  box-shadow: var(--ifm-global-shadow-lw);
-  border-radius: var(--ifm-code-border-radius);
-}

packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx

@@ -0,0 +1,19 @@
+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)} {...(rest as any)}>
+      {children}
+    </button>
+  )
+}

packages/logos-docusaurus-theme/src/client/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>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx

@@ -0,0 +1,22 @@
+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>
+}
+
+export const LinkButton = ({
+  children,
+  linkProps,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Link {...linkProps}>
+      <Button {...rest}>{children}</Button>
+    </Link>
+  )
+}

packages/logos-docusaurus-theme/src/client/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>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -0,0 +1,144 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { clsx } from 'clsx'
+import React from 'react'
+
+import styles from './style.module.scss'
+
+import ArrowLCircleSvg from '../../static/icons/arrow-left-circle.svg'
+import ArrowRCircleSvg from '../../static/icons/arrow-right-circle.svg'
+import DiscordSvg from '../../static/icons/discord.svg'
+import DiscourseSvg from '../../static/icons/discourse.svg'
+import DotSvg from '../../static/icons/dot.svg'
+import DropdownSvg from '../../static/icons/dropdown.svg'
+import FolderSvg from '../../static/icons/folder.svg'
+import GithubSvg from '../../static/icons/github.svg'
+import GScholarSvg from '../../static/icons/gscholar.svg'
+import LinkedinSvg from '../../static/icons/linkedin.svg'
+import SearchSvg from '../../static/icons/search.svg'
+import StatusSvg from '../../static/icons/status.svg'
+import TelegramSvg from '../../static/icons/telegram.svg'
+import TwitterSvg from '../../static/icons/twitter.svg'
+import CopySvg from '../../static/icons/copy.svg'
+
+type TIconProps = {
+  size?: 's' | 'm' | 'l'
+  className?: string
+}
+
+type TProps = {
+  children?: JSX.Element
+  fill?: string
+} & TIconProps
+
+export const Icon = (props: TProps): JSX.Element => {
+  const { children, size = 'm' } = props
+  const { colorMode, setColorMode } = useColorMode()
+
+  return (
+    <div
+      className={clsx(
+        styles.icon,
+        colorMode === 'dark' ? styles.dark : styles.light,
+        styles[size],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const IconArrowRightCircle = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <ArrowRCircleSvg />
+  </Icon>
+)
+
+export const IconArrowLeftCircle = (props: TIconProps): JSX.Element => (
+  <Icon>
+    <ArrowLCircleSvg />
+  </Icon>
+)
+
+export const IconFolder = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <FolderSvg />
+  </Icon>
+)
+
+export const IconGithub = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <GithubSvg />
+  </Icon>
+)
+
+export const IconDiscord = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DiscordSvg />
+  </Icon>
+)
+
+export const IconStatus = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <StatusSvg />
+  </Icon>
+)
+
+export const IconTwitter = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <TwitterSvg />
+  </Icon>
+)
+
+export const IconTelegram = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <TelegramSvg />
+  </Icon>
+)
+
+export const IconDiscourse = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DiscourseSvg />
+  </Icon>
+)
+
+export const IconLinkedin = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <LinkedinSvg />
+  </Icon>
+)
+
+export const IconDot = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DotSvg />
+  </Icon>
+)
+
+export const IconFolderFilled = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <FolderSvg />
+  </Icon>
+)
+
+export const IconSearch = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <SearchSvg />
+  </Icon>
+)
+
+export const IconDropdown = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DropdownSvg />
+  </Icon>
+)
+
+export const IconGScholar = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <GScholarSvg />
+  </Icon>
+)
+
+export const IconCopy = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <CopySvg />
+  </Icon>
+)

packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {
+  IconDiscord,
+  IconDiscourse,
+  IconTwitter,
+  IconGithub,
+  IconStatus,
+  IconTelegram,
+  IconGScholar,
+} from './Icon'
+import { ECommunityProviders } from '@logos-theme/types/ui.types'
+
+type TProps = {
+  handler: string
+  provider: ECommunityProviders
+}
+
+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://discordapp.com/users/${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>
+      )
+    case ECommunityProviders.gscholar:
+      return (
+        <a
+          href={`https://scholar.google.com/citations?user=${props.handler}`}
+          target={'_blank'}
+        >
+          <IconGScholar />
+        </a>
+      )
+    default:
+      return <></>
+  }
+}

packages/logos-docusaurus-theme/src/client/components/Icon/index.ts

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

packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss

@@ -0,0 +1,29 @@
+.icon {
+  display: flex;
+  &.s {
+    svg {
+      width: 10px;
+    }
+  }
+  &.m {
+    svg {
+      width: 20px;
+    }
+  }
+  &.l {
+    svg {
+      width: 40px;
+    }
+  }
+
+  &.dark {
+    .fill {
+      fill: var(--ifm-color-black);
+    }
+    .stroke {
+      stroke: var(--ifm-color-white);
+    }
+  }
+  &.light {
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx

@@ -6,7 +6,7 @@ import {
   IconFolder,
   IconFolderFilled,
   IconGithub,
-} from '../../Icon/index'
+} from '../../Icon/Icon'
 import styles from './style.module.scss'
 
 type TProps = {

packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx

@@ -2,7 +2,7 @@ import Link from '@docusaurus/Link'
 import clsx from 'clsx'
 import React from 'react'
 import { ButtonWithIcon } from '../../Button/ButtonWithIcon'
-import { IconArrowRightCircle, IconDot } from '../../Icon/index'
+import { IconArrowRightCircle, IconDot } from '../../Icon/Icon'
 import styles from './style.module.scss'
 
 type TProps = {

packages/logos-docusaurus-theme/src/client/components/mdx/TeamList/TeamList.tsx

@@ -6,7 +6,7 @@ import { useTeam } from '@logos-theme/lib/team.utils'
 import { ECommunityProviders } from '@logos-theme/types/ui.types'
 import clsx from 'clsx'
 import React from 'react'
-import { SocialMediaItem } from '../../Icon/SocialmediaLink'
+import { SocialMediaItem } from '@logos-theme/components/Icon/SocialmediaLink'
 import styles from './style.module.scss'
 
 type TProps = {

packages/logos-docusaurus-theme/src/client/static/icons/copy.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.91667 12.8334C2.59583 12.8334 2.32108 12.719 2.09242 12.4904C1.86375 12.2617 1.74961 11.9871 1.75 11.6667V3.50002H2.91667V11.6667H9.33333V12.8334H2.91667ZM5.25 10.5C4.92917 10.5 4.65442 10.3857 4.42575 10.157C4.19708 9.92836 4.08295 9.6538 4.08333 9.33335V2.33335C4.08333 2.01252 4.19767 1.73777 4.42633 1.5091C4.655 1.28044 4.92956 1.1663 5.25 1.16669H10.5C10.8208 1.16669 11.0956 1.28102 11.3243 1.50969C11.5529 1.73835 11.6671 2.01291 11.6667 2.33335V9.33335C11.6667 9.65419 11.5523 9.92894 11.3237 10.1576C11.095 10.3863 10.8204 10.5004 10.5 10.5H5.25ZM5.25 9.33335H10.5V2.33335H5.25V9.33335Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.js

@@ -1,16 +1,13 @@
 import React from 'react'
 import clsx from 'clsx'
-import { ThemeClassNames, usePrismTheme } from '@docusaurus/theme-common'
-import { getPrismCssVariables } from '@docusaurus/theme-common/internal'
+import { ThemeClassNames } from '@docusaurus/theme-common'
 import styles from './styles.module.css'
+
 export default function CodeBlockContainer({ as: As, ...props }) {
-  const prismTheme = usePrismTheme()
-  const prismCssVariables = getPrismCssVariables(prismTheme)
   return (
     <As
       // Polymorphic components are hard to type, without `oneOf` generics
       {...props}
-      style={prismCssVariables}
       className={clsx(
         props.className,
         styles.codeBlockContainer,

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css

@@ -0,0 +1,6 @@
+.codeBlockContainer {
+  background: transparent;
+  color: var(--prism-color);
+  margin-bottom: var(--ifm-leading);
+  border: 1px solid rgb(var(--lsd-border-primary));
+}