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

docs: update documentation

Browse Source 
MDX components: JobsPerDepartment, ExternalResourceCard, AssetCard

Preset: add documentation for jobList generated file
This commit is contained in:
Hossein Mehrabi
2023-12-12 19:01:22 +03:30
parent ceb7467581
commit 6f8f534cb9
6 changed files with 239 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/logos-docusaurus-preset/README.md
+27
View File
@@ -6,6 +6,8 @@
- [Supported Themes](#supported-themes)
- [OpenGraph Image Generator](#opengraph-image-generator)
- [Local Search](#local-search)
- [Generated Files](#generated-files)
- [Job Openings](#job-openings)
- [Docs Plugin](#docs-plugin)
- [Pages Plugin](#pages-plugin)
- [Blog Plugin](#blog-plugin)
@@ -191,6 +193,31 @@ presets: [
To learn more on how the plugin works, please visit the [plugin documentation](../docusaurus-search-local/README.md).
### Generated Files
#### Job Openings
Use the `generated.jobList` option to fetch job openings from the Greenhouse API for a specific job board. Each time you run `yarn start` or `yarn build`, the plugin will fetch the latest job openings from the Greenhouse API and generate a JSON file containing the job openings for the specified job board. The generated file will be located at `static/generated/jobs.json`.
```js
presets: [
[
'@acid-info/logos-docusaurus-preset',
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
({
businessUnit: 'Logos',
generated: {
jobList: {
jobBoard: 'your-job-board-id',
},
},
}),
],
],
```
You can import the generated file in your website's code and use it to display the job openings. For example, you can use the `JobsPerDepartment` component from the [Logos theme](../logos-docusaurus-theme/README.md#jobsperdepartment) to display the job openings per department.
### Docs Plugin
The Docs plugin (Official Docusaurus Docs Plugin) is enabled by default and simplifies the creation and management of documentation on your website. To disable this plugin, set `docs` to `false` in your preset configuration.
packages/logos-docusaurus-theme/COMPONENTS.MD
-434
View File
@@ -1,434 +0,0 @@
### AppCard
A card component for displaying information about an app.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | -------------- | -------- | ------- | ------------------------------------------- |
| logoSrc | string | false | | The source URL for the light logo image |
| logoSrcDark | string | false | | The source URL for the dark logo image |
| name | ReactReactNode | false | | The name of the app |
| description | ReactReactNode | false | | The description of the app |
| link | string | false | | The URL to link to when the card is clicked |
| linkLabel | string | false | | The label for the link to the app |
**Example usage:**
```jsx
import { AppCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<AppCard
name="Status"
link="https://status.im"
linkLabel="Visit Status"
logoSrc="/img/status-mark-white.svg"
description="Waku powers many of the Status super app's features, including its private messaging."
/>
```
**Grid example:**
```jsx
import {
Grid,
AppCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Grid xs={{ cols: 1, wrap: true, gap: '0 1rem' }} lg={{ cols: 2 }}>
<Grid.Item xs={1}>
<AppCard
name="Status"
description="Waku powers many of the Status super app's features, including its private messaging."
logoSrc="/img/status-mark-black.svg"
logoSrcDark="/img/status-mark-white.svg"
link="https://status.im"
/>
</Grid.Item>
<Grid.Item xs={1}>
<AppCard
name="Status"
description="Waku powers many of the Status super app's features, including its private messaging."
logoSrc="/img/status-mark-black.svg"
logoSrcDark="/img/status-mark-white.svg"
link="https://status.im"
/>
</Grid.Item>
</Grid>
```
### Box
A box component that can be used to add top and bottom margins with breakpoints.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ---------------------------------- | -------- | ------- | ----------- |
| top | BreakpointsStyle<number> \| number | false | 0 | |
| bottom | BreakpointsStyle<number> \| number | false | 0 | |
| style | undefined | false | {} | undefined |
```tsx
import { Box } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Box top={{ xs: 10, md: 20 }} bottom={30}>
<p>This is some content inside the box.</p>
</Box>
```
### CallToActionButton
A call-to-action button that can be used in MDX pages.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ---------------------- | -------- | -------- | --------------------------------------------- | ---------------------- |
| href | string | false | | The URL to link to when the button is clicked |
| size | 'small' \| 'medium' | 'large' | false | 'large' | The size of the button |
| variant | ButtonProps['variant'] | false | 'filled' | The variant of the button |
```jsx
import { CallToActionButton } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionButton
href="https://discord.gg/server"
size="large"
variant="filled"
>
Join our community
</CallToActionButton>
```
### CallToActionSection
A call-to-action section component that can be used in MDX pages.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | ----------------------------------- | -------- | ---------- | --------------------------------------------------------- |
| title | ReactReactNode | false | | The title of the section |
| description | ReactReactNode | false | | The description of the section |
| columns | 1 \| 2 | false | 1 | The number of columns to display the content in |
| href | string | false | | The URL to link to when the button is clicked |
| label | string | false | | The label to display on the button |
| target | ReactAnchorHTMLAttributes['target'] | false | | The target attribute for the link e.g., `_self`, `_blank` |
| variant | ButtonProps['variant'] | false | 'outlined' | The variant of the button |
| list | Array | false | [] | A list of items to display in the section |
```tsx
import { CallToActionSection } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionSection
title="Logos Network State"
columns={1}
description="Waku is powering the communication layer of the Logos Network State. Logos is a grassroots movement to provide trust-minimised, corruption-resistant governing services and social institutions to peaceful people worldwide. Learn more about our ambitious vision."
label="Explore Logos"
href="https://logos.co/"
target="_blank"
/>
```
With a list:
```tsx
import { CallToActionSection } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionSection
title="Run Nimbus in one of three setups"
description={
<>
Follow the detailed
<br />
step-by-step guide here
</>
}
list={[
{
title: 'Simple setup',
description:
'Run integrated Nimbus Beacon Node and Validator Client together.',
},
{
title: 'Use Nimbus Beacon node',
description:
'Run Nimbus Beacon Node with an alternative validator client.',
},
{
title: 'Use Nimbus Validator client',
description:
'Run Nimbus Validator Client with an alternative Beacon Node',
},
]}
label="Get Nimbus"
target="_blank"
href="https://nimbus.guide/quick-start.html"
/>
```
### FeatureList
A component that displays a list of features with titles and descriptions.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ----------------- | -------- | ---------- | ------------------------------------------------- |
| title | ReactReactNode | false | 'Features' | The title of the feature list. |
| features | Array | false | [] | An array of features to be displayed in the list. |
| alignment | 'bottom' \| 'top' | false | 'bottom' | The vertical alignment of feature description. |
```tsx
import { FeatureList } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<FeatureList
title="Features"
alignment="top"
features={[
{ title: 'Feature 1', description: 'Description of feature 1' },
{ title: 'Feature 2', description: 'Description of feature 2' },
{ title: 'Feature 3', description: 'Description of feature 3' },
]}
>
<CallToActionButton variant="outlined" href="/about/" target="_self">
Read More
</CallToActionButton>
</FeatureList>
```
### Hero
A hero component that displays a large banner at the top of a page.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ------------------- | -------- | ------- | ----------- | --- |
| size | 'large' \| 'medium' | 'small' | false | 'medium' | |
```tsx
import {
Hero,
HeroTitle,
HeroDescription,
HeroVideo,
HeroActions,
HeroAction,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Hero size="large">
<HeroInfo>
<HeroTitle>
{'Light and Performant Clients, for All Ethereum Validators'}
</HeroTitle>
<HeroDescription>
{
'Ethereum validators of all sizes trust Nimbus to run their nodes. From large node operators, to solo stakers on a Raspberry Pi.'
}
</HeroDescription>
<HeroActions>
<HeroAction
variant="outlined"
href="https://nimbus.guide/quick-start.html"
target="_blank"
>
Get Nimbus
</HeroAction>
</HeroActions>
</HeroInfo>
<HeroVideo
placeholderSrc="/hero/halo01-1080x1080-placeholder.png"
desktop={{ scale: '1.514792899' }}
mobile={{ scale: '1.514792899' }}
>
<source
src="/hero/halo01-2048x2048-24fps-1M.mov"
type='video/mp4; codecs="hvc1"'
/>
<source src="/hero/halo01-2048x2048-24fps-1M.webm" type="video/webm" />
</HeroVideo>
</Hero>
```
### PageCard
A card component used in Docusaurus auto-generated category index pages to display page links.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | -------------- | -------- | ------------------------------ | ----------- |
| title | ReactReactNode | false | | |
| description | ReactReactNode | false | | |
| icon | ReactReactNode | false | <FolderIcon color="primary" /> | |
| target | undefined | false | '\_self' | undefined |
```tsx
import { PageCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<PageCard
title="Sample Page"
description="This is a sample page description."
href="/sample-page"
/>
```
### ProfileCard
A component used to display team members' profiles, including their name, avatar, and social links.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------------- | ------ | -------- | ------- | ----------- |
| imgSrc | string | false | | |
| name | string | false | | |
| githubUsername | string | false | | |
| githubLink | string | false | | |
| discordUsername | string | false | | |
| discordLink | string | false | | |
```tsx
import { ProfileCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<ProfileCard
imgSrc="/path/to/profile-image.jpg"
name="John Doe"
githubUsername="johndoe"
githubLink="https://github.com/johndoe"
discordUsername="johndoe#1234"
discordLink="https://discordapp.com/users/johndoe"
/>
```
Example usage of ProfileCard within a grid:
```tsx
import {
Grid,
ProfileCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Grid
xs={{ cols: 3, gap: '1rem', wrap: false }}
md={{ cols: 4, gap: '1rem', wrap: true }}
>
<Grid.Item>
<ProfileCard
name="Name"
githubUsername="Github"
githubLink="https://github.com/"
discordUsername="Discord"
discordLink="https://discord.gg/"
/>
</Grid.Item>
Add more ProfileCard items within the grid
</Grid>
```
### SocialCard
A component used for displaying social media or community platform cards with a logo and description.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | -------------- | -------- | ------- | ----------------------------------------------------------------------------------- |
| logoSrc | string | false | | The URL of the logo image for the social media or community platform (light theme). |
| logoSrcDark | string | false | | The URL of the logo image for the social media or community platform (dark theme). |
| description | ReactReactNode | false | | The description or content associated with the social media or community platform. |
```tsx
import { SocialCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<SocialCard
title="Telegram Community"
logoSrc="/path/to/telegram-logo.png"
description="Join our Telegram community to stay updated and chat with fellow members."
href="https://t.me/your-telegram-community"
/>
```
Grid example:
```tsx
import {
Box,
Grid,
SocialCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Box top={56} bottom={56}>
<Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
<Grid.Item xs={1}>
<SocialCard
href="https://twitter.com/twitter-handle"
logoSrc="/icons/x-black.svg"
logoSrcDark="/icons/x-white.svg"
description="Follow us on X"
/>
</Grid.Item>
<Grid.Item xs={1}>
<SocialCard
href="https://discord.gg/discord-server"
logoSrc="/icons/discord-black.svg"
logoSrcDark="/icons/discord-white.svg"
description="Join the community on Discord"
/>
</Grid.Item>
</Grid>
</Box>
```
### TimelineItem
A component for displaying roadmap items, such as events or milestones, in a timeline layout.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | ------------------- | -------- | ------- | ---------------------------------------------------------------------------------------- | -------------------------------------- |
| index | ReactReactNode | true | | The index or label of the timeline item. |
| alignment | 'top' \| 'bottom' | false | 'top' | The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') |
| period | ReactReactNode | true | | The period or time frame associated with the timeline item. e.g., `2023 Q3` |
| description | ReactReactNode | true | | The description or content of the timeline item. |
| borderStyle | 'solid' \| 'dashed' | 'none' | false | | The border style for the timeline item |
Roadmap example:
```tsx
import {
Box,
Grid,
TimelineItem,
SectionHeader,
CallToActionButton,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Box top={{ xs: 144, lg: 216 }}>
<SectionHeader
title="Roadmap"
description="Roadmap description"
bottom={{ xs: '4rem', lg: '7.25rem' }}
/>
<Grid
xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
actions={
<CallToActionButton
style={{ marginTop: 0 }}
size="small"
variant="outlined"
href="/about"
>
Read more
</CallToActionButton>
}
>
<Grid.Item>
<TimelineItem
index={0}
period="2013"
borderStyle="solid"
description="First item"
/>
</Grid.Item>
Add more items here
<Grid.Item>
<TimelineItem
index={10}
period="2024+"
borderStyle="none"
description="Last item"
/>
</Grid.Item>
</Grid>
</Box>
```
packages/logos-docusaurus-theme/README.md
+124 -30
View File
@@ -11,11 +11,14 @@
- [How to Disable the Image Generator for a Specific Page:](#how-to-disable-the-image-generator-for-a-specific-page)
- [MDX Components](#mdx-components)
- [AppCard](#appcard)
- [AssetCard](#assetcard)
- [Box](#box)
- [CallToActionButton](#calltoactionbutton)
- [CallToActionSection](#calltoactionsection)
- [ExternalResourceCard](#externalresourcecard)
- [FeatureList](#featurelist)
- [Hero](#hero)
- [JobsPerDepartment](#jobsperdepartment)
- [PageCard](#pagecard)
- [ProfileCard](#profilecard)
- [SocialCard](#socialcard)
@@ -219,6 +222,7 @@ A card component for displaying information about an app.
```jsx
import { AppCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<AppCard
name="Status"
link="https://status.im"
@@ -235,6 +239,7 @@ import {
Grid,
AppCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Grid xs={{ cols: 1, wrap: true, gap: '0 1rem' }} lg={{ cols: 2 }}>
<Grid.Item xs={1}>
<AppCard
@@ -257,16 +262,44 @@ import {
</Grid>
```
### AssetCard
A card component with an image preview and download buttons.
**Props**
| Prop Name | Type | Required | Default | Description |
| ------------- | -------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| title | ReactReactNode | false | | The title of the asset |
| previewSrc | string | true | | The source URL for the preview image |
| forceDownload | boolean | false | false | Whether to force download the asset when clicking on the preview image (default: false); if false, the asset might open in a new tab |
| downloadable | Array | false | | The list of downloadable assets |
**Example usage:**
```jsx
import { AssetCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<AssetCard
title="Logo"
previewSrc="/img/logo.svg"
downloadable={[
{ src: '/img/logo.svg', title: 'SVG' },
{ src: '/img/logo.png', title: 'PNG' },
]}
/>
```
### Box
A box component that can be used to add top and bottom margins with breakpoints.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ------------------------ | -------- | ------- | ----------- | --- |
| top | BreakpointsStyle<number> | number | false | 0 | |
| bottom | BreakpointsStyle<number> | number | false | 0 | |
| style | undefined | false | {} | undefined |
| Prop Name | Type | Required | Default | Description |
| --------- | ---------------------------------- | -------- | ------- | ----------- |
| top | BreakpointsStyle<number> \| number | false | 0 | |
| bottom | BreakpointsStyle<number> \| number | false | 0 | |
| style | undefined | false | {} | undefined |
```tsx
import { Box } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
@@ -281,15 +314,15 @@ A call-to-action button that can be used in MDX pages.
**Props**
| Prop Name | Type | Required | Default | Description |
| -------------- | ---------------------- | -------- | -------- | --------------------------------------------- | ------- | ---------------------- |
| href | string | false | | The URL to link to when the button is clicked |
| size | 'small' | 'medium' | 'large' | false | 'large' | The size of the button |
| @type {'small' | 'medium' | 'large'} |
| variant | ButtonProps['variant'] | false | 'filled' | The variant of the button |
| Prop Name | Type | Required | Default | Description |
| --------- | ---------------------- | -------- | -------- | --------------------------------------------- | ---------------------- |
| href | string | false | | The URL to link to when the button is clicked |
| size | 'small' \| 'medium' | 'large' | false | 'large' | The size of the button |
| variant | ButtonProps['variant'] | false | 'filled' | The variant of the button |
```jsx
import { CallToActionButton } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionButton
href="https://discord.gg/server"
size="large"
@@ -306,10 +339,10 @@ A call-to-action section component that can be used in MDX pages.
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | ----------------------------------- | -------- | ---------- | --------------------------------------------------------- | ----------------------------------------------- |
| ----------- | ----------------------------------- | -------- | ---------- | --------------------------------------------------------- |
| title | ReactReactNode | false | | The title of the section |
| description | ReactReactNode | false | | The description of the section |
| columns | 1 | 2 | false | 1 | The number of columns to display the content in |
| columns | 1 \| 2 | false | 1 | The number of columns to display the content in |
| href | string | false | | The URL to link to when the button is clicked |
| label | string | false | | The label to display on the button |
| target | ReactAnchorHTMLAttributes['target'] | false | | The target attribute for the link e.g., `_self`, `_blank` |
@@ -318,6 +351,7 @@ A call-to-action section component that can be used in MDX pages.
```tsx
import { CallToActionSection } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionSection
title="Logos Network State"
columns={1}
@@ -332,6 +366,7 @@ With a list:
```tsx
import { CallToActionSection } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<CallToActionSection
title="Run Nimbus in one of three setups"
description={
@@ -364,20 +399,52 @@ import { CallToActionSection } from '@acid-info/logos-docusaurus-theme/lib/clien
/>
```
### ExternalResourceCard
A card component with an optional image preview for displaying information about an external resource.
**Props**
| Prop Name | Type | Required | Default | Description |
| -------------- | -------------- | -------- | ------- | -------------------------------------------------- |
| logoSrc | string | false | | The source URL for logo image in light mode |
| logoSrcDark | string | false | | The source URL for logo image in dark mode |
| title | ReactReactNode | false | | The title of the external resource |
| description | ReactReactNode | false | | The description of the external resource |
| previewSrc | string | false | | The source URL for the preview image in light mode |
| previewSrcDark | string | false | | The source URL for the preview image in dark mode |
**Example usage:**
```jsx
import { ExternalResourceCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
<ExternalResourceCard
title="Figma"
href="https://www.figma.com/
description="Design and prototype in one place with Figma."
logoSrc="/img/figma-logo.svg"
logoSrcDark="/img/figma-logo-dark.svg"
previewSrc="/img/figma-preview.png"
previewSrcDark="/img/figma-preview-dark.png"
/>
```
### FeatureList
A component that displays a list of features with titles and descriptions.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | -------------- | -------- | ---------- | ------------------------------------------------- | ---------------------------------------------- |
| title | ReactReactNode | false | 'Features' | The title of the feature list. |
| features | Array | false | [] | An array of features to be displayed in the list. |
| alignment | 'bottom' | 'top' | false | 'bottom' | The vertical alignment of feature description. |
| Prop Name | Type | Required | Default | Description |
| --------- | ----------------- | -------- | ---------- | ------------------------------------------------- |
| title | ReactReactNode | false | 'Features' | The title of the feature list. |
| features | Array | false | [] | An array of features to be displayed in the list. |
| alignment | 'bottom' \| 'top' | false | 'bottom' | The vertical alignment of feature description. |
```tsx
import { FeatureList } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<FeatureList
title="Features"
alignment="top"
@@ -399,9 +466,9 @@ A hero component that displays a large banner at the top of a page.
**Props**
| Prop Name | Type | Required | Default | Description |
| --------- | ------- | -------- | ------- | ----------- | -------- | --- |
| size | 'large' | 'medium' | 'small' | false | 'medium' | |
| Prop Name | Type | Required | Default | Description |
| --------- | ------------------- | -------- | ------- | ----------- | --- |
| size | 'large' \| 'medium' | 'small' | false | 'medium' | |
```tsx
import {
@@ -412,6 +479,7 @@ import {
HeroActions,
HeroAction,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Hero size="large">
<HeroInfo>
<HeroTitle>
@@ -447,6 +515,27 @@ import {
</Hero>
```
### JobsPerDepartment
A component for displaying job openings organized by department. The component requires a `jobData` prop that contains an array of departments, each with an array of jobs openings. If you're using our preset, this data is automatically fetched from Greenhouse API. To enable this, please refer to the [preset documentation](../logos-docusaurus-preset#xyz).
**Props**
| Prop Name | Type | Required | Default | Description |
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------ |
| jobData | signature | true | | An array of departments, each with an array of job openings. |
| titleFilter | string | false | '' | A string to filter jobs by title. |
| useDummyData | boolean | false | false | Use dummy data instead of real data. |
**Example usage:**
```jsx
import * as jobData from '/static/generated/jobs.json'
import { JobsPerDepartment } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<JobsPerDepartment jobData={jobData} />
```
### PageCard
A card component used in Docusaurus auto-generated category index pages to display page links.
@@ -462,6 +551,7 @@ A card component used in Docusaurus auto-generated category index pages to displ
```tsx
import { PageCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<PageCard
title="Sample Page"
description="This is a sample page description."
@@ -486,6 +576,7 @@ A component used to display team members' profiles, including their name, avatar
```tsx
import { ProfileCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<ProfileCard
imgSrc="/path/to/profile-image.jpg"
name="John Doe"
@@ -503,6 +594,7 @@ import {
Grid,
ProfileCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Grid
xs={{ cols: 3, gap: '1rem', wrap: false }}
md={{ cols: 4, gap: '1rem', wrap: true }}
@@ -534,6 +626,7 @@ A component used for displaying social media or community platform cards with a
```tsx
import { SocialCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<SocialCard
title="Telegram Community"
logoSrc="/path/to/telegram-logo.png"
@@ -550,13 +643,13 @@ import {
Grid,
SocialCard,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Box top={56} bottom={56}>
<Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
<Grid.Item xs={1}>
<SocialCard
href="https://twitter.com/twitter-handle"
logoSrc="/icons/x-black.svg"
logoSrcDark="/icons/x-white.svg"
logoSrcDark="/icons/x.svg"
description="Follow us on X"
/>
</Grid.Item>
@@ -577,13 +670,13 @@ A component for displaying roadmap items, such as events or milestones, in a tim
**Props**
| Prop Name | Type | Required | Default | Description |
| ----------- | -------------- | -------- | ------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------- |
| index | ReactReactNode | true | | The index or label of the timeline item. |
| alignment | 'top' | 'bottom' | false | 'top' | The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') |
| period | ReactReactNode | true | | The period or time frame associated with the timeline item. e.g., `2023 Q3` |
| description | ReactReactNode | true | | The description or content of the timeline item. |
| borderStyle | 'solid' | 'dashed' | 'none' | false | | The border style for the timeline item |
| Prop Name | Type | Required | Default | Description |
| ----------- | ------------------- | -------- | ------- | ---------------------------------------------------------------------------------------- | -------------------------------------- |
| index | ReactReactNode | true | | The index or label of the timeline item. |
| alignment | 'top' \| 'bottom' | false | 'top' | The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') |
| period | ReactReactNode | true | | The period or time frame associated with the timeline item. e.g., `2023 Q3` |
| description | ReactReactNode | true | | The description or content of the timeline item. |
| borderStyle | 'solid' \| 'dashed' | 'none' | false | | The border style for the timeline item |
Roadmap example:
@@ -595,6 +688,7 @@ import {
SectionHeader,
CallToActionButton,
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
;<Box top={{ xs: 144, lg: 216 }}>
<SectionHeader
title="Roadmap"
packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx
+30
View File
@@ -12,12 +12,42 @@ export type DownloadableAsset = {
}
export type AssetCardProps = Omit<React.HTMLProps<HTMLDivElement>, 'title'> & {
/**
* The title of the asset
*/
title?: React.ReactNode
/**
* The source URL for the preview image
*/
previewSrc: string
/**
* Whether to force download the asset when clicking on the preview image (default: false); if false, the asset might open in a new tab
*/
forceDownload?: boolean
/**
* The list of downloadable assets
*/
downloadable?: DownloadableAsset[]
}
/**
* A card component with an image preview and download buttons.
*
* @example
* **Example usage:**
* ```jsx
* import { AssetCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
*
* <AssetCard
* title="Logo"
* previewSrc="/img/logo.svg"
* downloadable={[
* { src: "/img/logo.svg", title: "SVG" },
* { src: "/img/logo.png", title: "PNG" },
* ]}
* />
* ```
*/
export const AssetCard: React.FC<AssetCardProps> = ({
title,
previewSrc,
packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.tsx
+37
View File
@@ -10,14 +10,51 @@ export type ExternalResourceCardProps = Omit<
React.HTMLProps<HTMLAnchorElement>,
'title'
> & {
/**
* The source URL for logo image in light mode
*/
logoSrc?: string
/**
* The source URL for logo image in dark mode
*/
logoSrcDark?: string
/**
* The title of the external resource
*/
title?: React.ReactNode
/**
* The description of the external resource
*/
description?: React.ReactNode
/**
* The source URL for the preview image in light mode
* */
previewSrc?: string
/**
* The source URL for the preview image in dark mode
*/
previewSrcDark?: string
}
/**
* A card component with an optional image preview for displaying information about an external resource.
*
* @example
* **Example usage:**
* ```jsx
* import { ExternalResourceCard } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
*
* <ExternalResourceCard
* title="Figma"
* href="https://www.figma.com/
* description="Design and prototype in one place with Figma."
* logoSrc="/img/figma-logo.svg"
* logoSrcDark="/img/figma-logo-dark.svg"
* previewSrc="/img/figma-preview.png"
* previewSrcDark="/img/figma-preview-dark.png"
* />
* ```
*/
export const ExternalResourceCard: React.FC<ExternalResourceCardProps> = ({
title,
logoSrc,
packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/JobsPerDepartment.tsx
+21 -2
View File
@@ -63,16 +63,35 @@ const hasJobs = (jobsPerDepartment: JobDepartmentArray): boolean => {
}
type JobsPerDepartmentProps = React.HTMLAttributes<HTMLDivElement> & {
/**
* An array of departments, each with an array of job openings.
*/
jobData: { departments?: JobDepartmentArray }
/**
* A string to filter jobs by title.
*/
titleFilter?: string
fetchAll?: boolean
/**
* Use dummy data instead of real data.
*/
useDummyData?: boolean
}
/**
* A component for displaying job openings organized by department. The component requires a `jobData` prop that contains an array of departments, each with an array of jobs openings. If you're using our preset, this data is automatically fetched from Greenhouse API. To enable this, please refer to the [preset documentation](../logos-docusaurus-preset#job-openings).
*
* @example
* **Example usage:**
* ```jsx
* import * as jobData from '/static/generated/jobs.json'
* import { JobsPerDepartment } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
*
* <JobsPerDepartment jobData={jobData} />
* ```
*/
export const JobsPerDepartment: React.FC<JobsPerDepartmentProps> = ({
jobData,
titleFilter = '',
fetchAll = false,
useDummyData = false,
...props
}) => {