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/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
diff --git a/public/admin/index.html b/public/admin/index.html
index 8c69ee6..3fce062 100644
--- a/public/admin/index.html
+++ b/public/admin/index.html
@@ -1,16 +1,24 @@
-
-
-
- Content Manager
+
+
+
+ Content Manager
-
\ No newline at end of file
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"))
+ )
+ )
+}
diff --git a/public/admin/previews/PeoplePreview.js b/public/admin/previews/PeoplePreview.js
new file mode 100644
index 0000000..8dca7a9
--- /dev/null
+++ b/public/admin/previews/PeoplePreview.js
@@ -0,0 +1,29 @@
+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)
+
+ return h(
+ "div",
+ { className: "flex flex-col mt-4 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("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)
+ ),
+
+ h("p", {}, entry.data.bio)
+ )
+ )
+}