Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 26, 2021 05:34 pm GMT

Tina now Supports MDX

The team at Tina is dedicated to revolutionizing the CMS space. We were the first to offer contextual editing in real-time which enabled teams to be more productive. Now we are introducing the worlds first UI editor for MDX. This empowers content teams to add components to a page with a single click.

You can see our starter repository on our GitHub or select Documentation Starter when going through our quickstart flow.

Why MDX?

MDX provides the ability to write JSX into Markdown files, which gives developers the ability to create content that is dynamic, interactive, and customizable. The problem with MDX, by nature, is you need to have some technical understanding to be able to both use and create content using MDX. This is where we have empowered non-technical members of your team to leverage reusable components with a single click. This means that content teams can move quickly and developers can focus on other projects.

How to start using MDX?

We have made the developer experience a breeze, you can check out our documentation or check out the steps to start using MDX :

Update to the latest version Tina

You will need to update tinacms and @tinacms/cli to the latest versions to use the MDX features.

Create your components you want your content team to use.

Create a component as you normally would and use props for any part you would like to be editable, below is an example of a callout component:

...export default function Callout({callout}) {return(          <CalloutWrapper type={backgroundColor[callout.type]} >          <CalloutLabel >{label[callout.type] || callout.type}</CalloutLabel>          <CalloutText textColor={textColor[callout.type] || textColor.default}>{callout?.text}</CalloutText>        </CalloutWrapper>)}
  1. Add the fields for your components to your schema.ts
...{          type: "rich-text",          label: "Body",          name: "body",          templates: [            {              name: "Callout",              label: "Callout",              fields:[                {                  name: "type",                  label: "Type",                  type: "string",                  options: ["default", "warning", "error"],                },                {                  name: "text",                  label: "Text",                  type: "string",                },              ]            },        ],          isBody: true,},...
  1. Add the components to your Tina powered pages.
//importsimport { TinaMarkdown } from "tinacms/dist/rich-text";import Callout from "../../blocks/callout-block";const components = {  Callout: (props) => {    return <Callout callout={props} />;  },};// Code removed for simplification<TinaMarkdown components={components}>          {props.data.getDocsDocument.data.body}</TinaMarkdown>

Ready to get started?

You can see our starter repository on our GitHub or select Documentation Starter when going through our quickstart flow.


Original Link: https://dev.to/tinacms/tina-now-supports-mdx-2jki

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To