mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
jeangovil
+2
-2
@@ -39,7 +39,7 @@
|
||||
"typescript-transform-paths": "^3.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.4 || ^17.0.0",
|
||||
"react-dom": "^16.8.4 || ^17.0.0"
|
||||
"react": "^16.8.4 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Subtitle
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
## Hello World
|
||||
|
||||
```python
|
||||
print("hello world!")
|
||||
```
|
||||
@@ -0,0 +1,264 @@
|
||||
---
|
||||
title: Configuration
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
:::info
|
||||
|
||||
Check the [**`docusaurus.config.js` API reference**](api/docusaurus.config.js.mdx) for an exhaustive list of options.
|
||||
|
||||
:::
|
||||
|
||||
Docusaurus has a unique take on configurations. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.
|
||||
|
||||
Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.
|
||||
|
||||
## Syntax to declare `docusaurus.config.js` {#syntax-to-declare-docusaurus-config}
|
||||
|
||||
The `docusaurus.config.js` file is run in Node.js and should export either:
|
||||
|
||||
- a **config object**
|
||||
- a **function** that creates the config object
|
||||
|
||||
:::info
|
||||
|
||||
The `docusaurus.config.js` file only supports the [**CommonJS**](https://flaviocopes.com/commonjs/) module system:
|
||||
|
||||
- **Required:** use `module.exports = /* your config*/` to export your Docusaurus config
|
||||
- **Optional:** use `require("lib")` to import Node.js packages
|
||||
- **Optional:** use `await import("lib")` (dynamic import) in an async function to import ESM-Only Node.js packages
|
||||
|
||||
:::
|
||||
|
||||
Node.js gives us the ability to declare our Docusaurus configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
const config = {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = function configCreator() {
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = async function createConfigAsync() {
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::tip Using ESM-only packages
|
||||
|
||||
Using an async config creator can be useful to import ESM-only modules (notably most Remark plugins). It is possible to import such modules thanks to dynamic imports:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = async function createConfigAsync() {
|
||||
// Use a dynamic import instead of require('esm-lib')
|
||||
// highlight-next-line
|
||||
const lib = await import('lib')
|
||||
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// rest of your site config...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## What goes into a `docusaurus.config.js`? {#what-goes-into-a-docusaurusconfigjs}
|
||||
|
||||
You should not have to write your `docusaurus.config.js` from scratch even if you are developing your site. All templates come with a `docusaurus.config.js` that includes defaults for the common options.
|
||||
|
||||
However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.
|
||||
|
||||
The high-level overview of Docusaurus configuration can be categorized into:
|
||||
|
||||
<TOCInline toc={toc} minHeadingLevel={3} maxHeadingLevel={3} />
|
||||
|
||||
### Site metadata {#site-metadata}
|
||||
|
||||
Site metadata contains the essential global metadata such as `title`, `url`, `baseUrl`, and `favicon`.
|
||||
|
||||
They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.
|
||||
|
||||
### Deployment configurations {#deployment-configurations}
|
||||
|
||||
Deployment configurations such as `projectName`, `organizationName`, and optionally `deploymentBranch` are used when you deploy your site with the `deploy` command.
|
||||
|
||||
It is recommended to check the [deployment docs](deployment.mdx) for more information.
|
||||
|
||||
### Theme, plugin, and preset configurations {#theme-plugin-and-preset-configurations}
|
||||
|
||||
List the [themes](./using-plugins.mdx#using-themes), [plugins](./using-plugins.mdx), and [presets](./using-plugins.mdx#using-presets) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
'@docusaurus/plugin-content-blog',
|
||||
'@docusaurus/plugin-content-pages',
|
||||
],
|
||||
themes: ['@docusaurus/theme-classic'],
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
Docusaurus supports [**module shorthands**](./using-plugins.mdx#module-shorthands), allowing you to simplify the above configuration as:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: ['content-blog', 'content-pages'],
|
||||
themes: ['classic'],
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
They can also be loaded from local directories:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
|
||||
}
|
||||
```
|
||||
|
||||
To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
[
|
||||
'content-blog',
|
||||
{
|
||||
path: 'blog',
|
||||
routeBasePath: 'blog',
|
||||
include: ['*.md', '*.mdx'],
|
||||
// ...
|
||||
},
|
||||
],
|
||||
'content-pages',
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
},
|
||||
theme: {
|
||||
customCss: [require.resolve('./src/css/custom.css')],
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
The `presets: [['classic', {...}]]` shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
For further help configuring themes, plugins, and presets, see [Using Plugins](./using-plugins.mdx).
|
||||
|
||||
### Custom configurations {#custom-configurations}
|
||||
|
||||
Docusaurus guards `docusaurus.config.js` from unknown fields. To add custom fields, define them in `customFields`.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
// highlight-start
|
||||
customFields: {
|
||||
image: '',
|
||||
keywords: [],
|
||||
},
|
||||
// highlight-end
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## Accessing configuration from components {#accessing-configuration-from-components}
|
||||
|
||||
Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
|
||||
|
||||
Basic example:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
// highlight-next-line
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
|
||||
const Hello = () => {
|
||||
// highlight-start
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
// highlight-end
|
||||
const { title, tagline } = siteConfig
|
||||
|
||||
return <div>{`${title} · ${tagline}`}</div>
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in `docusaurus.config.js`.
|
||||
|
||||
:::
|
||||
|
||||
## Customizing Babel Configuration {#customizing-babel-configuration}
|
||||
|
||||
For new Docusaurus projects, we automatically generated a `babel.config.js` in the project root.
|
||||
|
||||
```js title="babel.config.js"
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
}
|
||||
```
|
||||
|
||||
Most of the time, this configuration will work just fine. If you want to customize your Babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Getting Started
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get started by **creating a new site**.
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
|
||||
### What you'll need
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
@@ -1,31 +1,8 @@
|
||||
---
|
||||
title: Intro
|
||||
title: Introduction
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get started by **creating a new site**.
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
|
||||
### What you'll need
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
|
||||
## Generate a new site
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
@@ -40,6 +17,67 @@ You can type this command into Command Prompt, Powershell, Terminal, or any othe
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
|
||||
```tsx title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
},
|
||||
theme: {
|
||||
customCss: [require.resolve('./src/css/custom.css')],
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
import React from 'react'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
|
||||
const Hello = () => {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
const { title, tagline } = siteConfig
|
||||
|
||||
return <div>{`${title} · ${tagline}`}</div>
|
||||
}
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
## Start your site
|
||||
|
||||
Run the development server:
|
||||
@@ -54,3 +92,15 @@ The `cd` command changes the directory you're working with. In order to work wit
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
|
||||
<details><summary>CLICK ME</summary>
|
||||
|
||||
#### yes, even hidden code blocks!
|
||||
|
||||
<br/>
|
||||
|
||||
```python
|
||||
print("hello world!")
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@@ -28,13 +28,22 @@ const config = {
|
||||
'@acid-info/logos-docusaurus-preset',
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Codex',
|
||||
businessUnit: 'Logos',
|
||||
theme: {
|
||||
name: 'default',
|
||||
options: {
|
||||
customCss: [require.resolve('./src/css/custom.scss')],
|
||||
},
|
||||
},
|
||||
docs: {
|
||||
routeBasePath: '/docs',
|
||||
versions: {
|
||||
current: {
|
||||
label: 'current',
|
||||
},
|
||||
},
|
||||
lastVersion: 'current',
|
||||
},
|
||||
}),
|
||||
],
|
||||
],
|
||||
@@ -42,7 +51,109 @@ const config = {
|
||||
|
||||
themeConfig:
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
|
||||
({}),
|
||||
({
|
||||
navbar: {
|
||||
items: [
|
||||
{
|
||||
label: 'Docs',
|
||||
href: '/docs',
|
||||
},
|
||||
{
|
||||
label: 'Features',
|
||||
href: '#features',
|
||||
},
|
||||
{
|
||||
label: 'Showcase',
|
||||
href: '#showcase',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
copyright: 'Copyright @2023 Logos <br/> Built with Docusaurus.',
|
||||
links: [
|
||||
{
|
||||
title: 'Learn',
|
||||
items: [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Introduction',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Installation',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Migrate from v1 to v2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
items: [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Blog',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Changelog',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Github',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Twitter',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Stack Overflow',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Feature Requests',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Discord',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Help',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Legal',
|
||||
items: [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Privacy',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Terms',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Data policy',
|
||||
},
|
||||
{
|
||||
href: '/',
|
||||
label: 'Cookie policy',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
|
||||
@@ -16,9 +16,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@acid-info/logos-docusaurus-preset": "*",
|
||||
"@docusaurus/core": "2.2.0",
|
||||
"@docusaurus/preset-classic": "2.2.0",
|
||||
"@docusaurus/theme-mermaid": "^2.2.0",
|
||||
"@docusaurus/core": "2.4.1",
|
||||
"@docusaurus/preset-classic": "2.4.1",
|
||||
"@docusaurus/theme-mermaid": "^2.4.1",
|
||||
"@emotion/react": "^11.11.0",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"clsx": "^1.2.1",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
@@ -27,7 +29,7 @@
|
||||
"tsdx": "^0.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "2.2.0",
|
||||
"@docusaurus/module-type-aliases": "2.4.1",
|
||||
"@tsconfig/docusaurus": "^1.0.5",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import {
|
||||
Hero,
|
||||
HeroTitle,
|
||||
HeroDescription,
|
||||
HeroActions,
|
||||
HeroAction,
|
||||
CallToActionSection,
|
||||
FeatureList,
|
||||
Showcase,
|
||||
HeroModel,
|
||||
} from '../components/mdx'
|
||||
|
||||
<Hero
|
||||
size="large"
|
||||
title="The web3 managing standard"
|
||||
description="Waku is a decentralized communications network"
|
||||
>
|
||||
<HeroActions>
|
||||
<HeroAction href="https://docs.waku.org" target="_blank">
|
||||
Build on Waku
|
||||
</HeroAction>
|
||||
<HeroAction variant="filled" href="https://docs.waku.org" target="_blank">
|
||||
Run Waku
|
||||
</HeroAction>
|
||||
</HeroActions>
|
||||
<HeroModel modelUrl="/hero/bust-hi.glb" layout="floating" renderer="ascii" />
|
||||
</Hero>
|
||||
|
||||
<FeatureList
|
||||
id="features"
|
||||
features={[
|
||||
{
|
||||
title: 'Private',
|
||||
description:
|
||||
'Waku leverages cutting-edge zero-knowledge encryption to ensure all messages and associated metadata benefit from rock-solid privacy guarantees.',
|
||||
},
|
||||
{
|
||||
title: 'Runs anywhere',
|
||||
description:
|
||||
"Waku's modularity enables developers to integrate Waku protocols according to their use case and users' hardware restraints",
|
||||
},
|
||||
{
|
||||
title: 'Scalable',
|
||||
description:
|
||||
'Waku aims to scale to support millions of users by dividing the flow of messages into shards—not every node needs to forward every message—while discovery protocols ensure users connect to the nodes serving relevant messages.',
|
||||
},
|
||||
{
|
||||
title: 'Secure',
|
||||
description:
|
||||
"Waku's native incentivization mechanisms ensure a wide node distribution, making it highly secure and strengthening its privacy assurances.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CallToActionSection
|
||||
title="User adoptions"
|
||||
description="Waku has brought private, censorship-resistant communications to several notable web3 DApps, decentralizing their messaging components:"
|
||||
label="Decentralize your DApp"
|
||||
href="/join"
|
||||
/>
|
||||
|
||||
<Showcase
|
||||
id="showcase"
|
||||
items={[
|
||||
{
|
||||
name: 'XMTP',
|
||||
logo: '/showcase/xmtp-mark-white.svg',
|
||||
description:
|
||||
"Inter-blockchain account messaging protocol XMTP uses Waku's Go implementation to facilitate communication between nodes in its currently permissioned network.",
|
||||
},
|
||||
{
|
||||
name: 'Status',
|
||||
logo: '/showcase/status-mark-white.svg',
|
||||
description:
|
||||
"Waku powers many of the Status super app's features, including its private messaging.",
|
||||
},
|
||||
{
|
||||
name: 'Railgun',
|
||||
logo: '/showcase/railgun-mark-white.svg',
|
||||
description:
|
||||
'The privacy-focused DeFi protocol Railgun anonymizes Ethereum transactions with Waku. ',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CallToActionSection
|
||||
title="Join the community to discover what Waku can bring to your DApp"
|
||||
label="Decentralize your DApp"
|
||||
href="/join"
|
||||
/>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,4 @@
|
||||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="58" height="58" rx="29" fill="white"/>
|
||||
<path d="M23 39V19H29.737C31.2013 19 32.4164 19.2669 33.3823 19.8008C34.3544 20.3346 35.0804 21.0736 35.5603 22.0176C36.0402 22.9551 36.2802 24.0391 36.2802 25.2695C36.2802 26.4935 36.0371 27.571 35.5511 28.502C35.0712 29.4264 34.3452 30.1458 33.3731 30.6602C32.4072 31.1745 31.192 31.4316 29.7278 31.4316H24.6243V28.834H29.4693C30.3922 28.834 31.1428 28.694 31.7212 28.4141C32.3056 28.1341 32.7332 27.7272 33.004 27.1934C33.2747 26.6595 33.41 26.0182 33.41 25.2695C33.41 24.5143 33.2716 23.86 32.9947 23.3066C32.724 22.7533 32.2964 22.3301 31.7119 22.0371C31.1336 21.7376 30.3738 21.5879 29.4324 21.5879H25.8517V39H23ZM32.3303 29.9766L37 39H33.7515L29.174 29.9766H32.3303Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 845 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.6479 28.7455C30.3452 28.9358 28.2754 28.1665 24.9723 28.3573C24.1531 28.4033 23.3396 28.522 22.5412 28.7121C23.0288 22.6037 27.3519 17.2602 33.2306 16.9205C36.8381 16.7123 40.4439 18.9397 40.6394 22.5555C40.8319 26.1094 38.1221 28.487 33.6483 28.7451L33.6479 28.7455ZM24.779 41.24C21.323 41.4352 17.8692 39.3501 17.6817 35.9665C17.4972 32.6404 20.0937 30.4152 24.3794 30.1736C27.543 29.9953 29.5261 30.7157 32.6897 30.5369C33.4741 30.4939 34.2533 30.3828 35.0186 30.2048C34.5523 35.9214 30.411 40.9226 24.779 41.24ZM28.9999 1.4449C13.7812 1.44446 1.44434 13.7812 1.44434 29C1.44434 44.2189 13.7812 56.5556 28.9999 56.5556C44.2186 56.5556 56.5554 44.2184 56.5554 29C56.5554 13.7816 44.2186 1.44446 28.9999 1.44446" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 885 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="57" height="58" viewBox="0 0 57 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_603_7836)">
|
||||
<path d="M0 29C0 12.9837 12.8112 0 28.6147 0C44.4079 0 56.61 12.7424 56.9815 28.8744C56.9815 34.0217 55.2473 38.3527 50.9119 42.4328C47.2482 45.8808 41.0019 46.3874 36.4191 43.8139C33.1479 41.9015 30.627 37.8289 28.4908 34.8377L24.5268 40.9892H15.9796L24.0314 28.8739L16.2274 16.948H25.0223L28.5528 23.0996L32.0211 16.948H40.8782L32.8265 28.8744C32.8265 28.8744 36.6665 34.8377 38.7722 37.1602C40.8782 39.4828 44.7182 39.5455 47.1955 37.0346C49.9195 34.274 50.5292 32.0759 50.5403 28.8744C50.5828 16.4828 40.8709 6.52813 28.6147 6.52813C16.3687 6.52813 6.44139 16.5891 6.44139 29C6.44139 41.4108 16.3687 51.472 28.6147 51.472C30.3085 51.472 31.932 51.3277 33.5077 50.9696L34.8704 57.3096C32.6282 57.819 30.8169 58 28.6147 58C12.8112 58 0 45.0162 0 29Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_603_7836">
|
||||
<rect width="57" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1015 B |
+10
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Pages
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
## Hello World
|
||||
|
||||
```python
|
||||
print("hello world!")
|
||||
```
|
||||
+264
@@ -0,0 +1,264 @@
|
||||
---
|
||||
title: Configuration
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
:::info
|
||||
|
||||
Check the [**`docusaurus.config.js` API reference**](api/docusaurus.config.js.mdx) for an exhaustive list of options.
|
||||
|
||||
:::
|
||||
|
||||
Docusaurus has a unique take on configurations. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.
|
||||
|
||||
Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.
|
||||
|
||||
## Syntax to declare `docusaurus.config.js` {#syntax-to-declare-docusaurus-config}
|
||||
|
||||
The `docusaurus.config.js` file is run in Node.js and should export either:
|
||||
|
||||
- a **config object**
|
||||
- a **function** that creates the config object
|
||||
|
||||
:::info
|
||||
|
||||
The `docusaurus.config.js` file only supports the [**CommonJS**](https://flaviocopes.com/commonjs/) module system:
|
||||
|
||||
- **Required:** use `module.exports = /* your config*/` to export your Docusaurus config
|
||||
- **Optional:** use `require("lib")` to import Node.js packages
|
||||
- **Optional:** use `await import("lib")` (dynamic import) in an async function to import ESM-Only Node.js packages
|
||||
|
||||
:::
|
||||
|
||||
Node.js gives us the ability to declare our Docusaurus configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
const config = {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = function configCreator() {
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = async function createConfigAsync() {
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// your site config ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::tip Using ESM-only packages
|
||||
|
||||
Using an async config creator can be useful to import ESM-only modules (notably most Remark plugins). It is possible to import such modules thanks to dynamic imports:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = async function createConfigAsync() {
|
||||
// Use a dynamic import instead of require('esm-lib')
|
||||
// highlight-next-line
|
||||
const lib = await import('lib')
|
||||
|
||||
return {
|
||||
title: 'Docusaurus',
|
||||
url: 'https://docusaurus.io',
|
||||
// rest of your site config...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## What goes into a `docusaurus.config.js`? {#what-goes-into-a-docusaurusconfigjs}
|
||||
|
||||
You should not have to write your `docusaurus.config.js` from scratch even if you are developing your site. All templates come with a `docusaurus.config.js` that includes defaults for the common options.
|
||||
|
||||
However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.
|
||||
|
||||
The high-level overview of Docusaurus configuration can be categorized into:
|
||||
|
||||
<TOCInline toc={toc} minHeadingLevel={3} maxHeadingLevel={3} />
|
||||
|
||||
### Site metadata {#site-metadata}
|
||||
|
||||
Site metadata contains the essential global metadata such as `title`, `url`, `baseUrl`, and `favicon`.
|
||||
|
||||
They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.
|
||||
|
||||
### Deployment configurations {#deployment-configurations}
|
||||
|
||||
Deployment configurations such as `projectName`, `organizationName`, and optionally `deploymentBranch` are used when you deploy your site with the `deploy` command.
|
||||
|
||||
It is recommended to check the [deployment docs](deployment.mdx) for more information.
|
||||
|
||||
### Theme, plugin, and preset configurations {#theme-plugin-and-preset-configurations}
|
||||
|
||||
List the [themes](./using-plugins.mdx#using-themes), [plugins](./using-plugins.mdx), and [presets](./using-plugins.mdx#using-presets) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
'@docusaurus/plugin-content-blog',
|
||||
'@docusaurus/plugin-content-pages',
|
||||
],
|
||||
themes: ['@docusaurus/theme-classic'],
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
Docusaurus supports [**module shorthands**](./using-plugins.mdx#module-shorthands), allowing you to simplify the above configuration as:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: ['content-blog', 'content-pages'],
|
||||
themes: ['classic'],
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
They can also be loaded from local directories:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
|
||||
}
|
||||
```
|
||||
|
||||
To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
[
|
||||
'content-blog',
|
||||
{
|
||||
path: 'blog',
|
||||
routeBasePath: 'blog',
|
||||
include: ['*.md', '*.mdx'],
|
||||
// ...
|
||||
},
|
||||
],
|
||||
'content-pages',
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
},
|
||||
theme: {
|
||||
customCss: [require.resolve('./src/css/custom.css')],
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
The `presets: [['classic', {...}]]` shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
For further help configuring themes, plugins, and presets, see [Using Plugins](./using-plugins.mdx).
|
||||
|
||||
### Custom configurations {#custom-configurations}
|
||||
|
||||
Docusaurus guards `docusaurus.config.js` from unknown fields. To add custom fields, define them in `customFields`.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
// highlight-start
|
||||
customFields: {
|
||||
image: '',
|
||||
keywords: [],
|
||||
},
|
||||
// highlight-end
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## Accessing configuration from components {#accessing-configuration-from-components}
|
||||
|
||||
Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
|
||||
|
||||
Basic example:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
// highlight-next-line
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
|
||||
const Hello = () => {
|
||||
// highlight-start
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
// highlight-end
|
||||
const { title, tagline } = siteConfig
|
||||
|
||||
return <div>{`${title} · ${tagline}`}</div>
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in `docusaurus.config.js`.
|
||||
|
||||
:::
|
||||
|
||||
## Customizing Babel Configuration {#customizing-babel-configuration}
|
||||
|
||||
For new Docusaurus projects, we automatically generated a `babel.config.js` in the project root.
|
||||
|
||||
```js title="babel.config.js"
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
}
|
||||
```
|
||||
|
||||
Most of the time, this configuration will work just fine. If you want to customize your Babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Getting Started
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get started by **creating a new site**.
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
|
||||
### What you'll need
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: version-1.1.0-Introduction
|
||||
title: Introduction
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
## Generate a new site
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
|
||||
The classic template will automatically be added to your project after you run the command:
|
||||
|
||||
```bash
|
||||
npm init docusaurus@latest my-website classic
|
||||
```
|
||||
|
||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
|
||||
```tsx title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
},
|
||||
theme: {
|
||||
customCss: [require.resolve('./src/css/custom.css')],
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
import React from 'react'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
|
||||
const Hello = () => {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
const { title, tagline } = siteConfig
|
||||
|
||||
return <div>{`${title} · ${tagline}`}</div>
|
||||
}
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
The presets: **_ [['classic', {...}]] _** shorthand works as well.
|
||||
|
||||
:::
|
||||
|
||||
## Start your site
|
||||
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
cd my-website
|
||||
npm run start
|
||||
```
|
||||
|
||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
||||
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
|
||||
<details><summary>CLICK ME</summary>
|
||||
|
||||
#### yes, even hidden code blocks!
|
||||
|
||||
<br/>
|
||||
|
||||
```python
|
||||
print("hello world!")
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"defaultSidebar": [
|
||||
{
|
||||
"type": "autogenerated",
|
||||
"dirName": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user