diff --git a/README.md b/README.md index ee4a6e0b..ba263c61 100644 --- a/README.md +++ b/README.md @@ -163,8 +163,8 @@ This documentation will explain all the files and directories in the starter kit │ │ └── sections/ │ ├── admin/ │ │ ├── config.yml -│ │ ├── decap-preview-styles.css -│ │ └── index.html +│ │ ├── index.html +│ │ └── previews.jsx │ ├── assets/ │ │ ├── favicons/ │ │ ├── fonts/ @@ -301,15 +301,17 @@ Styling the Decap preview pane This template includes custom styles for the Deca 1. How it works: -The preview styles are defined in /admin/decap-preview-styles.css. The CMS preview script in /admin/index.html: +The preview styles are pulled from the same styles that are defined in your production styles, so make sure that you keep the JSX in sync for a true "live editing" experience. The CMS preview script can be found in in /admin/previews.jsx: - pulls the props from the collection - creates the DOM elements - registers these elements and styles for the preview panel to use +The templates are written in JSX and compiled in the browser by @babel/standalone, which /admin/index.html loads before it loads previews.jsx. Keep them in their own .jsx file rather than inlining them in index.html to prevent formatters as treating them as HTML. + 2. How to update or customize: -Edit /admin/decap-preview-styles.css and the preview pane script in /admin/index.html to match your site's branding or layout changes. Use Decap's documentation on [customizing the preview pane](https://decapcms.org/docs/customization/) +Edit /admin/previews.jsx to match your site's branding or layout changes. Use Decap's documentation on [customizing the preview pane](https://decapcms.org/docs/customization/) 3.Notes diff --git a/src/admin/config.yml b/src/admin/config.yml index edb50c01..d9f3ac64 100644 --- a/src/admin/config.yml +++ b/src/admin/config.yml @@ -29,7 +29,12 @@ collections: } - { label: "Description", name: "description", widget: "string" } - { label: "Author", name: "author", widget: "string" } - - { label: "Date", name: "date", widget: "datetime" } + - { + label: "Date", + name: "date", + widget: "datetime", + default: "{{now}}", + } - { label: "Tags", name: "tags", widget: "list", default: ["post"] } - { label: "Featured Image", name: "image", widget: "image" } - { label: "Image Caption", name: "imageAlt", widget: "string" } diff --git a/src/admin/decap-preview-styles.css b/src/admin/decap-preview-styles.css deleted file mode 100644 index 4589cd5b..00000000 --- a/src/admin/decap-preview-styles.css +++ /dev/null @@ -1,127 +0,0 @@ -/* This style sheet is used to style the blog preview in the Decap CMS admin panel. */ -/* THe classses should match the elements created in the Decap CMS preview pane script in admin.astro */ - -:root { - --primary: hsl(80, 90%, 55%); - --primaryLight: hsl(80, 60%, 40%); - --secondary: #001f3f; - --secondaryLight: #001f3f; - --headerColor: #1a1a1a; - --bodyTextColor: #4e4b66; - --bodyTextColorWhite: #fafbfc; - - /* 13px - 16px */ - --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); - /* 31px - 49px */ - --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); - --bodyFontSize: 1rem; - - /* 60px - 100px top and bottom */ - --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; -} - -.frame-content { - font-family: "Roboto", sans-serif; - line-height: 1.6em; -} - -.frame-content h1, -.frame-content h2, -.frame-content h3, -.frame-content h4, -.frame-content h5, -.frame-content h6 { - font-family: "Roboto", sans-serif; - color: var(--headerColor); -} - -.frame-content img { - max-width: 100%; -} - -.frame-content .blog { - padding: 2rem; - max-width: 48rem; - margin-inline: auto; -} - -.frame-content .blog .title { - margin-top: 40px; -} - -.frame-content .blog .cover { - border-radius: 0.5em; - min-width: 100%; - height: clamp(200px, 30vw, 400px); - margin-bottom: 50px; - object-fit: cover; -} - -.frame-content .blog .metadata { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - margin-bottom: 50px; - color: var(--bodyTextColor); -} - -.frame-content .blog .metadata .author { - margin: 0; - font-size: 0.875rem; -} - -.frame-content .blog .metadata .dot { - display: block; - width: 3px; - height: 3px; - background-color: var(--primary); - border-radius: 50%; - margin-bottom: 1px; -} - -.frame-content .blog .metadata .date { - font-size: 0.875rem; -} - -.frame-content .blog .divider { - margin-top: 0; - margin-bottom: 1.5625em; - background-color: #a2a0a0; -} - -.frame-content .blog .markdown { - margin-top: 3rem; - max-width: 80ch; -} - -.frame-content .blog .markdown h1, -.frame-content .blog .markdown h2, -.frame-content .blog .markdown h3, -.frame-content .blog .markdown h4, -.frame-content .blog .markdown h5, -.frame-content .blog .markdown h6 { - color: var(--headerColor); -} - -.frame-content .blog .markdown a { - color: var(--bodyTextColor); -} - -.frame-content .blog .markdown a:hover { - color: var(--primary); - text-decoration-color: var(--primary); -} - -.frame-content .blog .markdown *:not(pre *, .admonition *, details *, blockquote *, span, a, h1, h2, h3, h4, h5, h6) { - color: var(--bodyTextColor); -} - -.frame-content .blog .markdown pre { - padding: 1rem; - margin: 1rem 0; - background-color: #24292e; - color: #e1e4e8 !important; - overflow-x: auto; - border-radius: 0.5em; -} diff --git a/src/admin/index.html b/src/admin/index.html index b57df21a..9f7da66c 100644 --- a/src/admin/index.html +++ b/src/admin/index.html @@ -1,68 +1,20 @@ - - - + + + + - - - + Content Manager + - Content Manager - + + + - - - - - - - - + + + diff --git a/src/admin/previews.jsx b/src/admin/previews.jsx new file mode 100644 index 00000000..8d65ef12 --- /dev/null +++ b/src/admin/previews.jsx @@ -0,0 +1,83 @@ +/** @jsx h */ +/* ^ Compile JSX with Decap's own renderer instead of React.createElement */ + +/* + Preview Pane Templates + ============================================ + + Edit this file to customize the preview pane for your collections. + Documentation: https://decapcms.org/docs/customization/ + + At the bottom of the file, we load the same stylesheets used on the site. + Therefore, please keep the HTML in the preview in-sync with what's used on + the site to ensure the previews work correctly. +*/ + +const { createClass, h } = window; + +/* Resolve an image path to a URL. Unsaved uploads only exist as blobs. */ +function assetUrl(getAsset, path) { + if (!path || typeof path !== "string") return ""; + try { + const asset = getAsset(path); + return asset ? asset.toString() : ""; + } catch (error) { + return path; + } +} + +/* Mirror of the site's postDate filter (src/config/filters/postDate.js) */ +function postDate(value) { + if (!value) return ""; + const date = value instanceof Date ? value : new Date(value); + if (isNaN(date.getTime())) return ""; + return new Intl.DateTimeFormat(undefined, { + year: "numeric", + month: "short", + day: "numeric" + }).format(date); +} + +/* Mirrors the blog layout's markup so the preview reuses the site's CSS */ +const BlogPreview = createClass({ + render: function () { + /* Live form values, re-rendered on every keystroke */ + const data = this.props.entry.get("data").toJS(); + const cover = assetUrl(this.props.getAsset, data.image); + + return ( +
+
+
+
+ + + +
+

{data.title}

+
+ + + + {data.author} + + {postDate(data.date)} +
+
+
+ {this.props.widgetFor("body")} +
+
+
+
+
+ ); + } +}); + +/* Bind the template to the "blog" collection in config.yml */ +CMS.registerPreviewTemplate("blog", BlogPreview); + +/* The preview renders in a bare iframe, so pull in the site's stylesheets */ +CMS.registerPreviewStyle("/assets/css/root.css"); +CMS.registerPreviewStyle("/assets/css/blog.css"); \ No newline at end of file