chore: use cms w/ open authoring for site edits (#3287)
This commit is contained in:
@ -2,92 +2,135 @@ import React from 'react';
|
||||
import CMS from 'netlify-cms-app';
|
||||
import dayjs from 'dayjs';
|
||||
import Prism from 'prismjs';
|
||||
import { CacheProvider } from '@emotion/core';
|
||||
import createCache from '@emotion/cache';
|
||||
import { BlogPostTemplate } from '../templates/blog-post';
|
||||
import { LayoutTemplate as Layout } from '../components/layout';
|
||||
import { DocsTemplate } from '../templates/doc-page';
|
||||
import WidgetDoc from '../components/widget-doc';
|
||||
import WhatsNew from '../components/whats-new';
|
||||
import Notification from '../components/notification';
|
||||
import Community from '../components/community';
|
||||
import siteConfig from '../../site.yml';
|
||||
|
||||
const withHighlight = WrappedComponent =>
|
||||
class Highlight extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.ref = React.createRef();
|
||||
}
|
||||
let emotionCache;
|
||||
function getEmotionCache() {
|
||||
const previewPaneIframe = document.querySelector('iframe[class*="PreviewPaneFrame"]');
|
||||
const previewPaneHeadEl = previewPaneIframe.contentWindow.document.querySelector('head');
|
||||
if (!emotionCache || emotionCache.sheet.container !== previewPaneHeadEl) {
|
||||
emotionCache = createCache({ container: previewPaneHeadEl });
|
||||
}
|
||||
return emotionCache;
|
||||
}
|
||||
|
||||
highlight() {
|
||||
Prism.highlightAllUnder(this.ref.current);
|
||||
}
|
||||
const PreviewContainer = ({ children, highlight }) => (
|
||||
<CacheProvider value={getEmotionCache()}>
|
||||
<Layout>
|
||||
{highlight ? <Highlight>{children}</Highlight> : children}
|
||||
</Layout>
|
||||
</CacheProvider>
|
||||
);
|
||||
|
||||
componentDidMount() {
|
||||
this.highlight();
|
||||
}
|
||||
class Highlight extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.ref = React.createRef();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.highlight();
|
||||
}
|
||||
highlight() {
|
||||
setTimeout(() => {
|
||||
if (this.ref.current) {
|
||||
Prism.highlightAllUnder(this.ref.current);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="language-markup" ref={this.ref}>
|
||||
<WrappedComponent {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
componentDidMount() {
|
||||
this.highlight();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.highlight();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={this.ref}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const BlogPostPreview = ({ entry, widgetFor }) => {
|
||||
const data = entry.get('data');
|
||||
return (
|
||||
<BlogPostTemplate
|
||||
title={data.get('title')}
|
||||
author={data.get('author')}
|
||||
date={dayjs(data.get('date')).format('MMMM D, YYYY')}
|
||||
body={widgetFor('body')}
|
||||
/>
|
||||
<PreviewContainer highlight={true}>
|
||||
<BlogPostTemplate
|
||||
title={data.get('title')}
|
||||
author={data.get('author')}
|
||||
date={dayjs(data.get('date')).format('MMMM D, YYYY')}
|
||||
body={widgetFor('body')}
|
||||
/>
|
||||
</PreviewContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const CommunityPreview = ({ entry }) => {
|
||||
const { title, headline, subhead, sections } = entry.get('data').toJS();
|
||||
return <Community title={title} headline={headline} subhead={subhead} sections={sections} />;
|
||||
return (
|
||||
<PreviewContainer>
|
||||
<Community title={title} headline={headline} subhead={subhead} sections={sections} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const DocsPreview = ({ entry, widgetFor }) => (
|
||||
<DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
|
||||
<PreviewContainer highlight={true}>
|
||||
<DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
|
||||
const WidgetDocPreview = ({ entry, widgetFor }) => (
|
||||
<WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
|
||||
<PreviewContainer highlight={true}>
|
||||
<WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
|
||||
const ReleasePreview = ({ entry }) => (
|
||||
<WhatsNew
|
||||
updates={entry
|
||||
.getIn(['data', 'updates'])
|
||||
.map(release => ({
|
||||
version: release.get('version'),
|
||||
date: dayjs(release.get('date')).format('MMMM D, YYYY'),
|
||||
description: release.get('description'),
|
||||
}))
|
||||
.toJS()}
|
||||
/>
|
||||
<PreviewContainer highlight={true}>
|
||||
<WhatsNew
|
||||
updates={entry
|
||||
.getIn(['data', 'updates'])
|
||||
.map(release => ({
|
||||
version: release.get('version'),
|
||||
date: dayjs(release.get('date')).format('MMMM D, YYYY'),
|
||||
description: release.get('description'),
|
||||
}))
|
||||
.toJS()}
|
||||
/>
|
||||
</PreviewContainer>
|
||||
);
|
||||
|
||||
const NotificationPreview = ({ entry }) =>
|
||||
entry
|
||||
.getIn(['data', 'notifications'])
|
||||
.filter(notif => notif.get('published'))
|
||||
.map((notif, idx) => (
|
||||
<Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
|
||||
{notif.get('message')}
|
||||
</Notification>
|
||||
));
|
||||
const NotificationPreview = ({ entry }) => (
|
||||
<PreviewContainer>
|
||||
{entry
|
||||
.getIn(['data', 'notifications'])
|
||||
.filter(notif => notif.get('published'))
|
||||
.map((notif, idx) => (
|
||||
<Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
|
||||
{notif.get('message')}
|
||||
</Notification>
|
||||
))
|
||||
}
|
||||
</PreviewContainer>
|
||||
);
|
||||
|
||||
CMS.registerPreviewTemplate('blog', withHighlight(BlogPostPreview));
|
||||
CMS.registerPreviewTemplate('docs', withHighlight(DocsPreview));
|
||||
CMS.registerPreviewTemplate('widget_docs', withHighlight(WidgetDocPreview));
|
||||
CMS.registerPreviewTemplate('blog', BlogPostPreview);
|
||||
siteConfig.menu.docs.forEach(group => {
|
||||
CMS.registerPreviewTemplate(`docs_${group.name}`, DocsPreview);
|
||||
});
|
||||
CMS.registerPreviewTemplate('widget_docs', WidgetDocPreview);
|
||||
CMS.registerPreviewTemplate('releases', ReleasePreview);
|
||||
CMS.registerPreviewTemplate('notifications', NotificationPreview);
|
||||
CMS.registerPreviewTemplate('community', CommunityPreview);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
const EditLink = ({ path }) => (
|
||||
const EditLink = ({ collection, filename }) => (
|
||||
<div
|
||||
css={css`
|
||||
float: right;
|
||||
@ -15,7 +15,7 @@ const EditLink = ({ path }) => (
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a href={`https://github.com/netlify/netlify-cms/blob/master/website/content/${path}`}>
|
||||
<a href={`/admin/#/edit/${collection}/${filename}`} target="_blank">
|
||||
<svg
|
||||
version="1.1"
|
||||
id="pencil"
|
||||
|
@ -28,6 +28,13 @@ const LAYOUT_QUERY = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
export const LayoutTemplate = ({ children }) => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
)
|
||||
|
||||
const Layout = ({ hasPageHero, children }) => {
|
||||
return (
|
||||
<StaticQuery query={LAYOUT_QUERY}>
|
||||
@ -35,8 +42,12 @@ const Layout = ({ hasPageHero, children }) => {
|
||||
const { title, description } = data.site.siteMetadata;
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
<LayoutTemplate
|
||||
title={title}
|
||||
description={description}
|
||||
hasPageHero={hasPageHero}
|
||||
footerButtons={data.footer.childDataYaml.footer.buttons}
|
||||
>
|
||||
<Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
|
||||
<meta name="description" content={description} />
|
||||
<link
|
||||
@ -47,7 +58,7 @@ const Layout = ({ hasPageHero, children }) => {
|
||||
<Header hasHeroBelow={hasPageHero} />
|
||||
{children}
|
||||
<Footer buttons={data.footer.childDataYaml.footer.buttons} />
|
||||
</ThemeProvider>
|
||||
</LayoutTemplate>
|
||||
);
|
||||
}}
|
||||
</StaticQuery>
|
||||
|
@ -125,12 +125,11 @@ const StyledMarkdown = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Markdown = ({ html }) => {
|
||||
if (React.isValidElement(html)) {
|
||||
return html;
|
||||
} else {
|
||||
return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
const Markdown = ({ body, html }) => {
|
||||
if (body) {
|
||||
return <StyledMarkdown>{body}</StyledMarkdown>
|
||||
}
|
||||
return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
};
|
||||
|
||||
export default Markdown;
|
||||
|
@ -15,12 +15,12 @@ const SidebarLayout = ({ sidebar, children }) => (
|
||||
css={css`
|
||||
${mq[1]} {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-template-columns: ${sidebar ? '300px' : ''} minmax(0, 1fr);
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div>{sidebar}</div>
|
||||
{sidebar && <div>{sidebar}</div>}
|
||||
<Children>{children}</Children>
|
||||
</Page>
|
||||
);
|
||||
|
@ -10,7 +10,7 @@ const WidgetDoc = ({ visible, label, body, html }) => {
|
||||
return (
|
||||
<div>
|
||||
<h3>{label}</h3>
|
||||
<Markdown html={body || html} />
|
||||
<Markdown html={html} body={body} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -24,7 +24,7 @@ export const BlogPostTemplate = ({ title, author, date, body, html }) => (
|
||||
<MetaInfo>
|
||||
by {author} on {date}
|
||||
</MetaInfo>
|
||||
<Markdown html={body || html} />
|
||||
<Markdown body={body} html={html} />
|
||||
</Page>
|
||||
</Container>
|
||||
);
|
||||
|
@ -4,13 +4,17 @@ import { graphql } from 'gatsby';
|
||||
import 'prismjs/themes/prism-tomorrow.css';
|
||||
|
||||
import Layout from '../components/layout';
|
||||
import EditLink from '../components/edit-link';
|
||||
import Widgets from '../components/widgets';
|
||||
import DocsNav from '../components/docs-nav';
|
||||
import Container from '../components/container';
|
||||
import SidebarLayout from '../components/sidebar-layout';
|
||||
import EditLink from '../components/edit-link';
|
||||
import Widgets from '../components/widgets';
|
||||
import Markdown from '../components/markdown';
|
||||
|
||||
function filenameFromPath(p) {
|
||||
return p.split('/').slice(-1)[0].split('.')[0];
|
||||
}
|
||||
|
||||
const toMenu = (menu, nav) =>
|
||||
menu.map(group => ({
|
||||
title: group.title,
|
||||
@ -25,7 +29,7 @@ const DocsSidebar = ({ docsNav, location }) => (
|
||||
|
||||
export const DocsTemplate = ({
|
||||
title,
|
||||
editLinkPath,
|
||||
filename,
|
||||
body,
|
||||
html,
|
||||
showWidgets,
|
||||
@ -33,15 +37,18 @@ export const DocsTemplate = ({
|
||||
showSidebar,
|
||||
docsNav,
|
||||
location,
|
||||
group,
|
||||
}) => (
|
||||
<Container size="md">
|
||||
<SidebarLayout
|
||||
sidebar={<div>{showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}</div>}
|
||||
sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}
|
||||
>
|
||||
<article data-docs-content>
|
||||
{editLinkPath && <EditLink path={editLinkPath} />}
|
||||
{filename && (
|
||||
<EditLink collection={`docs_${group}`} filename={filename} />
|
||||
)}
|
||||
<h1>{title}</h1>
|
||||
<Markdown html={body || html} />
|
||||
<Markdown body={body} html={html} />
|
||||
{showWidgets && <Widgets widgets={widgets} />}
|
||||
</article>
|
||||
</SidebarLayout>
|
||||
@ -49,22 +56,25 @@ export const DocsTemplate = ({
|
||||
);
|
||||
|
||||
const DocPage = ({ data, location }) => {
|
||||
const { nav, page, widgets, menu } = data;
|
||||
const { nav, page: { frontmatter, html, fields }, widgets, menu } = data;
|
||||
const { title, group } = frontmatter
|
||||
|
||||
const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
|
||||
const showWidgets = location.pathname.indexOf('/docs/widgets') !== -1;
|
||||
const filename = filenameFromPath(fields.path);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Helmet title={page.frontmatter.title} />
|
||||
<Helmet title={title} />
|
||||
<DocsTemplate
|
||||
title={page.frontmatter.title}
|
||||
editLinkPath={page.fields.path}
|
||||
html={page.html}
|
||||
title={title}
|
||||
filename={filename}
|
||||
html={html}
|
||||
showWidgets={showWidgets}
|
||||
widgets={widgets}
|
||||
docsNav={docsNav}
|
||||
location={location}
|
||||
group={group}
|
||||
showSidebar
|
||||
/>
|
||||
</Layout>
|
||||
@ -79,6 +89,7 @@ export const pageQuery = graphql`
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
group
|
||||
}
|
||||
html
|
||||
}
|
||||
|
Reference in New Issue
Block a user