CMS #160

andrecasal · 2023-06-11T08:47:48Z

andrecasal
Jun 11, 2023

Shall we start fleshing out a proper CMS?

I'm thinking admin, manager, and content writer account management, with a create -> review -> publish production cycle.

I'd be happy to open an initial PR for this.

kentcdodds · 2023-06-11T14:02:05Z

kentcdodds
Jun 11, 2023
Maintainer

Thanks for offering to do that! Normally I'd be happy to have you start work on this. But this is one thing I really want to do myself. Maybe you can make an example for folks to reference as an idea of how to do this?

20 replies

simonswiss Mar 5, 2024
Collaborator

Hmmm, looks like these (with trailing underscore) will fallback to root.tsx?

But what if _root.tsx is the thing I'm trying to avoid (and replace with a barebones Remix scaffolding)?

Essentially, I'd like the routes/keystatic_+/$.tsx to use the "vanilla" Remix root:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function KeystaticRoot() {
  return (
    <html lang="en">
      <head>
        <Links />
        <Meta />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

kentcdodds Mar 5, 2024
Maintainer

Ahh, yes, you can't avoid what's in the root.tsx being a wrapper around your app. So what you'll want to do is add a layout route for what's currently in the app (basically take all the stuff in app/routes and put it in app/routes/_app+) and then move as much as possible from app/root.tsx to app/routes/_app+/_layout.tsx, then you'll be able to do what I suggested before with much less in the way from the rest of the app.

Sorry it's kind of confusing. This is one reason the Remix team wants to get rid of file-based routing. It's like a whole other language. For myself I have mixed feelings because I think once learned it's valuable, but until you decide it's a thing to be learned it's just really annoying.

kiliman Mar 5, 2024

Another option is to change your root to render different layouts based on the route. This way, you don't have to change your existing route filenames.

There are a couple of ways to do this:

Simply useLocation, check the path, and render a different <Layout> for /blog/*, for example.
Another option is to export a custom layout as a handle in your blog route. Then, in root, it looks for the layout handle via useMatches.

// root.tsx

function DefaultLayout() {
  // whatever your app layout would be
}

export default function App() {
  // see if there's a route that has a custom Layout handle
  const Layout = useMatches().find(m => m.handle?.Layout)?.handle.Layout ?? DefaultLayout

  return <Layout><Outlet /></Layout>
}

// routes/blog.tsx
export const handle = { 
  Layout: CustomLayout
}

function CustomLayout() {
  return // custom layout
}

mwheatfill Mar 5, 2024

@simonswiss sorry I thought there may have been a way to avoid such large changes to root.tsx! Thanks for the explanation @kentcdodds

simonswiss Mar 6, 2024
Collaborator

I did something similar to what @kiliman suggests, using useLocation() to determine if this is a Keystatic route, and render a much simpler layout if that's the case.

Still had to pass the nonce for it to work properly — not sure if this is the ideal setup but it works great!

simonswiss/epic-stack-with-keystatic@3959a0a

vinstah · 2023-08-02T23:24:48Z

vinstah
Aug 2, 2023

since Strapi is open source that might be a good place to look into seeing how some parts can work in Epic Stack

6 replies

vinstah Aug 2, 2023

yeah, Strapi has the advantage of being JS/React not PHP, similar though is SilverStripe CMS https://silverstripe.github.io/silverstripe-pattern-lib/

supersonicart Aug 24, 2023

Is WordPress used that often with React based frameworks?

victorkane Sep 3, 2023

WordPress is a React based framework. It uses the new block based editor which is something that I believe is a React SSG. I mean, you click on Save, and React blocks are compiled into WordPress-ese (html + block data expressed in html comments) which is stored in the database as content. Visitors get that. It's a SSG and uses the Gutenberg (now called "WordPress") editor. It's worth a long conversation!!!

victorkane Sep 3, 2023

I have spent many years with Drupal which, while WordPress eschews "custom post types", revels in structured content and separation of concerns in a quasi-MVC context. Unlike Directus (which made the switch from PHP to Node/Vue and so can scale and is awesome except even with a paid cloud plan you don't get access to the database you're using), it is (my opinion) in slow and not so slow decline since it cannot scale even though it keeps "renovating" itself on an over-complexity island. But many of its principles (hooks, separation of concerns, importance of structured content and built-in visual data query builder, to name a few) are worthy of discussion. Another CMS that made the switch from PHP to Node.js is Keystone, which I also tried to use (another worthy discussion). Looking forward to discussing and sharing my experience using any of the CMS I am mentioning; yes CMS's have played a large part in my life...

victorkane Sep 3, 2023

I have used Strapi for several years (early on in its existence) and it is worthy of discussion because it has remained open source, is built on full stack principles; and for the (my opinion) huge mistakes it has made and has built-in, unfortunately. One fantastic example is that instead of using Prisma, it directly supports SQLite, MongoDB and at least one SQL server driven database (can't remember if it's MySql or PostgreSQL (one is implemented, the other is "coming soon")) instead of using an ORM (as Remix brilliantly does with Prisma). So Strapi is worthy of discussion because 1) It's open stack and has great strengths; and 2) It's baked-in flaws which (my opinion) stunt its growth.

supersonicart · 2023-08-11T12:54:34Z

supersonicart
Aug 11, 2023

I am using Sanity with my Epic Stack for basic content management and blog posts: it is working epically well!

4 replies

andrecasal Aug 24, 2023
Author

I love Sanity, but even though you can self-host its frontend, you can't self-host your data. This creates a third-party service dependency which isn't ideal. The content is also centralized in Sanity's Content Lake, in US servers, which raises some data privacy issues for folks in the EU.

supersonicart Aug 24, 2023

Sanity hosting the content really simplifies things for me; but then again a CMS built into the Epic Stack framework would be much nicer. Especially if it had features like user analytics, stripe integration/analytics, etc.

andrecasal Aug 25, 2023
Author

Giving Sanity a try. The post schema is already defined in /sanity/schemas/post.ts, but it seems Sanity doesn't have a way to convert this into a type, so there's no type safety across the network boundary when we query for posts (or anything really). I'm using zod to validate the data coming from the queries, which is redundant. How did you solve this? 😅

supersonicart Sep 3, 2023

I'd suggest take a look in Sanity's docs - or hitting them up on their Slack for the directly specific answer you're looking for. I believe the answer lies in the way you query your data?

andrecasal · 2023-08-29T07:56:56Z

andrecasal
Aug 29, 2023
Author

I tried out Sanity on a branch and here are some cons to consider:

3rd party dependency
Data lives on Sanity servers
Requires you to mock this service for local dev and testing
Pulling data in requires you to learn GROQ (it's easy)
Sanity gives you article/blog data formatted using Portable Text, which adds another package to the frontend, doesn't add any functionality over Markdown, and takes some work to extend if you have custom elements like <CodeBlock>'s, for example.

The only 'pro' I found is that the DX is excellent with Sanity Studio.

Sanity's use-case is when you want to create content at scale and distribute it to multiple channels.

That being said, I'm going back to what I've always used: MDX. The only con is that each article is its own file. But in practice, this just means that after a few tens of articles you start using search on the file system (just like you would use search on your CMS's backend). It's not a big drawback and you have the full power of JSX to insert custom components (code blocks, design elements, backgrounds, etc) in the middle of your articles.

Update

After tinkering with MDX for a few hours, given you have a UI library to lean on, I saw little benefit in writing time and plenty of formatting drawbacks.

P.S.: I'm open sourcing my own UI library soon, if you're interested.

1 reply

victorkane Sep 3, 2023

For MDX files in the file system, the flat file CMS Front Matter CMS (a VS Code extension) may be a solution, with images, categories and tags also, as well as relationsips between articles, authors, etc. which it manages via schema. They mention Hugo, Next.js and Astro integration in the docs, but the configuration is customizable. It offers another interesting approach to study.

victorkane · 2023-09-03T08:25:12Z

victorkane
Sep 3, 2023

Hi everyone. Sorry I'm making so many comments, but CMS is really my thing. Got one question, tho... Isn't the Epic Stack its own CMS, in many ways? Or, could be. I do understand that the goal of the CMS would be to improve team synergy via a single source of truth for two things: structured content modeling for each project, and the content creation workflow. Then we need a Figma for single source of truth for design system. WordPress, for example, tries to be all things for all persons, which is a strength and a weakness (or is it?). OK, so in this discussion "CMS" really needs to be defined.

0 replies

victorkane · 2023-09-03T10:04:23Z

victorkane
Sep 3, 2023

One reference example must-see I believe is Payload CMS "headless" CMS, schema based, depending on Node.js and MongoDB. Write typescript config schema -> 1) DB created 2) (customizable) Admin UI created 3) API created -> You manage your own server Express app

No black magic, all TypeScript, and fully open-source.

They have both paid cloud as well as self-hosting.

Docs: https://payloadcms.com/docs/getting-started/what-is-payload
Demo: https://demo.payloadcms.com/admin/create-first-user
Recently streamed discussion on YouTube concerning their immediate and future roadmap: Payload Planning: Live Preview and Improved Admin UI
GitHub discussion on Roadmap: https://github.com/payloadcms/payload/discussions/categories/roadmap
- Prisma for more db???
- Switching from Slate to Lexical markdown editor component
- Lot of consideration on UI and accessibility for technical as well as non-technical users
Their architecture seems to be much leaner and meaner than Strapi but with obvious similarities

1 reply

MoSattler Dec 26, 2023

Payload is great, I got to use it a couple of times, and I really like it.
Looks like SQLite support will be shipped soon.

The only problem I see is that they use Drizzle, while Epic-Stack uses Prisma.

@kentcdodds Would love to hear your thoughts on PayloadCMS.

bjornbrasse · 2023-09-23T15:52:29Z

bjornbrasse
Sep 23, 2023

What about KeystoneJS, headless CMS...??

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CMS #160

{{title}}

Replies: 7 comments 32 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

CMS #160

Replies: 7 comments · 32 replies

kentcdodds Jun 11, 2023 Maintainer

simonswiss Mar 5, 2024 Collaborator

kentcdodds Mar 5, 2024 Maintainer

simonswiss Mar 6, 2024 Collaborator

andrecasal Aug 24, 2023 Author

andrecasal Aug 25, 2023 Author

andrecasal Aug 29, 2023 Author

Update

Replies: 7 comments 32 replies

kentcdodds
Jun 11, 2023
Maintainer

simonswiss Mar 5, 2024
Collaborator

kentcdodds Mar 5, 2024
Maintainer

simonswiss Mar 6, 2024
Collaborator

andrecasal Aug 24, 2023
Author

andrecasal Aug 25, 2023
Author

andrecasal
Aug 29, 2023
Author