gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: make widget docs editable (#1782)

Browse Source 
* make widget docs editable

* update widget doc frontmatter keys

* improve docs preview

* fix formatting

* fix preview

* add prism highlighting for previews

* fix formatting

* restore cms branch
This commit is contained in:
Shawn Erquhart
2018-10-01 20:00:57 -04:00
committed by GitHub
parent c261163eab
commit 6e453b3f08
25 changed files with 143 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
website/src/cms/cms.js
View File

@ -1,16 +1,45 @@
import React from 'react';
import CMS from 'netlify-cms';
import dayjs from 'dayjs';
import Prism from 'prismjs';
import { BlogPostTemplate } from '../templates/blog-post';
import { DocsTemplate } from '../templates/doc-page';
import WidgetDoc from '../components/widget-doc';
import Release from '../components/release';
import WhatsNew from '../components/whats-new';
import Notification from '../components/notification';
import '../css/lib/prism.css';
import '../css/imports/docs.css';
import '../css/imports/whatsnew.css';
import '../css/imports/header.css';
const withHighlight = WrappedComponent =>
class Highlight extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
highlight() {
Prism.highlightAllUnder(this.ref.current);
}
componentDidMount() {
this.highlight();
}
componentDidUpdate() {
this.highlight();
}
render() {
return (
<div className="language-markup" ref={this.ref}>
<WrappedComponent {...this.props} />
</div>
);
}
};
const BlogPostPreview = ({ entry, widgetFor }) => {
const data = entry.get('data');
return (
@ -27,6 +56,10 @@ const DocsPreview = ({ entry, widgetFor }) => (
<DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
);
const WidgetDocPreview = ({ entry, widgetFor }) => (
<WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
);
const ReleasePreview = ({ entry }) => (
<WhatsNew>
{entry.getIn(['data', 'updates']).map((release, idx) => (
@ -50,7 +83,8 @@ const NotificationPreview = ({ entry }) =>
</Notification>
));
CMS.registerPreviewTemplate('blog', BlogPostPreview);
CMS.registerPreviewTemplate('docs', DocsPreview);
CMS.registerPreviewTemplate('blog', withHighlight(BlogPostPreview));
CMS.registerPreviewTemplate('docs', withHighlight(DocsPreview));
CMS.registerPreviewTemplate('widget_docs', withHighlight(WidgetDocPreview));
CMS.registerPreviewTemplate('releases', ReleasePreview);
CMS.registerPreviewTemplate('notifications', NotificationPreview);