mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-28 08:27:03 +02:00
feat(v2): bootstrap MDX Components (#2709)
* feat(v2): Bootstrap MDX Componnets * feat(v2): Add theme
This commit is contained in:
parent
00a8e9e365
commit
a42b665089
4 changed files with 80 additions and 3 deletions
|
@ -9,7 +9,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.4.1",
|
"bootstrap": "^4.4.1",
|
||||||
"reactstrap": "^8.4.1"
|
"prism-react-renderer": "^1.1.0",
|
||||||
|
"reactstrap": "^8.4.1",
|
||||||
|
"@mdx-js/react": "^1.5.8"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@docusaurus/core": "^2.0.0",
|
"@docusaurus/core": "^2.0.0",
|
||||||
|
|
|
@ -6,6 +6,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import {MDXProvider} from '@mdx-js/react';
|
||||||
|
import MDXComponents from '@theme/MDXComponents';
|
||||||
import Link from '@docusaurus/Link';
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
const MONTHS = [
|
const MONTHS = [
|
||||||
|
@ -49,7 +51,7 @@ function BlogPostItem(props) {
|
||||||
const day = parseInt(match[2], 10);
|
const day = parseInt(match[2], 10);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<article className="card h-100 shadow">
|
<article className="card shadow">
|
||||||
<div className="row no-gutters rows-col-2 m-3">
|
<div className="row no-gutters rows-col-2 m-3">
|
||||||
<div className="col-xs mr-3">
|
<div className="col-xs mr-3">
|
||||||
{authorImageURL && (
|
{authorImageURL && (
|
||||||
|
@ -100,7 +102,9 @@ function BlogPostItem(props) {
|
||||||
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h3 className="card-title text-primary mr-2">{title}</h3>
|
<h3 className="card-title text-primary mr-2">{title}</h3>
|
||||||
<div className="lead">{children}</div>
|
<section>
|
||||||
|
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer className="row no-gutters m-3 justify-content-between">
|
<footer className="row no-gutters m-3 justify-content-between">
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**
|
||||||
|
* 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} from 'prism-react-renderer';
|
||||||
|
import theme from 'prism-react-renderer/themes/nightOwl';
|
||||||
|
|
||||||
|
export default ({children, className}) => {
|
||||||
|
const language = className && className.replace(/language-/, '');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Highlight
|
||||||
|
{...defaultProps}
|
||||||
|
theme={theme}
|
||||||
|
code={children}
|
||||||
|
language={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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,37 @@
|
||||||
|
/**
|
||||||
|
* 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 CodeBlock from '@theme/CodeBlock';
|
||||||
|
import {Table} from 'reactstrap';
|
||||||
|
|
||||||
|
const Heading = (tag) => {
|
||||||
|
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) => {
|
||||||
|
const {children} = props;
|
||||||
|
if (typeof children === 'string') {
|
||||||
|
return <CodeBlock {...props} />;
|
||||||
|
}
|
||||||
|
return children;
|
||||||
|
},
|
||||||
|
table: Table,
|
||||||
|
blockquote: (props) => (
|
||||||
|
<blockquote className="blockquote-footer">{props.children}</blockquote>
|
||||||
|
),
|
||||||
|
p: (props) => <div className="font-weight-light">{props.children}</div>,
|
||||||
|
};
|
Loading…
Add table
Add a link
Reference in a new issue