Tina.io website

Source code for the tina.io website.

Development

cp .env.example .env.local
yarn install
yarn develop

Testing Local TinaCMS Changes

If you have the tinacms repository cloned locally you can use it when running tina.io:

TINA=../path/to/tinacms yarn develop

You can also specify which packages you want to watch:

TINA=../path/to/tinacms TINA_WATCH=@tinacms/forms,react-tinacms-inline

Warning

This will only work for packages loaded by webpack. That means that environments which don't use webpack (i.e. SSR builds) will not use this alias.

Shortcodes

This site supports shortcodes in Markdown content via remark-shortcodes.

Shortcodes must be written as React components. To add a shortcode, export it from utils/shortcodes.tsx.

export function MyShortcode({ textContent }) {
  return <div>{textContent}</div>
}

Call the shortcode in your content by writing the name of the component encased in double curly braces. Key-value pairs included in the shortcode will be passed to your component as props.

{{ MyShortcode textContent="Example shortcode" }}

Shortcode Limitations

Shortcodes must be standalone elements; "wrapping" shortcodes will not work.

Copy-able Code Blocks

A "Copy" button can be added to Code Blocks by adding the copy tag to fenced code blocks.

Non-copyable JS

```js
const christmastPresent = new Banana()
```

Copyable JS

```js,copy
const christmastPresent = new Banana()
```

Copyable Text

```copy
Hello World
```