feat: implement community component

2026-08-05 13:46:35 -07:00 · 2023-09-19 23:54:48 +09:00
parent a25c560994
commit 5c8b0e2aa0
10 changed files with 219 additions and 3 deletions
@@ -0,0 +1,37 @@
+---
+title: Join the community
+---
+
+import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx'
+
+# Join the community
+
+Welcome to the Waku community! Whether you are interested in building with Waku, contributing to the network, expanding your knowledge, or staying abreast of our progress, we have something for everyone.
+
+<Community
+  items={[
+    {
+      type: 'x',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Follow us on X',
+    },
+    {
+      type: 'discord',
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Join the community on Discord',
+    },
+    {
+      type: 'telegram',
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Jump in the conversation on Telegram',
+    },
+    {
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel:
+        'Share your thoughts on the latest research on the Vac research forum',
+    },
+  ]}
+/>
@@ -27,6 +27,9 @@ 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 DiscordWhiteSvg from '../../static/icons/discord-white.svg'
+import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
+import XSvg from '../../static/icons/x.svg'

 type TIconProps = {
  size?: 's' | 'm' | 'l'
@@ -199,3 +202,21 @@ export const IconExternalLink = (props: TIconProps): JSX.Element => (
    <ExternalLinkSvg />
  </Icon>
 )
+
+export const IconDiscordWhite = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DiscordWhiteSvg />
+  </Icon>
+)
+
+export const IconTelegramWhite = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <TelegramWhiteSvg />
+  </Icon>
+)
+
+export const IconX = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <XSvg />
+  </Icon>
+)
@@ -0,0 +1,57 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-community {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-block: 56px;
+}
+
+.mdx-community__link {
+  text-decoration: none !important;
+  height: fit-content;
+}
+
+.mdx-community__link:hover {
+  text-decoration: underline !important;
+}
+
+.mdx-community__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  min-height: 144px;
+}
+
+.mdx-community__row {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.mdx-community__logo {
+  width: 40px !important;
+  height: 40px !important;
+
+  svg {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+.mdx-community__external-link {
+}
+
+.mdx-community__label {
+  text-align: center;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-community {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,89 @@
+import { Typography } from '@acid-info/lsd-react'
+import { useColorMode } from '@docusaurus/theme-common'
+import React from 'react'
+import './Community.scss'
+import {
+  IconX,
+  IconDiscordWhite,
+  IconTelegramWhite,
+  IconExternalLink,
+} from '../../Icon' // '@logos-theme/components/Icon' doesn't work
+
+export enum CommunityType {
+  X = 'x',
+  Discord = 'discord',
+  Telegram = 'telegram',
+  CUSTOM = 'custom',
+}
+
+export type CommunityItem = {
+  logoSrc?: string
+  logoSrcDark?: string
+  link: string
+  linkLabel: string
+  type?: CommunityType
+}
+
+export type CommunityProps = React.HTMLProps<HTMLDivElement> & {
+  items?: CommunityItem[]
+}
+
+export const Community: React.FC<CommunityProps> = ({
+  items = [],
+  ...props
+}) => {
+  const { colorMode } = useColorMode()
+
+  const renderSocialIcon = (type: CommunityType) => {
+    switch (type) {
+      case CommunityType.X:
+        return <IconX className="mdx-community__logo" />
+      case CommunityType.Discord:
+        return <IconDiscordWhite className="mdx-community__logo" />
+      case CommunityType.Telegram:
+        return <IconTelegramWhite className="mdx-community__logo" />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="mdx-community" {...props}>
+      {items.map((item, index) => {
+        const logoSrc = item.logoSrc ?? item.logoSrcDark
+        return (
+          <a href={item.link} className="mdx-community__link" target="_blank">
+            <div key={index} className="mdx-community__card">
+              <div className="mdx-community__row">
+                {typeof item.type !== 'undefined' &&
+                item.type !== CommunityType.CUSTOM ? (
+                  renderSocialIcon(item.type as CommunityType)
+                ) : (
+                  <img
+                    alt={
+                      typeof item.linkLabel === 'string' ? item.linkLabel : ''
+                    }
+                    className="mdx-community__logo"
+                    src={
+                      (colorMode === 'dark'
+                        ? item.logoSrcDark
+                        : item.logoSrc) ?? logoSrc
+                    }
+                  />
+                )}
+                <IconExternalLink className="mdx-community__external-link" />
+              </div>
+              <Typography
+                variant="body1"
+                component="span"
+                className="mdx-community__body1"
+              >
+                {item.linkLabel}
+              </Typography>
+            </div>
+          </a>
+        )
+      })}
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from './Community'
@@ -1,6 +1,7 @@
 export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'
+export * from './Community'
 export * from './DocMetadata'
 export * from './FeatureList'
 export * from './Hero'
@@ -1,3 +1,4 @@
-<svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 6L5.5 1M5.5 1C5.5 1 2.45262 1 0.5 1M5.5 1V6" stroke="white"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1918 4.00028H3.42848V2.85742H13.1428V12.5717H11.9999V4.8084L3.83254 12.9758L3.02441 12.1676L11.1918 4.00028Z" fill="white"/>
+    </svg>
+    
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.90607 17.9867C14.3013 13.8933 20.5662 11.1948 23.7009 9.89093C32.6511 6.16825 34.5108 5.52158 35.723 5.50023C35.9896 5.49553 36.5857 5.5616 36.9719 5.87493C37.2979 6.13949 37.3876 6.49687 37.4306 6.74771C37.4735 6.99854 37.5269 7.56995 37.4844 8.01643C36.9994 13.1125 34.9008 25.4793 33.8331 31.187C33.3813 33.6021 32.4918 34.4119 31.6306 34.4911C29.7591 34.6634 28.3379 33.2543 26.5252 32.066C23.6887 30.2067 22.0862 29.0492 19.3329 27.2348C16.1509 25.1379 18.2137 23.9855 20.027 22.102C20.5016 21.6091 28.7477 14.1086 28.9074 13.4282C28.9273 13.3431 28.9458 13.0259 28.7574 12.8584C28.569 12.6909 28.2908 12.7482 28.0901 12.7937C27.8056 12.8583 23.2743 15.8534 14.496 21.7789C13.2098 22.6622 12.0448 23.0925 11.001 23.0699C9.85026 23.0451 7.63673 22.4193 5.99121 21.8844C3.9729 21.2283 2.3688 20.8815 2.50848 19.7673C2.58123 19.1869 3.38043 18.5934 4.90607 17.9867Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.6209 19.1338L32.6291 7.5H30.2575L21.5673 17.6015L14.6265 7.5H6.62109L17.117 22.7752L6.62109 34.975H8.99286L18.1699 24.3075L25.4999 34.975H33.5053L22.6203 19.1338H22.6209ZM19.3724 22.9098L18.3089 21.3887L9.84745 9.28543H13.4903L20.3189 19.0532L21.3823 20.5742L30.2586 33.2708H26.6157L19.3724 22.9103V22.9098Z" fill="white"/>
+</svg>