mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-14 17:47:40 +02:00
feat(v2): support non-css modules when loading styles (#1069)
This commit is contained in:
Yangshun Tay
GitHub
parent
13b23edd12
commit
c7336462ec
24 changed files with 439 additions and 430 deletions
|
|
@ -12,7 +12,7 @@ import Helmet from 'react-helmet';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
import Layout from '@theme/Layout'; // eslint-disable-line
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
export default class BlogPost extends React.Component {
|
export default class BlogPost extends React.Component {
|
||||||
renderPostHeader() {
|
renderPostHeader() {
|
||||||
const {metadata, siteConfig} = this.props;
|
const {metadata, siteConfig} = this.props;
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ import Footer from '@theme/Footer'; // eslint-disable-line
|
||||||
import Navbar from '@theme/Navbar'; // eslint-disable-line
|
import Navbar from '@theme/Navbar'; // eslint-disable-line
|
||||||
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
|
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
class Doc extends React.Component {
|
class Doc extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -36,7 +36,6 @@ class Doc extends React.Component {
|
||||||
{language && <html lang={language} />}
|
{language && <html lang={language} />}
|
||||||
{language && <meta name="docsearch:language" content={language} />}
|
{language && <meta name="docsearch:language" content={language} />}
|
||||||
{version && <meta name="docsearch:version" content={version} />}
|
{version && <meta name="docsearch:version" content={version} />}
|
||||||
<link rel="stylesheet" type="text/css" href="/css/main.css" />
|
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<Navbar docsMetadatas={docsMetadatas} />
|
<Navbar docsMetadatas={docsMetadatas} />
|
||||||
<Sidebar
|
<Sidebar
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
export default class DocsPaginator extends React.Component {
|
export default class DocsPaginator extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
function Footer(props) {
|
function Footer(props) {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
|
||||||
|
|
||||||
import Footer from '@theme/Footer'; // eslint-disable-line
|
import Footer from '@theme/Footer'; // eslint-disable-line
|
||||||
import Navbar from '@theme/Navbar'; // eslint-disable-line
|
import Navbar from '@theme/Navbar'; // eslint-disable-line
|
||||||
|
|
@ -24,9 +23,6 @@ export default class Layout extends React.Component {
|
||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Helmet>
|
|
||||||
<link rel="stylesheet" type="text/css" href="/css/main.css" />
|
|
||||||
</Helmet>
|
|
||||||
<Navbar docsMetadatas={docsMetadatas} />
|
<Navbar docsMetadatas={docsMetadatas} />
|
||||||
{children}
|
{children}
|
||||||
<Footer
|
<Footer
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,392 @@
|
||||||
* LICENSE file in the root directory of this source tree.
|
* LICENSE file in the root directory of this source tree.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:global(body) {
|
/* Reset */
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
span,
|
||||||
|
applet,
|
||||||
|
object,
|
||||||
|
iframe,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
acronym,
|
||||||
|
address,
|
||||||
|
big,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
del,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
img,
|
||||||
|
ins,
|
||||||
|
kbd,
|
||||||
|
q,
|
||||||
|
s,
|
||||||
|
samp,
|
||||||
|
small,
|
||||||
|
strike,
|
||||||
|
strong,
|
||||||
|
sub,
|
||||||
|
sup,
|
||||||
|
tt,
|
||||||
|
var,
|
||||||
|
b,
|
||||||
|
u,
|
||||||
|
i,
|
||||||
|
center,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
fieldset,
|
||||||
|
form,
|
||||||
|
label,
|
||||||
|
legend,
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
canvas,
|
||||||
|
details,
|
||||||
|
embed,
|
||||||
|
figure,
|
||||||
|
figcaption,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
output,
|
||||||
|
ruby,
|
||||||
|
section,
|
||||||
|
summary,
|
||||||
|
time,
|
||||||
|
mark,
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base scaffolding taken from Markswatch theme */
|
||||||
|
body {
|
||||||
|
color: #24292e;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
|
||||||
|
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #25c2a0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #25c2a0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]) {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 13.6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul,
|
||||||
|
ul ol,
|
||||||
|
ol ol,
|
||||||
|
ol ul {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul ol,
|
||||||
|
ul ol ol,
|
||||||
|
ol ul ol,
|
||||||
|
ol ol ol {
|
||||||
|
list-style-type: lower-alpha;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
word-wrap: break-all;
|
||||||
|
}
|
||||||
|
li > p {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
li + li {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
background-color: #fff;
|
||||||
|
border-style: none;
|
||||||
|
box-sizing: content-box;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[align='right'] {
|
||||||
|
padding-left: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[align='left'] {
|
||||||
|
padding-right: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
margin-top: 0;
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
table tr {
|
||||||
|
background-color: transparent;
|
||||||
|
border-top: 1px solid #dfe2e5;
|
||||||
|
}
|
||||||
|
table tr:nth-child(2n) {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
}
|
||||||
|
table th,
|
||||||
|
table td {
|
||||||
|
border: 1px solid #dfe2e5;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
table th {
|
||||||
|
background-color: inherit;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
table td {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
color: #6a737d;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > :first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: rgba(27, 31, 35, 0.05);
|
||||||
|
border-radius: 3px;
|
||||||
|
color: inherit;
|
||||||
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||||
|
'Courier New', monospace;
|
||||||
|
font-size: 85%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 3.2px 6.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
display: inline;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
max-width: auto;
|
||||||
|
overflow: visible;
|
||||||
|
padding: 0;
|
||||||
|
white-space: pre;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background-color: #fafbfc;
|
||||||
|
border: solid 1px #d1d5da;
|
||||||
|
border-bottom-color: #c6cbd1;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||||
|
color: #444d56;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||||
|
'Courier New', monospace;
|
||||||
|
font-size: 68.75%;
|
||||||
|
line-height: 10px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-color: #dfe2e5;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin: 1.5em 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
hr:before {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
hr:after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GitHub Markdown theme styles */
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
color: #6a737d;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
background-color: rgb(37, 194, 160, 0.1);
|
||||||
|
border-left: 0.5em solid #25c2a0;
|
||||||
|
color: #000;
|
||||||
|
padding: 1em 2em 1em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background-color: #e1e4e8;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid #dfe2e5;
|
||||||
|
border-bottom-color: #eee;
|
||||||
|
height: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Docusaurus v2 styles */
|
||||||
|
h1 .hash-link,
|
||||||
|
h2 .hash-link,
|
||||||
|
h3 .hash-link,
|
||||||
|
h4 .hash-link,
|
||||||
|
h5 .hash-link,
|
||||||
|
h6 .hash-link {
|
||||||
|
display: none;
|
||||||
|
margin-left: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:hover .hash-link,
|
||||||
|
h2:hover .hash-link,
|
||||||
|
h3:hover .hash-link,
|
||||||
|
h4:hover .hash-link,
|
||||||
|
h5:hover .hash-link,
|
||||||
|
h6:hover .hash-link {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs.hljs {
|
||||||
|
/* Specificity hack */
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {NavLink} from 'react-router-dom';
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
function Navbar() {
|
function Navbar() {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
export default function SidebarCategory({
|
export default function SidebarCategory({
|
||||||
label,
|
label,
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import React from 'react';
|
||||||
import {NavLink} from 'react-router-dom';
|
import {NavLink} from 'react-router-dom';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
export default function SidebarLink({href, label}) {
|
export default function SidebarLink({href, label}) {
|
||||||
const isExternal = /^(https?:|\/\/)/.test(href);
|
const isExternal = /^(https?:|\/\/)/.test(href);
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import React from 'react';
|
||||||
|
|
||||||
import SidebarLink from './SidebarLink';
|
import SidebarLink from './SidebarLink';
|
||||||
import SidebarCategory from './SidebarCategory';
|
import SidebarCategory from './SidebarCategory';
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
function Sidebar(props) {
|
function Sidebar(props) {
|
||||||
const {metadata, docsSidebars, docsMetadatas} = props;
|
const {metadata, docsSidebars, docsMetadatas} = props;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,27 @@ const path = require('path');
|
||||||
|
|
||||||
const mdLoader = require.resolve('./loader/markdown');
|
const mdLoader = require.resolve('./loader/markdown');
|
||||||
|
|
||||||
|
const CSS_REGEX = /\.css$/;
|
||||||
|
const CSS_MODULE_REGEX = /\.module\.css$/;
|
||||||
|
|
||||||
|
// Utility method to add styling-related rule to Webpack config.
|
||||||
|
function applyStyle(styleRule, {cssOptions, isServer, isProd}) {
|
||||||
|
if (!isServer) {
|
||||||
|
if (isProd) {
|
||||||
|
styleRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
|
||||||
|
} else {
|
||||||
|
styleRule.use('style-loader').loader('style-loader');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styleRule
|
||||||
|
.use('css-loader')
|
||||||
|
.loader(isServer ? 'css-loader/locals' : 'css-loader')
|
||||||
|
.options(cssOptions);
|
||||||
|
|
||||||
|
return styleRule;
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = function createBaseConfig(props, isServer) {
|
module.exports = function createBaseConfig(props, isServer) {
|
||||||
const {
|
const {
|
||||||
siteConfig,
|
siteConfig,
|
||||||
|
|
@ -81,13 +102,10 @@ module.exports = function createBaseConfig(props, isServer) {
|
||||||
return /node_modules/.test(filepath);
|
return /node_modules/.test(filepath);
|
||||||
})
|
})
|
||||||
.end();
|
.end();
|
||||||
|
|
||||||
applyBabel(jsRule);
|
applyBabel(jsRule);
|
||||||
|
|
||||||
const mdRule = config.module.rule('markdown').test(/\.md$/);
|
const mdRule = config.module.rule('markdown').test(/\.md$/);
|
||||||
|
|
||||||
applyBabel(mdRule);
|
applyBabel(mdRule);
|
||||||
|
|
||||||
mdRule
|
mdRule
|
||||||
.use('markdown-loader')
|
.use('markdown-loader')
|
||||||
.loader(mdLoader)
|
.loader(mdLoader)
|
||||||
|
|
@ -99,25 +117,32 @@ module.exports = function createBaseConfig(props, isServer) {
|
||||||
sourceToMetadata,
|
sourceToMetadata,
|
||||||
});
|
});
|
||||||
|
|
||||||
const cssRule = config.module.rule('css').test(/\.css$/);
|
applyStyle(config.module.rule('css'), {
|
||||||
if (!isServer) {
|
cssOptions: {
|
||||||
if (isProd) {
|
importLoaders: 1,
|
||||||
cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
|
sourceMap: !isProd,
|
||||||
} else {
|
minimize: true,
|
||||||
cssRule.use('style-loader').loader('style-loader');
|
},
|
||||||
}
|
isProd,
|
||||||
}
|
isServer,
|
||||||
|
})
|
||||||
|
.test(CSS_REGEX)
|
||||||
|
.exclude.add(CSS_MODULE_REGEX)
|
||||||
|
.end();
|
||||||
|
|
||||||
cssRule
|
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
|
||||||
.use('css-loader')
|
// using the extension .module.css
|
||||||
.loader(isServer ? 'css-loader/locals' : 'css-loader')
|
applyStyle(config.module.rule('css-module'), {
|
||||||
.options({
|
cssOptions: {
|
||||||
modules: true,
|
modules: true,
|
||||||
importLoaders: 1,
|
importLoaders: 1,
|
||||||
localIdentName: `[local]_[hash:base64:8]`,
|
localIdentName: `[local]_[hash:base64:8]`,
|
||||||
sourceMap: !isProd,
|
sourceMap: !isProd,
|
||||||
minimize: true,
|
minimize: true,
|
||||||
});
|
},
|
||||||
|
isProd,
|
||||||
|
isServer,
|
||||||
|
}).test(CSS_MODULE_REGEX);
|
||||||
|
|
||||||
// mini-css-extract plugin
|
// mini-css-extract plugin
|
||||||
config.plugin('extract-css').use(CSSExtractPlugin, [
|
config.plugin('extract-css').use(CSSExtractPlugin, [
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Square from './square';
|
import Square from './square';
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
export default class Board extends React.Component {
|
export default class Board extends React.Component {
|
||||||
renderSquare(i) {
|
renderSquare(i) {
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Layout from '@theme/Layout';
|
import Layout from '@theme/Layout';
|
||||||
import Board from './board';
|
import Board from './board';
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
class Game extends React.Component {
|
class Game extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
export default props => {
|
export default props => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Helmet from 'react-helmet';
|
||||||
|
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
const FEATURES = [
|
const FEATURES = [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,396 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) 2017-present, Facebook, Inc.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Reset */
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
div,
|
|
||||||
span,
|
|
||||||
applet,
|
|
||||||
object,
|
|
||||||
iframe,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
p,
|
|
||||||
blockquote,
|
|
||||||
pre,
|
|
||||||
a,
|
|
||||||
abbr,
|
|
||||||
acronym,
|
|
||||||
address,
|
|
||||||
big,
|
|
||||||
cite,
|
|
||||||
code,
|
|
||||||
del,
|
|
||||||
dfn,
|
|
||||||
em,
|
|
||||||
img,
|
|
||||||
ins,
|
|
||||||
kbd,
|
|
||||||
q,
|
|
||||||
s,
|
|
||||||
samp,
|
|
||||||
small,
|
|
||||||
strike,
|
|
||||||
strong,
|
|
||||||
sub,
|
|
||||||
sup,
|
|
||||||
tt,
|
|
||||||
var,
|
|
||||||
b,
|
|
||||||
u,
|
|
||||||
i,
|
|
||||||
center,
|
|
||||||
dl,
|
|
||||||
dt,
|
|
||||||
dd,
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
li,
|
|
||||||
fieldset,
|
|
||||||
form,
|
|
||||||
label,
|
|
||||||
legend,
|
|
||||||
table,
|
|
||||||
caption,
|
|
||||||
tbody,
|
|
||||||
tfoot,
|
|
||||||
thead,
|
|
||||||
tr,
|
|
||||||
th,
|
|
||||||
td,
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
canvas,
|
|
||||||
details,
|
|
||||||
embed,
|
|
||||||
figure,
|
|
||||||
figcaption,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
menu,
|
|
||||||
nav,
|
|
||||||
output,
|
|
||||||
ruby,
|
|
||||||
section,
|
|
||||||
summary,
|
|
||||||
time,
|
|
||||||
mark,
|
|
||||||
audio,
|
|
||||||
video {
|
|
||||||
border: 0;
|
|
||||||
font: inherit;
|
|
||||||
font-size: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Base scaffolding taken from Markswatch theme */
|
|
||||||
body {
|
|
||||||
color: #24292e;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
|
|
||||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
-ms-text-size-adjust: 100%;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='checkbox'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #25c2a0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #25c2a0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not([href]) {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
color: inherit;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.25;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 13.6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol ol,
|
|
||||||
ul ol {
|
|
||||||
list-style-type: lower-roman;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul,
|
|
||||||
ul ol,
|
|
||||||
ol ol,
|
|
||||||
ol ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul ol,
|
|
||||||
ul ol ol,
|
|
||||||
ol ul ol,
|
|
||||||
ol ol ol {
|
|
||||||
list-style-type: lower-alpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
word-wrap: break-all;
|
|
||||||
}
|
|
||||||
li > p {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
li + li {
|
|
||||||
margin-top: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
background-color: #fff;
|
|
||||||
border-style: none;
|
|
||||||
box-sizing: content-box;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img[align='right'] {
|
|
||||||
padding-left: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
img[align='left'] {
|
|
||||||
padding-right: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
margin-top: 0;
|
|
||||||
overflow: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
table tr {
|
|
||||||
background-color: transparent;
|
|
||||||
border-top: 1px solid #dfe2e5;
|
|
||||||
}
|
|
||||||
table tr:nth-child(2n) {
|
|
||||||
background-color: #f6f8fa;
|
|
||||||
}
|
|
||||||
table th,
|
|
||||||
table td {
|
|
||||||
border: 1px solid #dfe2e5;
|
|
||||||
padding: 6px 13px;
|
|
||||||
}
|
|
||||||
table th {
|
|
||||||
background-color: inherit;
|
|
||||||
color: inherit;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
table td {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
color: #6a737d;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote > :first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote > :last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background-color: rgba(27, 31, 35, 0.05);
|
|
||||||
border-radius: 3px;
|
|
||||||
color: inherit;
|
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
|
||||||
'Courier New', monospace;
|
|
||||||
font-size: 85%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 3.2px 6.4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
display: inline;
|
|
||||||
font-size: 85%;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0;
|
|
||||||
max-width: auto;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
white-space: pre;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
background-color: #fafbfc;
|
|
||||||
border: solid 1px #d1d5da;
|
|
||||||
border-bottom-color: #c6cbd1;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
|
||||||
color: #444d56;
|
|
||||||
display: inline-block;
|
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
|
||||||
'Courier New', monospace;
|
|
||||||
font-size: 68.75%;
|
|
||||||
line-height: 10px;
|
|
||||||
padding: 3px 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-color: #dfe2e5;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
margin: 1.5em 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
hr:before {
|
|
||||||
content: '';
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
hr:after {
|
|
||||||
clear: both;
|
|
||||||
content: '';
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GitHub Markdown theme styles */
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
padding-bottom: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
color: #6a737d;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
background-color: rgb(37, 194, 160, 0.1);
|
|
||||||
border-left: 0.5em solid #25c2a0;
|
|
||||||
color: #000;
|
|
||||||
padding: 1em 2em 1em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
background-color: #e1e4e8;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #dfe2e5;
|
|
||||||
border-bottom-color: #eee;
|
|
||||||
height: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Docusaurus v2 styles */
|
|
||||||
h1 .hash-link,
|
|
||||||
h2 .hash-link,
|
|
||||||
h3 .hash-link,
|
|
||||||
h4 .hash-link,
|
|
||||||
h5 .hash-link,
|
|
||||||
h6 .hash-link {
|
|
||||||
display: none;
|
|
||||||
margin-left: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:hover .hash-link,
|
|
||||||
h2:hover .hash-link,
|
|
||||||
h3:hover .hash-link,
|
|
||||||
h4:hover .hash-link,
|
|
||||||
h5:hover .hash-link,
|
|
||||||
h6:hover .hash-link {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs.hljs {
|
|
||||||
/* Specificity hack */
|
|
||||||
padding: 1.25rem 1.5rem;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue