diff --git a/website/.babelrc b/website/.babelrc new file mode 100644 index 00000000..3d0574a6 --- /dev/null +++ b/website/.babelrc @@ -0,0 +1,46 @@ +{ + presets: [ + [ + "@babel/preset-env", + { + loose: true, + modules: false, + useBuiltIns: "usage", + shippedProposals: true, + targets: { + browsers: [">0.25%", "not dead"], + }, + }, + ], + [ + "@babel/preset-react", + { + useBuiltIns: true, + pragma: "React.createElement", + }, + ], + ], + plugins: [ + ["prismjs", { + "languages": ["javascript", "css", "markup", "yaml", "json"], + "plugins": ["line-numbers"], + "theme": "tomorrow", + "css": true, + }], + [ + "@babel/plugin-proposal-class-properties", + { + loose: true, + }, + ], + "@babel/plugin-syntax-dynamic-import", + "babel-plugin-macros", + [ + "@babel/plugin-transform-runtime", + { + helpers: true, + regenerator: true, + }, + ], + ], +} diff --git a/website/content/docs/widgets/index.md b/website/content/docs/widgets.md similarity index 100% rename from website/content/docs/widgets/index.md rename to website/content/docs/widgets.md diff --git a/website/content/docs/widgets/boolean.md b/website/content/docs/widgets/boolean.md index 6065277f..0f7cbbb2 100644 --- a/website/content/docs/widgets/boolean.md +++ b/website/content/docs/widgets/boolean.md @@ -1,6 +1,6 @@ --- +title: boolean label: "Boolean" -target: boolean --- The boolean widget translates a toggle switch input to a true/false value. diff --git a/website/content/docs/widgets/date.md b/website/content/docs/widgets/date.md index 8d0a0c21..c133828e 100644 --- a/website/content/docs/widgets/date.md +++ b/website/content/docs/widgets/date.md @@ -1,6 +1,6 @@ --- +title: date label: "Date" -target: date --- The date widget translates a date picker input to a date string. For saving date and time together, use the datetime widget. diff --git a/website/content/docs/widgets/datetime.md b/website/content/docs/widgets/datetime.md index dec92641..7f9ab787 100644 --- a/website/content/docs/widgets/datetime.md +++ b/website/content/docs/widgets/datetime.md @@ -1,6 +1,6 @@ --- +title: datetime label: "DateTime" -target: datetime --- The datetime widget translates a datetime picker to a datetime string. For saving the date only, use the date widget. diff --git a/website/content/docs/widgets/file.md b/website/content/docs/widgets/file.md index 71b1df18..52ac4605 100644 --- a/website/content/docs/widgets/file.md +++ b/website/content/docs/widgets/file.md @@ -1,6 +1,6 @@ --- label: "File" -target: file +title: file --- The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string. diff --git a/website/content/docs/widgets/hidden.md b/website/content/docs/widgets/hidden.md index 4f4c0129..3fe738b1 100644 --- a/website/content/docs/widgets/hidden.md +++ b/website/content/docs/widgets/hidden.md @@ -1,6 +1,6 @@ --- label: "Hidden" -target: hidden +title: hidden --- Hidden widgets do not display in the UI. In folder collections that allow users to create new items, you will often want to set a default for hidden fields, so they will be set without requiring an input. diff --git a/website/content/docs/widgets/image.md b/website/content/docs/widgets/image.md index c3c915d6..ba8d020e 100644 --- a/website/content/docs/widgets/image.md +++ b/website/content/docs/widgets/image.md @@ -1,6 +1,6 @@ --- label: "Image" -target: image +title: image --- The image widget allows editors to upload an image or select an existing one from the media library. The path to the image file will be saved to the field as a string. diff --git a/website/content/docs/widgets/list.md b/website/content/docs/widgets/list.md index 500a4da9..10d9fe0a 100644 --- a/website/content/docs/widgets/list.md +++ b/website/content/docs/widgets/list.md @@ -1,6 +1,6 @@ --- label: "List" -target: list +title: list --- The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists. diff --git a/website/content/docs/widgets/markdown.md b/website/content/docs/widgets/markdown.md index 1bd2155c..6fd27de6 100644 --- a/website/content/docs/widgets/markdown.md +++ b/website/content/docs/widgets/markdown.md @@ -1,6 +1,6 @@ --- label: "Markdown" -target: markdown +title: markdown --- The markdown widget provides a full fledged text editor - which is based on [slate](https://github.com/ianstormtaylor/slate) - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch. diff --git a/website/content/docs/widgets/number.md b/website/content/docs/widgets/number.md index 7436b007..5b9f31ee 100644 --- a/website/content/docs/widgets/number.md +++ b/website/content/docs/widgets/number.md @@ -1,6 +1,6 @@ --- label: "Number" -target: number +title: number --- The number widget uses an HTML number input, saving the value as a string, integer, or floating point number. diff --git a/website/content/docs/widgets/object.md b/website/content/docs/widgets/object.md index bfef0453..2b5fb325 100644 --- a/website/content/docs/widgets/object.md +++ b/website/content/docs/widgets/object.md @@ -1,6 +1,6 @@ --- label: "Object" -target: object +title: object --- The object widget allows you to group multiple widgets together, nested under a single field. You can choose any widget as a child of an object widget—even other objects. diff --git a/website/content/docs/widgets/relation.md b/website/content/docs/widgets/relation.md index 20fe303d..784a9705 100644 --- a/website/content/docs/widgets/relation.md +++ b/website/content/docs/widgets/relation.md @@ -1,6 +1,6 @@ --- label: "Relation" -target: relation +title: relation --- The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you're referencing, and the list automatically updates with matched entries based on what you've typed. diff --git a/website/content/docs/widgets/select.md b/website/content/docs/widgets/select.md index 208d1257..8a31b796 100644 --- a/website/content/docs/widgets/select.md +++ b/website/content/docs/widgets/select.md @@ -1,6 +1,6 @@ --- label: "Select" -target: select +title: select --- The select widget allows you to pick a single string value from a dropdown menu. diff --git a/website/content/docs/widgets/string.md b/website/content/docs/widgets/string.md index dd47838f..fdffbfd4 100644 --- a/website/content/docs/widgets/string.md +++ b/website/content/docs/widgets/string.md @@ -1,6 +1,6 @@ --- label: "String" -target: string +title: string --- The string widget translates a basic text input to a string value. For larger textarea inputs, use the text widget. diff --git a/website/content/docs/widgets/text.md b/website/content/docs/widgets/text.md index fc89707a..46f287e5 100644 --- a/website/content/docs/widgets/text.md +++ b/website/content/docs/widgets/text.md @@ -1,6 +1,6 @@ --- label: "Text" -target: text +title: text --- The text widget takes a multiline text field and saves it as a string. For shorter text inputs, use the string widget. diff --git a/website/gatsby-config.js b/website/gatsby-config.js index cd93cd12..1c560143 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -53,7 +53,12 @@ module.exports = { // prettier-ignore plugins: [ 'gatsby-remark-autolink-headers', - 'gatsby-remark-prismjs' + { + resolve: 'gatsby-remark-prismjs', + options: { + noInlineHighlight: true, + }, + }, ] }, }, diff --git a/website/package.json b/website/package.json index 7908bedc..5655832b 100755 --- a/website/package.json +++ b/website/package.json @@ -45,6 +45,7 @@ "smooth-scroll": "^14.2.0" }, "devDependencies": { + "babel-plugin-prismjs": "^1.0.2", "eslint": "^3.1.1", "eslint-plugin-import": "^1.11.1" }, diff --git a/website/src/cms/cms.js b/website/src/cms/cms.js index e464386e..cb8333d9 100644 --- a/website/src/cms/cms.js +++ b/website/src/cms/cms.js @@ -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 ( +
+ +
+ ); + } + }; + const BlogPostPreview = ({ entry, widgetFor }) => { const data = entry.get('data'); return ( @@ -27,6 +56,10 @@ const DocsPreview = ({ entry, widgetFor }) => ( ); +const WidgetDocPreview = ({ entry, widgetFor }) => ( + +); + const ReleasePreview = ({ entry }) => ( {entry.getIn(['data', 'updates']).map((release, idx) => ( @@ -50,7 +83,8 @@ const NotificationPreview = ({ entry }) => )); -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); diff --git a/website/src/components/widget-doc.js b/website/src/components/widget-doc.js new file mode 100644 index 00000000..56671d84 --- /dev/null +++ b/website/src/components/widget-doc.js @@ -0,0 +1,11 @@ +import React from 'react'; +import classnames from 'classnames'; + +const WidgetDoc = ({ visible, label, body, html }) => ( +
+

{label}

+ {body ? body :
} +
+); + +export default WidgetDoc; diff --git a/website/src/components/widgets.js b/website/src/components/widgets.js index 663a5d88..3fd98fc8 100644 --- a/website/src/components/widgets.js +++ b/website/src/components/widgets.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import classnames from 'classnames'; +import WidgetDoc from './widget-doc'; import '../css/imports/widgets.css'; @@ -13,7 +14,7 @@ class Widgets extends Component { const hash = window.location.hash ? window.location.hash.replace('#', '') : ''; - const widgetsContainHash = widgets.edges.some(w => w.node.frontmatter.target === hash); + const widgetsContainHash = widgets.edges.some(w => w.node.frontmatter.title === hash); if (widgetsContainHash) { return this.setState({ @@ -22,18 +23,18 @@ class Widgets extends Component { } this.setState({ - currentWidget: widgets.edges[0].node.frontmatter.target, + currentWidget: widgets.edges[0].node.frontmatter.title, }); } - handleWidgetChange = (event, target) => { + handleWidgetChange = (event, title) => { event.preventDefault(); this.setState( { - currentWidget: target, + currentWidget: title, }, () => { - window.history.pushState(null, null, `#${target}`); + window.history.pushState(null, null, `#${title}`); }, ); }; @@ -47,14 +48,14 @@ class Widgets extends Component {
{widgets.edges.map(({ node }) => { - const { label, target } = node.frontmatter; + const { label, title } = node.frontmatter; return ( @@ -63,18 +64,10 @@ class Widgets extends Component {
{widgets.edges.map(({ node }) => { - const { label, target } = node.frontmatter; - return ( -
-

{label}

-
-
- ); + const { frontmatter, html } = node; + const { title, label } = frontmatter; + const isVisible = currentWidget === title; + return ; })}
diff --git a/website/src/css/lib/prism.css b/website/src/css/lib/prism.css deleted file mode 100644 index 5a67be55..00000000 --- a/website/src/css/lib/prism.css +++ /dev/null @@ -1,120 +0,0 @@ -/** - * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML - * Based on https://github.com/chriskempson/tomorrow-theme - * @author Rose Pritchard - */ - -code[class*='language-'], -pre[class*='language-'] { - color: #ccc; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Code blocks */ -pre[class*='language-'] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; -} - -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background: #2d2d2d; -} - -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} - -.token.comment, -.token.block-comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #999; -} - -.token.punctuation { - color: #ccc; -} - -.token.tag, -.token.attr-name, -.token.namespace, -.token.deleted { - color: #e2777a; -} - -.token.function-name { - color: #6196cc; -} - -.token.boolean, -.token.number, -.token.function { - color: #f08d49; -} - -.token.property, -.token.class-name, -.token.constant, -.token.symbol { - color: #f8c555; -} - -.token.selector, -.token.important, -.token.atrule, -.token.keyword, -.token.builtin { - color: #cc99cd; -} - -.token.string, -.token.char, -.token.attr-value, -.token.regex, -.token.variable { - color: #7ec699; -} - -.token.operator, -.token.entity, -.token.url { - color: #67cdcc; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.inserted { - color: green; -} diff --git a/website/src/templates/doc-page.js b/website/src/templates/doc-page.js index 16842fd2..b9f19a85 100644 --- a/website/src/templates/doc-page.js +++ b/website/src/templates/doc-page.js @@ -1,6 +1,7 @@ import React from 'react'; import Helmet from 'react-helmet'; import { graphql } from 'gatsby'; +import 'prismjs/themes/prism-tomorrow.css'; import Layout from '../components/layout'; import EditLink from '../components/edit-link'; @@ -8,7 +9,6 @@ import Widgets from '../components/widgets'; import DocsNav from '../components/docs-nav'; import MobileNav from '../components/mobile-nav'; -import '../css/lib/prism.css'; import '../css/imports/docs.css'; const toMenu = (menu, nav) => @@ -124,8 +124,8 @@ export const pageQuery = graphql` edges { node { frontmatter { + title label - target } html } diff --git a/website/static/admin/config.yml b/website/static/admin/config.yml index 9c061d94..7d5cf4be 100644 --- a/website/static/admin/config.yml +++ b/website/static/admin/config.yml @@ -1,7 +1,6 @@ backend: name: github repo: netlify/netlify-cms - branch: master squash_merges: true publish_mode: editorial_workflow @@ -19,6 +18,14 @@ collections: # A list of collections the CMS should be able to edit - {label: "Group", name: "group", widget: "string"} - {label: "Weight", name: "weight", widget: "number"} - {label: "Body", name: "body", widget: "markdown"} + - name: "widget_docs" # Used in routes, ie.: /admin/collections/:slug/edit + label: "Widget Docs" # Used in the UI, ie.: "New Post" + folder: "website/content/docs/widgets" # The path to the folder where the documents are stored + create: true # Allow users to create new documents in this collection + fields: # The fields each document in this collection have + - {label: "Name", name: "title"} + - {label: "Label", name: "label"} + - {label: "Body", name: "body", widget: "markdown"} - name: "blog" label: "Blog" label_singular: "Post" diff --git a/website/yarn.lock b/website/yarn.lock index a0086e17..d25f932f 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -1520,6 +1520,10 @@ babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.4.0: dependencies: cosmiconfig "^5.0.5" +babel-plugin-prismjs@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/babel-plugin-prismjs/-/babel-plugin-prismjs-1.0.2.tgz#837bf6b32168b3ba624c054fc755946deb1b63fa" + babel-plugin-remove-graphql-queries@^2.0.2-rc.2: version "2.0.2-rc.2" resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.0.2-rc.2.tgz#85ae3b8d46ebaa27e128d15321d67acd409d95e2"