docs: make widget docs editable (#1782)
* 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:
@ -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);
|
||||
|
Reference in New Issue
Block a user