feat(cms): better post preview and preview styling

lukeocodes · Nov 14, 2020 · 00bec80 · 00bec80
1 parent 2bbd4e6
commit 00bec80
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/static/admin/index.html b/static/admin/index.html
@@ -17,5 +17,19 @@
   <body>
     <!-- Include the script that builds the page and powers Netlify CMS -->
     <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+    <script>
+      var PostPreview = createClass({
+        render: function() {
+          var entry = this.props.entry;
+          return h('div', {},
+            h('h1', {}, entry.getIn(['data', 'title'])),
+            h('div', {"className": "text"}, this.props.widgetFor('body'))
+          );
+        }
+      });
+
+      CMS.registerPreviewStyle("netlify-preview.css");
+      CMS.registerPreviewTemplate("blog", PostPreview);
+    </script>
   </body>
 </html>
diff --git a/static/admin/netlify-preview.css b/static/admin/netlify-preview.css
@@ -0,0 +1,17 @@
+html,
+body {
+  color: #444;
+  font-size: 14px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+body {
+  padding: 20px;
+}
+
+img {
+  max-width: 100vw;
+  max-height: 50vw;
+  margin: 20px auto;
+  display: block;
+}