mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
chore: update docs
This commit is contained in:
Hossein Mehrabi
@@ -0,0 +1 @@
|
||||
TODO
|
||||
@@ -1,80 +1,137 @@
|
||||
- [Description](#description)
|
||||
- [Installation](#installation)
|
||||
- [Usage](#usage)
|
||||
- [Development Guides](#development-guides)
|
||||
- [Run locally](#run-locally)
|
||||
- [Versioning](#versioning)
|
||||
- [Overview](#overview)
|
||||
- [Quick start](#quick-start)
|
||||
- [Use a template](#use-a-template)
|
||||
- [Use with an existing Docusaurus website:](#use-with-an-existing-docusaurus-website)
|
||||
- [Use the playground](#use-the-playground)
|
||||
- [Next steps](#next-steps)
|
||||
- [Working on content](#working-on-content)
|
||||
- [Configuration](#configuration)
|
||||
- [Become a contributor](#become-a-contributor)
|
||||
- [Packages](#packages)
|
||||
- [TODO](#todo)
|
||||
- [License](#license)
|
||||
|
||||
# Description
|
||||
## Overview
|
||||
|
||||
This monorepo contains a set of [Docusaurus 2](https://docusaurus.io/) plugins and themes developed for Logos documentation websites.
|
||||
This repository contains a set of Docusaurus 2 plugins and themes, initially crafted for Logos websites but versatile enough for use with any Docusaurus website. The collection includes a headless local search, OG image generation, and Fathom Analytics plugins.
|
||||
|
||||
# Installation
|
||||
## Quick start
|
||||
|
||||
Clone this repository and install the dependencies by running the following:
|
||||
### Use a template
|
||||
|
||||
Kickstart your website creation with our ready-to-use templates. Choose a template that fits your needs, whether it's a documentation, a blog, or a complete website.
|
||||
|
||||
1. Choose a template:
|
||||
|
||||
- [Website Template](https://github.com/acid-info/logos-website-template)
|
||||
- [Documentation Website Template](https://github.com/acid-info/logos-documentation-website-template)
|
||||
- [Blog Template](https://github.com/acid-info/logos-blog-template)
|
||||
|
||||
2. Clone your selected template:
|
||||
|
||||
```bash
|
||||
$ yarn
|
||||
# Example: Create a website with a landing page
|
||||
git clone https://github.com/acid-info/logos-homepage-template.git my-website && cd my-website
|
||||
|
||||
# Example: Create a documentation website
|
||||
git clone https://github.com/acid-info/logos-documentation-website-template.git my-website && cd my-website
|
||||
|
||||
# Example: create a blog
|
||||
git clone https://github.com/acid-info/logos-blog-template.git my-website && cd my-website
|
||||
```
|
||||
|
||||
# Usage
|
||||
|
||||
Clone our ready-to-use [Docusaurus template](https://github.com/acid-info/logos-documentation-website-template).
|
||||
|
||||
# Development Guides
|
||||
|
||||
## Run locally
|
||||
|
||||
To make the development easier and to remove the need to locally link an external repository to the packages in this project, we've created a playground Docusaurus website which can be found in `packages/docusaurus-playground`.
|
||||
|
||||
[Lerna](https://lerna.js.org/) will handle linking the packages; however, if you want to use them in another project, you should use tools like [yarn link](https://classic.yarnpkg.com/en/docs/cli/link) or [yalc](https://github.com/wclr/yalc); but please be careful not to commit changes made by these tools.
|
||||
|
||||
1. Install dependencies and link packages together:
|
||||
3. Install the dependencies:
|
||||
|
||||
```bash
|
||||
$ yarn && yarn bootstrap
|
||||
yarn install
|
||||
```
|
||||
|
||||
2. Build packages:
|
||||
4. Run your new website locally:
|
||||
|
||||
```bash
|
||||
$ yarn build
|
||||
|
||||
# or build and watch for changes
|
||||
|
||||
$ yarn watch
|
||||
yarn start
|
||||
```
|
||||
|
||||
2. Start the playground website:
|
||||
### Use with an existing Docusaurus website:
|
||||
|
||||
1. Install the [Logos Docusaurus preset](./packages/logos-docusaurus-preset/):
|
||||
|
||||
```bash
|
||||
$ yarn start
|
||||
yarn add @acid-info/logos-docusaurus-preset
|
||||
```
|
||||
|
||||
## Versioning
|
||||
2. Add the preset to your `docusaurus.config.js`:
|
||||
|
||||
We use semantic versioning; all you need to do is commit your changes and then run the following command:
|
||||
```js
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
}),
|
||||
],
|
||||
],
|
||||
|
||||
```
|
||||
|
||||
### Use the playground
|
||||
|
||||
A playground located in the `packages/docusaurus-playground` of this repository can be used to test the plugins and themes locally.
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
$ yarn lerna version --no-private
|
||||
git clone https://github.com/acid-info/logos-docusaurus-plugins.git
|
||||
```
|
||||
|
||||
# Packages
|
||||
2. Install the dependencies:
|
||||
|
||||
```bash
|
||||
yarn install && yarn link
|
||||
```
|
||||
|
||||
3. Run the playground:
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
### Working on content
|
||||
|
||||
Our plugins work smoothly with standard Docusaurus features, which you can use to manage and organize content. Learn more on the [Docusaurus website](https://docusaurus.io/docs). For practical guidance on dealing with common use cases, visit our dedicated [Wiki pages](https://github.com/acid-info/logos-docusaurus-plugins/wiki).
|
||||
|
||||
### Configuration
|
||||
|
||||
While it's possible to install and configure our plugins and themes individually, we highly recommend using the [Logos Docusaurus preset](./packages/logos-docusaurus-preset/) for a simplified installation. This preset establishes a default configuration for the plugins and theme and automatically incorporates essential website metadata, logos, and favicons for the selected business unit. For detailed configuration information, please refer to the README file of each package.
|
||||
|
||||
### Become a contributor
|
||||
|
||||
We welcome any kind of contribution, such as reporting issues, suggesting features, writing documentation or fixing bugs. Please read our [contributing guidelines](./CONTRIBUTING.md) on how to get started.
|
||||
|
||||
## Packages
|
||||
|
||||
- **Presets**
|
||||
|
||||
- [Logos Preset](./packages/logos-docusaurus-preset) [](https://www.npmjs.com/package/@acid-info/logos-docusaurus-preset)
|
||||
- [Logos Preset](./packages/logos-docusaurus-preset) - A Docusaurus preset for Logos websites.
|
||||
[](https://www.npmjs.com/package/@acid-info/logos-docusaurus-preset)
|
||||
|
||||
- **Plugins**
|
||||
|
||||
- [Logos Search Local](./packages/logos-docusaurus-search-local) [](https://www.npmjs.com/package/@acid-info/logos-docusaurus-search-local)
|
||||
- [Logos Search Local](./packages/logos-docusaurus-search-local) - Headless local search engine for Docusaurus.
|
||||
[](https://www.npmjs.com/package/@acid-info/logos-docusaurus-search-local)
|
||||
|
||||
- [Docusaurus OG](./packages/docusaurus-og) [](https://www.npmjs.com/package/@acid-info/docusaurus-og)
|
||||
- [Docusaurus OG](./packages/docusaurus-og) - OpenGraph image generator for Docusaurus.
|
||||
[](https://www.npmjs.com/package/@acid-info/docusaurus-og)
|
||||
|
||||
- [Docusaurus Fathom](./packages/docusaurus-fathom) [](https://www.npmjs.com/package/@acid-info/docusaurus-fathom)
|
||||
- [Docusaurus Fathom](./packages/docusaurus-fathom) - Fathom Analytics plugin for Docusaurus.
|
||||
[](https://www.npmjs.com/package/@acid-info/docusaurus-fathom)
|
||||
|
||||
- **Themes**
|
||||
- [Logos Theme](./packages/logos-docusaurus-theme) [](https://www.npmjs.com/package/@acid-info/logos-docusaurus-theme)
|
||||
- [Logos Theme](./packages/logos-docusaurus-theme) - A customized version of Docusaurus classic theme built with [LSD](https://github.com/acid-info/lsd).
|
||||
[](https://www.npmjs.com/package/@acid-info/logos-docusaurus-theme)
|
||||
|
||||
## License
|
||||
|
||||
TODO
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
# Docusaurus Fathom Plugin
|
||||
|
||||
The Docusaurus Fathom Plugin seamlessly integrates your Docusaurus website with Fathom Analytics.
|
||||
|
||||
## Usage
|
||||
|
||||
1. Install the plugin:
|
||||
|
||||
```bash
|
||||
yarn add @acid-info/docusaurus-fathom
|
||||
|
||||
# or
|
||||
npm install @acid-info/docusaurus-fathom
|
||||
```
|
||||
|
||||
2. Add the plugin to your `docusaurus.config.js`:
|
||||
|
||||
```javascript
|
||||
plugins: [
|
||||
[
|
||||
'@acid-info/docusaurus-fathom',
|
||||
{
|
||||
siteId: 'your-site-id',
|
||||
scriptUrl: 'https://your-fathom-instance.com/script.js',
|
||||
hostnames: ['mywebsite.com', 'staging.mywebsite.com'],
|
||||
},
|
||||
],
|
||||
]
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
**`siteId`**
|
||||
|
||||
- **Type**: `string` (required)
|
||||
- **Description**: Your Fathom Analytics site ID.
|
||||
|
||||
**`scriptUrl`**
|
||||
|
||||
- **Type**: `string` (required)
|
||||
- **Description**: this URL is used for downloading and injecting the Fathom script into your website.
|
||||
|
||||
**`hostnames`**
|
||||
|
||||
- **Type**: `string[]` (optional)
|
||||
- **Default**: `[]`
|
||||
- **Example**: `['mywebsite.com', 'staging.mywebsite.com']`
|
||||
- **Description**: A whitelist of hostnames where the Fathom script will be loaded and pageview tracking will occur. If you want the plugin to work on any hostname, you can leave this option empty or omit it from the configuration.
|
||||
@@ -0,0 +1,142 @@
|
||||
# Docusaurus OG
|
||||
|
||||
Docusaurus OG enables you to automate the generation of custom OpenGraph (OG) images for your Docusaurus website, enhancing the visual representation of your content when shared on social media and other platforms.
|
||||
|
||||
This plugin leverages [Vercel's Satori](https://github.com/vercel/satori) to convert your HTML and CSS into images. It lets you define image renderers tailored to each Docusaurus content plugin, allowing you to create unique OG images for your website's content.
|
||||
|
||||
## Installation
|
||||
|
||||
To get started, simply follow these steps:
|
||||
|
||||
1. Install the plugin:
|
||||
|
||||
```bash
|
||||
yarn add @acid-info/docusaurus-og
|
||||
|
||||
# or
|
||||
|
||||
npm install @acid-info/docusaurus-og
|
||||
```
|
||||
|
||||
2. Integrate the plugin into your `docusaurus.config.js`:
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
[
|
||||
'@acid-info/docusaurus-og',
|
||||
{
|
||||
path: './preview-images', // relative to the build directory
|
||||
imageRenderers: {},
|
||||
},
|
||||
],
|
||||
]
|
||||
```
|
||||
|
||||
3. Define your image renderers for the content plugins of your choice. Here's an example:
|
||||
|
||||
```js
|
||||
imageRenderers: {
|
||||
'docusaurus-plugin-content-docs': require('./lib/ImageRenderers').docs,
|
||||
'docusaurus-plugin-content-pages': require('./lib/ImageRenderers').pages,
|
||||
'docusaurus-plugin-content-blog': require('./lib/ImageRenderers').blog,
|
||||
}
|
||||
```
|
||||
|
||||
## Create an Image Renderer
|
||||
|
||||
An image renderer is a function that receives a `data` object representing page data and a `context` object representing the Docusaurus context. This function returns HTML or JSX content, which serves as input for Satori, the image generation tool. Satori processes this content to produce the corresponding OpenGraph image.
|
||||
|
||||
For example, here's an image renderer for the `@docusaurus/plugin-content-docs` plugin:
|
||||
|
||||
```tsx
|
||||
// src/ImageRenderers.tsx
|
||||
import type { DocsPageData, ImageRenderer } from '@acid-info/docusaurus-og'
|
||||
import { readFileSync } from 'fs'
|
||||
import { join } from 'path'
|
||||
import React from 'react'
|
||||
|
||||
export const docs: ImageRenderer<DocsPageData> = (data, context) => [
|
||||
<div style={{ display: 'flex', background: 'black', color: 'white' }}>
|
||||
{data.metadata.title}
|
||||
</div>,
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{
|
||||
name: 'Inter',
|
||||
data: readFileSync(
|
||||
join(__dirname, '../../static/Inter/Inter-Regular.ttf'),
|
||||
),
|
||||
weight: 400,
|
||||
style: 'normal',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
### JSX Support
|
||||
|
||||
If you wish to use JSX within your image renderer, you'll need to compile your code to JavaScript. Here's a TypeScript example:
|
||||
|
||||
1. Create a `tsconfig.client.json` file in your project root to compile your `src` directory:
|
||||
|
||||
```json
|
||||
// tsconfig.client.json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noEmit": false,
|
||||
"composite": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"tsBuildInfoFile": "./lib/.tsbuildinfo-client",
|
||||
"rootDir": "src",
|
||||
"outDir": "lib",
|
||||
"module": "CommonJS",
|
||||
"target": "esnext",
|
||||
"jsx": "react",
|
||||
"types": ["node"],
|
||||
"baseUrl": "./",
|
||||
"lib": ["DOM"]
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
```
|
||||
|
||||
2. Add `prestart` and `prebuild` scripts to your `package.json`:
|
||||
|
||||
```json
|
||||
// package.json
|
||||
{
|
||||
"scripts": {
|
||||
"prestart": "tsc --project tsconfig.client.json",
|
||||
"prebuild": "tsc --project tsconfig.client.json"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. Exclude the `lib` directory from your version control by adding it to your `.gitignore` file:
|
||||
|
||||
```bash
|
||||
echo "lib" >> .gitignore
|
||||
```
|
||||
|
||||
4. Import your image renderer from the `lib` directory:
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
[
|
||||
'@acid-info/docusaurus-og',
|
||||
{
|
||||
path: './preview-images', // relative to the build directory
|
||||
imageRenderers: {
|
||||
'docusaurus-plugin-content-docs': require('./lib/ImageRenderers').docs,
|
||||
'docusaurus-plugin-content-pages': require('./lib/ImageRenderers')
|
||||
.pages,
|
||||
'docusaurus-plugin-content-blog': require('./lib/ImageRenderers').blog,
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
```
|
||||
@@ -0,0 +1,210 @@
|
||||
- [Overview](#overview)
|
||||
- [Installation](#installation)
|
||||
- [Configuration](#configuration)
|
||||
- [Website Configuration](#website-configuration)
|
||||
- [Custom Website Settings](#custom-website-settings)
|
||||
- [Supported Themes](#supported-themes)
|
||||
- [OpenGraph Image Generator](#opengraph-image-generator)
|
||||
- [Local Search](#local-search)
|
||||
- [Docs Plugin](#docs-plugin)
|
||||
- [Pages Plugin](#pages-plugin)
|
||||
- [Blog Plugin](#blog-plugin)
|
||||
|
||||
## Overview
|
||||
|
||||
The Logos Docusaurus preset simplifies the creation of Docusaurus websites with the Logos theme and plugins, tailored to your business unit. This preset offers:
|
||||
|
||||
- A stunning and responsive Logos theme that showcases your brand identity and content.
|
||||
- A local search feature for quick and easy information retrieval.
|
||||
- An OpenGraph image generator for captivating social media sharing.
|
||||
- Pre-configured website setup, including metadata, logos, and favicons for your business unit.
|
||||
|
||||
## Installation
|
||||
|
||||
1. Install the [Logos Docusaurus preset](./packages/logos-docusaurus-preset/):
|
||||
|
||||
```bash
|
||||
yarn add @acid-info/logos-docusaurus-preset
|
||||
```
|
||||
|
||||
2. Add the preset to your `docusaurus.config.js`:
|
||||
|
||||
```js
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
}),
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Website Configuration
|
||||
|
||||
This preset provides a set of predefined website settings and assets for each of Logos’ business units. You can select your business unit of choice, and the preset will automatically apply the relevant settings and assets to your website.
|
||||
|
||||
To use this feature, add the preset to your docusaurus.config.js file as shown below:
|
||||
|
||||
```js
|
||||
// docusaurus.config.js
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
}),
|
||||
],
|
||||
```
|
||||
|
||||
Possible options for `businessUnit` include:
|
||||
|
||||
- `Logos`
|
||||
- `Codex`
|
||||
- `Waku`
|
||||
- `Nimbus`
|
||||
- `Nomos`
|
||||
- `VacResearch`
|
||||
- `Acid.info`
|
||||
|
||||
#### Custom Website Settings
|
||||
|
||||
The preset overrides certain website settings in your docusaurus.config.js file. These settings include:
|
||||
|
||||
`title`
|
||||
`tagline`
|
||||
`url`
|
||||
`favicon`
|
||||
`onBrokenLinks`
|
||||
`onBrokenMarkdownLinks`
|
||||
|
||||
By default, the preset sets these values to be specific to your chosen business unit. You can find the default values for each business unit in the [site-config](./src/site-config/) directory.
|
||||
|
||||
If you wish to retain your own custom settings, you can set the `customSiteConfig` option to `true` in your configuration:
|
||||
|
||||
```js
|
||||
// docusaurus.config.js
|
||||
title: "Custom Title",
|
||||
tagline: "Custom Tagline",
|
||||
url: "https://custom.url",
|
||||
favicon: "img/favicon.ico",
|
||||
onBrokenLinks: "throw",
|
||||
onBrokenMarkdownLinks: "warn",
|
||||
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
customSiteConfig: true
|
||||
}),
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
### Supported Themes
|
||||
|
||||
You have the flexibility to choose the theme that best suits your website. The Logos Docusaurus preset supports the following themes:
|
||||
|
||||
`default` - Logos theme (default and recommended)
|
||||
`docusaurus-default` - Docusaurus classic theme
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
// docusaurus.config.js
|
||||
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
theme: {
|
||||
name: 'default',
|
||||
options: {
|
||||
// theme options
|
||||
}
|
||||
}
|
||||
}),
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
For theme configuration options:
|
||||
|
||||
- **Logos Theme Options**: Please refer to the [Logos theme documentation](../logos-docusaurus-theme/README.md#theme-options)
|
||||
- **Docusaurus Classic Theme Options**: Please refer to the [Docusaurus documentation](https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic#configuration).
|
||||
|
||||
### OpenGraph Image Generator
|
||||
|
||||
The Logos Docusaurus preset includes the [Docusaurus OG](../docusaurus-og/) plugin, which enables you to create visually appealing OpenGraph images for your website's pages. These images are essential for making your content stand out when shared on social media platforms.
|
||||
|
||||
To activate the OpenGraph image generator, you can include the `og` option in the preset settings in your `docusaurus.config.js`:
|
||||
|
||||
```js
|
||||
// docusaurus.config.js
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
og: {
|
||||
path: '_og' // optional; defaults to '_og' (relative to the .docusaurus directory)
|
||||
}
|
||||
}),
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> The Logos Docusaurus preset includes the [Docusaurus OG](../docusaurus-og/) plugin, which is designed for compatibility with the Logos theme. If you prefer using the Docusaurus classic theme or a custom theme, you'll need to create your own image renderer. For detailed instructions on how to create an image renderer for Docusaurus, please refer to [this guide](../docusaurus-og/).
|
||||
|
||||
> [!NOTE]
|
||||
> For in-depth insights into the generation of OpenGraph images, utilizing custom images, and disabling the plugin for specific pages, please visit [this page](../logos-docusaurus-theme/README.md#opengraph-image-generator).
|
||||
|
||||
### Local Search
|
||||
|
||||
The Logos Docusaurus preset also includes the [@acid-info/docusaurus-search-local](../docusaurus-search-local/) plugin, providing an essential feature for your website—local search. With local search, your users can quickly and efficiently find relevant information directly on your website.
|
||||
|
||||
You can customize the behavior of the search feature by adding the `localSearch` option to the preset settings in your `docusaurus.config.js`:
|
||||
|
||||
```js
|
||||
presets: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
localSearch: {
|
||||
singleIndex: true, // optional; defaults to false - if true, user can search across all Docusaurus plugin instances
|
||||
}
|
||||
}),
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
To learn more on how the plugin works, please visit the [plugin documentation](../docusaurus-search-local/README.md).
|
||||
|
||||
### 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.
|
||||
|
||||
For detailed configuration and usage guidance, refer to the [official Docusaurus Docs plugin documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs).
|
||||
|
||||
### Pages Plugin
|
||||
|
||||
The Pages plugin (Official Docusaurus Pages Plugin) is enabled by default and offers versatility when creating standalone pages on your website. To disable this plugin, set `pages` to `false` in your preset configuration.
|
||||
|
||||
For detailed configuration and usage guidance, refer to the [official Docusaurus Pages plugin documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-pages).
|
||||
|
||||
### Blog Plugin
|
||||
|
||||
The Blog plugin (Official Docusaurus Blog Plugin) is enabled by default, making it easy to add a blog section to your website. To disable this plugin, set `blog` to `false` in your preset configuration.
|
||||
|
||||
For configuration and usage instructions, refer to the [official Docusaurus Blog plugin documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
||||
@@ -0,0 +1,3 @@
|
||||
# Docusaurus Local Search
|
||||
|
||||
TODO.
|
||||
@@ -0,0 +1,432 @@
|
||||
### 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"
|
||||
logoSrcDark="/icons/x.svg"
|
||||
description="Follow us on X"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<SocialCard
|
||||
href="https://discord.gg/discord-server"
|
||||
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>
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
@@ -66,6 +66,9 @@
|
||||
"@types/lodash": "^4.14.186",
|
||||
"@types/mdx-js__react": "^1.5.5",
|
||||
"@types/three": "^0.152.1",
|
||||
"glob": "^10.3.10",
|
||||
"react-docgen": "^7.0.0",
|
||||
"react-docgen-markdown-renderer": "^2.1.3",
|
||||
"sass": "^1.55.0",
|
||||
"tsc-alias": "^1.7.0",
|
||||
"tsc-watch": "^5.0.3"
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import fsp from 'fs/promises'
|
||||
import { glob } from 'glob'
|
||||
import path from 'path'
|
||||
|
||||
const main = async () => {
|
||||
const reactDocGen = await import('react-docgen')
|
||||
|
||||
const files = await glob(
|
||||
path.resolve(__dirname, '../src/client/components/mdx/**/*.tsx'),
|
||||
).then((filenames) =>
|
||||
filenames.sort((a, b) => path.basename(a).localeCompare(path.basename(b))),
|
||||
)
|
||||
|
||||
let markdown = ''
|
||||
|
||||
for (const file of files) {
|
||||
try {
|
||||
const raw = await fsp.readFile(file, 'utf-8')
|
||||
const docs = reactDocGen.parse(raw, {
|
||||
filename: path.basename(file),
|
||||
})
|
||||
|
||||
for (const doc of docs) {
|
||||
if (!doc.description) continue
|
||||
|
||||
markdown += `### ${doc.displayName}\n\n`
|
||||
const lines = (doc.description || '').split('\n')
|
||||
const exampleIndex = lines.findIndex(
|
||||
(line) => line.match(/^@example.*/)?.[0],
|
||||
)
|
||||
|
||||
const description = (
|
||||
exampleIndex > -1 ? lines.slice(0, exampleIndex) : lines
|
||||
).join('\n')
|
||||
|
||||
markdown += `${description}\n`
|
||||
|
||||
if (doc.props) {
|
||||
markdown += '**Props**\n\n'
|
||||
markdown +=
|
||||
'| Prop Name | Type | Required | Default | Description |\n'
|
||||
markdown += '| --- | --- | --- | --- | --- |\n'
|
||||
|
||||
for (const propName in doc.props) {
|
||||
const prop = doc.props[propName]
|
||||
if (!prop) continue
|
||||
|
||||
markdown += `| ${propName} | ${
|
||||
prop.tsType?.name === 'union'
|
||||
? (prop.tsType.raw || '').replace('|', '\\|')
|
||||
: prop.tsType?.name
|
||||
} | ${prop.required} | ${
|
||||
prop.defaultValue ? prop.defaultValue.value : ''
|
||||
} | ${prop.description} |\n`
|
||||
}
|
||||
|
||||
markdown += '\n\n'
|
||||
}
|
||||
|
||||
if (exampleIndex > -1) {
|
||||
markdown += '\n'
|
||||
markdown += lines.slice(exampleIndex + 1).join('\n')
|
||||
}
|
||||
|
||||
markdown += '\n\n'
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('failed to parse ' + file)
|
||||
}
|
||||
}
|
||||
|
||||
await fsp.writeFile(path.join(__dirname, '../COMPONENTS.MD'), markdown)
|
||||
}
|
||||
|
||||
main()
|
||||
@@ -5,14 +5,75 @@ import React from 'react'
|
||||
import './AppCard.scss'
|
||||
|
||||
export type AppCardProps = React.HTMLProps<HTMLDivElement> & {
|
||||
/**
|
||||
* The source URL for the light logo image
|
||||
*/
|
||||
logoSrc?: string
|
||||
/**
|
||||
* The source URL for the dark logo image
|
||||
*/
|
||||
logoSrcDark?: string
|
||||
/**
|
||||
* The name of the app
|
||||
*/
|
||||
name?: React.ReactNode
|
||||
/**
|
||||
* The description of the app
|
||||
*/
|
||||
description?: React.ReactNode
|
||||
/**
|
||||
* The URL to link to when the card is clicked
|
||||
*/
|
||||
link?: string
|
||||
/**
|
||||
* The label for the link to the app
|
||||
*/
|
||||
linkLabel?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* A card component for displaying information about an app.
|
||||
*
|
||||
* @example
|
||||
* **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>
|
||||
* ```
|
||||
*/
|
||||
export const AppCard: React.FC<AppCardProps> = ({
|
||||
logoSrc,
|
||||
logoSrcDark,
|
||||
|
||||
@@ -42,6 +42,16 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
|
||||
bottom?: BreakpointsStyle<number> | number
|
||||
}
|
||||
|
||||
/**
|
||||
* A box component that can be used to add top and bottom margins with breakpoints.
|
||||
* @example
|
||||
* ```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>
|
||||
* ```
|
||||
*/
|
||||
export const Box: React.FC<BoxProps> = ({
|
||||
top = 0,
|
||||
bottom = 0,
|
||||
|
||||
+22
-1
@@ -5,11 +5,32 @@ import React from 'react'
|
||||
import './CallToActionButton.scss'
|
||||
|
||||
export type CallToActionButtonProps = Props & {
|
||||
/**
|
||||
* The URL to link to when the button is clicked
|
||||
*/
|
||||
href?: string
|
||||
size?: ButtonProps['size']
|
||||
/**
|
||||
* The size of the button
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
/**
|
||||
* The variant of the button
|
||||
*/
|
||||
variant?: ButtonProps['variant']
|
||||
}
|
||||
|
||||
/**
|
||||
* A call-to-action button that can be used in MDX pages.
|
||||
*
|
||||
* @example
|
||||
* ```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>
|
||||
* ```
|
||||
*/
|
||||
export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
|
||||
className,
|
||||
variant = 'filled',
|
||||
|
||||
+81
@@ -4,23 +4,104 @@ import React from 'react'
|
||||
import { CallToActionButton } from '../index'
|
||||
import './CallToActionSection.scss'
|
||||
|
||||
/**
|
||||
* Props for the CallToActionSection component
|
||||
*/
|
||||
export type CallToActionSectionProps = Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'title'
|
||||
> & {
|
||||
/**
|
||||
* The title of the section
|
||||
*/
|
||||
title?: React.ReactNode
|
||||
/**
|
||||
* The description of the section
|
||||
*/
|
||||
description?: React.ReactNode
|
||||
/**
|
||||
* The number of columns to display the content in
|
||||
*/
|
||||
columns?: 1 | 2
|
||||
/**
|
||||
* The URL to link to when the button is clicked
|
||||
*/
|
||||
href?: string
|
||||
/**
|
||||
* The label to display on the button
|
||||
*/
|
||||
label?: string
|
||||
/**
|
||||
* The target attribute for the link e.g., `_self`, `_blank`
|
||||
*/
|
||||
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']
|
||||
/**
|
||||
* The variant of the button
|
||||
*/
|
||||
variant?: ButtonProps['variant']
|
||||
/**
|
||||
* A list of items to display in the section
|
||||
*/
|
||||
list?: {
|
||||
/**
|
||||
* The title of the list item
|
||||
*/
|
||||
title: React.ReactNode
|
||||
/**
|
||||
* The description of the list item
|
||||
*/
|
||||
description: React.ReactNode
|
||||
}[]
|
||||
}
|
||||
|
||||
/**
|
||||
* A call-to-action section component that can be used in MDX pages.
|
||||
*
|
||||
* @example
|
||||
* ```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"
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
|
||||
label,
|
||||
href,
|
||||
|
||||
@@ -12,11 +12,42 @@ export type FeatureListProps = Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'title'
|
||||
> & {
|
||||
/**
|
||||
* The title of the feature list.
|
||||
*/
|
||||
title?: React.ReactNode
|
||||
/**
|
||||
* An array of features to be displayed in the list.
|
||||
*/
|
||||
features?: Feature[]
|
||||
/**
|
||||
* The vertical alignment of feature description.
|
||||
*/
|
||||
alignment?: 'bottom' | 'top'
|
||||
}
|
||||
|
||||
/**
|
||||
* A component that displays a list of features with titles and descriptions.
|
||||
*
|
||||
* @example
|
||||
* ```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>
|
||||
* ```
|
||||
*/
|
||||
export const FeatureList: React.FC<FeatureListProps> = ({
|
||||
title = 'Features',
|
||||
alignment = 'bottom',
|
||||
|
||||
@@ -7,6 +7,46 @@ export type HeroProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
|
||||
size?: 'large' | 'medium' | 'small'
|
||||
}
|
||||
|
||||
/**
|
||||
* A hero component that displays a large banner at the top of a page.
|
||||
*
|
||||
* @example
|
||||
* ```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>
|
||||
* ```
|
||||
*/
|
||||
export const Hero: React.FC<HeroProps> = ({
|
||||
size = 'medium',
|
||||
className,
|
||||
|
||||
@@ -10,6 +10,20 @@ export type PageCardProps = Omit<LinkProps, 'title'> & {
|
||||
icon?: React.ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* A card component used in Docusaurus auto-generated category index pages to display page links.
|
||||
*
|
||||
* @example
|
||||
* ```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"
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const PageCard: React.FC<PageCardProps> = ({
|
||||
title,
|
||||
description,
|
||||
|
||||
@@ -14,6 +14,45 @@ export type ProfileCardProps = React.HTMLProps<HTMLDivElement> & {
|
||||
discordLink?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* A component used to display team members' profiles, including their name, avatar, and social links.
|
||||
*
|
||||
* @example
|
||||
* ```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>
|
||||
* ```
|
||||
*/
|
||||
export const ProfileCard: React.FC<ProfileCardProps> = ({
|
||||
imgSrc,
|
||||
name,
|
||||
|
||||
@@ -6,11 +6,59 @@ import { IconExternalLink } from '../../Icon'
|
||||
import './SocialCard.scss'
|
||||
|
||||
export type SocialCardProps = React.HTMLProps<HTMLAnchorElement> & {
|
||||
/**
|
||||
* The URL of the logo image for the social media or community platform (light theme).
|
||||
*/
|
||||
logoSrc?: string
|
||||
/**
|
||||
* The URL of the logo image for the social media or community platform (dark theme).
|
||||
*/
|
||||
logoSrcDark?: string
|
||||
/**
|
||||
* The description or content associated with the social media or community platform.
|
||||
*/
|
||||
description?: React.ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* A component used for displaying social media or community platform cards with a logo and description.
|
||||
*
|
||||
* @example
|
||||
* ```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'
|
||||
* logoSrcDark="/icons/x.svg"
|
||||
* description='Follow us on X'
|
||||
* />
|
||||
* </Grid.Item>
|
||||
* <Grid.Item xs={1}>
|
||||
* <SocialCard
|
||||
* href='https://discord.gg/discord-server'
|
||||
* logoSrcDark="/icons/discord-white.svg"
|
||||
* description='Join the community on Discord'
|
||||
* />
|
||||
* </Grid.Item>
|
||||
* </Grid>
|
||||
*</Box>
|
||||
* ```
|
||||
*/
|
||||
export const SocialCard: React.FC<SocialCardProps> = ({
|
||||
title,
|
||||
logoSrc,
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user