105 | {children}
106 |
107 | {(tags.length > 0 || truncated) && (
108 |
144 | )}
145 |
40 |
49 | {isCloseable ? (
50 |
62 | ) : null}
63 |
64 | );
65 | }
66 |
67 | export default AnnouncementBar;
68 |
--------------------------------------------------------------------------------
/src/theme/BlogListPage.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from "react";
9 |
10 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
11 | import Layout from "@theme/Layout";
12 | import BlogPostItem from "@theme/BlogPostItem";
13 | import BlogListPaginator from "@theme/BlogListPaginator";
14 | import type { Props } from "@theme/BlogListPage";
15 | import BlogSidebar from "@theme/BlogSidebar";
16 | import { ThemeClassNames } from "@docusaurus/theme-common";
17 |
18 | function BlogListPage(props: Props): JSX.Element {
19 | const { metadata, items, sidebar } = props;
20 | const {
21 | siteConfig: { title: siteTitle },
22 | } = useDocusaurusContext();
23 | const { blogDescription, blogTitle, permalink } = metadata;
24 | const isBlogOnlyMode = permalink === "/";
25 | const title = isBlogOnlyMode ? siteTitle : blogTitle;
26 | return (
27 |
38 |
41 | {items.map(({ content: BlogPostContent }) => (
42 |
48 |
50 | ))}
51 |
53 |
54 |
64 |
73 |
74 |
75 | {authorImageURL && (
76 |
80 | 
81 |
82 | )}
83 |
94 |
84 | {author && (
85 | <>
86 |
93 | 87 | {author} 88 |
89 | {authorTitle} 90 | 91 | )} 92 |
33 |
37 |
42 |
44 |
51 | {!hideTableOfContents && BlogPostContents.toc && (
52 |
55 | )}
56 |
34 |
36 | {editUrl &&
45 | {(nextItem || prevItem) && (
46 |
47 |
49 | )}
50 |
29 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/theme/BlogSidebar/styles.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | .sidebar {
9 | max-height: calc(100vh - (theme("height.16") + theme("margin.8")));
10 | }
11 |
--------------------------------------------------------------------------------
/src/theme/BlogTagsListPage.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from "react";
9 |
10 | import Layout from "@theme/Layout";
11 | import Link from "@docusaurus/Link";
12 | import type { Props } from "@theme/BlogTagsListPage";
13 | import BlogSidebar from "@theme/BlogSidebar";
14 | import Translate from "@docusaurus/Translate";
15 | import { ThemeClassNames } from "@docusaurus/theme-common";
16 | import Anchor from "@theme/Anchor";
17 |
18 | function getCategoryOfTag(tag: string) {
19 | // tag's category should be customizable
20 | return tag[0].toUpperCase();
21 | }
22 |
23 | function BlogTagsListPage(props: Props): JSX.Element {
24 | const { tags, sidebar } = props;
25 |
26 | const tagCategories: { [category: string]: string[] } = {};
27 | Object.keys(tags).forEach((tag) => {
28 | const category = getCategoryOfTag(tag);
29 | tagCategories[category] = tagCategories[category] || [];
30 | tagCategories[category].push(tag);
31 | });
32 | const tagsList = Object.entries(tagCategories).sort(([a], [b]) => {
33 | if (a === b) {
34 | return 0;
35 | }
36 | return a > b ? 1 : -1;
37 | });
38 | const tagsSection = tagsList
39 | .map(([category, tagsForCategory]) => (
40 | {sidebar.title}
30 |-
31 | {sidebar.items.map((item) => {
32 | return (
33 |
- 34 | 40 | {item.title} 41 | 42 | 43 | ); 44 | })} 45 |
41 |
53 |
54 | ))
55 | .filter((item) => item != null);
56 |
57 | return (
58 | {category}
42 | {tagsForCategory.map((tag) => ( 43 | 49 | {tags[tag].name} ({tags[tag].count}) 50 | 51 | ))} 52 |53 |
69 |
72 |
73 |
80 |
82 |
83 |
73 |
77 | Tags
78 |
79 |
80 | {tagsSection}
81 |
72 |
74 |
75 |
77 |
78 |
82 | View All Tags
83 |
84 |
85 |
98 |
99 |
75 |
77 |
78 |
86 | {items.map(({ content: BlogPostContent }) => (
87 |
93 |
95 | ))}
96 |
97 |
58 |
107 |
108 | );
109 | }
110 |
111 | export default DocItem;
112 |
--------------------------------------------------------------------------------
/src/theme/DocPaginator/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from "react";
9 | import Link from "@docusaurus/Link";
10 | import Translate, { translate } from "@docusaurus/Translate";
11 | import type { Props } from "@theme/DocPaginator";
12 | import Paginator from "../Paginator";
13 |
14 | function DocPaginator(props: Props): JSX.Element {
15 | const { metadata } = props;
16 |
17 | return (
18 |
59 |
101 | {!hideTableOfContents && DocContent.toc && (
102 |
61 |
62 | {showVersionBadge && (
63 |
71 |
75 | )}
76 |
80 | {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
81 |
100 |
64 |
65 | Version: {version.label}
66 |
67 |
68 | )}
69 | {!hideTitle && (
70 | 72 | {title} 73 |
74 |
77 |
79 |
82 |
95 | )}
96 |
83 |
94 |
84 | {editUrl &&
86 | {(lastUpdatedAt || lastUpdatedBy) && (
87 |
97 |
99 |
103 |
105 | )}
106 |
140 |
151 | );
152 | }
153 |
154 | function DocVersionBanner({ versionMetadata }: Props): JSX.Element {
155 | if (versionMetadata.banner === "none") {
156 | return <>;
157 | } else {
158 | return
141 |
143 |
144 | savePreferredVersionName(latestVersionSuggestion.name)}
148 | />
149 |
150 |
62 |
63 |
64 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/theme/LastUpdated/styles.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | .lastUpdatedDate {
9 | font-weight: bold;
10 | }
11 |
--------------------------------------------------------------------------------
/src/theme/Layout/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import clsx from 'clsx';
10 | import SkipToContent from '@theme/SkipToContent';
11 | import AnnouncementBar from '@theme/AnnouncementBar';
12 | import Navbar from '@theme/Navbar';
13 | import Footer from '@theme/Footer';
14 | import LayoutProviders from '@theme/LayoutProviders';
15 | import LayoutHead from '@theme/LayoutHead';
16 | import type {Props} from '@theme/Layout';
17 | import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
18 | import {ThemeClassNames} from '@docusaurus/theme-common';
19 | import './styles.css';
20 |
21 | function Layout(props: Props): JSX.Element {
22 | const {children, noFooter, wrapperClassName, pageClassName} = props;
23 |
24 | useKeyboardNavigation();
25 |
26 | return (
27 |
87 | (Simulated during dev for better perf)
88 |
89 | )}
90 |
91 |
92 |
42 | {children}
43 |
44 |
45 | {!noFooter && }
46 |
38 |
55 |
39 |
54 |
40 |
53 |
41 |
47 | {!hideTableOfContents && MDXPageContent.toc && (
48 |
42 |
43 |
45 |
46 |
49 |
51 | )}
52 |
20 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/theme/NavbarItem/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
10 | import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
11 | import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
12 | import type {Props} from '@theme/NavbarItem';
13 |
14 | const NavbarItemComponents = {
15 | default: () => DefaultNavbarItem,
16 | localeDropdown: () => LocaleDropdownNavbarItem,
17 | search: () => SearchNavbarItem,
18 |
19 | // Need to lazy load these items as we don't know for sure the docs plugin is loaded
20 | // See https://github.com/facebook/docusaurus/issues/3360
21 | docsVersion: () =>
22 | // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
23 | require('@theme/NavbarItem/DocsVersionNavbarItem').default,
24 | docsVersionDropdown: () =>
25 | // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
26 | require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
27 | doc: () =>
28 | // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
29 | require('@theme/NavbarItem/DocNavbarItem').default,
30 | } as const;
31 |
32 | const getNavbarItemComponent = (
33 | type: keyof typeof NavbarItemComponents = 'default',
34 | ) => {
35 | const navbarItemComponent = NavbarItemComponents[type];
36 | if (!navbarItemComponent) {
37 | throw new Error(`No NavbarItem component found for type=${type}.`);
38 | }
39 | return navbarItemComponent();
40 | };
41 |
42 | export default function NavbarItem({type, ...props}: Props): JSX.Element {
43 | const NavbarItemComponent = getNavbarItemComponent(type);
44 | return
17 |
45 |
18 |
19 |
26 |
44 |
19 |
23 | Page Not Found
24 |
25 |
26 |
27 |
35 |
{subtitle}
23 | {title}
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/theme/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | // By default, the classic theme does not provide any SearchBar implementation
9 | // If you swizzled this file, it is your responsibility to provide an implementation
10 | // Tip: swizzle the SearchBar from the Algolia theme for inspiration:
11 | // npm run swizzle @docusaurus/theme-search-algolia SearchBar
12 | export {default} from '@docusaurus/Noop';
13 |
--------------------------------------------------------------------------------
/src/theme/SearchMetadatas/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 |
10 | import Head from '@docusaurus/Head';
11 | import type {Props} from '@theme/SearchMetadatas';
12 |
13 | // Note: we don't couple this to Algolia/DocSearch on purpose
14 | // We may want to support other search engine plugins too
15 | // Search plugins should swizzle/override this comp to add their behavior
16 | export default function SearchMetadatas({
17 | locale,
18 | version,
19 | tag,
20 | }: Props): JSX.Element {
21 | return (
22 |
23 | {locale && }
24 | {version && }
25 | {tag && }
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/theme/Seo/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import Head from '@docusaurus/Head';
10 | import {useThemeConfig, useTitleFormatter} from '@docusaurus/theme-common';
11 | import useBaseUrl from '@docusaurus/useBaseUrl';
12 |
13 | import type {Props} from '@theme/Seo';
14 |
15 | export default function Seo({
16 | title,
17 | description,
18 | keywords,
19 | image,
20 | }: Props): JSX.Element {
21 | const {image: defaultImage} = useThemeConfig();
22 | const pageTitle = useTitleFormatter(title);
23 | const pageImage = useBaseUrl(image || defaultImage, {absolute: true});
24 |
25 | return (
26 |
27 |
44 |
45 |
49 | Skip to main content
50 |
51 |
52 |
53 | );
54 | }
55 |
56 | export default SkipToContent;
57 |
--------------------------------------------------------------------------------
/src/theme/SkipToContent/styles.module.css:
--------------------------------------------------------------------------------
1 | .skipToContent {
2 | position: fixed;
3 | top: 1rem;
4 | left: 100%;
5 | z-index: calc(var(--ifm-z-index-fixed) + 1);
6 | padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
7 | color: var(--ifm-color-emphasis-900);
8 | background-color: var(--ifm-background-surface-color);
9 | border-radius: var(--ifm-global-radius);
10 | font: inherit;
11 | border: none;
12 | }
13 |
14 | .skipToContent:focus {
15 | left: 1rem;
16 | }
17 |
--------------------------------------------------------------------------------
/src/theme/TOC/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from "react";
9 | import clsx from "clsx";
10 | import useTOCHighlight from "@theme/hooks/useTOCHighlight";
11 | import type { TOCProps } from "@theme/TOC";
12 | import { TOCItem } from "@docusaurus/types";
13 |
14 | const LINK_CLASS_NAME = "text-gray-400 hover:text-primary hover:no-underline";
15 | const ACTIVE_LINK_CLASS_NAME = "text-primary hover:no-underline";
16 | const TOP_OFFSET = 100;
17 |
18 | function Headings({
19 | toc,
20 | isChild,
21 | }: {
22 | toc: readonly TOCItem[];
23 | isChild?: boolean;
24 | }) {
25 | if (!toc.length) {
26 | return null;
27 | }
28 | return (
29 |
43 | );
44 | }
45 |
46 | function TOC({ toc }: TOCProps): JSX.Element {
47 | useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
48 | return (
49 |
55 |
57 | );
58 | }
59 |
60 | export default TOC;
61 |
--------------------------------------------------------------------------------
/src/theme/TOCInline/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import clsx from 'clsx';
10 | import type {TOCInlineProps} from '@theme/TOCInline';
11 | import styles from './styles.module.css';
12 | import {TOCItem} from '@docusaurus/types';
13 |
14 | /* eslint-disable jsx-a11y/control-has-associated-label */
15 | function HeadingsInline({
16 | toc,
17 | isChild,
18 | }: {
19 | toc: readonly TOCItem[];
20 | isChild?: boolean;
21 | }) {
22 | if (!toc.length) {
23 | return null;
24 | }
25 | return (
26 |
39 | );
40 | }
41 |
42 | function TOCInline({toc}: TOCInlineProps): JSX.Element {
43 | return (
44 |
45 |
47 | );
48 | }
49 |
50 | export default TOCInline;
51 |
--------------------------------------------------------------------------------
/src/theme/TOCInline/styles.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | .tableOfContentsInline ul {
9 | list-style-type: disc;
10 | font-size: initial;
11 | padding-top: 0;
12 | }
13 |
--------------------------------------------------------------------------------
/src/theme/TabItem/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import type {Props} from '@theme/TabItem';
10 |
11 | function TabItem({children, hidden, className}: Props): JSX.Element {
12 | return (
13 |
14 | {children}
15 |
16 | );
17 | }
18 |
19 | export default TabItem;
20 |
--------------------------------------------------------------------------------
/src/theme/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React, { useState, cloneElement, Children, ReactElement } from "react";
9 | import useUserPreferencesContext from "@theme/hooks/useUserPreferencesContext";
10 | import type { Props } from "@theme/Tabs";
11 | import type { Props as TabItemProps } from "@theme/TabItem";
12 |
13 | import clsx from "clsx";
14 |
15 | import styles from "./styles.module.css";
16 |
17 | function isInViewport(element: HTMLElement): boolean {
18 | const { top, left, bottom, right } = element.getBoundingClientRect();
19 | const { innerHeight, innerWidth } = window;
20 |
21 | return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
22 | }
23 |
24 | const keys = {
25 | left: 37,
26 | right: 39,
27 | } as const;
28 |
29 | function Tabs(props: Props): JSX.Element {
30 | const { lazy, block, defaultValue, values, groupId, className } = props;
31 | const { tabGroupChoices, setTabGroupChoices } = useUserPreferencesContext();
32 | const [selectedValue, setSelectedValue] = useState(defaultValue);
33 | const children = Children.toArray(
34 | props.children
35 | ) as ReactElement
103 |
151 | );
152 | }
153 |
154 | export default Tabs;
155 |
--------------------------------------------------------------------------------
/src/theme/Tabs/styles.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | .tabItem {
9 | margin-top: 0 !important;
10 | }
11 |
12 | .tabItemActive {
13 | animation: blink 0.5s ease-in-out 5;
14 | }
15 |
16 | @keyframes blink {
17 | 0% {
18 | background-color: var(--ifm-hover-overlay);
19 | }
20 | 100% {
21 | background-color: rgba(0, 0, 0, 0);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/theme/ThemeContext.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import React from 'react';
9 | import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
10 |
11 | const ThemeContext = React.createContext-
114 | {values.map(({ value, label }) => (
115 |
- tabRefs.push(tabControl)} 124 | onKeyDown={handleKeydown} 125 | onFocus={handleTabChange} 126 | onClick={handleTabChange} 127 | > 128 | {label} 129 | 130 | ))} 131 |
142 | {children.map((tabItem, i) =>
143 | cloneElement(tabItem, {
144 | key: i,
145 | hidden: tabItem.props.value !== selectedValue,
146 | })
147 | )}
148 |
149 | )}
150 |
74 |
91 | );
92 | },
93 | );
94 |
95 | export default function (props: Props): JSX.Element {
96 | const {
97 | colorMode: {
98 | switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
99 | },
100 | } = useThemeConfig();
101 | const {isClient} = useDocusaurusContext();
102 |
103 | return (
104 |
75 |
78 |
79 |
80 | setFocused(true)}
88 | onBlur={() => setFocused(false)}
89 | />
90 | {icons.checked}
76 | {icons.unchecked}
77 |
74 |
91 | );
92 | },
93 | );
94 |
95 | export default function (props: Props): JSX.Element {
96 | const {
97 | colorMode: {
98 | switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
99 | },
100 | } = useThemeConfig();
101 | const {isClient} = useDocusaurusContext();
102 |
103 | return (
104 |
75 |
78 |
79 |
80 | setFocused(true)}
88 | onBlur={() => setFocused(false)}
89 | />
90 | {icons.checked}
76 | {icons.unchecked}
77 | My React page
25 |This is a React page
26 |Hello, Docusaurus!
62 | ) 63 | } 64 | ``` 65 | 66 | ```jsx title="src/components/HelloDocusaurus.js" 67 | function HelloDocusaurus() { 68 | returnHello, Docusaurus!
; 69 | } 70 | ``` 71 | 72 | ## Admonitions 73 | 74 | Docusaurus has a special syntax to create admonitions and callouts: 75 | 76 | :::tip My tip 77 | 78 | Use this awesome feature option 79 | 80 | ::: 81 | 82 | :::danger Take care 83 | 84 | This action is dangerous 85 | 86 | ::: 87 | 88 | :::tip My tip 89 | 90 | Use this awesome feature option 91 | 92 | ::: 93 | 94 | :::danger Take care 95 | 96 | This action is dangerous 97 | 98 | ::: 99 | 100 | ## MDX and React Components 101 | 102 | [MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: 103 | 104 | ```jsx 105 | export const Highlight = ({children, color}) => ( 106 | { 115 | alert(`You clicked the color ${color} with label ${children}`) 116 | }}> 117 | {children} 118 | 119 | ); 120 | 121 | This isdocs directory.
23 |
24 | ),
25 | },
26 | {
27 | title: 'Powered by React',
28 | Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
29 | description: (
30 | <>
31 | Extend or customize your website layout by reusing React. Docusaurus can
32 | be extended while reusing the same header and footer.
33 |
34 | ),
35 | },
36 | ];
37 |
38 | function Feature({Svg, title, description}) {
39 | return (
40 |
41 |
49 | );
50 | }
51 |
52 | export default function HomepageFeatures() {
53 | return (
54 |
42 |
43 |
44 |
45 |
48 | {title}
46 |{description}
47 |
56 |
62 |
57 | {FeatureList.map((props, idx) => (
58 |
61 |
14 |
24 | {siteConfig.title}
15 |{siteConfig.tagline}
16 |
17 |
20 | Docusaurus Tutorial - 5min ⏱️
21 |
22 |
23 | My React page
25 |This is a React page
26 |Hello, Docusaurus!
62 | ) 63 | } 64 | ``` 65 | 66 | ```jsx title="src/components/HelloDocusaurus.js" 67 | function HelloDocusaurus() { 68 | returnHello, Docusaurus!
; 69 | } 70 | ``` 71 | 72 | ## Admonitions 73 | 74 | Docusaurus has a special syntax to create admonitions and callouts: 75 | 76 | :::tip My tip 77 | 78 | Use this awesome feature option 79 | 80 | ::: 81 | 82 | :::danger Take care 83 | 84 | This action is dangerous 85 | 86 | ::: 87 | 88 | :::tip My tip 89 | 90 | Use this awesome feature option 91 | 92 | ::: 93 | 94 | :::danger Take care 95 | 96 | This action is dangerous 97 | 98 | ::: 99 | 100 | ## MDX and React Components 101 | 102 | [MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: 103 | 104 | ```jsx 105 | export const Highlight = ({children, color}) => ( 106 | { 115 | alert(`You clicked the color ${color} with label ${children}`) 116 | }}> 117 | {children} 118 | 119 | ); 120 | 121 | This isMy React page
25 |This is a React page
26 |