Skip to content

Instantly share code, notes, and snippets.

@richtera
Last active September 5, 2018 21:09
Show Gist options
  • Save richtera/6aac808611028f59244feb7b9b210d9a to your computer and use it in GitHub Desktop.
Save richtera/6aac808611028f59244feb7b9b210d9a to your computer and use it in GitHub Desktop.
This is how I mount the CMS.
/** @format */
import React from "react";
import _ from "lodash";
import { identity } from "../apollo/initApollo";
import { questionStyles } from "../../components/Question";
import { appStyles } from "../../pages/_app";
import MetadataControl from "../../components/MetadataControl";
import ActivityPreview from "../../components/ActivityPreview";
import PagePreview from "../../components/PagePreview";
import registerIdControl from "../../components/IdControl";
if (process.browser) {
window.CMS_MANUAL_INIT = true;
window.netlifyIdentity = identity;
}
function resolveScopedStyles(scope) {
return {
className: scope.props.className,
styles: scope.props.children
};
}
const styles = resolveScopedStyles(
<React.Fragment>
<style jsx global>
{`
/* This is used for previewing content in the cms not sure why nc- got lost */
.nc-widgetPreview p {
margin: 1em 0px !important;
}
/* Hack to display Coursebuilder */
h1.nc-collectionPage-sidebarHeading:after {
content: "Coursebuilder";
font-size: 23px;
}
h1.nc-collectionPage-sidebarHeading {
font-size: 0;
}
`}
</style>
{questionStyles()}
{appStyles()}
</React.Fragment>
);
let MarkdownPreview = null;
let CMS = null;
export class CMSContainer extends React.Component {
componentWillMount() {
if (process.browser) {
const {
init,
default: CMSImport
} = require("netlify-cms/dist/netlify-cms.js");
// require("netlify-cms/dist/cms.js");
// require("netlify-cms/dist/netlify-cms.js");
CMS = CMSImport;
const backend = JSON.parse(process.env.CMS_BACKEND);
init({
config: {
display_url: window.location.href.replace(
/(^https?:\/\/[^\/]*)(\/.*)?$/,
(all, url) => url
),
backend
}
});
_.forEach(styles.styles, style => {
const styles = style.props.css;
CMS.registerPreviewStyle(styles, { raw: true });
});
CMS.registerPreviewStyle(
"//fonts.googleapis.com/icon?family=Material+Icons"
);
CMS.registerPreviewTemplate("activity", ActivityPreview);
CMS.registerPreviewTemplate("page", PagePreview);
CMS.registerPreviewTemplate("article", PagePreview);
CMS.registerWidget("metadata", MetadataControl);
registerIdControl(CMS);
}
}
render() {
return (
<React.Fragment>
<div id="nc-root" key="cms" />
{styles.styles}
</React.Fragment>
);
}
}
export default CMSContainer;
/** @format */
import React from "react";
import uuidv1 from "uuid/v1";
// ... using predefined DNS namespace (for domain names)
export const uuid = () => {
return uuidv1();
};
function registerIdControl(CMS) {
if (!CMS) {
return;
}
const stringWidget = CMS.getWidget("string");
CMS.registerWidget(
"id",
class IdControl extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
let { value, onChange } = this.props;
if (!value) {
value = uuidv1();
onChange(value);
}
const Control = stringWidget.control;
return <Control {...this.props} value={value} />;
}
},
stringWidget.preview
);
}
export default registerIdControl;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment