waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: Roadmap and SectionHeader design adjustments

Browse Source
This commit is contained in:
Hossein Mehrabi
2023-12-19 19:45:46 +03:30
parent aba8233685
commit e11cbbaadd
7 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docusaurus-playground/docusaurus.config.js
+1
View File
@@ -45,6 +45,7 @@ const config = {
routeBasePath: '/about',
path: 'docs',
},
og: {},
// Uncomment to fetch new generated data.
/*
packages/docusaurus-playground/src/pages/index.mdx
+5 -1
View File
@@ -390,7 +390,11 @@ import * as challengesData from '/generated/challenges.json'
description: 'Operator Incentivization, use-case specific SDKs',
},
]}
/>
>
<CallToActionButton href="/" size="large" variant="outlined">
Read more
</CallToActionButton>
</Roadmap>
</Box>
<Box top={{ xs: 144, lg: 216 }}>
packages/docusaurus-playground/src/pages/xyz.tsx
+16
View File
@@ -0,0 +1,16 @@
import { SubscriptionPage } from '@acid-info/logos-docusaurus-theme/lib/client/theme/SubscriptionPage'
import Head from '@docusaurus/Head'
import Layout from '@theme/Layout'
import React from 'react'
export default () => {
return (
<Layout title="Subscribe to our newsletter">
<Head>
<meta name="og:image_title" content="Subscribe to our newsletter" />
<meta name="og:generate_image" content="false" />
</Head>
<SubscriptionPage />
</Layout>
)
}
packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
-21
View File
@@ -3,19 +3,6 @@
.mdx-roadmap {
width: 100%;
border-top: 1px solid rgb(var(--lsd-border-primary));
padding-top: 24px;
}
.mdx-roadmap__header {
display: flex;
flex-direction: row;
gap: 1rem;
> * {
flex-basis: 50%;
}
}
.mdx-roadmap__timeline {
@@ -33,14 +20,6 @@
}
@include utils.responsive('lg', 'down') {
.mdx-roadmap__header {
flex-direction: column;
h2 {
@include lsd.typography('body1');
}
}
.mdx-roadmap__timeline {
margin-top: 4rem;
}
packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
+8 -13
View File
@@ -1,7 +1,6 @@
import { Typography } from '@acid-info/lsd-react'
import clsx from 'clsx'
import React from 'react'
import { Grid } from '..'
import { Grid, SectionHeader } from '..'
import { TimelineItem, TimelineItemProps } from '../TimelineItem'
import './Roadmap.scss'
@@ -72,17 +71,13 @@ export const Roadmap: React.FC<RoadmapProps> = ({
return (
<div className={clsx(className, 'mdx-roadmap')} {...props}>
<div className="mdx-roadmap__header">
<Typography component="h2" variant="h5">
{title}
</Typography>
{description && (
<Typography component="p" variant="h4">
{description}
</Typography>
)}
</div>
<SectionHeader
className="mdx-roadmap__header"
title={title}
description={description}
>
{children}
</SectionHeader>
{timeline.length > 0 && (
<Grid
className="mdx-roadmap__timeline"
packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss
+6 -1
View File
@@ -15,10 +15,15 @@
}
}
.mdx-section-header--with-description {
.mdx-section-header__extra {
margin-top: 2rem;
}
}
.mdx-section-header__title {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
}
packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx
+12 -2
View File
@@ -12,15 +12,24 @@ export type SectionHeaderProps = Omit<BoxProps, 'title'> & {
export const SectionHeader: React.FC<
React.PropsWithChildren<SectionHeaderProps>
> = ({ title, description, className, children, ...props }) => {
const withDescription = !!description
return (
<Box className={clsx(className, 'mdx-section-header')} {...props}>
<Box
className={clsx(
className,
'mdx-section-header',
withDescription && 'mdx-section-header--with-description',
)}
{...props}
>
<Typography
className="mdx-section-header__title"
component="h2"
variant="h5"
>
{title}
{children && (
{!withDescription && children && (
<div className="mdx-section-header__extra">{children}</div>
)}
</Typography>
@@ -32,6 +41,7 @@ export const SectionHeader: React.FC<
variant="h3"
>
{description}
{<div className="mdx-section-header__extra">{children}</div>}
</Typography>
)}
</Box>