@sandboxsonny/ace-kit 0.5.0 → 0.7.0

package/templates/react-router/app/app.css

@@ -0,0 +1,257 @@
+:root {
+  --colour-background: #ffffff;
+  --colour-surface: #f4f6f8;
+  --colour-text: #1b2430;
+  --colour-muted: #5b6776;
+  --colour-accent: #2f5bea;
+  --colour-accent-text: #ffffff;
+  --content-width: 64rem;
+  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  line-height: 1.6;
+  color: var(--colour-text);
+  background: var(--colour-background);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: var(--colour-accent);
+}
+
+.container {
+  width: min(100% - 2rem, var(--content-width));
+  margin-inline: auto;
+}
+
+.button {
+  display: inline-block;
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+  background: var(--colour-accent);
+  color: var(--colour-accent-text);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.section {
+  padding-block: 3rem;
+}
+
+.section--surface {
+  background: var(--colour-surface);
+}
+
+/* The header */
+.site-header {
+  border-bottom: 1px solid var(--colour-surface);
+}
+.site-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 1rem;
+}
+.site-header__name {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--colour-text);
+  text-decoration: none;
+}
+.site-header__links {
+  display: flex;
+  gap: 1.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.site-header__links a {
+  color: var(--colour-muted);
+  text-decoration: none;
+}
+.site-header__links > li {
+  position: relative;
+}
+.site-header__sublinks {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  left: 0;
+  min-width: 12rem;
+  margin: 0;
+  padding: 0.5rem 0;
+  list-style: none;
+  background: var(--colour-background);
+  border: 1px solid var(--colour-surface);
+  border-radius: 0.5rem;
+}
+.site-header__sublinks li {
+  position: relative;
+}
+.site-header__sublinks a {
+  display: block;
+  padding: 0.4rem 1rem;
+  white-space: nowrap;
+}
+.site-header__sublinks--deep {
+  top: 0;
+  left: 100%;
+}
+.site-header__links > li:hover > .site-header__sublinks,
+.site-header__links > li:focus-within > .site-header__sublinks,
+.site-header__sublinks li:hover > .site-header__sublinks,
+.site-header__sublinks li:focus-within > .site-header__sublinks {
+  display: block;
+}
+.site-header__links a[aria-current="page"] {
+  color: var(--colour-text);
+  font-weight: 600;
+}
+
+/* The footer */
+.site-footer {
+  margin-top: 3rem;
+  padding-block: 2rem;
+  background: var(--colour-surface);
+  color: var(--colour-muted);
+  font-size: 0.9rem;
+}
+
+/* A page */
+.prose {
+  max-width: 42rem;
+}
+.intro {
+  color: var(--colour-muted);
+  font-size: 1.125rem;
+}
+.prose figure {
+  margin: 2rem 0;
+}
+.prose figure img {
+  border-radius: 0.5rem;
+}
+.rich-text > * + * {
+  margin-top: 1rem;
+}
+.rich-text h2 {
+  font-size: 1.75rem;
+}
+.rich-text h3 {
+  font-size: 1.4rem;
+}
+.rich-text h4 {
+  font-size: 1.15rem;
+}
+.rich-text ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+}
+.rich-text ol {
+  list-style: decimal;
+  padding-left: 1.5rem;
+}
+.rich-text blockquote {
+  border-left: 4px solid var(--colour-muted);
+  padding-left: 1rem;
+  font-style: italic;
+}
+.published {
+  color: var(--colour-muted);
+  font-size: 0.9rem;
+}
+.actions {
+  margin-top: 2rem;
+}
+
+/* Sections: a hero, an FAQ and a gallery (see components/sections) */
+.hero {
+  padding-block: 3rem;
+}
+.hero__inner {
+  display: grid;
+  gap: 2rem;
+  align-items: center;
+}
+@media (min-width: 48rem) {
+  .hero__inner--with-picture {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.hero h2 {
+  margin: 0 0 0.75rem;
+  font-size: 2.25rem;
+  line-height: 1.15;
+}
+.hero__subheading {
+  margin: 0 0 1.5rem;
+  color: var(--colour-muted);
+  font-size: 1.15rem;
+}
+.hero__picture img {
+  border-radius: 0.5rem;
+}
+
+.faq {
+  max-width: 42rem;
+}
+.faq h2 {
+  margin: 0 0 1rem;
+  font-size: 1.75rem;
+}
+.faq details {
+  border-bottom: 1px solid var(--colour-surface);
+  padding-block: 0.75rem;
+}
+.faq summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.faq__answer {
+  margin-top: 0.5rem;
+  color: var(--colour-muted);
+}
+.faq__answer > * + * {
+  margin-top: 0.75rem;
+}
+
+.gallery__note {
+  margin: 0 0 1rem;
+  color: var(--colour-muted);
+  font-size: 0.9rem;
+}
+.gallery__photos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.gallery__photos figure {
+  margin: 0;
+}
+.gallery__photos img {
+  border-radius: 0.5rem;
+  width: 100%;
+  object-fit: cover;
+}
+.gallery__photos figcaption {
+  margin-top: 0.4rem;
+  color: var(--colour-muted);
+  font-size: 0.9rem;
+}

package/templates/react-router/app/components/page-content.tsx

@@ -0,0 +1,55 @@
+import { formatAceDate } from "@sandboxsonny/ace-kit";
+import type { AceEntry } from "@sandboxsonny/ace-kit";
+import { AceImage, AceLink, AceRichText, AceSections, AceTextArea } from "@sandboxsonny/ace-kit/react-router";
+
+import { Faq } from "~/components/sections/faq";
+import { Gallery } from "~/components/sections/gallery";
+import { Hero } from "~/components/sections/hero";
+import type { PageValues } from "~/types/page";
+
+/** An entry of the "Pages" content type: its title (or headline), description, hero image, body, button and sections. */
+export function PageContent({ entry }: { entry: AceEntry<PageValues> }) {
+  const { headline, body, hero, published, button, content } = entry.values;
+  return (
+    <>
+      <section className="section">
+        <div className="container prose">
+          <h1>{headline || entry.title}</h1>
+          {entry.description ? <p className="intro">{entry.description}</p> : null}
+          {
+            // A date field is a day with no time of day, so it is the same day wherever the server runs.
+            published ? (
+              <p className="published">
+                Published <time dateTime={published}>{formatAceDate(published, { locale: "en-GB" }) ?? published}</time>
+              </p>
+            ) : null
+          }
+          {hero ? (
+            <figure>
+              <AceImage image={hero} sizes="(min-width: 64rem) 64rem, 100vw" lazy={false} />
+            </figure>
+          ) : null}
+          {
+            // A site made before its Body field was rich text still has plain text, with blank lines between paragraphs.
+            typeof body === "string" ? (
+              <AceTextArea value={body} />
+            ) : body ? (
+              <div className="rich-text">
+                <AceRichText document={body} />
+              </div>
+            ) : null
+          }
+          {
+            // A link field: the editor's words and where it goes, already worked out by the CMS.
+            button ? (
+              <p className="actions">
+                <AceLink link={button} className="button" />
+              </p>
+            ) : null
+          }
+        </div>
+      </section>
+      <AceSections sections={content} components={{ hero: Hero, faq: Faq, gallery: Gallery }} />
+    </>
+  );
+}

package/templates/react-router/app/components/sections/faq.schema.ts

@@ -0,0 +1,17 @@
+import { defineSection } from "@sandboxsonny/ace-kit";
+
+// An FAQ is a heading and a list of questions. The questions are blocks: the editor adds as many as they like.
+export default defineSection({
+  handle: "faq",
+  name: "FAQ",
+  fields: [{ handle: "heading", label: "Heading", type: "text" }],
+  blocks: {
+    question: {
+      name: "Question",
+      fields: [
+        { handle: "question", label: "Question", type: "text", required: true },
+        { handle: "answer", label: "Answer", type: "richtext" },
+      ],
+    },
+  },
+});

package/templates/react-router/app/components/sections/faq.tsx

@@ -0,0 +1,26 @@
+import type { SectionOf } from "@sandboxsonny/ace-kit";
+import { AceRichText } from "@sandboxsonny/ace-kit/react-router";
+
+import type faq from "./faq.schema";
+
+/** An FAQ: a heading and a list of questions, each a block. Its fields and blocks are in faq.schema.ts. */
+export function Faq({ section }: { section: SectionOf<typeof faq> }) {
+  const { heading } = section.values;
+  return (
+    <section className="section" data-section={section.type}>
+      <div className="container faq">
+        {heading ? <h2>{heading}</h2> : null}
+        {section.blocks.map((block) => (
+          <details key={block.id}>
+            <summary>{block.values.question}</summary>
+            {block.values.answer ? (
+              <div className="faq__answer">
+                <AceRichText document={block.values.answer} />
+              </div>
+            ) : null}
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/react-router/app/components/sections/gallery.schema.ts

@@ -0,0 +1,20 @@
+import { defineSection } from "@sandboxsonny/ace-kit";
+
+// A gallery is a heading, a date and a list of photos. The photos are blocks.
+export default defineSection({
+  handle: "gallery",
+  name: "Gallery",
+  fields: [
+    { handle: "heading", label: "Heading", type: "text" },
+    { handle: "published", label: "Published", type: "date" },
+  ],
+  blocks: {
+    photo: {
+      name: "Photo",
+      fields: [
+        { handle: "image", label: "Image", type: "image" },
+        { handle: "caption", label: "Caption", type: "text" },
+      ],
+    },
+  },
+});

package/templates/react-router/app/components/sections/gallery.tsx

@@ -0,0 +1,39 @@
+import { formatAceDate } from "@sandboxsonny/ace-kit";
+import type { SectionOf } from "@sandboxsonny/ace-kit";
+import { AceImage } from "@sandboxsonny/ace-kit/react-router";
+
+import type gallery from "./gallery.schema";
+
+/** A gallery: a heading, a date and a list of photos, each a block. Its fields and blocks are in gallery.schema.ts. */
+export function Gallery({ section }: { section: SectionOf<typeof gallery> }) {
+  const { heading, published } = section.values;
+  const photos = section.blocks.filter((block) => block.values.image || block.values.caption);
+  return (
+    <section className="section" data-section={section.type}>
+      <div className="container">
+        {heading ? <h2>{heading}</h2> : null}
+        {published ? (
+          <p className="gallery__note">
+            <time dateTime={published}>{formatAceDate(published, { locale: "en-GB" }) ?? published}</time>
+          </p>
+        ) : null}
+        {photos.length > 0 ? (
+          <ul className="gallery__photos">
+            {photos.map((photo) => (
+              <li key={photo.id}>
+                <figure>
+                  {photo.values.image ? (
+                    <AceImage image={photo.values.image} sizes="(min-width: 48rem) 20rem, 100vw" />
+                  ) : null}
+                  {photo.values.caption ? <figcaption>{photo.values.caption}</figcaption> : null}
+                </figure>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="gallery__note">No photos yet.</p>
+        )}
+      </div>
+    </section>
+  );
+}

package/templates/react-router/app/components/sections/hero.schema.ts

@@ -0,0 +1,14 @@
+import { defineSection } from "@sandboxsonny/ace-kit";
+
+// What a hero can hold. The CMS learns it from this file (the dev server syncs it when it changes), and Hero.astro's
+// props are typed from it.
+export default defineSection({
+  handle: "hero",
+  name: "Hero",
+  fields: [
+    { handle: "heading", label: "Heading", type: "text", required: true },
+    { handle: "subheading", label: "Subheading", type: "textarea" },
+    { handle: "picture", label: "Picture", type: "image" },
+    { handle: "button", label: "Button", type: "link" },
+  ],
+});

package/templates/react-router/app/components/sections/hero.tsx

@@ -0,0 +1,25 @@
+import type { SectionOf } from "@sandboxsonny/ace-kit";
+import { AceImage, AceLink } from "@sandboxsonny/ace-kit/react-router";
+
+import type hero from "./hero.schema";
+
+/** A hero: a heading, an optional subheading and button, and an optional picture. Its fields are in hero.schema.ts. */
+export function Hero({ section }: { section: SectionOf<typeof hero> }) {
+  const { heading, subheading, picture, button } = section.values;
+  return (
+    <section className="hero section--surface" data-section={section.type}>
+      <div className={picture ? "container hero__inner hero__inner--with-picture" : "container hero__inner"}>
+        <div>
+          <h2>{heading}</h2>
+          {subheading ? <p className="hero__subheading">{subheading}</p> : null}
+          {button ? <AceLink link={button} className="button" /> : null}
+        </div>
+        {picture ? (
+          <div className="hero__picture">
+            <AceImage image={picture} sizes="(min-width: 64rem) 32rem, 100vw" lazy={false} />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/templates/react-router/app/components/site-footer.tsx

@@ -0,0 +1,9 @@
+export function SiteFooter() {
+  return (
+    <footer className="site-footer">
+      <div className="container">
+        <p>© {new Date().getFullYear()} Example Site. A test site for CMS Ace.</p>
+      </div>
+    </footer>
+  );
+}

package/templates/react-router/app/components/site-header.tsx

@@ -0,0 +1,49 @@
+import { isInternalPath } from "@sandboxsonny/ace-kit";
+import type { AceNavigationLink } from "@sandboxsonny/ace-kit";
+import { NavLink } from "react-router";
+
+/** One link: a router link for a page of this site (which marks the current page), a plain one for anywhere else. */
+function HeaderLink({ link }: { link: AceNavigationLink }) {
+  return isInternalPath(link.to) ? (
+    <NavLink to={link.to} end>
+      {link.label}
+    </NavLink>
+  ) : (
+    <a href={link.to}>{link.label}</a>
+  );
+}
+
+function SubLinks({ links, deep = false }: { links: AceNavigationLink[]; deep?: boolean }) {
+  return (
+    <ul className={deep ? "site-header__sublinks site-header__sublinks--deep" : "site-header__sublinks"}>
+      {links.map((link) => (
+        <li key={`${link.to}|${link.label}`}>
+          <HeaderLink link={link} />
+          {link.children && link.children.length > 0 ? <SubLinks links={link.children} deep /> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function SiteHeader({ links }: { links: AceNavigationLink[] }) {
+  return (
+    <header className="site-header">
+      <div className="container site-header__inner">
+        <a href="/" className="site-header__name">
+          Example Site
+        </a>
+        <nav aria-label="Main">
+          <ul className="site-header__links">
+            {links.map((link) => (
+              <li key={`${link.to}|${link.label}`}>
+                <HeaderLink link={link} />
+                {link.children && link.children.length > 0 ? <SubLinks links={link.children} /> : null}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/react-router/app/entry.server.tsx

@@ -0,0 +1 @@
+export { handleRequest as default, streamTimeout } from "@sandboxsonny/ace-kit/react-router/server";

package/templates/react-router/app/root.tsx

@@ -0,0 +1,75 @@
+import { useAceMenu, useAcePreview } from "@sandboxsonny/ace-kit/react-router";
+import { createRootLoader } from "@sandboxsonny/ace-kit/react-router/server";
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+
+import type { Route } from "./+types/root";
+import { SiteFooter } from "~/components/site-footer";
+import { SiteHeader } from "~/components/site-header";
+import stylesheet from "./app.css?url";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+  { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
+];
+
+// The header's links come from the CMS menu with the handle "main-menu", or from these if the site has none yet
+// or the CMS can't be reached.
+export const loader = createRootLoader({
+  menu: "main-menu",
+  fallback: [
+    { label: "Home", to: "/" },
+    { label: "About", to: "/pages/about" },
+    { label: "Contact", to: "/pages/contact" },
+  ],
+});
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  useAcePreview(); // in the CMS's preview frame, redraws the page when the editor saves a draft
+
+  return (
+    <>
+      <SiteHeader links={useAceMenu()} />
+      <main>
+        <Outlet />
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const notFound = isRouteErrorResponse(error) && error.status === 404;
+  return (
+    <main className="section">
+      <div className="container">
+        <h1>{notFound ? "Page not found" : "Something went wrong"}</h1>
+        <p>
+          {notFound
+            ? "There's nothing at this address."
+            : "This page can't be shown right now. Please try again shortly."}
+        </p>
+        <a href="/" className="button">
+          Back to the home page
+        </a>
+      </div>
+    </main>
+  );
+}