CMS Thoughts

Table of contents

• Keystone JS
  • How to add a slug field to KeystoneJS v6 using hooks
• Strapi
  • Strapi related links
  • REST API Example
  • GraphQL Example
• Directus
• ApostropheCMS
• CraftCMS

Keystone JS

Kinda love it, though... 🤓

• no "real" slug field? 🤔 so how to query blog posts? only way seams a manual slug field or a custom field¿!
• dislike the slide-in pop-over when creating a new item, editing later is fine
• how to add images to wysiwyg¿? WIP

How to add a slug field to KeystoneJS v6 using hooks

Kay I just figured out a way of building it myself using hooks

export const lists: Lists = {
  Post: list({
    fields: {
      title: text(),
      slug: text({
        isIndexed: "unique",
      }),
    },
    hooks: {
      resolveInput: ({ resolvedData, item, inputData }) => {
        if (inputData.slug === "" || !item?.slug) {
          resolvedData.slug = resolvedData.title || item?.title || "";
        }
        if (resolvedData.slug) {
          resolvedData.slug = slugify(resolvedData.slug);
        }
        return resolvedData;
      },
    },
  }),
};

This behaves exactly as I think a slug field should. Initially (when empty) it'll be auto-populated on save from the title field. Later when updating the title it stays the same to not "break the site" but gives me the freedom to edit the slug however I see fit, or empty it to make it auto-generate from title field on save.

Also it should be possible to prevent it from changing if the item is already published, if that's a requirement, or send old, non-empty slugs to your redirection database to make sure it'll never end up in 404s.

I must say this hook system is really fantastic 👏

If I can now figure out how to add images to the document field (WYSIWYG) I might be convinced 🥰.
Solved the image problem in How to add images to WYSIWYG in Keystone v6 🥳

• Getting started with create keystone app
• How do I query my API for a single entity by its "slug" with GraphQL?

Strapi

Ridiculous field "styles", the widths aren't customizable and at least within Dynamic Zones most fields are half width 🤦🏻‍♂️

I mean

Strapi related links

• Official Strapi Website
• Change width of fields on Edit page
• Headless CMS and Strapi SEO best practices
• Create is owner policy (Apply the author by default)
• Strapi - working with relationships and how to use Graphql for nested relations
• Run Strapi on existing server (e.g. Next.js)
• How to: Strapi GraphQL mutation with dynamic zones/component
• How to Create Pages on the fly with Dynamic Zone
• Strapi CMS v4 Custom Field Type Renderer
• Strapi Security Checklist
• How to Build a Notion Clone With Strapi and Next.js 1/2
• Handle previews in a headless architecture
• How to Setup & Use Strapi to Store your app's logs
• Create a Url Shortener using NextJs, Tailwind CSS and Strapi
• Strapi V4 search by slug instead ID
• Strapi plugin gutenberg-editor
• How to change the WYSIWYG in Strapi
• Admin Panel API for plugins

REST API Example

http://localhost:1337/api/posts?publicationState=preview&populate=*&filters[slug][$eq]=erster-artikel&locale=de

GraphQL Example

{
  posts(
    publicationState: PREVIEW
    filters: { slug: { eq: "first-blog-post-due" } }
    pagination: { limit: 1 }
  ) {
    __typename
    data {
      id
      attributes {
        createdAt
        publishedAt
        Title
        Content {
          __typename
          ... on ComponentContentHeading {
            id
            Heading
            Level
          }
          ... on ComponentContentParagraph {
            id
            Paragraph
          }
          ... on ComponentContentQuote {
            id
            Quote
            Source
          }
          ... on ComponentContentCode {
            id
            Code
          }
          ... on ComponentContentList {
            id
          }
        }
      }
    }
  }
}

Directus

Directus Website

• Currently (v9.5.1) missing an integrated way for a linked slug field. 🤯 #4231
• Images show as broken once added to wysiwyg editor #10469

ApostropheCMS

ApostropheCMS Website ApostropheCMS Repo

CraftCMS

CraftCMS Website
It's PHP, but I especially don't like the restriction on having only a "Single admin account" in the free version, although I kinda get the idea 😇

Best way to try it locally is Craft Nitro, though I haven't actually tried it 😅