diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index ea30ecb..4b1adca 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -42,8 +42,9 @@ const config = { }, }, docs: { - routeBasePath: '/about', - path: 'docs', + id: 'root-pages', + routeBasePath: '/', + path: 'root-pages', }, og: {}, @@ -76,6 +77,14 @@ const config = { hostnames: ['localhost', 'waku.org'], }, ], + [ + '@docusaurus/plugin-content-docs', + { + id: 'docs', + routeBasePath: '/about', + path: 'docs', + }, + ], ], themeConfig: diff --git a/packages/docusaurus-playground/root-pages/events.mdx b/packages/docusaurus-playground/root-pages/events.mdx new file mode 100644 index 0000000..2a392d9 --- /dev/null +++ b/packages/docusaurus-playground/root-pages/events.mdx @@ -0,0 +1,120 @@ +--- +title: Events +description: List of all Waku events +hide_table_of_contents: true +hude_title: true +--- + +import { + EventCardList, + EventCTASection, + Grid, + Box, +} from '@site/src/components/mdx' + +# Events + +List of all Waku events + + + + + + + + + + + + + + + + + diff --git a/packages/docusaurus-playground/root-pages/events/test.mdx b/packages/docusaurus-playground/root-pages/events/test.mdx new file mode 100644 index 0000000..a51b913 --- /dev/null +++ b/packages/docusaurus-playground/root-pages/events/test.mdx @@ -0,0 +1,147 @@ +--- +title: Meet Waku +description: Uncompromising Web3 Communication at Scale +hide_table_of_contents: true +hide_title: true +--- + +import { + Box, + EventBanner, + EventInfo, + EventAbout, + EventProfileList, + EventCTA, + EventCTASection, + Grid, +} from '@site/src/components/mdx' + + + + + + + + +# Meet Waku: Uncompromising Web3 Communication at Scale + +We are a family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps. + + + + + + + + + + + + + + + +Waku is a suite of generalised messaging protocols aiming to be the communication standard for the decentralised web. It enables private and secure human-to-human, machine-to-machine, and human-to-machine communication without reliance on centralised intermediaries. Messaging through Waku is possible from one-to-one to many-to-many. + +
+ +Waku serves as the communications layer of the Logos tech stack. Alongside the trustless agreement layer, Nomos, and the storage layer, Codex, it is one of the Logos Collective's foundational projects. + +
+ +Motive: +Today's internet is increasingly controlled by a small number of tech giants. Google, Amazon, Meta, and a few others dictate what we see and with whom we can communicate. Their influence is almost limitless, and their actions shape global public opinion and even geopolitics. + +
+ +To anyone that understands the internet's present architecture, this outcome should be expected. The centralised entities through which we communicate have privileged access to reams of data that we, as internet users, produce daily, presenting an opportunity for the kind of surveillance that was once confined to the pages of science-fiction literature. Thinking that the most powerful commercial and political institutions would not leverage this would be naive. + +
+ +Yet, it doesn't have to be this way. Advances in cryptography, peer-to-peer networking, and decentralised technologies provide an alternate path forward. + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docusaurus-playground/src/css/custom.scss b/packages/docusaurus-playground/src/css/custom.scss index f7edaf4..366ba1b 100644 --- a/packages/docusaurus-playground/src/css/custom.scss +++ b/packages/docusaurus-playground/src/css/custom.scss @@ -5,3 +5,7 @@ body, html { overflow-x: hidden; } + +.theme-doc-breadcrumbs { + display: none; +} diff --git a/packages/docusaurus-playground/static/img/event-banner.png b/packages/docusaurus-playground/static/img/event-banner.png new file mode 100644 index 0000000..baa85f2 Binary files /dev/null and b/packages/docusaurus-playground/static/img/event-banner.png differ diff --git a/packages/docusaurus-playground/static/img/profile-image.png b/packages/docusaurus-playground/static/img/profile-image.png new file mode 100644 index 0000000..16bd213 Binary files /dev/null and b/packages/docusaurus-playground/static/img/profile-image.png differ diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx index ea66134..9188612 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx @@ -34,6 +34,7 @@ import TelegramWhiteSvg from '../../static/icons/telegram-white.svg' import TelegramSvg from '../../static/icons/telegram.svg' import TwitterSvg from '../../static/icons/twitter.svg' import XWhiteSvg from '../../static/icons/x-white.svg' +import EmailSvg from '../../static/icons/email.svg' type TIconProps = { size?: 's' | 'm' | 'l' @@ -249,3 +250,9 @@ export const IconRemove = (props: TIconProps): JSX.Element => ( ) + +export const IconEmail = (props: TIconProps): JSX.Element => ( + + + +) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss new file mode 100644 index 0000000..d3625ae --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss @@ -0,0 +1,25 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-about__container { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 16px; + + h2 { + margin-top: 0 !important; + grid-column: 1 / 2; + } + + span { + grid-column: 5 / 13; + } +} + +@include utils.responsive('sm', 'down') { + .mdx-event-about__container { + display: flex; + flex-direction: column; + gap: 32px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.tsx new file mode 100644 index 0000000..9451199 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import './EventAbout.scss' +import { Typography } from '@acid-info/lsd-react' + +export type EventAboutProps = React.HTMLProps & { + content: string +} + +export const EventAbout: React.FC = ({ children }) => { + return ( +
+ + About + + {children} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/index.ts new file mode 100644 index 0000000..bda1d7a --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/index.ts @@ -0,0 +1 @@ +export * from './EventAbout' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.scss new file mode 100644 index 0000000..01ed0ca --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.scss @@ -0,0 +1,8 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-banner__thumbnail { + aspect-ratio: 5 / 1; + border: 1px solid rgba(var(--lsd-border-primary), 0.2); + margin-bottom: 32px; +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.tsx new file mode 100644 index 0000000..16cb99a --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/EventBanner.tsx @@ -0,0 +1,20 @@ +import ThemedImage from '@theme/ThemedImage' +import React from 'react' +import './EventBanner.scss' + +export type EventBannerProps = React.HTMLProps & { + src: string +} + +export const EventBanner: React.FC = ({ src }) => { + return ( + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/index.ts new file mode 100644 index 0000000..a692fb2 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventBanner/index.ts @@ -0,0 +1 @@ +export * from './EventBanner' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.scss new file mode 100644 index 0000000..bcd3827 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.scss @@ -0,0 +1,21 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-cta__container { + h2 { + margin-top: 0px !important; + margin-bottom: 32px; + } +} + +.mdx-event-cta__button { + width: 100% !important; + height: 70px !important; + + & > span { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.tsx new file mode 100644 index 0000000..bb608a2 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/EventCTA.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import './EventCTA.scss' +import { Button, Typography } from '@acid-info/lsd-react' +import Link, { Props } from '@docusaurus/Link' +import { IconExternalLink } from '@logos-theme/components/Icon' + +export type EventCTAProps = { + title?: string + label: string + link: string + linkProps: Props +} + +export const EventCTA: React.FC = ({ + title, + label, + link, + linkProps, +}) => { + return ( +
+ {title && ( + + {title} + + )} + + + + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/index.ts new file mode 100644 index 0000000..3bf45b6 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTA/index.ts @@ -0,0 +1 @@ +export * from './EventCTA' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss new file mode 100644 index 0000000..67c1dfc --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss @@ -0,0 +1,67 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-cta-section__container { + border-top: 1px solid rgb(var(--lsd-border-primary)); + padding-top: 24px; + + h2 { + margin-top: 0px !important; + margin-bottom: 16px; + } + + h3 { + margin-top: 24px !important; + } +} + +.mdx-event-cta-section__cta { + width: 160px !important; + height: 40px !important; +} + +.mdx-event-cta-section__description { + white-space: pre-wrap; + margin-bottom: 32px !important; +} + +.mdx-event-cta-section__form { + display: flex; + flex-direction: column; + gap: 40px; +} + +.mdx-event-cta-section__input-fields { + display: flex; + gap: 16px; +} + +@include utils.responsive('sm', 'down') { + .mdx-event-cta-section__input-fields { + display: flex; + flex-direction: column; + gap: 32px; + + & > div { + width: 100% !important; + } + } +} + +@include utils.responsive('sm', 'down') { + .mdx-event-cta-section__input-fields { + margin-bottom: 16px; + } + + .mdx-event-cta-section__cta { + margin-top: 8px; + } + + .mdx-grid__content { + gap: 64px !important; + } + + .mdx-event-cta-section__form { + margin-bottom: -24px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx new file mode 100644 index 0000000..9e2d2fc --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx @@ -0,0 +1,112 @@ +import React from 'react' +import './EventCTASection.scss' +import { Button, TextField, Typography } from '@acid-info/lsd-react' +import Link, { Props } from '@docusaurus/Link' + +export type EventCTASectionProps = { + title: string + description: string + label: string + link?: string + linkProps: Props + formInput?: any[] +} + +export const EventCTASection: React.FC = ({ + title, + description, + label, + link, + linkProps, + formInput, +}) => { + const [formState, setFormState] = React.useState({ email: '', name: '' }) + const [message, setMessage] = React.useState('') + + const errorMessage = + 'There was an error submitting the form. Please try again.' + + const handleSubmit = async (e: any) => { + e.preventDefault() + + try { + const res = await fetch( + `https://odoo.logos.co/website_mass_mailing/subscribe2`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + jsonrpc: '2.0', + method: 'call', + params: { + value: formState?.email, + name: formState?.name || '', + list_id: 2, + subscription_type: 'email', + }, + }), + }, + ) + + const data = await res.json() + setMessage(data.result.message) + } catch (error) { + console.log(error) + setMessage(errorMessage) + } + } + + const handleChange = (e: any) => { + setFormState({ ...formState, [e.target.name]: e.target.value }) + } + + return ( +
+ + {title} + + + + {description} + + + {formInput?.length ? ( +
+
+ {formInput.map((input, index) => ( + + ))} +
+
+ + {message} +
+
+ ) : ( + + + + )} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts new file mode 100644 index 0000000..afeaecf --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts @@ -0,0 +1 @@ +export * from './EventCTASection' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss new file mode 100644 index 0000000..ded9567 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss @@ -0,0 +1,37 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-card { + display: flex; + flex-direction: column; + gap: 24px; + + text-decoration: none !important; +} + +.mdx-event-card__row { + display: flex; + justify-content: space-between; + width: 100%; + gap: 8px; +} + +.mdx-event-card__thumbnail { + aspect-ratio: 5 / 1; + border: 1px solid rgba(var(--lsd-border-primary), 0.2); +} + +.mdx-event-card__title { + &:hover { + text-decoration: underline !important; + } +} + +.mdx-event-card__info { + display: flex; + flex-direction: column; + gap: 16px; + border-top: 1px solid rgba(var(--lsd-border-primary), 0.2); + padding: 16px 16px 16px 0; + width: 100%; +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx new file mode 100644 index 0000000..7b01927 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx @@ -0,0 +1,50 @@ +import { Typography } from '@acid-info/lsd-react' +import ThemedImage from '@theme/ThemedImage' +import clsx from 'clsx' +import React from 'react' +import './EventCard.scss' + +export type EventCardProps = React.HTMLProps & { + thumbnail: string + title: string + date: React.ReactNode + location: string +} + +export const EventCard: React.FC = ({ + thumbnail, + title, + date, + location, + ...props +}) => { + return ( + + + + {title} + +
+
+ Date + {date} +
+
+ Location + {location} +
+
+ + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/index.ts new file mode 100644 index 0000000..a846eb6 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/index.ts @@ -0,0 +1 @@ +export * from './EventCard' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.scss new file mode 100644 index 0000000..b4549c8 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.scss @@ -0,0 +1,13 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-card-list__button { + display: block; + margin: 0 auto; +} + +@include utils.responsive('sm', 'down') { + .mdx-event-card-list__container { + margin-bottom: 48px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.tsx new file mode 100644 index 0000000..dcff886 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.tsx @@ -0,0 +1,44 @@ +import React, { useState } from 'react' +import './EventCardList.scss' +import { Button } from '@acid-info/lsd-react' +import { Box, EventCard, EventCardProps, Grid } from '..' + +export type EventCardListProps = { + data: EventCardProps[] +} + +export const EventCardList: React.FC = ({ data }) => { + const [showMore, setShowMore] = useState(data?.length > 6) + const [count, setCount] = useState(6) + + const handleShowMore = () => { + setCount((prev) => prev + 6) + + if (count + 6 >= data?.length) { + setShowMore(false) + } + } + + return ( +
+ + + {data.slice(0, count).map((event, index) => ( + + + + ))} + + + {showMore && ( + + )} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/index.ts new file mode 100644 index 0000000..889750b --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/index.ts @@ -0,0 +1 @@ +export * from './EventCardList' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss new file mode 100644 index 0000000..e7f8ccb --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss @@ -0,0 +1,17 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-info__container { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + gap: 16px; + flex: 1 0 0; + align-self: stretch; + box-sizing: border-box; + height: 100%; + + border-top: 1px solid rgba(var(--lsd-border-primary)); + background: rgba(var(--lsd-theme-primary), 0.05); +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.tsx new file mode 100644 index 0000000..69c0e03 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import './EventInfo.scss' +import { Typography } from '@acid-info/lsd-react' + +export type EventInfoProps = React.HTMLProps & { + label: string + content: string +} + +export const EventInfo: React.FC = ({ label, content }) => { + return ( +
+ + {label} + + + {content} + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/index.ts new file mode 100644 index 0000000..716ddee --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/index.ts @@ -0,0 +1 @@ +export * from './EventInfo' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.scss new file mode 100644 index 0000000..47b769e --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.scss @@ -0,0 +1,40 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-profile { + display: flex; + flex-direction: column; + gap: 16px; + + text-decoration: none !important; +} + +.mdx-event-profile__row { + display: flex; + justify-content: space-between; + width: 100%; + gap: 8px; +} + +.mdx-event-profile__image { + aspect-ratio: 1 / 1; +} + +.mdx-event-profile__title { + margin-bottom: 8px; +} + +.mdx-event-profile__info { + display: flex; + flex-direction: column; +} + +.mdx-event-profile__role { + margin-bottom: 16px; +} + +.mdx-event-profile__social { + display: flex; + align-items: center; + gap: 8px; +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.tsx new file mode 100644 index 0000000..ebcc4e6 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/EventProfile.tsx @@ -0,0 +1,64 @@ +import { Typography } from '@acid-info/lsd-react' +import ThemedImage from '@theme/ThemedImage' +import clsx from 'clsx' +import React from 'react' +import './EventProfile.scss' +import { IconEmail, IconLinkedin } from '@logos-theme/components/Icon' + +export type EventProfileProps = { + image: string + name: string + role: React.ReactNode + email?: string + linkedin?: string +} + +export const EventProfile: React.FC = ({ + image, + name, + role, + email, + linkedin, + ...props +}) => { + return ( +
+ +
+ + {name} + + + {role} + +
+ {email && ( + + + + )} + {linkedin && ( + + + + )} +
+
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/index.ts new file mode 100644 index 0000000..9470889 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfile/index.ts @@ -0,0 +1 @@ +export * from './EventProfile' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss new file mode 100644 index 0000000..cdd8105 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss @@ -0,0 +1,8 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-event-profile-list__container { + h2 { + margin-bottom: 16px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx new file mode 100644 index 0000000..ad3a454 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import './EventProfileList.scss' +import { Typography } from '@acid-info/lsd-react' +import { Box, EventProfile, EventProfileProps, Grid } from '..' + +export type EventProfileListProps = { + title?: string + description?: string + data: EventProfileProps[] +} + +export const EventProfileList: React.FC = ({ + title, + description, + data, +}) => { + return ( +
+ {title && ( + + {title} + + )} + {description && ( + {description} + )} + + + {data.map((event, index) => ( + + + + ))} + + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/index.ts new file mode 100644 index 0000000..dee4128 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/index.ts @@ -0,0 +1 @@ +export * from './EventProfileList' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index 69ffa92..ed3ccff 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -29,3 +29,12 @@ export * from './Showcase' export * from './ShowcaseCard' export * from './SocialCard' export * from './TimelineItem' +export * from './EventCard' +export * from './EventCardList' +export * from './EventBanner' +export * from './EventInfo' +export * from './EventAbout' +export * from './EventProfile' +export * from './EventProfileList' +export * from './EventCTA' +export * from './EventCTASection' diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 79a56a8..a457d9e 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -774,6 +774,37 @@ main[itemtype*='Blog'] { } } +.events { + .theme-doc-markdown > h1 { + margin-bottom: 16px !important; + } + + aside { + display: none; + } + + .pagination-nav { + display: none; + } + + .theme-doc-breadcrumbs { + display: block; + + .breadcrumbs__link { + text-transform: capitalize; + } + + .breadcrumbs__item--active { + box-sizing: border-box; + border: 1px solid rgb(var(--lsd-border-primary)); + + & > span { + padding: 4px 8px; + } + } + } +} + @include utils.responsive('sm', 'down') { :root { --ifm-spacing-vertical: var(--ifm-global-spacing); @@ -849,6 +880,22 @@ main[itemtype*='Blog'] { } } + .events { + @include utils.responsive('xl', 'down') { + .main-wrapper { + & > div { + aside { + grid-column: 1 / 1; + } + + main { + grid-column: 1 / 17; + } + } + } + } + } + .navbar__inner { display: flex; flex-direction: row; diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/email.svg b/packages/logos-docusaurus-theme/src/client/static/icons/email.svg new file mode 100644 index 0000000..9c49a65 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/linkedin.svg b/packages/logos-docusaurus-theme/src/client/static/icons/linkedin.svg index 1d64065..f24dd73 100644 --- a/packages/logos-docusaurus-theme/src/client/static/icons/linkedin.svg +++ b/packages/logos-docusaurus-theme/src/client/static/icons/linkedin.svg @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx index ca8ecda..ed58481 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx @@ -79,6 +79,8 @@ export const BreadcrumbsBase: React.FC = ({ return null } + const categoryToLink = ['events'] + return (