gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: custom collection card template (#433)

Browse Source
This commit is contained in:
Daniel Lautzenheiser
2023-01-25 15:11:59 -05:00
committed by GitHub
parent c6994ea45b
commit 1641630cfd
22 changed files with 1440 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/demo/public/index.html
View File

@ -20,7 +20,7 @@
},
'2015-02-16-this-is-a-toml-frontmatter-post.md': {
content:
'+++\ntitle = "This is a TOML front matter post"\nimage = "/assets/uploads/moby-dick.jpg"\n"date" = "2015-02-16T00:00:00.000Z"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
'+++\ntitle = This is a TOML front matter post\nimage = "/assets/uploads/moby-dick.jpg"\n"date" = "2015-02-16T00:00:00.000Z"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
},
'2015-02-14-this-is-a-post-with-a-different-extension.other': {
content:

46
packages/demo/src/cms.jsx
View File

@ -18,6 +18,51 @@ const PostPreview = ({ entry, widgetFor }) => {
);
};
const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
return (
<div style={{ width: "100%" }}>
{viewStyle === "grid" ? widgetFor("image") : null}
<div style={{ padding: "16px", width: "100%" }}>
<div
style={{
display: "flex",
width: "100%",
justifyContent: "space-between",
alignItems: "start",
}}
>
<div
style={{
display: "flex",
flexDirection: viewStyle === "grid" ? "column" : "row",
alignItems: "baseline",
gap: "8px",
}}
>
<strong style={{ fontSize: "24px" }}>{entry.data.title}</strong>
<span style={{ fontSize: "16px" }}>{entry.data.date}</span>
</div>
<div
style={{
backgroundColor: entry.data.draft === true ? "blue" : "green",
color: "white",
border: "none",
padding: "4px 8px",
textAlign: "center",
textDecoration: "none",
display: "inline-block",
cursor: "pointer",
borderRadius: "4px",
}}
>
{entry.data.draft === true ? "Draft" : "Published"}
</div>
</div>
</div>
</div>
);
};
const GeneralPreview = ({ widgetsFor, entry }) => {
const title = entry.data.site_title;
const posts = entry.data.posts;
@ -88,6 +133,7 @@ const CustomPage = () => {
cms.registerPreviewStyle(".toastui-editor-contents h1 { color: blue }", { raw: true });
cms.registerPreviewTemplate("posts", PostPreview);
CMS.registerPreviewCard("posts", PostPreviewCard);
cms.registerPreviewTemplate("general", GeneralPreview);
cms.registerPreviewTemplate("authors", AuthorsPreview);
// Pass the name of a registered control to reuse with a new widget preview.