docs: migrate website to Gatsby v2 (#1623)
* website: initial conversion to gatsby v2 * fix unexpected history use warning * use commonjs only to fix gatsby error * fix gatsby import error with sidecar * remove unused postcss-colour-functions * remove unused prop * lowercase layout filename import to match actual file * chore(lint): format code
This commit is contained in:
parent
a1677b0e24
commit
f58db5fb08
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": ["react", "es2015", "stage-1"],
|
|
||||||
"plugins": ["add-module-exports"]
|
|
||||||
}
|
|
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"globals": {
|
|
||||||
"graphql": true
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,7 +1,6 @@
|
|||||||
import SmoothScroll from 'smooth-scroll';
|
|
||||||
|
|
||||||
// Make scroll behavior of internal links smooth
|
// Make scroll behavior of internal links smooth
|
||||||
exports.onClientEntry = () => {
|
exports.onClientEntry = () => {
|
||||||
|
const SmoothScroll = require('smooth-scroll');
|
||||||
new SmoothScroll('a[href*="#"]', {
|
new SmoothScroll('a[href*="#"]', {
|
||||||
offset() {
|
offset() {
|
||||||
return document.querySelector('#header').offsetHeight;
|
return document.querySelector('#header').offsetHeight;
|
||||||
|
@ -1,23 +1,5 @@
|
|||||||
const pkg = require('./package.json');
|
const pkg = require('./package.json');
|
||||||
|
|
||||||
const neatgrid = require('postcss-neat');
|
|
||||||
const nestedcss = require('postcss-nested');
|
|
||||||
const colorfunctions = require('postcss-colour-functions');
|
|
||||||
const hdBackgrounds = require('postcss-at2x');
|
|
||||||
const cssextend = require('postcss-simple-extend');
|
|
||||||
const cssvars = require('postcss-simple-vars-async');
|
|
||||||
|
|
||||||
const styleVariables = require('./src/theme');
|
|
||||||
|
|
||||||
const postCssPlugins = [
|
|
||||||
neatgrid(),
|
|
||||||
nestedcss(),
|
|
||||||
colorfunctions(),
|
|
||||||
hdBackgrounds(),
|
|
||||||
cssextend(),
|
|
||||||
cssvars({ variables: styleVariables }),
|
|
||||||
];
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
title: 'Netlify CMS | Open-Source Content Management System',
|
title: 'Netlify CMS | Open-Source Content Management System',
|
||||||
@ -71,14 +53,8 @@ module.exports = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
'gatsby-plugin-postcss',
|
||||||
resolve: 'gatsby-plugin-postcss-sass',
|
|
||||||
options: {
|
|
||||||
postCssPlugins,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'gatsby-plugin-react-helmet',
|
'gatsby-plugin-react-helmet',
|
||||||
'gatsby-plugin-react-next',
|
|
||||||
'gatsby-plugin-catch-links',
|
'gatsby-plugin-catch-links',
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-manifest`,
|
resolve: `gatsby-plugin-manifest`,
|
||||||
|
@ -15,32 +15,34 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.5",
|
"classnames": "^2.2.5",
|
||||||
"eslint": "^3.1.1",
|
"gatsby": "next",
|
||||||
"eslint-plugin-import": "^1.11.1",
|
"gatsby-plugin-catch-links": "next",
|
||||||
"gatsby": "^1.9.270",
|
"gatsby-plugin-manifest": "next",
|
||||||
"gatsby-plugin-catch-links": "^1.0.22",
|
"gatsby-plugin-postcss": "^1.0.0",
|
||||||
"gatsby-plugin-manifest": "^1.0.21",
|
"gatsby-plugin-react-helmet": "next",
|
||||||
"gatsby-plugin-postcss-sass": "^1.0.20",
|
"gatsby-remark-autolink-headers": "next",
|
||||||
"gatsby-plugin-react-helmet": "^2.0.11",
|
"gatsby-remark-prismjs": "next",
|
||||||
"gatsby-plugin-react-next": "^1.0.11",
|
"gatsby-source-filesystem": "next",
|
||||||
"gatsby-remark-autolink-headers": "^1.4.18",
|
"gatsby-transformer-json": "next",
|
||||||
"gatsby-remark-prismjs": "^2.0.2",
|
"gatsby-transformer-remark": "next",
|
||||||
"gatsby-source-filesystem": "^1.5.35",
|
"gatsby-transformer-yaml": "next",
|
||||||
"gatsby-transformer-json": "^1.0.17",
|
|
||||||
"gatsby-transformer-remark": "^1.7.42",
|
|
||||||
"gatsby-transformer-yaml": "^1.5.16",
|
|
||||||
"postcss-at2x": "^2.0.0",
|
"postcss-at2x": "^2.0.0",
|
||||||
"postcss-colour-functions": "^1.5.1",
|
|
||||||
"postcss-cssnext": "^2.7.0",
|
"postcss-cssnext": "^2.7.0",
|
||||||
"postcss-neat": "^2.5.2",
|
"postcss-neat": "^2.5.2",
|
||||||
"postcss-nested": "^1.0.0",
|
"postcss-nested": "^1.0.0",
|
||||||
"postcss-simple-extend": "^1.0.0",
|
"postcss-simple-extend": "^1.0.0",
|
||||||
"postcss-simple-vars-async": "^1.2.1",
|
"postcss-simple-vars-async": "^1.2.1",
|
||||||
"prismjs": "^1.14.0",
|
"prismjs": "^1.14.0",
|
||||||
|
"react": "^16.4.2",
|
||||||
|
"react-dom": "^16.4.2",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-markdown": "^3.3.2",
|
"react-markdown": "^3.3.2",
|
||||||
"react-sidecar": "^0.1.1",
|
"react-sidecar": "^0.1.1",
|
||||||
"smooth-scroll": "^14.2.0"
|
"smooth-scroll": "^14.2.0"
|
||||||
},
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"eslint": "^3.1.1",
|
||||||
|
"eslint-plugin-import": "^1.11.1"
|
||||||
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
|
19
website/postcss.config.js
Normal file
19
website/postcss.config.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const neatgrid = require('postcss-neat');
|
||||||
|
const nestedcss = require('postcss-nested');
|
||||||
|
// const colorfunctions = require('postcss-colour-functions');
|
||||||
|
const hdBackgrounds = require('postcss-at2x');
|
||||||
|
const cssextend = require('postcss-simple-extend');
|
||||||
|
const cssvars = require('postcss-simple-vars-async');
|
||||||
|
|
||||||
|
const styleVariables = require('./src/theme');
|
||||||
|
|
||||||
|
module.exports = () => ({
|
||||||
|
plugins: [
|
||||||
|
neatgrid(),
|
||||||
|
nestedcss(),
|
||||||
|
// colorfunctions(),
|
||||||
|
hdBackgrounds(),
|
||||||
|
cssextend(),
|
||||||
|
cssvars({ variables: styleVariables }),
|
||||||
|
],
|
||||||
|
});
|
@ -1,6 +1,7 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
import { Location } from '@reach/router';
|
||||||
|
|
||||||
import DocSearch from './docsearch';
|
import DocSearch from './docsearch';
|
||||||
|
|
||||||
@ -33,9 +34,11 @@ class Header extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { location } = this.props;
|
|
||||||
const { scrolled } = this.state;
|
const { scrolled } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Location>
|
||||||
|
{({ location }) => {
|
||||||
const isDocs = location.pathname.indexOf('docs') !== -1;
|
const isDocs = location.pathname.indexOf('docs') !== -1;
|
||||||
const isBlog = location.pathname.indexOf('blog') !== -1;
|
const isBlog = location.pathname.indexOf('blog') !== -1;
|
||||||
|
|
||||||
@ -84,6 +87,9 @@ class Header extends Component {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
}}
|
||||||
|
</Location>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
77
website/src/components/layout.js
Normal file
77
website/src/components/layout.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import React, { Fragment } from 'react';
|
||||||
|
import Helmet from 'react-helmet';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import { graphql, StaticQuery } from 'gatsby';
|
||||||
|
|
||||||
|
import Header from './header';
|
||||||
|
import Footer from './footer';
|
||||||
|
|
||||||
|
import '../css/imports/base.css';
|
||||||
|
import '../css/imports/utilities.css';
|
||||||
|
import '../css/imports/gitter.css';
|
||||||
|
|
||||||
|
const Layout = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<StaticQuery
|
||||||
|
query={graphql`
|
||||||
|
query layoutQuery {
|
||||||
|
site {
|
||||||
|
siteMetadata {
|
||||||
|
title
|
||||||
|
description
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footer: file(relativePath: { regex: "/global/" }) {
|
||||||
|
childDataYaml {
|
||||||
|
footer {
|
||||||
|
buttons {
|
||||||
|
url
|
||||||
|
name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
notifs: file(relativePath: { regex: "/notifications/" }) {
|
||||||
|
childDataYaml {
|
||||||
|
notifications {
|
||||||
|
published
|
||||||
|
loud
|
||||||
|
message
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{data => {
|
||||||
|
const { title, description } = data.site.siteMetadata;
|
||||||
|
const notifs = data.notifs.childDataYaml.notifications.filter(notif => notif.published);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
</Helmet>
|
||||||
|
{notifs.map((node, i) => (
|
||||||
|
<a
|
||||||
|
key={i}
|
||||||
|
href={node.url}
|
||||||
|
className={classnames('notification', {
|
||||||
|
'notification-loud': node.loud,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{node.message}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
<Header notifications={notifs} />
|
||||||
|
{children}
|
||||||
|
<Footer buttons={data.footer.childDataYaml.footer.buttons} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</StaticQuery>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
@ -33,7 +33,7 @@ class Widgets extends Component {
|
|||||||
currentWidget: target,
|
currentWidget: target,
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
history.pushState(null, null, `#${target}`);
|
window.history.pushState(null, null, `#${target}`);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,22 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Gitter from 'react-sidecar';
|
// gatsby throws some error when importing just react-sidecar.
|
||||||
|
// Maybe because jsx file ext?
|
||||||
|
import Gitter from 'react-sidecar/dist-modules/index.js';
|
||||||
|
|
||||||
let stylesStr;
|
class HTML extends React.Component {
|
||||||
if (process.env.NODE_ENV === `production`) {
|
|
||||||
try {
|
|
||||||
stylesStr = require('!raw-loader!../public/styles.css');
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = class HTML extends React.Component {
|
|
||||||
render() {
|
render() {
|
||||||
let css;
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
css = <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: stylesStr }} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html {...this.props.htmlAttributes}>
|
<html {...this.props.htmlAttributes}>
|
||||||
<head>
|
<head>
|
||||||
@ -30,7 +18,6 @@ module.exports = class HTML extends React.Component {
|
|||||||
<meta name="apple-mobile-web-app-title" content="NetlifyCMS" />
|
<meta name="apple-mobile-web-app-title" content="NetlifyCMS" />
|
||||||
<meta name="application-name" content="NetlifyCMS" />
|
<meta name="application-name" content="NetlifyCMS" />
|
||||||
{this.props.headComponents}
|
{this.props.headComponents}
|
||||||
{css}
|
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://unpkg.com/docsearch.js@2.5.2/dist/cdn/docsearch.min.css"
|
href="https://unpkg.com/docsearch.js@2.5.2/dist/cdn/docsearch.min.css"
|
||||||
@ -47,4 +34,6 @@ module.exports = class HTML extends React.Component {
|
|||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
export default HTML;
|
||||||
|
@ -1,66 +0,0 @@
|
|||||||
import React, { Fragment } from 'react';
|
|
||||||
import Helmet from 'react-helmet';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
|
|
||||||
import Header from '../components/header';
|
|
||||||
import Footer from '../components/footer';
|
|
||||||
|
|
||||||
import '../css/imports/base.css';
|
|
||||||
import '../css/imports/utilities.css';
|
|
||||||
import '../css/imports/gitter.css';
|
|
||||||
|
|
||||||
const Layout = ({ data, location, children }) => {
|
|
||||||
const { title, description } = data.site.siteMetadata;
|
|
||||||
const notifs = data.notifs.notifications.filter(notif => notif.published);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
|
|
||||||
<meta name="description" content={description} />
|
|
||||||
</Helmet>
|
|
||||||
{notifs.map((node, i) => (
|
|
||||||
<a
|
|
||||||
key={i}
|
|
||||||
href={node.url}
|
|
||||||
className={classnames('notification', {
|
|
||||||
'notification-loud': node.loud,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{node.message}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
<Header location={location} notifications={notifs} />
|
|
||||||
{children()}
|
|
||||||
<Footer buttons={data.dataYaml.footer.buttons} />
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
|
||||||
query layoutQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
title
|
|
||||||
description
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dataYaml(id: { regex: "/global/" }) {
|
|
||||||
footer {
|
|
||||||
buttons {
|
|
||||||
url
|
|
||||||
name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
notifs: dataYaml(id: { regex: "/notifications/" }) {
|
|
||||||
notifications {
|
|
||||||
published
|
|
||||||
loud
|
|
||||||
message
|
|
||||||
url
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Layout;
|
|
@ -1,8 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Link from 'gatsby-link';
|
import { Link, graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import Layout from '../components/layout';
|
||||||
|
|
||||||
const Blog = ({ data }) => (
|
const Blog = ({ data }) => (
|
||||||
|
<Layout>
|
||||||
<div className="blog page">
|
<div className="blog page">
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>Blog</title>
|
<title>Blog</title>
|
||||||
@ -26,6 +29,7 @@ const Blog = ({ data }) => (
|
|||||||
{/* TODO: pagination */}
|
{/* TODO: pagination */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Blog;
|
export default Blog;
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Markdown from 'react-markdown';
|
import Markdown from 'react-markdown';
|
||||||
|
import { graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import Layout from '../components/layout';
|
||||||
import EventWidget from '../components/event-widget';
|
import EventWidget from '../components/event-widget';
|
||||||
import Markdownify from '../components/markdownify';
|
import Markdownify from '../components/markdownify';
|
||||||
|
|
||||||
@ -19,6 +21,7 @@ const CommunityPage = ({ data }) => {
|
|||||||
} = data.markdownRemark.frontmatter;
|
} = data.markdownRemark.frontmatter;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Layout>
|
||||||
<div className="community page">
|
<div className="community page">
|
||||||
<Helmet title={title} />
|
<Helmet title={title} />
|
||||||
<section className="community hero">
|
<section className="community hero">
|
||||||
@ -64,12 +67,13 @@ const CommunityPage = ({ data }) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
||||||
query communityPage {
|
query communityPage {
|
||||||
markdownRemark(id: { regex: "/community/" }) {
|
markdownRemark(fileAbsolutePath: { regex: "/community/" }) {
|
||||||
frontmatter {
|
frontmatter {
|
||||||
headline
|
headline
|
||||||
subhead
|
subhead
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import React, { Fragment } from 'react';
|
import React, { Fragment } from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import Layout from '../components/layout';
|
||||||
import Markdownify from '../components/markdownify';
|
import Markdownify from '../components/markdownify';
|
||||||
import VideoEmbed from '../components/video-embed';
|
import VideoEmbed from '../components/video-embed';
|
||||||
|
|
||||||
@ -27,9 +29,12 @@ const Features = ({ items }) => (
|
|||||||
);
|
);
|
||||||
|
|
||||||
const HomePage = ({ data }) => {
|
const HomePage = ({ data }) => {
|
||||||
const { landing, updates, contribs } = data;
|
const landing = data.landing.childDataYaml;
|
||||||
|
const updates = data.updates.childDataYaml;
|
||||||
|
const contribs = data.contribs.childDataJson;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Layout>
|
||||||
<div className="landing page">
|
<div className="landing page">
|
||||||
<section className="landing hero">
|
<section className="landing hero">
|
||||||
<div className="contained">
|
<div className="contained">
|
||||||
@ -74,7 +79,9 @@ const HomePage = ({ data }) => {
|
|||||||
<li>
|
<li>
|
||||||
<div className="update-metadata">
|
<div className="update-metadata">
|
||||||
<span className="update-version">{node.version}</span>
|
<span className="update-version">{node.version}</span>
|
||||||
<span className="update-date">{moment(node.date).format('MMMM D, YYYY')}</span>
|
<span className="update-date">
|
||||||
|
{moment(node.date).format('MMMM D, YYYY')}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="update-description">
|
<span className="update-description">
|
||||||
<Markdownify source={node.description} />
|
<Markdownify source={node.description} />
|
||||||
@ -123,19 +130,23 @@ const HomePage = ({ data }) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
||||||
query homeQuery {
|
query homeQuery {
|
||||||
updates: dataYaml(id: { regex: "/updates/" }) {
|
updates: file(relativePath: { regex: "/updates/" }) {
|
||||||
|
childDataYaml {
|
||||||
updates {
|
updates {
|
||||||
date
|
date
|
||||||
description
|
description
|
||||||
version
|
version
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
landing: dataYaml(id: { regex: "/landing/" }) {
|
}
|
||||||
|
landing: file(relativePath: { regex: "/landing/" }) {
|
||||||
|
childDataYaml {
|
||||||
hero {
|
hero {
|
||||||
headline
|
headline
|
||||||
subhead
|
subhead
|
||||||
@ -167,7 +178,9 @@ export const pageQuery = graphql`
|
|||||||
contributors
|
contributors
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contribs: dataJson(id: { regex: "/contributors/" }) {
|
}
|
||||||
|
contribs: file(relativePath: { regex: "/contributors/" }) {
|
||||||
|
childDataJson {
|
||||||
contributors {
|
contributors {
|
||||||
name
|
name
|
||||||
profile
|
profile
|
||||||
@ -176,6 +189,7 @@ export const pageQuery = graphql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default HomePage;
|
export default HomePage;
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
|
import { graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import Layout from '../components/layout';
|
||||||
|
|
||||||
const BlogPost = ({ data }) => {
|
const BlogPost = ({ data }) => {
|
||||||
const { html, frontmatter } = data.markdownRemark;
|
const { html, frontmatter } = data.markdownRemark;
|
||||||
@ -8,6 +11,7 @@ const BlogPost = ({ data }) => {
|
|||||||
const desc = meta_description || description;
|
const desc = meta_description || description;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Layout>
|
||||||
<div className="docs page">
|
<div className="docs page">
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
@ -25,6 +29,7 @@ const BlogPost = ({ data }) => {
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import { matchPath } from 'react-router-dom';
|
import { graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import Layout from '../components/layout';
|
||||||
import EditLink from '../components/edit-link';
|
import EditLink from '../components/edit-link';
|
||||||
import Widgets from '../components/widgets';
|
import Widgets from '../components/widgets';
|
||||||
import DocsNav from '../components/docs-nav';
|
import DocsNav from '../components/docs-nav';
|
||||||
@ -20,9 +21,10 @@ const DocPage = ({ data, location, history }) => {
|
|||||||
const { nav, page, widgets, menu } = data;
|
const { nav, page, widgets, menu } = data;
|
||||||
|
|
||||||
const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
|
const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
|
||||||
const showWidgets = matchPath(location.pathname, { path: '/docs/widgets' });
|
const showWidgets = location.pathname.indexOf('/docs/widgets') !== -1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Layout>
|
||||||
<div className="docs detail page">
|
<div className="docs detail page">
|
||||||
<Helmet title={page.frontmatter.title} />
|
<Helmet title={page.frontmatter.title} />
|
||||||
<div className="container">
|
<div className="container">
|
||||||
@ -38,6 +40,7 @@ const DocPage = ({ data, location, history }) => {
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
7913
website/yarn.lock
7913
website/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user