From a149f775ad5ee066c80f303701d2dd628b962f73 Mon Sep 17 00:00:00 2001 From: Endi Date: Fri, 25 Oct 2019 23:25:43 +0700 Subject: [PATCH] docs(v2): add docs on useful client api (#1890) * docs(v2): add docs on useful client api * Update docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md --- website/docs/docusaurus-core.md | 145 ++++++++++++++++++++++++++++++-- 1 file changed, 137 insertions(+), 8 deletions(-) diff --git a/website/docs/docusaurus-core.md b/website/docs/docusaurus-core.md index 21ffacd161..85e2501ee2 100644 --- a/website/docs/docusaurus-core.md +++ b/website/docs/docusaurus-core.md @@ -1,16 +1,145 @@ --- id: docusaurus-core -title: Docusaurus Core +title: Docusaurus Core API --- -_This section is a work in progress._ +Docusaurus provides some API on client that can be helpful when building your site. - +```jsx +import React from 'react'; +import Head from '@docusaurus/Head'; + +const MySEO = () => ( + <> + + + + My Title + + + +); +``` + +Nested or latter components will override duplicate usages: + +```jsx + + + My Title + + + + + + Nested Title + + + + +``` + +Outputs + +```html + + Nested Title + + +``` + +## `` + +This component enables linking to internal pages as well as a powerful performance feature called preloading. Preloading is used to prefetch resources so that the resources are fetched by the time the user navigates with this component. We use an `IntersectionObserver` to fetch a low-priority request when the `` is in the viewport and then use an `onMouseOver` event to trigger a high-priority request when it is likely that a user will navigate to the requested resource. + +The component is a wrapper around react-router’s `` component that adds useful enhancements specific to Docusaurus. All props are passed through to react-router’s `` component. + +```jsx +import React from 'react'; +import Link from '@docusaurus/Link'; + +const Page = () => ( +
+

+ Check out my blog! +

+

+ {/* Note that external links still use `a` tags. */} + Follow me on Twitter! +

+
+); +``` + +### `to`: string + +The target location to navigate to. Example: `/docs/introduction`. + +```jsx + +``` + +### `activeClassName`: string + +The class to give the `` when it is active. The default given class is `active`. This will be joined with the `className` prop. + +```jsx + + FAQs + +``` + +## `useDocusaurusContext` + +React Hooks to access Docusaurus Context. Context contains `siteConfig` object from [docusaurus.config.js](docusaurus.config.js.md). + +```ts +interface DocusaurusContext { + siteConfig?: DocusaurusConfig; +} +``` + +Usage example: + +```jsx +import React from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +const Test = () => { + const context = useDocusaurusContext(); + const {siteConfig = {}} = context; + const {title} = siteConfig; + + return

{title}

; +}; +``` + +## `useBaseUrl` + +React Hook to automatically append `baseUrl` to a string automatically. This is particularly useful if you don't want to hardcode your baseUrl. + +Example usage: + +```jsx +import React, {useEffect} from 'react'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +function Help() { + return ( +
+

Browse the docs

+

+ Learn more about Docusaurus using the{' '} + official documentation +

+
+ ); +} +```