mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-24 12:07:58 +02:00
chore: remove unused Bootstrap theme (#5634)
* remove package * remove bootstrap from doc * remove bootstrap init template + examples * remove bootstrap preset * remaining bootstrap refs * update lockfile
This commit is contained in:
Sébastien Lorber
GitHub
parent
a96878048d
commit
a0c2c52829
93 changed files with 15 additions and 12166 deletions
|
|
@ -1,93 +0,0 @@
|
|||
// @ts-check
|
||||
// Note: type annotations allow type checking and IDEs autocompletion
|
||||
|
||||
/** @type {import('@docusaurus/types').Config} */
|
||||
const config = {
|
||||
title: 'My Site',
|
||||
tagline: 'The tagline of my site',
|
||||
url: 'https://your-docusaurus-test-site.com',
|
||||
baseUrl: '/',
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
favicon: 'img/favicon.ico',
|
||||
organizationName: 'facebook', // Usually your GitHub org/user name.
|
||||
projectName: 'docusaurus', // Usually your repo name.
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
title: 'My Site',
|
||||
logo: {
|
||||
alt: 'My Site Logo',
|
||||
src: 'img/logo.svg',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
to: 'docs/intro',
|
||||
activeBasePath: 'docs',
|
||||
label: 'Docs',
|
||||
position: 'left',
|
||||
},
|
||||
{to: 'blog', label: 'Blog', position: 'left'},
|
||||
{
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
label: 'GitHub',
|
||||
position: 'right',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
label: 'Stack Overflow',
|
||||
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
|
||||
},
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discordapp.com/invite/docusaurus',
|
||||
},
|
||||
{
|
||||
label: 'Twitter',
|
||||
href: 'https://twitter.com/docusaurus',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
items: [
|
||||
{
|
||||
label: 'Blog',
|
||||
to: 'blog/',
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-bootstrap',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
|
||||
},
|
||||
blog: {
|
||||
showReadingTime: true,
|
||||
// Please change this to your repo.
|
||||
editUrl:
|
||||
'https://github.com/facebook/docusaurus/edit/main/website/blog/',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"name": "docusaurus-2-bootstrap-template",
|
||||
"version": "2.0.0-beta.6",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "2.0.0-beta.6",
|
||||
"@docusaurus/preset-bootstrap": "2.0.0-beta.6",
|
||||
"@mdx-js/react": "^1.6.21",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"clsx": "^1.1.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"url-loader": "^4.1.1"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
imageUrl: 'img/undraw_docusaurus_mountain.svg',
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
imageUrl: 'img/undraw_docusaurus_tree.svg',
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
imageUrl: 'img/undraw_docusaurus_react.svg',
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({imageUrl, title, description}) {
|
||||
const imgUrl = useBaseUrl(imageUrl);
|
||||
return (
|
||||
<div className={clsx('col col--4', styles.feature)}>
|
||||
{imgUrl && (
|
||||
<div className="text--center">
|
||||
<img className={styles.featureImage} src={imgUrl} alt={title} />
|
||||
</div>
|
||||
)}
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const context = useDocusaurusContext();
|
||||
const {siteConfig = {}} = context;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
<div className={styles.hero}>
|
||||
<header>
|
||||
<h1>{siteConfig.title}</h1>
|
||||
<p>{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link to={useBaseUrl('docs/')}>Get Started</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{features && features.length > 0 && (
|
||||
<section className={styles.section}>
|
||||
<div className={styles.features}>
|
||||
{features.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 10rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# `@docusaurus/preset-bootstrap`
|
||||
|
||||
Bootstrap preset for Docusaurus.
|
||||
|
||||
## Usage
|
||||
|
||||
See [presets documentation](https://docusaurus.io/docs/presets).
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"name": "@docusaurus/preset-bootstrap",
|
||||
"version": "2.0.0-beta.6",
|
||||
"description": "Bootstrap preset for Docusaurus.",
|
||||
"main": "src/index.js",
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/facebook/docusaurus.git",
|
||||
"directory": "packages/docusaurus-preset-bootstrap"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-blog": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-docs": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-pages": "2.0.0-beta.6",
|
||||
"@docusaurus/theme-bootstrap": "2.0.0-beta.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.4 || ^17.0.0",
|
||||
"react-dom": "^16.8.4 || ^17.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
module.exports = function preset(context, opts = {}) {
|
||||
return {
|
||||
themes: [[require.resolve('@docusaurus/theme-bootstrap'), opts.theme]],
|
||||
plugins: [
|
||||
[
|
||||
opts.pages !== false &&
|
||||
require.resolve('@docusaurus/plugin-content-pages'),
|
||||
opts.pages,
|
||||
],
|
||||
[
|
||||
opts.blog !== false &&
|
||||
require.resolve('@docusaurus/plugin-content-blog'),
|
||||
opts.blog,
|
||||
],
|
||||
[
|
||||
opts.docs !== false &&
|
||||
require.resolve('@docusaurus/plugin-content-docs'),
|
||||
opts.docs,
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
# Docusaurus Theme Bootstrap
|
||||
|
||||
The bootstrap theme for Docusaurus.
|
||||
|
||||
## Installation
|
||||
|
||||
Add `docusaurus/theme-bootstrap` to your package:
|
||||
|
||||
```bash
|
||||
npm i @docusaurus/theme-bootstrao
|
||||
# or
|
||||
yarn add @docusaurus/theme-bootstrap
|
||||
```
|
||||
|
||||
Modify your `docusaurus.config.js`:
|
||||
|
||||
```diff
|
||||
module.exports = {
|
||||
...
|
||||
+ themes: ['@docusaurus/theme-bootstrap'],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Swizzling components
|
||||
|
||||
```shell
|
||||
$ npm swizzle @docusaurus/theme-bootstrap [component name]
|
||||
```
|
||||
|
||||
All components used by this theme can be found [here](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-bootstrap/src/theme)
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
presets: [['@babel/preset-typescript', {isTSX: true, allExtensions: true}]],
|
||||
};
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
{
|
||||
"name": "@docusaurus/theme-bootstrap",
|
||||
"version": "2.0.0-beta.6",
|
||||
"description": "Bootstrap theme for Docusaurus.",
|
||||
"main": "src/index.js",
|
||||
"types": "src/types.d.ts",
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/facebook/docusaurus.git",
|
||||
"directory": "packages/docusaurus-theme-bootstrap"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-blog": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-docs": "2.0.0-beta.6",
|
||||
"@docusaurus/plugin-content-pages": "2.0.0-beta.6",
|
||||
"@docusaurus/theme-common": "2.0.0-beta.6",
|
||||
"@docusaurus/types": "2.0.0-beta.6",
|
||||
"@mdx-js/react": "^1.6.21",
|
||||
"bootstrap": "^4.4.1",
|
||||
"classnames": "^2.2.6",
|
||||
"clsx": "^1.1.1",
|
||||
"prism-react-renderer": "^1.1.1",
|
||||
"reactstrap": "^8.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "2.0.0-beta.6"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "yarn babel && yarn prettier",
|
||||
"watch": "yarn babel --watch",
|
||||
"babel": "babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
|
||||
"prettier": "prettier --config ../../.prettierrc --ignore-path ../../.prettierignore --write \"**/*.{js,ts}\""
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.4",
|
||||
"react-dom": "^16.8.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.15.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function () {
|
||||
return {
|
||||
name: 'docusaurus-theme-bootstrap',
|
||||
getThemePath() {
|
||||
return path.resolve(__dirname, '..', 'lib', 'theme');
|
||||
},
|
||||
getTypeScriptThemePath() {
|
||||
return path.resolve(__dirname, './theme');
|
||||
},
|
||||
getClientModules() {
|
||||
return [require.resolve('bootstrap/dist/css/bootstrap.min.css')];
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import BlogPostCard from '@theme/BlogPostItem';
|
||||
import BlogListPaginator from '@theme/BlogListPaginator';
|
||||
import Layout from '@theme/Layout';
|
||||
import type {Props} from '@theme/BlogListPage';
|
||||
|
||||
function BlogListPage(props: Props): JSX.Element {
|
||||
const {items, metadata} = props;
|
||||
const {
|
||||
siteConfig: {title: siteTitle},
|
||||
} = useDocusaurusContext();
|
||||
const {blogDescription, blogTitle, permalink} = metadata;
|
||||
const isBlogOnlyMode = permalink === '/';
|
||||
const title = isBlogOnlyMode ? siteTitle : blogTitle;
|
||||
|
||||
return (
|
||||
<Layout title={title} description={blogDescription}>
|
||||
<div className="container-fluid mt-4">
|
||||
<div className="row row-cols-1 row-cols-sm-1">
|
||||
{items.map(({content: BlogPostContent}) => (
|
||||
<div
|
||||
key={BlogPostContent.metadata.permalink}
|
||||
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
|
||||
<BlogPostCard
|
||||
frontMatter={BlogPostContent.frontMatter}
|
||||
metadata={BlogPostContent.metadata}
|
||||
truncated={BlogPostContent.metadata.truncated}>
|
||||
<BlogPostContent />
|
||||
</BlogPostCard>
|
||||
</div>
|
||||
))}
|
||||
<BlogListPaginator metadata={metadata} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogListPage;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogListPaginator';
|
||||
|
||||
function BlogListPaginator(props: Props): JSX.Element {
|
||||
const {previousPage, nextPage} = props.metadata;
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Blog list page navigation"
|
||||
className="my-5 col col-xl-4 offset-xl-4 col-xs-6">
|
||||
<ul className="pagination justify-content-between">
|
||||
<li className="pagination__item">
|
||||
{previousPage && (
|
||||
<Link className="page-link rounded-pill" to={previousPage}>
|
||||
Older
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
<li className="pagination__item">
|
||||
{nextPage && (
|
||||
<Link className="page-link rounded-pill" to={nextPage}>
|
||||
Newer
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogListPaginator;
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {MDXProvider} from '@mdx-js/react';
|
||||
import MDXComponents from '@theme/MDXComponents';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogPostItem';
|
||||
|
||||
const MONTHS = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
];
|
||||
|
||||
const getReadingTime = (readingTime) => {
|
||||
return Math.ceil(readingTime);
|
||||
};
|
||||
|
||||
function BlogPostItem(props: Props): JSX.Element {
|
||||
const {
|
||||
children,
|
||||
frontMatter,
|
||||
metadata,
|
||||
truncated,
|
||||
isBlogPostPage = false,
|
||||
} = props;
|
||||
|
||||
const {date, readingTime, tags, permalink, editUrl} = metadata;
|
||||
const {author, title, authorURL, authorImageURL} = frontMatter;
|
||||
|
||||
const match = date.substring(0, 10).split('-');
|
||||
const year = match[0];
|
||||
const month = MONTHS[parseInt(match[1], 10) - 1];
|
||||
const day = parseInt(match[2], 10);
|
||||
|
||||
return (
|
||||
<article className="card shadow">
|
||||
<div className="row no-gutters rows-col-2 m-3">
|
||||
<div className="col-xs mr-3">
|
||||
{authorImageURL && (
|
||||
<img
|
||||
style={{width: '50px'}}
|
||||
src={authorImageURL}
|
||||
alt={author as string}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col">
|
||||
{author && (
|
||||
<h5>
|
||||
<a href={authorURL} rel={author as string}>
|
||||
{author}
|
||||
</a>
|
||||
</h5>
|
||||
)}
|
||||
<time
|
||||
className="card-subtitle mb-md-4 font-weight-light"
|
||||
dateTime={date}>
|
||||
{month} {day}, {year}{' '}
|
||||
{isBlogPostPage && readingTime && (
|
||||
<> · {getReadingTime(readingTime)} min read</>
|
||||
)}
|
||||
</time>
|
||||
</div>
|
||||
<div className="col text-right">
|
||||
{isBlogPostPage && editUrl && (
|
||||
<span>
|
||||
<a href={editUrl} target="_blank" rel="noreferrer noopener">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 40 40"
|
||||
style={{
|
||||
marginRight: '0.3em',
|
||||
verticalAlign: 'sub',
|
||||
}}>
|
||||
<g>
|
||||
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
|
||||
</g>
|
||||
</svg>
|
||||
Edit this page
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
<h3 className="card-title text-primary mr-2">{title}</h3>
|
||||
<section>
|
||||
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className="row no-gutters m-3 justify-content-between">
|
||||
<div className="col col-xs">
|
||||
{tags.length > 0 && (
|
||||
<>
|
||||
{tags.map(({label, permalink: tagPermalink}) => (
|
||||
<Link key={tagPermalink} className="m-1" to={tagPermalink}>
|
||||
<span className="badge badge-primary">{label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="col align-self-center text-right">
|
||||
{!isBlogPostPage && readingTime && (
|
||||
<small className={truncated ? 'mr-2' : ''}>
|
||||
{getReadingTime(readingTime)} min read
|
||||
</small>
|
||||
)}
|
||||
{truncated && (
|
||||
<Link to={permalink} aria-label={`Read more about ${title}`}>
|
||||
<span className="stretched-link">Read more</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostItem;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import BlogPostPaginator from '@theme/BlogPostPaginator';
|
||||
import type {Props} from '@theme/BlogPostPage';
|
||||
|
||||
function BlogPostPage(props: Props): JSX.Element {
|
||||
const {content: BlogPostContents} = props;
|
||||
const {frontMatter, metadata} = BlogPostContents;
|
||||
const {title, description, nextItem, prevItem} = metadata;
|
||||
|
||||
return (
|
||||
<Layout title={title} description={description}>
|
||||
<div className="container-fluid my-5">
|
||||
<div className="row row-cols-1 row-cols-sm-1">
|
||||
<div
|
||||
key={metadata.permalink}
|
||||
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
|
||||
<BlogPostItem
|
||||
frontMatter={frontMatter}
|
||||
metadata={metadata}
|
||||
isBlogPostPage>
|
||||
<BlogPostContents />
|
||||
</BlogPostItem>
|
||||
{(nextItem || prevItem) && (
|
||||
<BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostPage;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogPostPaginator';
|
||||
|
||||
function BlogPostPaginator(props: Props): JSX.Element {
|
||||
const {nextItem, prevItem} = props;
|
||||
|
||||
return (
|
||||
<nav aria-label="Blog post page navigation" className="my-5">
|
||||
<ul className="pagination justify-content-between">
|
||||
<li className="pagination__item">
|
||||
{prevItem && (
|
||||
<Link className="page-link" to={prevItem.permalink}>
|
||||
« {prevItem.title}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
<li className="pagination__item">
|
||||
{nextItem && (
|
||||
<Link className="page-link" to={nextItem.permalink}>
|
||||
{nextItem.title} »
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostPaginator;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogTagsListPage';
|
||||
|
||||
function BlogTagsListPage(props: Props): JSX.Element {
|
||||
const {tags} = props;
|
||||
const renderAllTags = () => (
|
||||
<>
|
||||
{Object.keys(tags).map((tag) => (
|
||||
<Link
|
||||
href={tags[tag].permalink}
|
||||
key={tag}
|
||||
className="btn btn-primary list-inline-item my-2">
|
||||
{tags[tag].name}{' '}
|
||||
<span className="badge badge-light">{tags[tag].count}</span>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout title="Tags" description="Blog Tags">
|
||||
<div className="container my-3 justify-content-center">
|
||||
<h1 className="text-primary">Tags</h1>
|
||||
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogTagsListPage;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogTagsPostsPage';
|
||||
|
||||
function pluralize(count, word) {
|
||||
return count > 1 ? `${word}s` : word;
|
||||
}
|
||||
|
||||
function BlogTagsPostPage(props: Props): JSX.Element {
|
||||
const {metadata, items} = props;
|
||||
const {allTagsPath, name, count} = metadata;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Posts tagged "${name}"`}
|
||||
description={`Blog | Tagged "${name}"`}>
|
||||
<div className="container-fluid my-4">
|
||||
<header className="text-center">
|
||||
<h1>
|
||||
{count} {pluralize(count, 'post')} tagged with "{name}
|
||||
"
|
||||
</h1>
|
||||
<Link href={allTagsPath}>View All Tags</Link>
|
||||
</header>
|
||||
|
||||
<div className="my-4">
|
||||
{items.map(({content: BlogPostContent}) => (
|
||||
<div
|
||||
key={BlogPostContent.metadata.permalink}
|
||||
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
|
||||
<BlogPostItem
|
||||
key={BlogPostContent.metadata.permalink}
|
||||
frontMatter={BlogPostContent.frontMatter}
|
||||
metadata={BlogPostContent.metadata}
|
||||
truncated>
|
||||
<BlogPostContent />
|
||||
</BlogPostItem>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogTagsPostPage;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Highlight, {defaultProps, Language} from 'prism-react-renderer';
|
||||
import theme from 'prism-react-renderer/themes/nightOwl';
|
||||
import type {Props} from '@theme/CodeBlock';
|
||||
|
||||
export default ({children, className}: Props): JSX.Element => {
|
||||
const language = className && className.replace(/language-/, '');
|
||||
|
||||
return (
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={theme}
|
||||
code={children}
|
||||
language={language as Language}>
|
||||
{({style, tokens, getLineProps, getTokenProps}) => (
|
||||
<pre className={className} style={{...style, padding: '20px'}}>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({line, key: i})}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({token, key})} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Head from '@docusaurus/Head';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import {useTitleFormatter, useThemeConfig} from '@docusaurus/theme-common';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import Navbar from '@theme/Navbar';
|
||||
import Footer from '@theme/Footer';
|
||||
import type {Props} from '@theme/Layout';
|
||||
|
||||
function Layout(props: Props): JSX.Element {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const {favicon, url: siteUrl} = siteConfig;
|
||||
const {image: defaultImage, metadatas} = useThemeConfig();
|
||||
const {children, title, noFooter, description, image, keywords, permalink} =
|
||||
props;
|
||||
const metaTitle = useTitleFormatter(title);
|
||||
const metaImage = image || defaultImage;
|
||||
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
|
||||
if (!isInternalUrl(metaImage)) {
|
||||
metaImageUrl = metaImage as string;
|
||||
}
|
||||
const faviconUrl = useBaseUrl(favicon);
|
||||
|
||||
return (
|
||||
<div className="container-fluid vh-100 vw-100 row m-0 p-0">
|
||||
<Head>
|
||||
{/* TODO: Do not assume that it is in english language */}
|
||||
<html lang="en" />
|
||||
|
||||
{metaTitle && <title>{metaTitle}</title>}
|
||||
{metaTitle && <meta property="og:title" content={metaTitle} />}
|
||||
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
|
||||
{description && <meta name="description" content={description} />}
|
||||
{description && (
|
||||
<meta property="og:description" content={description} />
|
||||
)}
|
||||
{keywords && keywords.length && (
|
||||
<meta name="keywords" content={keywords.join(',')} />
|
||||
)}
|
||||
{metaImage && <meta property="og:image" content={metaImageUrl} />}
|
||||
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
|
||||
{metaImage && (
|
||||
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
|
||||
)}
|
||||
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</Head>
|
||||
<Head
|
||||
// it's important to have an additional <Head> element here,
|
||||
// as it allows react-helmet to override values set in previous <Head>
|
||||
// ie we can override default metadatas such as "twitter:card"
|
||||
// In same Head, the same meta would appear twice instead of overriding
|
||||
// See react-helmet doc
|
||||
>
|
||||
{metadatas?.length > 0 &&
|
||||
metadatas.map((metadata, i) => (
|
||||
<meta key={`metadata_${i}`} {...metadata} />
|
||||
))}
|
||||
</Head>
|
||||
<Navbar />
|
||||
<div className="container-fluid px-0 d-inline-flex flex-row">
|
||||
{children}
|
||||
</div>
|
||||
{!noFooter && <Footer />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import Head from '@docusaurus/Head';
|
||||
import DocPaginator from '@theme/DocPaginator';
|
||||
import {useTitleFormatter} from '@docusaurus/theme-common';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import {Props} from '@theme/DocItem';
|
||||
|
||||
function DocItem(props: Props): JSX.Element {
|
||||
const {siteConfig = {url: ''}} = useDocusaurusContext();
|
||||
const {url: siteUrl} = siteConfig;
|
||||
const {content: DocContent} = props;
|
||||
const {metadata} = DocContent;
|
||||
const {description, title, permalink} = metadata;
|
||||
const {
|
||||
frontMatter: {image: metaImage, keywords},
|
||||
} = DocContent;
|
||||
|
||||
const metaTitle = useTitleFormatter(title);
|
||||
let metaImageUrl: string | undefined = siteUrl + useBaseUrl(metaImage);
|
||||
|
||||
if (!isInternalUrl(metaImage)) {
|
||||
metaImageUrl = metaImage;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{metaTitle}</title>
|
||||
<meta property="og:title" content={metaTitle} />
|
||||
{description && <meta name="description" content={description} />}
|
||||
{description && (
|
||||
<meta property="og:description" content={description} />
|
||||
)}
|
||||
{keywords && keywords.length && (
|
||||
<meta name="keywords" content={keywords.join(',')} />
|
||||
)}
|
||||
{metaImage && <meta property="og:image" content={metaImageUrl} />}
|
||||
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
|
||||
{metaImage && (
|
||||
<meta name="twitter:image:alt" content={`Image for ${title}`} />
|
||||
)}
|
||||
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
|
||||
</Head>
|
||||
<main className="col col-md-8 p-0">
|
||||
<DocContent />
|
||||
<DocPaginator metadata={metadata} />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocItem;
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {ReactNode} from 'react';
|
||||
import renderRoutes from '@docusaurus/renderRoutes';
|
||||
import NotFound from '@theme/NotFound';
|
||||
import MDXComponents from '@theme/MDXComponents';
|
||||
import Layout from '@theme/Layout';
|
||||
import {MDXProvider} from '@mdx-js/react';
|
||||
import {matchPath} from '@docusaurus/router';
|
||||
import type {Props} from '@theme/DocPage';
|
||||
import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
|
||||
|
||||
type DocPageContentProps = {
|
||||
readonly versionMetadata: PropVersionMetadata;
|
||||
readonly children: ReactNode;
|
||||
};
|
||||
|
||||
function DocPageContent({
|
||||
versionMetadata: _versionMetadata,
|
||||
children,
|
||||
}: DocPageContentProps): JSX.Element {
|
||||
return (
|
||||
<Layout title="Doc page" description="My Doc page">
|
||||
<div className="d-flex vh-100">
|
||||
<main className="w-100 align-items-center overflow-auto p-5">
|
||||
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function DocPage(props: Props): JSX.Element {
|
||||
const {
|
||||
route: {routes: docRoutes},
|
||||
versionMetadata,
|
||||
location,
|
||||
} = props;
|
||||
const currentDocRoute = docRoutes.find((docRoute) =>
|
||||
matchPath(location.pathname, docRoute),
|
||||
);
|
||||
if (!currentDocRoute) {
|
||||
return <NotFound {...props} />;
|
||||
}
|
||||
return (
|
||||
<DocPageContent versionMetadata={versionMetadata}>
|
||||
{renderRoutes(docRoutes)}
|
||||
</DocPageContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocPage;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {Props} from '@theme/DocPaginator';
|
||||
|
||||
function DocPaginator(props: Props): JSX.Element {
|
||||
const {previous, next} = props.metadata;
|
||||
|
||||
return (
|
||||
<nav aria-label="Doc list page navigation" className="my-5 p-0">
|
||||
<ul className="pagination justify-content-between">
|
||||
<li className="page-item mr-2">
|
||||
{previous && (
|
||||
<Link className="page-link" to={previous.permalink}>
|
||||
« {previous.title}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
<li className="page-item ml-2">
|
||||
{next && (
|
||||
<Link className="page-link" to={next.permalink}>
|
||||
{next.title} »
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocPaginator;
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {useState, useCallback} from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import {NavItem, Nav, Button} from 'reactstrap';
|
||||
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
|
||||
import classNames from 'classnames';
|
||||
import {Props} from '@theme/DocSidebar';
|
||||
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
type DocSidebarItemProps = {
|
||||
item: PropSidebarItem;
|
||||
onItemClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
|
||||
};
|
||||
|
||||
const DocSidebarItem = ({
|
||||
item,
|
||||
onItemClick,
|
||||
}: DocSidebarItemProps): JSX.Element => {
|
||||
if (item.type === 'category') {
|
||||
return item.items.length > 0 ? (
|
||||
<div>
|
||||
<h4 className="ml-2">{item.label}</h4>
|
||||
{item.items.map((childItem) => (
|
||||
<DocSidebarItem
|
||||
key={childItem.label}
|
||||
item={childItem}
|
||||
onItemClick={onItemClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
} else if (item.type === 'link') {
|
||||
return (
|
||||
<NavItem>
|
||||
<Link
|
||||
key={item.label}
|
||||
className="sidebar-item m-4 text-white"
|
||||
to={item.href}
|
||||
{...(isInternalUrl(item.href)
|
||||
? {
|
||||
isNavLink: true,
|
||||
activeClassName: 'active',
|
||||
exact: true,
|
||||
onClick: onItemClick,
|
||||
}
|
||||
: {
|
||||
target: '_blank',
|
||||
rel: 'noreferrer noopener',
|
||||
})}>
|
||||
{item.label}
|
||||
</Link>
|
||||
</NavItem>
|
||||
);
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
|
||||
const DocSidebar = ({sidebar}: Props): JSX.Element => {
|
||||
const [sidebarShown, setSidebarShown] = useState(false);
|
||||
const handleSidebarToggle = useCallback(() => {
|
||||
setSidebarShown(!sidebarShown);
|
||||
}, [sidebarShown, setSidebarShown]);
|
||||
|
||||
useLockBodyScroll(sidebarShown);
|
||||
|
||||
return (
|
||||
<div className={classNames('bg-info', styles.sidebar)}>
|
||||
<div
|
||||
className={classNames('text-white', {
|
||||
[styles.isOpen]: sidebarShown,
|
||||
})}>
|
||||
<div className="d-flex w-100 justify-content-end mr-5">
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={handleSidebarToggle}
|
||||
className={classNames('mr-2', styles.sidebarFAB)}>
|
||||
<svg
|
||||
aria-label="Menu"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={24}
|
||||
width={24}
|
||||
viewBox="0 0 32 32"
|
||||
role="img"
|
||||
focusable="false">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classNames(styles.sideMenu)}>
|
||||
<Nav vertical className="list-unstyled p-3 mr-auto">
|
||||
{sidebar.map((item) => (
|
||||
<DocSidebarItem
|
||||
key={item.label}
|
||||
item={item}
|
||||
onItemClick={(e) => {
|
||||
e.currentTarget.blur();
|
||||
setSidebarShown(false);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebar;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
@media only screen and (min-width: 997px) {
|
||||
.sidebar {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
transition: all 0.5s;
|
||||
min-height: 100vh;
|
||||
margin-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.isOpen {
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.sidebar ul p {
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
.sidebarFAB {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.isOpen .sideMenu{
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: inherit;
|
||||
background-color: #17a2b8;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s, height 0s;
|
||||
}
|
||||
|
||||
.sideMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebarFAB {
|
||||
display: inline-flex;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
right: 1rem;
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogTagsListPage';
|
||||
|
||||
function DocTagsListPage(props: Props): JSX.Element {
|
||||
const {tags} = props;
|
||||
const renderAllTags = () => (
|
||||
<>
|
||||
{Object.keys(tags).map((tag) => (
|
||||
<Link
|
||||
href={tags[tag].permalink}
|
||||
key={tag}
|
||||
className="btn btn-primary list-inline-item my-2">
|
||||
{tags[tag].name}{' '}
|
||||
<span className="badge badge-light">{tags[tag].count}</span>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout title="Tags" description="Blog Tags">
|
||||
<div className="container my-3 justify-content-center">
|
||||
<h1 className="text-primary">Tags</h1>
|
||||
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocTagsListPage;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
function FooterLink({
|
||||
to,
|
||||
href,
|
||||
label,
|
||||
...props
|
||||
}: {
|
||||
to?: string;
|
||||
href?: string;
|
||||
label?: string;
|
||||
}) {
|
||||
const toUrl = useBaseUrl(to);
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...(href
|
||||
? {
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
href,
|
||||
}
|
||||
: {
|
||||
to: toUrl,
|
||||
})}
|
||||
{...props}>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Footer(): JSX.Element {
|
||||
const {footer} = useThemeConfig();
|
||||
|
||||
const {links = []} = footer || {};
|
||||
|
||||
return (
|
||||
<footer className="container-fluid p-0 align-self-end">
|
||||
<div className="row bg-light no-gutters justify-content-center">
|
||||
{links && links.length > 0 && (
|
||||
<>
|
||||
{links.map((linkItem, i) => (
|
||||
<div className="col col-xs-1 col-xl-1 mx-4 my-4" key={i}>
|
||||
{linkItem.title != null && <h5>{linkItem.title}</h5>}
|
||||
<ul className="list-unstyled">
|
||||
{linkItem.items.map((item, key) =>
|
||||
item.html ? (
|
||||
<li
|
||||
key={key}
|
||||
className="mb-2"
|
||||
// Developer provided the HTML, so assume it's safe.
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.html,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<li className="mb-1" key={item.href || item.to}>
|
||||
<FooterLink {...item} />
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Head from '@docusaurus/Head';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import Navbar from '@theme/Navbar';
|
||||
import Footer from '@theme/Footer';
|
||||
import type {Props} from '@theme/Layout';
|
||||
|
||||
function Layout(props: Props): JSX.Element {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const {favicon, title: siteTitle, url: siteUrl} = siteConfig;
|
||||
const {children, title, noFooter, description, image, keywords, permalink} =
|
||||
props;
|
||||
const {image: defaultImage, metadatas} = useThemeConfig();
|
||||
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
|
||||
|
||||
const metaImage = image || defaultImage;
|
||||
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
|
||||
if (!isInternalUrl(metaImage)) {
|
||||
metaImageUrl = metaImage as string;
|
||||
}
|
||||
const faviconUrl = useBaseUrl(favicon);
|
||||
|
||||
return (
|
||||
<div className="container-fluid vh-100 vw-100 row m-0 p-0">
|
||||
<Head>
|
||||
{/* TODO: Do not assume that it is in english language */}
|
||||
<html lang="en" />
|
||||
|
||||
{metaTitle && <title>{metaTitle}</title>}
|
||||
{metaTitle && <meta property="og:title" content={metaTitle} />}
|
||||
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
|
||||
{description && <meta name="description" content={description} />}
|
||||
{description && (
|
||||
<meta property="og:description" content={description} />
|
||||
)}
|
||||
{keywords && keywords.length && (
|
||||
<meta name="keywords" content={keywords.join(',')} />
|
||||
)}
|
||||
{metaImage && <meta property="og:image" content={metaImageUrl} />}
|
||||
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
|
||||
{metaImage && (
|
||||
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
|
||||
)}
|
||||
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</Head>
|
||||
<Head
|
||||
// it's important to have an additional <Head> element here,
|
||||
// as it allows react-helmet to override values set in previous <Head>
|
||||
// ie we can override default metadatas such as "twitter:card"
|
||||
// In same Head, the same meta would appear twice instead of overriding
|
||||
// See react-helmet doc
|
||||
>
|
||||
{metadatas?.length > 0 &&
|
||||
metadatas.map((metadata, i) => (
|
||||
<meta key={`metadata_${i}`} {...metadata} />
|
||||
))}
|
||||
</Head>
|
||||
<Navbar />
|
||||
<div className="container-fluid px-0 d-inline-flex flex-row">
|
||||
{children}
|
||||
</div>
|
||||
{!noFooter && <Footer />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {ReactNode} from 'react';
|
||||
import CodeBlock, {Props} from '@theme/CodeBlock';
|
||||
import {Table} from 'reactstrap';
|
||||
|
||||
const Heading = (tag: string): ReactNode => {
|
||||
return function (props) {
|
||||
return React.createElement(tag, {className: `${tag} my-3`, ...props});
|
||||
};
|
||||
};
|
||||
|
||||
export default {
|
||||
h1: Heading('h1'),
|
||||
h2: Heading('h2'),
|
||||
h3: Heading('h3'),
|
||||
h4: Heading('h4'),
|
||||
h5: Heading('h5'),
|
||||
h6: Heading('h6'),
|
||||
code: (props: Props): JSX.Element => {
|
||||
const {children} = props;
|
||||
if (typeof children === 'string') {
|
||||
return <CodeBlock {...props} />;
|
||||
}
|
||||
return children;
|
||||
},
|
||||
table: Table,
|
||||
blockquote: (props: {children: ReactNode}): JSX.Element => (
|
||||
<blockquote className="blockquote-footer">{props.children}</blockquote>
|
||||
),
|
||||
p: (props: {children: ReactNode}): JSX.Element => (
|
||||
<div className="font-weight-light">{props.children}</div>
|
||||
),
|
||||
};
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import {MDXProvider} from '@mdx-js/react';
|
||||
import MDXComponents from '@theme/MDXComponents';
|
||||
import type {Props} from '@theme/MDXPage';
|
||||
|
||||
function MDXPage(props: Props): JSX.Element {
|
||||
const {content: MDXPageContent} = props;
|
||||
const {frontMatter, metadata} = MDXPageContent;
|
||||
const {title, description} = frontMatter;
|
||||
const {permalink} = metadata;
|
||||
|
||||
return (
|
||||
<Layout title={title} description={description} permalink={permalink}>
|
||||
<main>
|
||||
<div className="container margin-vert--lg padding-vert--lg">
|
||||
<MDXProvider components={MDXComponents}>
|
||||
<MDXPageContent />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default MDXPage;
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {useState, useCallback} from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import useLogo from '@theme/hooks/useLogo';
|
||||
import {
|
||||
Collapse,
|
||||
Navbar as NavbarBase,
|
||||
NavbarToggler,
|
||||
Nav,
|
||||
NavItem as NavItemBase,
|
||||
} from 'reactstrap';
|
||||
|
||||
interface NavItemProps {
|
||||
activeBasePath?: string;
|
||||
activeBaseRegex?: RegExp;
|
||||
href?: string;
|
||||
label?: string;
|
||||
to?: string;
|
||||
activeClassName?: string;
|
||||
prependBaseUrlToHref?: boolean;
|
||||
}
|
||||
|
||||
function NavItem({
|
||||
activeBasePath,
|
||||
activeBaseRegex,
|
||||
href,
|
||||
label,
|
||||
to,
|
||||
activeClassName = 'nav-link text-info',
|
||||
prependBaseUrlToHref,
|
||||
...props
|
||||
}: NavItemProps) {
|
||||
const toUrl = useBaseUrl(to);
|
||||
const activeBaseUrl = useBaseUrl(activeBasePath);
|
||||
const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
|
||||
|
||||
return (
|
||||
<NavItemBase>
|
||||
<Link
|
||||
className="nav-link"
|
||||
{...(href
|
||||
? {
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
href: prependBaseUrlToHref ? normalizedHref : href,
|
||||
}
|
||||
: {
|
||||
isNavLink: true,
|
||||
activeClassName,
|
||||
to: toUrl,
|
||||
...(activeBasePath || activeBaseRegex
|
||||
? {
|
||||
isActive: (_match, location) =>
|
||||
activeBaseRegex
|
||||
? new RegExp(activeBaseRegex).test(location.pathname)
|
||||
: location.pathname.startsWith(activeBaseUrl),
|
||||
}
|
||||
: null),
|
||||
})}
|
||||
{...props}>
|
||||
{label}
|
||||
</Link>
|
||||
</NavItemBase>
|
||||
);
|
||||
}
|
||||
|
||||
function Navbar(): JSX.Element {
|
||||
const {navbar: {title = '', items: links = []} = {}} = useThemeConfig();
|
||||
|
||||
const [navbarShown, setNavbarShown] = useState(false);
|
||||
const handleNavbarToggle = useCallback(() => {
|
||||
setNavbarShown(!navbarShown);
|
||||
}, [navbarShown, setNavbarShown]);
|
||||
|
||||
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
|
||||
|
||||
return (
|
||||
<NavbarBase
|
||||
color="light"
|
||||
light
|
||||
expand="md"
|
||||
className="container-fluid mb-auto">
|
||||
<Link to={logoLink} {...logoLinkProps}>
|
||||
{logoImageUrl != null && (
|
||||
<img
|
||||
width="50"
|
||||
height="50"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
src={logoImageUrl}
|
||||
alt={logoAlt}
|
||||
/>
|
||||
)}
|
||||
{title != null && <span className="ml-2">{title}</span>}
|
||||
</Link>
|
||||
<NavbarToggler onClick={handleNavbarToggle} />
|
||||
<Collapse isOpen={navbarShown} navbar className="justify-content-between">
|
||||
<Nav navbar>
|
||||
{links != null &&
|
||||
links.length !== 0 &&
|
||||
links
|
||||
.filter((linkItem) => linkItem.position === 'left')
|
||||
.map((linkItem, key) => <NavItem {...linkItem} key={key} />)}
|
||||
</Nav>
|
||||
|
||||
<Nav navbar>
|
||||
{links != null &&
|
||||
links.length !== 0 &&
|
||||
links
|
||||
.filter((linkItem) => linkItem.position === 'right')
|
||||
.map((linkItem, key) => <NavItem {...linkItem} key={key} />)}
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</NavbarBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
function NotFound(): JSX.Element {
|
||||
return (
|
||||
<Layout title="Page Not Found">
|
||||
<div className="container my-xl-3">
|
||||
<div className="row">
|
||||
<div className="col col-6 offset-3">
|
||||
<h1>Page Not Found</h1>
|
||||
<p>We could not find what you were looking for.</p>
|
||||
<p>
|
||||
Please contact the owner of the site that linked you to the
|
||||
original URL and let them know their link is broken.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotFound;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
function TOCInline(_props: Record<string, unknown>): JSX.Element {
|
||||
return <div>TODO bootstrap toc</div>;
|
||||
}
|
||||
|
||||
export default TOCInline;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import type {Props} from '@theme/TabItem';
|
||||
|
||||
function TabItem(props: Props): JSX.Element {
|
||||
return <div>{props.children}</div>;
|
||||
}
|
||||
|
||||
export default TabItem;
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {useState, ReactElement, Children, useEffect} from 'react';
|
||||
import type {Props} from '@theme/Tabs';
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const keys = {
|
||||
left: 37,
|
||||
right: 39,
|
||||
tab: 9,
|
||||
};
|
||||
|
||||
// TODO quick fix to make bootstrap theme work
|
||||
function useUserPreferencesContext() {
|
||||
const [state, setState] = useState({});
|
||||
|
||||
return {
|
||||
tabGroupChoices: state,
|
||||
setTabGroupChoices: (id, value) => {
|
||||
setState((s) => ({...s, [id]: value}));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function Tabs(props: Props): JSX.Element {
|
||||
const {block, children, defaultValue, values, groupId} = props;
|
||||
|
||||
const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState(defaultValue);
|
||||
const [keyboardPress, setKeyboardPress] = useState(false);
|
||||
|
||||
if (groupId != null) {
|
||||
const relevantTabGroupChoice = tabGroupChoices[groupId];
|
||||
if (
|
||||
relevantTabGroupChoice != null &&
|
||||
relevantTabGroupChoice !== selectedValue &&
|
||||
values.some((value) => value.value === relevantTabGroupChoice)
|
||||
) {
|
||||
setSelectedValue(relevantTabGroupChoice);
|
||||
}
|
||||
}
|
||||
|
||||
const changeSelectedValue = (newValue) => {
|
||||
setSelectedValue(newValue);
|
||||
if (groupId != null) {
|
||||
setTabGroupChoices(groupId, newValue);
|
||||
}
|
||||
};
|
||||
|
||||
const tabRefs: (HTMLLIElement | null)[] = [];
|
||||
|
||||
const focusNextTab = (tabs, target) => {
|
||||
const next = tabs.indexOf(target) + 1;
|
||||
|
||||
if (!tabs[next]) {
|
||||
tabs[0].focus();
|
||||
} else {
|
||||
tabs[next].focus();
|
||||
}
|
||||
};
|
||||
|
||||
const focusPreviousTab = (tabs, target) => {
|
||||
const prev = tabs.indexOf(target) - 1;
|
||||
|
||||
if (!tabs[prev]) {
|
||||
tabs[tabs.length - 1].focus();
|
||||
} else {
|
||||
tabs[prev].focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeydown = (tabs, target, event) => {
|
||||
switch (event.keyCode) {
|
||||
case keys.right:
|
||||
focusNextTab(tabs, target);
|
||||
break;
|
||||
case keys.left:
|
||||
focusPreviousTab(tabs, target);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyboardEvent = (event) => {
|
||||
if (event.metaKey || event.altKey || event.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
setKeyboardPress(true);
|
||||
};
|
||||
|
||||
const handleMouseEvent = () => {
|
||||
setKeyboardPress(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyboardEvent);
|
||||
window.addEventListener('mousedown', handleMouseEvent);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyboardEvent);
|
||||
window.removeEventListener('mousedown', handleMouseEvent);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul
|
||||
role="tablist"
|
||||
aria-orientation="horizontal"
|
||||
className={clsx('tabs', {
|
||||
'tabs--block': block,
|
||||
})}>
|
||||
{values.map(({value, label}) => (
|
||||
<li
|
||||
role="tab"
|
||||
tabIndex={0}
|
||||
aria-selected={selectedValue === value}
|
||||
className={clsx('tabs__item', styles.tabItem, {
|
||||
'tabs__item--active': selectedValue === value,
|
||||
})}
|
||||
style={keyboardPress ? {} : {outline: 'none'}}
|
||||
key={value}
|
||||
ref={(tabControl) => tabRefs.push(tabControl)}
|
||||
onKeyDown={(event) => {
|
||||
handleKeydown(tabRefs, event.target, event);
|
||||
handleKeyboardEvent(event);
|
||||
}}
|
||||
onFocus={() => changeSelectedValue(value)}
|
||||
onClick={() => {
|
||||
changeSelectedValue(value);
|
||||
setKeyboardPress(false);
|
||||
}}
|
||||
onPointerDown={() => setKeyboardPress(false)}>
|
||||
{label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div role="tabpanel" className="margin-vert--md">
|
||||
{
|
||||
Children.toArray(children).filter(
|
||||
(child) =>
|
||||
(child as ReactElement<{value: string}>).props.value ===
|
||||
selectedValue,
|
||||
)[0]
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tabs;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.tabItem {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
|
||||
|
||||
const ThemeContext = React.createContext<ThemeContextProps | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
export default ThemeContext;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
import type {Props} from '@theme/ThemedImage';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const ThemedImage = (props: Props): JSX.Element => {
|
||||
const isBrowser = useIsBrowser();
|
||||
const {isDarkTheme} = useThemeContext();
|
||||
const {sources, className, alt = '', ...propsRest} = props;
|
||||
|
||||
type SourceName = keyof Props['sources'];
|
||||
|
||||
const clientThemes: SourceName[] = isDarkTheme ? ['dark'] : ['light'];
|
||||
|
||||
const renderedSourceNames: SourceName[] = isBrowser
|
||||
? clientThemes
|
||||
: // We need to render both images on the server to avoid flash
|
||||
// See https://github.com/facebook/docusaurus/pull/3730
|
||||
['light', 'dark'];
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderedSourceNames.map((sourceName) => {
|
||||
return (
|
||||
<img
|
||||
key={sourceName}
|
||||
src={sources[sourceName]}
|
||||
alt={alt}
|
||||
className={clsx(
|
||||
styles.themedImage,
|
||||
styles[`themedImage--${sourceName}`],
|
||||
className,
|
||||
)}
|
||||
{...propsRest}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemedImage;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.themedImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme='light'] .themedImage--light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .themedImage--dark {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {useEffect} from 'react';
|
||||
|
||||
function useLockBodyScroll(lock: boolean = true): void {
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = lock ? 'hidden' : 'visible';
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'visible';
|
||||
};
|
||||
}, [lock]);
|
||||
}
|
||||
|
||||
export default useLockBodyScroll;
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import type {LogoLinkProps, useLogoReturns} from '@theme/hooks/useLogo';
|
||||
|
||||
const useLogo = (): useLogoReturns => {
|
||||
const {
|
||||
navbar: {logo},
|
||||
} = useThemeConfig();
|
||||
const logoLink = useBaseUrl(logo?.href || '/');
|
||||
let logoLinkProps: LogoLinkProps = {};
|
||||
|
||||
if (logo?.target) {
|
||||
logoLinkProps = {target: logo.target};
|
||||
} else if (!isInternalUrl(logoLink)) {
|
||||
logoLinkProps = {
|
||||
rel: 'noopener noreferrer',
|
||||
target: '_blank',
|
||||
};
|
||||
}
|
||||
const logoImageUrl = useBaseUrl(logo?.src);
|
||||
|
||||
return {
|
||||
logoLink,
|
||||
logoLinkProps,
|
||||
logoImageUrl,
|
||||
logoAlt: logo?.alt ?? '',
|
||||
};
|
||||
};
|
||||
|
||||
export default useLogo;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import defaultTheme from 'prism-react-renderer/themes/palenight';
|
||||
import type {PrismTheme} from 'prism-react-renderer';
|
||||
|
||||
const usePrismTheme = (): PrismTheme => {
|
||||
return defaultTheme;
|
||||
};
|
||||
|
||||
export default usePrismTheme;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {useContext} from 'react';
|
||||
|
||||
import ThemeContext from '@theme/ThemeContext';
|
||||
import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
|
||||
|
||||
// TODO: Un-stub the theme context (#3730)
|
||||
function useThemeContext(): ThemeContextProps {
|
||||
const context = useContext<ThemeContextProps | undefined>(ThemeContext);
|
||||
return context == null ? {isDarkTheme: false} : context;
|
||||
}
|
||||
|
||||
export default useThemeContext;
|
||||
163
packages/docusaurus-theme-bootstrap/src/types.d.ts
vendored
163
packages/docusaurus-theme-bootstrap/src/types.d.ts
vendored
|
|
@ -1,163 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/// <reference types="@docusaurus/module-type-aliases" />
|
||||
/// <reference types="@docusaurus/plugin-content-blog" />
|
||||
/// <reference types="@docusaurus/plugin-content-docs" />
|
||||
/// <reference types="@docusaurus/plugin-content-pages" />
|
||||
|
||||
declare module '@theme/BlogListPaginator' {
|
||||
import type {Metadata} from '@theme/BlogListPage';
|
||||
|
||||
export type Props = {readonly metadata: Metadata};
|
||||
|
||||
const BlogListPaginator: (props: Props) => JSX.Element;
|
||||
export default BlogListPaginator;
|
||||
}
|
||||
|
||||
declare module '@theme/BlogPostItem' {
|
||||
import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
|
||||
|
||||
export type Props = {
|
||||
readonly frontMatter: FrontMatter;
|
||||
readonly metadata: Metadata;
|
||||
readonly truncated?: string | boolean;
|
||||
readonly isBlogPostPage?: boolean;
|
||||
readonly children: JSX.Element;
|
||||
};
|
||||
|
||||
const BlogPostItem: (props: Props) => JSX.Element;
|
||||
export default BlogPostItem;
|
||||
}
|
||||
|
||||
declare module '@theme/BlogPostPaginator' {
|
||||
type Item = {readonly title: string; readonly permalink: string};
|
||||
|
||||
export type Props = {readonly nextItem?: Item; readonly prevItem?: Item};
|
||||
|
||||
const BlogPostPaginator: (props: Props) => JSX.Element;
|
||||
export default BlogPostPaginator;
|
||||
}
|
||||
|
||||
declare module '@theme/CodeBlock' {
|
||||
export type Props = {
|
||||
readonly children: string;
|
||||
readonly className: string;
|
||||
};
|
||||
|
||||
const CodeBlock: (props: Props) => JSX.Element;
|
||||
export default CodeBlock;
|
||||
}
|
||||
|
||||
declare module '@theme/DocPaginator' {
|
||||
type PageInfo = {readonly permalink: string; readonly title: string};
|
||||
|
||||
export type Props = {
|
||||
readonly metadata: {readonly previous?: PageInfo; readonly next?: PageInfo};
|
||||
};
|
||||
|
||||
const DocPaginator: (props: Props) => JSX.Element;
|
||||
export default DocPaginator;
|
||||
}
|
||||
|
||||
declare module '@theme/DocSidebar' {
|
||||
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
|
||||
|
||||
export type Props = {
|
||||
readonly sidebar: readonly PropSidebarItem[];
|
||||
};
|
||||
|
||||
const DocSidebar: (props: Props) => JSX.Element;
|
||||
export default DocSidebar;
|
||||
}
|
||||
|
||||
declare module '@theme/Tabs' {
|
||||
import type {ReactElement} from 'react';
|
||||
|
||||
export type Props = {
|
||||
readonly block?: boolean;
|
||||
readonly children: readonly ReactElement<{value: string}>[];
|
||||
readonly defaultValue?: string;
|
||||
readonly values: readonly {value: string; label: string}[];
|
||||
readonly groupId?: string;
|
||||
};
|
||||
|
||||
const Tabs: (props: Props) => JSX.Element;
|
||||
export default Tabs;
|
||||
}
|
||||
|
||||
declare module '@theme/ThemedImage' {
|
||||
import type {ComponentProps} from 'react';
|
||||
|
||||
export type Props = {
|
||||
readonly sources: {
|
||||
readonly light: string;
|
||||
readonly dark: string;
|
||||
};
|
||||
} & Omit<ComponentProps<'img'>, 'src'>;
|
||||
|
||||
const ThemedImage: (props: Props) => JSX.Element;
|
||||
export default ThemedImage;
|
||||
}
|
||||
|
||||
declare module '@theme/Footer' {
|
||||
const Footer: () => JSX.Element | null;
|
||||
export default Footer;
|
||||
}
|
||||
|
||||
declare module '@theme/Navbar' {
|
||||
const Navbar: () => JSX.Element;
|
||||
export default Navbar;
|
||||
}
|
||||
|
||||
declare module '@theme/TabItem' {
|
||||
import type {ReactNode} from 'react';
|
||||
|
||||
export type Props = {readonly children: ReactNode};
|
||||
|
||||
const TabItem: (props: Props) => JSX.Element;
|
||||
export default TabItem;
|
||||
}
|
||||
|
||||
declare module '@theme/hooks/useLogo' {
|
||||
export type LogoLinkProps = {target?: string; rel?: string};
|
||||
|
||||
export type useLogoReturns = {
|
||||
readonly logoLink: string;
|
||||
readonly logoLinkProps: LogoLinkProps;
|
||||
readonly logoImageUrl: string;
|
||||
readonly logoAlt: string;
|
||||
};
|
||||
|
||||
const useLogo: () => useLogoReturns;
|
||||
export default useLogo;
|
||||
}
|
||||
|
||||
declare module '@theme/hooks/useThemeContext' {
|
||||
export type ThemeContextProps = {
|
||||
isDarkTheme: boolean;
|
||||
};
|
||||
|
||||
export default function useThemeContext(): ThemeContextProps;
|
||||
}
|
||||
|
||||
declare module '@theme/Layout' {
|
||||
import type {ReactNode} from 'react';
|
||||
|
||||
export type Props = {
|
||||
children: ReactNode;
|
||||
title?: string;
|
||||
noFooter?: boolean;
|
||||
description?: string;
|
||||
image?: string;
|
||||
keywords?: string[];
|
||||
permalink?: string;
|
||||
};
|
||||
|
||||
const Layout: (props: Props) => JSX.Element;
|
||||
export default Layout;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM"],
|
||||
"module": "esnext",
|
||||
"noEmit": true,
|
||||
"noImplicitAny": false,
|
||||
"jsx": "react",
|
||||
"baseUrl": "src"
|
||||
},
|
||||
"include": ["src/"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue