chore: use cms w/ open authoring for site edits (#3287)

This commit is contained in:
Shawn Erquhart
2020-02-19 16:55:10 -05:00
committed by GitHub
parent bcdd68045d
commit 783440e370
13 changed files with 411 additions and 305 deletions

View File

@ -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);

View File

@ -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"

View File

@ -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>

View File

@ -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;

View File

@ -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>
);

View File

@ -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>
);
};

View File

@ -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>
);

View File

@ -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
}