Images 🎆

I've added an Image Component to my CMS 🎉🥳🎉. Currently, the only way you can add an image is to copy and paste it into the content editor. The pasted image is then uploaded to Google Cloud where it is hosted publicly.

A cool feature of this CMS is that it lets you change how content is displayed depending on whether the user is currently editing or viewing a page. a

Font Size

// Paragraph.block.tsx
export const config = {
  name: "p"
}

// optional
export const renderEditor = function EditorParagraph({
  attributes,
  children,
}) {
  return <p {...attributes}>{children}</p>
}

export default function Paragraph({
  attributes,
  children,
}) {
  return (
    <Text
      css={css`
        margin-bottom: 1.2em;
        margin-top: 1.2em;
      `}
      {...attributes}
    >
      {children}
    </Text>
  )
}

As an example here is how you would create a Paragraph component that renders a plain <p/> tag in the editor interface but then renders a <Text/> component when viewing the page. This example is a bit contrived as it would make more sense to remove the `renderEditor` and use the Paragraph function component for the editor and public views, but it still shows how the general block setup works.

This ability to chance how something looks in

While in the editor view the Image Component displays the original image file, then when in public mode it uses the `next/image` component to automatically resize the image to an optimal size

Here is a snapshot of my content editor, inside my content editor 🤯