From 9840992cc0b53b0743126b44c85a96306222e616 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 8 Aug 2024 12:37:11 -0400 Subject: [PATCH 1/5] feat: people custom preview --- public/admin/index.html | 18 +++++++++----- public/admin/previews/PeoplePreview.js | 33 ++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 public/admin/previews/PeoplePreview.js diff --git a/public/admin/index.html b/public/admin/index.html index 8c69ee6..de57e5b 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -1,16 +1,22 @@ - - - - Content Manager + + + + Content Manager - \ No newline at end of file diff --git a/public/admin/previews/PeoplePreview.js b/public/admin/previews/PeoplePreview.js new file mode 100644 index 0000000..b959760 --- /dev/null +++ b/public/admin/previews/PeoplePreview.js @@ -0,0 +1,33 @@ +export const PeoplePreview = ({ widgetFor, entry, collection, fields }) => { + const imageField = useMemo(() => fields.find((field) => field.name === "avatar"), [fields]) + const imageUrl = useMediaAsset(entry.data.avatar, collection, imageField, entry) + + return h( + "div", + { className: "flex flex-col md:flex-row gap-4 md:gap-8" }, + h( + "div", + { className: "flex-none" }, + + h("img", { src: imageUrl, className: "object-cover rounded-full w-40 h-40 md:w-64 md:h-64" }) + ), + h( + "div", + { className: "space-y-4" }, + h( + "div", + {}, + + h( + "a", + { href: imageUrl, className: "text-xl font-semibold underline text-neutral-900" }, + entry.data.name + ), + h("p", { className: "text-neutral-700 italic" }, entry.data.title), + h("p", { className: "small" }, entry.data.org) + ), + + h("p", {}, entry.data.bio) + ) + ) +} From 4b74fb9fe277859bd07ec5f8f262596f74f0879f Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 8 Aug 2024 12:40:30 -0400 Subject: [PATCH 2/5] chore: eslint ignore the preview pages --- .eslintrc.js | 1 + public/admin/previews/PeoplePreview.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9bfeaf4..9ac09c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,6 +21,7 @@ module.exports = { "out", "build", "node_modules", + "public/admin/previews" ], plugins: ["@typescript-eslint", "import"], rules: { diff --git a/public/admin/previews/PeoplePreview.js b/public/admin/previews/PeoplePreview.js index b959760..431685e 100644 --- a/public/admin/previews/PeoplePreview.js +++ b/public/admin/previews/PeoplePreview.js @@ -1,4 +1,4 @@ -export const PeoplePreview = ({ widgetFor, entry, collection, fields }) => { +export const PeoplePreview = ({ entry, collection, fields }) => { const imageField = useMemo(() => fields.find((field) => field.name === "avatar"), [fields]) const imageUrl = useMediaAsset(entry.data.avatar, collection, imageField, entry) From 5010c058df27d46abfa2d4e2560e8d31c17e32ff Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 8 Aug 2024 12:44:03 -0400 Subject: [PATCH 3/5] style: add spacing and remove link within preview --- public/admin/previews/PeoplePreview.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/public/admin/previews/PeoplePreview.js b/public/admin/previews/PeoplePreview.js index 431685e..8dca7a9 100644 --- a/public/admin/previews/PeoplePreview.js +++ b/public/admin/previews/PeoplePreview.js @@ -4,7 +4,7 @@ export const PeoplePreview = ({ entry, collection, fields }) => { return h( "div", - { className: "flex flex-col md:flex-row gap-4 md:gap-8" }, + { className: "flex flex-col mt-4 md:flex-row gap-4 md:gap-8" }, h( "div", { className: "flex-none" }, @@ -18,11 +18,7 @@ export const PeoplePreview = ({ entry, collection, fields }) => { "div", {}, - h( - "a", - { href: imageUrl, className: "text-xl font-semibold underline text-neutral-900" }, - entry.data.name - ), + h("p", { className: "text-xl font-semibold underline text-neutral-900" }, entry.data.name), h("p", { className: "text-neutral-700 italic" }, entry.data.title), h("p", { className: "small" }, entry.data.org) ), From bddfef1ad41732a51c97b39304a194e0d94b4c6e Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:14:48 -0400 Subject: [PATCH 4/5] feat: News preview --- public/admin/index.html | 2 ++ public/admin/previews/NewsPreview.js | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 public/admin/previews/NewsPreview.js diff --git a/public/admin/index.html b/public/admin/index.html index de57e5b..3fce062 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -11,11 +11,13 @@ diff --git a/public/admin/previews/NewsPreview.js b/public/admin/previews/NewsPreview.js new file mode 100644 index 0000000..a0a9593 --- /dev/null +++ b/public/admin/previews/NewsPreview.js @@ -0,0 +1,23 @@ +export const NewsPreview = ({ widgetFor, entry, collection, fields }) => { + const imageField = useMemo(() => fields.find((field) => field.name === "heroImage"), [fields]) + const imageUrl = useMediaAsset(entry.data.heroImage, collection, imageField, entry) + + return h( + "div", + {}, + h("div", { className: "space-y-3 pb-6" }, h("h1", {}, entry.data.title)), + h("hr", { className: "border-none h-0.5 bg-neutral-900 mb-16" }), + h( + "div", + {}, + h( + "div", + {}, + + h("img", { src: imageUrl, className: "w-full" }) + ), + h("time", {}, entry.data.pubDate), + h("div", { className: "text" }, widgetFor("body")) + ) + ) +} From 769df07d8921c420dbbc73546dae91ea2c448311 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:24:01 -0400 Subject: [PATCH 5/5] docs: add info on StaticCMS --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 5dc59e1..55678a0 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Mesoamerican Migration Project ├── public/ ├── admin/ ├──config.yml + ├── previews/ ├── src/ │ ├── components/ @@ -20,6 +21,25 @@ Mesoamerican Migration Project └── tsconfig.json ``` +## StaticCMS + +Link to docs: https://www.staticcms.org/docs/ + +### Collections + +The collections for the CMS are defined in the public/admin/config.yml file. Here is where you can add/remove/edit any +specific fields within a collection, specify output paths for collections, and configure i18n. + +If you edit any fields, make sure they match in astro's content configuration, located in the src/content/config.ts +file. We use zod to type the markdown file frontmatter. + +### Previews + +StaticCMS enables custom previews by exposing a few constructs globally to allow us to create components inline. While +the docs show examples for tsx and jsx, only js files with the h function seem to work at this time. + +When editing styling for the People page or the News page, be sure to edit the corresponding preview pages to match. + ## Getting Started with Development ### Install Dependencies