Using Keystatic & Qwik (or other, non-React frameworks) w/ Astro

[thejackshelton]

I'm trying to use keystatic CMS, and I noticed that you need to use React for the admin dashboard.

I am using Qwik, another JSX framework, in the rest of my project and so the build fails. I am not sure where I need to use the include property for React so that this works properly. I don't see a keystatic specific folder.

What I've tried so far, is using include on the source directory for Qwik, but the React integration will still error out.

I'm assuming someone has run into this issue before trying to use Preact or Solid in their project, but I wasn't able to find anything. Would really appreciate some help on this.

[thejackshelton]

Think I'm getting somewhere with this. Let me know if there's any insights on what I might need to add!

    qwikdev({ exclude: ["**/keystatic/*"] }),
    react({ include: ["**/keystatic/*"] }),

[thejackshelton]

This project really blows my mind how good it is! props to the core team.

[simonswiss]

Hey!

First of all, thank you for the kind words!

Yep — all Keystatic routes will be in the /keystatic/... segment, so what you've got setup with include/exclude should work nicely.

Do you have a public repo example of your setup? Never used Qwik, and curious to see a setup of Keystatic + Astro using Qwik as a framework.

Converting this to a discussion, as other may find it useful 🤙

[thejackshelton]

Hey @simonswiss!

Of course, I love how simple the mental model is of the project.

Do you have a public repo example of your setup? Never used Qwik, and curious to see a setup of Keystatic + Astro using Qwik as a framework.

I didn't before, but I do now!
https://github.com/thejackshelton/qwikdev-keystatic
https://qwikdev-keystatic.pages.dev/posts/about-me/

Qwik's innovation is this thing called javascript streaming. You can think of it like video streaming, but with javascript!

For example, check out the network tab in the demo above, and refresh the page.

Something you'll notice, is that all we grabbed was html and css, there wasn't any javascript! That's because Qwik is an html-first javascript framework.

Now the interesting part, is when you try interacting with the slider. Try dragging or hitting the next and previous buttons of the carousel, you should see these little q-chunks appear in the network on interaction. (kinda like video chunks!)

Like a user pressing play on a video, we "resumed" part of the application. The piece the user interactived with, And this happens instantly, because Qwik does not have hydration. Qwik calls this "resumability"

We can take that a step further and select slow 3g in the throttle tab of our network. What you should see is the swiping behavior happens immediately! Even before the image has time to load in 🤯 .

This is the essence of javascript streaming. Our little q-chunks are prefetched in a separate thread w/ a service worker. In other words, you could theoretically have 1 TB of javascript on the page and it would not matter. The algorithm is O(1)

Qwik core itself also knows when to run on the server and the client. I think it's quite ideal for having a component alongside keystatic. You are getting the performance of html, and the features of javascript that you know and love.

Something to note, is that Qwik component is currently being used alongside keystatic, but not inside the actual content. If I recall, experimental MDX support was added? I would like to try putting that component directly inside the content if you have any direction on that.

[simonswiss]

That's pretty dope!

So — here's some config from my stream yesterday. This is how you can use the experimental MDX field in Keystatic:

// keystatic.config.tsx

// The new experimental MDX field
import { __experimental_mdx_field } from '@keystatic/core/form/fields/markdoc'

// Example collection
caseStudies: collection({
  label: 'Case studies',
  path: 'src/content/case-studies/*',
  // ...
  schema: {
    // ...

    //  The MDX field:
    content: __experimental_markdoc_field({
      label: 'Content',

      // Custom components
      components: {
        Container,
        Stat,
        TextAndImage,
        Testimonial
      }
    })
  }
})

These components are using the new content-components.

Here is the config I made for those, should be useful:

import { block, wrapper } from "@keystatic/core/content-components";
import {containerIcon} from '@keystar/ui/icon/icons/containerIcon'
import {lineChartIcon} from '@keystar/ui/icon/icons/lineChartIcon'
import {newspaperIcon} from '@keystar/ui/icon/icons/newspaperIcon'
import {messageSquareQuoteIcon} from '@keystar/ui/icon/icons/messageSquareQuoteIcon'
import { fields } from "@keystatic/core";

export const Container = wrapper({
  label: 'Container',
  description: 'Layout building block',
  icon: containerIcon,
  schema: {
    tag: fields.select({
      label: 'Tag',
      description: 'The HTML tag to use for the container',
      options: [{
        label: 'div',
        value: 'div'
      }, {
        label: 'section',
        value: 'section'
      }, {
        label: 'header',
        value: 'header'
      }],
      defaultValue: 'div'
    }),
    crop: fields.select({
      label: 'Crop',
      description: 'Max width container and options',
      options: [
        {label: "normal", value: "normal"},
        {label: "narrow", value: "narrow"},
        {label: "narrower", value: "narrower"},
        {label: "bleed", value: "bleed"},
        {label: "boxed", value: "boxed"},
        {label: "narrow-boxed", value: "narrow-boxed"},
      ],
      defaultValue: 'normal'
    }),
    class: fields.text({label: 'Class', description: 'Additional classes to apply to the  container', multiline: true}),
  }
})

export const Stat = block({
  label: 'Stat',
  description: "Flattering stats",
  icon: lineChartIcon,
  ContentView: props => (
    <ul>
      {props.value.data.map((stat, index) => (
        <li key={index}>
          <strong>{stat.stat}</strong>: {stat.text}
        </li>
      ))}
    </ul>
  ),
  schema: {
    colorClass: fields.text({label: 'Color Class'}),
    data: fields.array(fields.object({
      stat: fields.text({label: 'Stat'}),
      text: fields.text({label: 'Text'}),
    }), {
      label: 'Stat', itemLabel: data => `${data.fields.stat.value}: ${data.fields.text.value}`
    })
  }
})

export const TextAndImage = wrapper({
  label: 'Text and Image',
  icon: newspaperIcon,
  schema: {
    title: fields.text({label: 'Title'}),
    textPosition: fields.select({
      label: 'Text Position',
      options: [
        {label: 'Left', value: 'left'},
        {label: 'Right', value: 'right'},
      ],
      defaultValue: 'left'
    }),
    layout: fields.select({
      label: 'Layout',
      options: [
        {label: 'Vertical', value: 'vertical'},
        {label: 'Horizontal', value: 'horizontal'},
      ],
      defaultValue: 'horizontal'
    }),
    headingSize: fields.select({
      label: "Heading Sizes",
      options: [
        {label: "small", value: "small"},
        {label: "medium", value: "medium"},
        {label: "large", value: "large"},
      ],
      defaultValue: 'medium'
    }),
    buttonTitle: fields.text({label: 'Button Title'}),
    buttonLink: fields.text({ label: 'Button Link' }),
    actionButtonLook: fields.text({ label: 'Button Look'}),
    actionButtonSize: fields.text({ label: 'Button Size'}),
    titleTag: fields.select({
      label: 'Title Tag',
      options: [
        {label: 'h2', value: 'h2'},
        {label: 'h3', value: 'h3'},
      ],
      defaultValue: 'h3'
    }),
    image: fields.object({
      src: fields.url({label: 'Image URL', description: 'The Keystatic Cloud URL of the image to display. I know, I know.'}),
      alt: fields.text({label: 'Image Alt'}),
      title: fields.text({label: 'Image Title'}),
      caption: fields.text({label: 'Image Caption', multiline: true}),
      imageClasses: fields.text({label: 'Image Classes'}),
    })
  }
})

export const Testimonial = wrapper({
  label: 'Testimonial',
  icon: messageSquareQuoteIcon,
  schema: {
    author: fields.object({
      avatar: fields.text({label: 'Avatar URL'}),
      name: fields.text({label: 'Name'}),
      bio: fields.text({label: 'Bio', multiline: true}),
      type: fields.select({
        label: 'Type',
        options: [
          {label: 'Simplified', value: 'simplified'},
          {label: 'With Bio', value: 'withBio'},
          {label: 'Testimonial', value: 'testimonial'},
        ],
        defaultValue: 'simplified'
      })  
    }),
    actionButtonLook: fields.select({
      label: 'Button Look',
      options: [
        {label: 'Primary', value: 'primary'},
        {label: 'Secondary', value: 'secondary'},
        {label: 'Link', value: 'link'},
        {label: 'Nav', value: 'nav'},
      ],
      defaultValue: 'primary'
    }),
    actionTitle: fields.text({label: 'Action Title'}),
    actionLink: fields.text({label: 'Action Link'}),
    class: fields.text({label: 'Class'}),
    variant: fields.select({
      label: 'Variant',
      options: [
        {label: 'Normal', value: 'normal'},
        {label: 'Shade', value: 'shade'},
        {label: 'Bold', value: 'bold'},
      ], 
      defaultValue: 'normal'
    })
  }
})

Hope it helps get you on track!