initial commit after project creation

2026-04-01 09:38:50 +02:00
commit b02af637d4
292 changed files with 61408 additions and 0 deletions
--- a/content/docs/tinadocs-features/code-components.mdx
+++ b/content/docs/tinadocs-features/code-components.mdx
@@ -0,0 +1,253 @@
+---
+title: Code Components
+last_edited: '2025-07-30T02:30:04.636Z'
+auto_generated: false
+---
+
+Several components have been implemented to help out with software documentation.
+
+## Code Blocks
+
+For multiline code samples, use triple backticks. You can also specify which language is used in the fenced code block for associated code highlighting.
+
+```javascript
+js function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+### Syntax Highlighting
+
+TinaDocs uses [Shiki](https://shiki.style/) to power code block rendering, because of this you are able to also use [Shiki's Transformer Notation](https://shiki.style/guide/transformers) for special highlighting.
+
+```javascript
+console.log('This is a highlighted block') // [!code highlight]
+
+It uses "[!code highlight]" in a comment after the code
+```
+
+### Diff Highlighting
+
+```javascript
+console.log('This is a negative diff') // [!code --]
+console.log('This is a positive diff') // [!code ++]
+
+It uses "[!code --]" or "[!code ++]" in a comment after the code
+```
+
+### Focused Highlighting
+
+```javascript
+console.log('Junk Code');
+console.log('Focused Code'); // [!code focus]
+console.log('More hidden code');
+
+It uses "[!code focus]" in a comment after the code
+```
+
+## Tabbed Code Blocks
+
+Tabbed code blocks let you present multiple language variants or configurations side-by-side—ideal for showing equivalent code in JavaScript, TypeScript, Bash, or specific queries and responses.
+
+This improves readability and UX for polyglot dev environments.
+
+<codeTabs
+  tabs={[
+    {
+      name: "cURL",
+      content: "curl<72>-<2D>X<EFBFBD>GET<45>https://jsonplaceholder.typicode.com/posts/1",
+      language: "shell"
+    },
+    {
+      name: "Response",
+      content:
+        '{\n<><6E>"userId":<3A>1,\n<><6E>"id":<3A>1,\n<><6E>"title":<3A>"sunt<6E>aut<75>facere<72>repellat<61>provident<6E>occaecati<74>excepturi<72>optio<69>reprehenderit",\n<><6E>"body":<3A>"quia<69>et<65>suscipit\\nsuscipit<69>recusandae<61>consequuntur<75>expedita<74>et<65>cum..."\n}',
+      language: "json"
+    }
+  ]}
+  initialSelectedIndex={1}
+/>
+
+<codeTabs
+  tabs={[
+    {
+      name: "React",
+      content:
+        "import<72>React,<2C>{<7B>useState<74>}<7D>from<6F>'react';\n\nfunction<6F>Counter()<29>{\n<><6E>const<73>[count,<2C>setCount]<5D>=<3D>useState(0);\n\n<><6E>return<72>(\n<><6E><EFBFBD><EFBFBD><div>\n<><6E><EFBFBD><EFBFBD><EFBFBD><EFBFBD><p>Count:<3A>{count}</p>\n<><6E><EFBFBD><EFBFBD><EFBFBD><EFBFBD><button<6F>onClick={()<29>=><3E>setCount(count<6E>+<2B>1)}>Increment</button>\n<><6E><EFBFBD><EFBFBD></div>\n<><6E>);\n}\n\nexport<72>default<6C>Counter;",
+      language: "javascript"
+    },
+    {
+      name: "Vue",
+      content:
+        "<template>\n<><6E><div>\n<><6E><EFBFBD><EFBFBD><p>Count:<3A>{{<7B>count<6E>}}</p>\n<><6E><EFBFBD><EFBFBD><button<6F>@click=\"increment\">Increment</button>\n<><6E></div>\n</template<74>>\n\n<script<70>setup>\n<><6E>import<72>{ref}<7D>from<6F>'vue';\n\n<><6E>const<73>count<6E>=<3D>ref(0);\n<><6E>const<73>increment<6E>=<3D>()<29>=><3E>count.value++;\n</script>",
+      language: "javascript"
+    },
+    {
+      name: "Angular",
+      content:
+        "import<72>{<7B>Component<6E>}<7D>from<6F>'@angular/core';\n\n@Component({\n<><6E>selector:<3A>'app-counter',\n<><6E>template:<3A>`\n<><6E><EFBFBD><EFBFBD><div>\n<><6E><EFBFBD><EFBFBD><EFBFBD><EFBFBD><p>Count:<3A>{{<7B>count<6E>}}</p>\n<><6E><EFBFBD><EFBFBD><EFBFBD><EFBFBD><button<6F>(click)=\"increment()\">Increment</button>\n<><6E><EFBFBD><EFBFBD></div>\n<><6E>`\n})\nexport<72>class<73>CounterComponent<6E>{\n<><6E>count<6E>=<3D>0;\n<><6E>increment()<29>{\n<><6E><EFBFBD><EFBFBD>this.count++;\n<><6E>}\n}",
+      language: "javascript"
+    }
+  ]}
+  initialSelectedIndex={2}
+/>
+
+## Recipe Block
+
+Perfect for tutorials, API documentation, or any scenario where you want to guide users through code examples with numbered steps corresponding to specific lines of code.
+
+<recipe
+  code="import<72>React,<2C>{<7B>useState<74>}<7D>from<6F>'react';
+
+  function<6F>Counter()<29>{
+  <20><>const<73>[count,<2C>setCount]<5D>=<3D>useState(0);
+
+  <20><>return<72>(
+  <20><><EFBFBD><EFBFBD><div>
+  <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><p>Count:<3A>{count}</p>
+  <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><button<6F>onClick={()<29>=><3E>setCount(count<6E>+<2B>1)}>Increment</button>
+  <20><><EFBFBD><EFBFBD></div>
+  <20><>);
+  }
+
+  export<72>default<6C>Counter;"
+  title=""
+  description=""
+  instruction={[
+    {
+      itemDescription: "Import the useState hook from React",
+      header: "Imports",
+      codeLineStart: 1,
+      codeLineEnd: 1
+    },
+    {
+      itemDescription: "Define a functional component named Counter",
+      header: "Define Component",
+      codeLineStart: 3,
+      codeLineEnd: 3
+    },
+    {
+      header: "Define State",
+      itemDescription:
+        "Declare state variable `count` with initial value 0, `setCount` is the updater function",
+      codeLineStart: 4,
+      codeLineEnd: 4
+    },
+    {
+      itemDescription: "Return JSX to render the UI",
+      header: "Render Logic",
+      codeLineStart: 7,
+      codeLineEnd: 10
+    }
+  ]}
+/>
+
+## API Route Block
+
+Takes data directly from an OpenAPI spec to populate this component with schema, responses and examples.
+
+<apiReference schemaFile="Swagger-Petstore.json|GET:/user/login" />
+
+## Directory
+
+To convey code architecture or organisation conventions, showing users folder structures helps convey structural ideas that can be tricky to explain textually.
+
+The editing experience is smooth with a tailored drag-and-drop interface.
+
+<fileStructure
+  fileStructure={[
+    { id: "zm0xmlefo", name: "Folder A", type: "folder", parentId: null },
+    { id: "d7bw8ns62", name: "File A.txt", type: "file", parentId: "zm0xmlefo" },
+    {
+      id: "xaiajws95",
+      name: "Subfolder A",
+      type: "folder",
+      parentId: "zm0xmlefo"
+    },
+    { id: "xv64qw84k", name: "Folder B", type: "folder", parentId: null },
+    { id: "beqrd40u0", name: "Subfolder", type: "folder", parentId: "xv64qw84k" },
+    { id: "yijaqtwhg", name: "File B.txt", type: "file", parentId: "beqrd40u0" },
+    { id: "hfv48qb0z", name: "Home Route File.txt", type: "file", parentId: null }
+  ]}
+  caption="An example file structure"
+/>
+
+## Mermaid
+
+TinaDocs supports [Mermaid.js](https://mermaid.js.org/), to define and render diagrams directly inside Markdown content.
+
+This lets you to add flowcharts, sequence diagrams, Gantt charts, and more.
+
+The diagram shares the code block node in the editor, but lets you preview what the diagram will look like.
+
+<Callout
+  body={<>
+    Mermaid Rendering is **client-side** only, so server-side previews wont show diagrams
+  </>}
+  variant="warning"
+/>
+
+### Flowcharts
+
+```mermaid
+%% This won't render without implementing a rendering engine (e.g. mermaid on npm)
+flowchart TD
+    id1(this is an example flow diagram) 
+    --> id3(Click the top button to preview the changes)
+```
+
+### Sequence Diagrams
+
+```mermaid
+%% This won't render without implementing a rendering engine (e.g. mermaid on npm)
+sequenceDiagram
+    participant Client
+    participant API
+    participant DB
+
+    Client->>API: GET /data
+    API->>DB: Query data
+    DB-->>API: Result
+    API-->>Client: Response
+```
+
+### State Diagram
+
+```mermaid
+stateDiagram-v2
+  [*] --> Waiting
+  Waiting --> RequestSent: Client calls API
+  RequestSent --> Complete: API sends response
+  Complete --> [*]
+
+```
+
+### Class Diagram
+
+```mermaid
+classDiagram
+  class Client {
+    +requestData()
+  }
+  class API {
+    +handleRequest()
+    +queryDB()
+  }
+  class DB {
+    +runQuery()
+  }
+
+  Client --> API : calls
+  API --> DB : queries
+
+```
+
+### Pie Chart
+
+```mermaid
+pie
+  title API Resource Usage
+  "Client Requests" : 30
+  "API Processing" : 40
+  "DB Query Time" : 30
+```
--- a/content/docs/tinadocs-features/custom-components.mdx
+++ b/content/docs/tinadocs-features/custom-components.mdx
@@ -0,0 +1,47 @@
+---
+title: Custom Components
+last_edited: '2025-07-15T06:02:42.242Z'
+---
+
+You can add you own components as an embed, similar to the text and code components.
+
+**This flexibility is one of the key reasons to use TinaCMS and this package.**
+
+## The Technical Side of Component Rendering
+
+All content written in the body of your documentation is stored as the rich-text data-type.
+
+This data-type is broken down into a hierarchical abstract syntax tree (AST).
+
+This data can be parsed into a `<TinaMarkdown>` object to populate it with data:
+
+```javascript
+import MarkdownComponentMapping from "@/markdown-component-mapping";
+
+<TinaMarkdown
+  content={documentionData?.body} // [!code highlight]
+  components={MarkdownComponentMapping}
+/>
+```
+
+After this, the `MarkdownComponentMapping` is used to parse each object from the AST data into their corresponding React components based on node type, allowing you to override default rendering behaviour for elements like headings, links, code blocks, and more.
+
+### Example
+
+```javascript
+import { TinaMarkdown } from 'tinacms/dist/rich-text'
+
+export const CustomMarkdown = ({ content }) => {
+  return (
+    <TinaMarkdown
+      content={content}
+      components={{
+        h2: (props) => <h2 className="text-2xl text-blue-600" {...props} />,
+        a: (props) => <a className="underline text-red-500" {...props} />,
+        code_block: (props) => <pre className="bg-black text-white p-2">{props.children}</pre>,
+      }}
+    />
+  )
+}
+
+```
--- a/content/docs/tinadocs-features/feature-list.mdx
+++ b/content/docs/tinadocs-features/feature-list.mdx
@@ -0,0 +1,87 @@
+---
+title: Feature List
+last_edited: '2025-07-31T06:10:36.054Z'
+auto_generated: false
+---
+
+This page acts as an index for the TinaDocs feature-set.
+
+Have an awesome idea for a feature we should add, or keen to contribute? [Join our Discord](https://discord.com/invite/zumN63Ybpf)
+
+## Components
+
+TinaCMS is a bare-bones tool with no pre-built page elements.
+
+TinaDocs brings a number of key page elements (components) needed for comprehensive documentation, especially for software projects.
+
+They can all be modified or extended upon.
+
+> Some of these components were built in React and used as .mdx components.
+
+<cardGrid
+  cards={[
+    {
+      title: "Markdown",
+      description:
+        "Standard markdown elements such as lists, tables, headings have all been designed to match the overall theme.",
+      link: "/docs/tinadocs-features/markdown-elements",
+      linkText: "Read more"
+    },
+    {
+      title: "Accordions, Cards, Callouts",
+      description:
+        "Accordions, callouts and cards let you break up and organise information more easily.",
+      link: "/docs/tinadocs-features/text-components",
+      linkText: "Read more"
+    },
+    {
+      title: "Code Elements",
+      description:
+        "Convey technical details clearly with powerful code blocks, mermaid diagram integration, tabbed code blocks and recipe blocks. 🧑‍💻",
+      link: "/docs/tinadocs-features/code-components",
+      linkText: "Read more"
+    },
+    {
+      title: "Modifying Components",
+      description:
+        "Read more about component rendering in this project from a technical perspective.",
+      link: "/docs/tinadocs-features/custom-components",
+      linkText: "Learn more"
+    }
+  ]}
+/>
+
+## Website Theming and Configuration
+
+We've included a number of ways to configure or manage your document site more generally.
+
+<cardGrid
+  cards={[
+    {
+      title: "OpenAPI Doc Generation",
+      description:
+        "Generate documents based on a provided OpenAPI spec, and re-sync on demand. 🔌",
+      link: "/docs/tinadocs-features/openapi-spec-docs",
+      linkText: "Read more"
+    },
+    {
+      title: "Styling",
+      description:
+        "The overall look and feel of these documents can be configured manually (in code) or with built-in options.",
+      link: "/docs/tinadocs-features/styling",
+      linkText: "Read more"
+    },
+    {
+      title: "Search Engine Optimization",
+      description: "Manage your SEO on a page-by-page basis.",
+      link: "/docs/tinadocs-features/search-engine-optimization-seo",
+      linkText: "Read more"
+    },
+    {
+      title: "Redirect Management",
+      description: "Define NextJS redirects from your editing window.",
+      link: "/docs/tinadocs-features/redirect-management",
+      linkText: "Read more"
+    }
+  ]}
+/>
--- a/content/docs/tinadocs-features/markdown-elements.mdx
+++ b/content/docs/tinadocs-features/markdown-elements.mdx
@@ -0,0 +1,76 @@
+---
+title: Markdown Elements
+last_edited: '2025-07-15T05:00:20.940Z'
+---
+
+Markdown natively contains some key elements including images, tables, lists, etc.
+
+These have been styled when parsed into your page to match the overall theme.
+
+## Text Formatting
+
+With the base editor we can add [links](/), **bold**, *italic* and ~~strikethrough~~ formatting.
+
+### Inline Code
+
+Using a singular backtick we can wrap small bits of `code`.
+
+## Lists
+
+Lists in markdown are indicated with `*`, `-` or `1.`.
+
+We can order our lists:
+
+1. First Item
+2. Second Item
+
+Our keep them unordered:
+
+* First Item
+* Second Item
+
+## Block-quotes
+
+Proceed a line with > to create a block-quote.
+
+> Block-quotes are useful to give tips or notes.
+
+## Tables
+
+The markdown syntax for tables is as below.
+
+```
+| Feature    | Free Plan | Pro Plan |
+| -----------| ----------| ---------|
+| Hosting    | ✓         | ✓        |
+| API Access | ✗         | ✓        |
+| Support    | Email     | Priority |
+```
+
+However, TinaCMS' extension of PlateJS allows you to skip manual styling and created tables via the toolbar.
+
+| Feature     | TinaCMS          | Others            |
+| ----------- | ---------------- | ----------------- |
+| Cool Team   | ✓                | ✗                 |
+| Open Source | ✓                | ✗                 |
+| Mascot      | Super cool llama | Nothing, probably |
+
+## Images
+
+When editing, click on the picture icon in the toolbar and you'll be able to upload, select, and pick from images in your repositories media library.
+
+Click into the image to manage alt text and captions.
+
+Users can click on the image in your documentation to view a full-screen version for accessibility.
+
+![](/img/rico-replacement.jpg "This is an example llama")
+
+### Videos
+
+You can also embed YouTube videos in your documentation site.
+
+Click on the three dots in your tool-bar, click 'Embed' and select YouTube video.
+
+You can click into these embed objects to modify their fields (i.e Video URL, Captions etc)
+
+<youtube embedSrc="https://www.youtube.com/embed/CsCQS7HIBv0?si=os9ona92O2VMOl-V" caption="Seth goes over the basics of using TinaCMS" minutes="2" />
--- a/content/docs/tinadocs-features/openapi-spec-docs.mdx
+++ b/content/docs/tinadocs-features/openapi-spec-docs.mdx
@@ -0,0 +1,42 @@
+---
+title: OpenAPI Spec Docs
+last_edited: '2025-07-15T07:30:50.546Z'
+---
+
+TinaDocs includes features to auto-generate docs pages based on an OpenAPI spec.
+
+You can also choose to use the same components to create API pages manually.
+
+## Upload a Specification
+
+There's a unique collection for storing OpenAPI specifications, and they can be managed independently.
+
+![](</img/docs-assets/api-spec-upload.png> "Uploading a spec via the API Schema collection")
+
+## Using Specification Data
+
+You can read from the specification inline via the API Reference component or generate sections of the nav-bar based on available routes.
+
+### Inline
+
+Select a schema from the dropdown, and all routes will be shown – you can further select a singular route to be used for the component.
+
+![](</img/docs-assets/api-endpoint-selection.png> "Selecting a specific endpoint from the API Reference component")
+
+### Page Generation
+
+You can generate entire directories to match your spec – marked and colour coded based on route.
+
+1. Create a Tab with the “API Tab” Template.
+2. Create a Supermenu Group with the “Group of API References” Template.
+3. Choose the spec to be used, and check endpoints to be included.
+4. Press save for generation.
+
+![](</img/docs-assets/menu-generation-from-spec.png> "Generating a menu group and pages from a specification")
+
+<Callout
+  body={<>
+    If you have any “Group of API References” with checked options in the Navbar settings, saving will regenerate the documents.
+  </>}
+  variant="warning"
+/>
--- a/content/docs/tinadocs-features/path-management.mdx
+++ b/content/docs/tinadocs-features/path-management.mdx
@@ -0,0 +1,61 @@
+---
+title: Path Management
+last_edited: '2025-07-30T04:27:09.275Z'
+auto_generated: false
+---
+
+TinaDocs utilizes **NextJS** to create your sitemap at build time.
+
+By default, the relative URL is controlled by the filepath of each document, with one special case for the home route.
+
+<Callout
+  body={<>
+    With access to the code, static builds can be modified to select the path based on other factors, such as the navigation bar.
+    
+    This is controlled in `/src/app/docs/[...slug]/page.tsx`.
+  </>}
+  variant="idea"
+/>
+
+## Choosing Paths
+
+It's easiest to choose the filepath for a document at time of creation. Select “Add File” in the Collections menu from the directory where you want your new file located.
+
+See the simple example below.
+
+<fileStructure
+  fileStructure={[
+    { id: "c1sbhudkd", name: "content", type: "folder", parentId: null },
+    { id: "zgmygdri2", name: "docs", type: "folder", parentId: "c1sbhudkd" },
+    { id: "zualtmn8t", name: "file-a.mdx", type: "file", parentId: "zgmygdri2" },
+    {
+      id: "hs6l2trxy",
+      name: "subsection",
+      type: "folder",
+      parentId: "zgmygdri2"
+    },
+    { id: "0z5fdtnn4", name: "file-b.mdx", type: "file", parentId: "hs6l2trxy" },
+    { id: "lm7t4d4p6", name: "src", type: "folder", parentId: null },
+    { id: "qgv8bk8n4", name: "tina", type: "folder", parentId: null },
+    { id: "tmc6ek24f", name: "package.json", type: "file", parentId: null }
+  ]}
+  caption="The TinaDocs file structure with example content"
+/>
+
+As per the above (note that `.mdx` extensions are automatically stripped from URLs)…
+
+* the document `file-a.mdx` is accessible at `/docs/file-a`
+* the document `file-b.mdx` is accessible at `/docs/subsection/file-b`
+
+<Callout
+  body={<>
+    You can also have multiple files with the same name in different directories.
+  </>}
+  variant="info"
+/>
+
+## The Home Route
+
+The file at `/content/docs/index.mdx` is handled independently and serves as the landing page.
+
+This will be statically built at `/docs` (home route) of your project.
--- a/content/docs/tinadocs-features/redirect-management.mdx
+++ b/content/docs/tinadocs-features/redirect-management.mdx
@@ -0,0 +1,49 @@
+---
+seo:
+  title: Managing Redirects with TinaDocs
+  description: Learn how to set up and manage redirects using TinaDocs and TinaCMS.
+title: Redirect Managment
+last_edited: '2025-07-15T06:53:56.004Z'
+---
+
+TinaDocs is built on top of **NextJS**, which supports static and dynamic redirects through the `next.config.js` file located at the root of your project.
+
+This allows for seamless integration of redirect rules during the build process, ensuring that your routes behave as expected across environments.
+
+## Setting Up Your Redirects
+
+To update or add your redirects using the TinaCMS admin interface, follow these steps:
+
+1. Navigate to the \`/admin\` route of your site.
+2. In the sidebar, click on **Settings**.
+3. Scroll down to the bottom of the Settings page.
+4. Look for the **Redirects** section.
+5. Click **+ Add New** to create a new redirect, or click an existing one to modify it.
+
+![](</img/docs-assets/redirect-editor-interface.png> "Adding a redirect via the editor")
+
+Each redirect entry typically includes:
+
+* **Source Path** (from)
+* **Destination Path** (to)
+* **Permanent** (boolean flag for 301 vs 302)
+* **Conditions** (optional advanced rules)
+
+### Code-Defined Redirects
+
+Here's what a redirect entry might look like in `next.config.js` if manually defined:
+
+```javascript
+// next.config.js
+module.exports = {
+  async redirects() {
+    return \[
+      {
+        source: '/old-route',
+        destination: '/new-route',
+        permanent: true,
+      },
+    ];
+  },
+};
+```
--- a/content/docs/tinadocs-features/search-engine-optimization-seo.mdx
+++ b/content/docs/tinadocs-features/search-engine-optimization-seo.mdx
@@ -0,0 +1,27 @@
+---
+seo:
+  title: SEO
+  description: Goes over the SEO Capabilities of TinaDocs
+  canonicalUrl: https://tina.io/tinadocs/docs/tinadocs-features/search-engine-optimization-seo
+  ogImage: /og/tina-og.png
+title: Search Engine Optimization (SEO)
+last_edited: '2025-07-16T00:55:37.712Z'
+---
+
+TinaDocs gives you full control over your site’s metadata, structure, and performance—ensuring your documentation is optimized for search engines and shareable across platforms.
+
+TinaDocs is built with **NextJS**, meaning you get SEO fundamentals out of the box:
+
+* Server-side rendering or static generation
+* Fast page loads with optimized bundle splitting
+* Custom `<head>` support per page
+
+## Updating Page SEO
+
+To modify the SEO values on each page:
+
+1. Navigate to the admin route
+2. For each page click 'SEO Values' on the top of the editor bar
+3. Insert respective SEO values
+
+![](</img/docs-assets/seo-configuration.png>)
--- a/content/docs/tinadocs-features/styling.mdx
+++ b/content/docs/tinadocs-features/styling.mdx
@@ -0,0 +1,114 @@
+---
+title: Styling
+last_edited: '2025-10-27T09:05:25.584Z'
+auto_generated: false
+---
+
+TinaDocs is opinionated when it comes to the style of its documentation. You can change this as you see fit.
+
+## Colours and Theming
+
+There are 6 built colour pre-sets.
+
+These are based on the [radix design system](https://www.radix-ui.com/colors) colours.
+
+![](/img/docs-assets/choose-starter-screen.png "Choose your starter")
+
+You can test these out locally, or configure which theme is selected via the Tina settings.
+
+### Adding a New Theme
+
+We recommend modifying an existing theme rather than creating new theme options.
+
+You can find this configuration in `src/styles/global.css`
+
+You can specify  a new theme in addition to those shown, you'll need to update…
+
+* The Tina collection with the new option at `tina/collections/settings.tsx`
+* The theme selector, `src/components/ui/theme-selector.tsx`
+* The styles file with the new theme, at `src/styles/global.css`
+
+> 💡 **For detailed instructions on creating custom themes**, including step-by-step guides, color guidelines, and examples, see the [Custom Theming section in the README](https://github.com/tinacms/tina-docs/blob/main/README.md).
+
+## Typography
+
+TinaDocs comes with a flexible, clean typographic system.
+
+### Writing with Markdown
+
+The data behind TinaCMS is markdown, so some concepts such as text colour and font size don't exist natively. All editing is done through a rich-text editor powered by [Plate](https://platejs.org/), that still gives you a word-like editing experience.
+
+Everything transforms into markdown behind the scenes.
+
+* Titles use standard Markdown syntax (#).
+* You can change font size via headling levels in the toolbar.
+* Inline formatting maps 1:1 with Markdown.
+* Empty lines aren't available, if this is a problem either modify the `<hr>` element in the markdown mapping to be transparent, or add margins where necessary.
+
+<Callout
+  body={<>
+    Markdown forces you to certain conventions,  which creates content consistency.
+  </>}
+  variant="info"
+/>
+
+### Base Style Sizing
+
+TinaDocs uses semantic HTML tags styled with TailwindCSS utility classes to maintain hierarchical sizing.
+
+| Tag      | Size            | Use Case                 |
+| -------- | --------------- | ------------------------ |
+| h1       | 36px (2.25rem)  | Page titles              |
+| h2       | 30px (1.875rem) | Section headings         |
+| h3       | 24px (1.5rem)   | Subsections              |
+| h4       | 20px (1.25rem)  | Minor Subsections        |
+| h5       | 18px (1.125rem) | Fine-grained Subsections |
+| p        | 16px (1rem)     | Body Text                |
+| li/ul/ol | 16px (1rem)     | Lists                    |
+| code     | 16px (1rem)     | Inline code              |
+
+Tina uses [Tailwind CSS](https://tailwindcss.com/) to style components, giving you a powerful and flexible way to customize your site's appearance.
+
+## Favicon
+
+A favicon is the small icon that appears in your browser tab, bookmarks, and on mobile home screens.
+
+TinaDocs supports custom favicons so you can brand your documentation site to match your product.
+
+1. Open the codebase of your new site
+2. Navigate to the public/ directory
+3. Delete the existing favicon.ico
+4. Insert your own logo image into the public/ directory
+5. Rename it to favicon.xxx
+
+<Callout
+  body={<>
+    Replace 'xxx' with your file type. Supported file types are .ico, .png and .svg
+  </>}
+  variant="warning"
+/>
+
+## Custom Styling
+
+Styling for components or the overall site requires modifying the code, but is straightforward.
+
+### Using Tailwind CSS
+
+You can customize your site's styling by:
+
+1. Modifying your `tailwind.config.js` file to update colors, fonts, spacing, and other design tokens
+2. Applying Tailwind utility classes directly to components
+3. Creating custom CSS in your project that extends Tailwind's capabilities
+
+For a complete guide to Tailwind's capabilities, refer to the [official Tailwind CSS documentation](https://tailwindcss.com/docs).
+
+### Component-Specific Styling
+
+You can customize the appearance of specific Tina components – the tailwind in the `/app` router and embeds (`/components/tina-markdown`) directories can be updated to match your colour scheme and UI standards.
+
+TinaCMS itself is only coupled to the props defining data for components.
+
+```jsx
+// Example: Customizing a Tina component
+<TinaComponent className="bg-blue-500 text-white rounded-lg shadow-md" />
+```
--- a/content/docs/tinadocs-features/text-components.mdx
+++ b/content/docs/tinadocs-features/text-components.mdx
@@ -0,0 +1,130 @@
+---
+title: Text Components
+last_edited: '2025-10-27T10:01:36.180Z'
+auto_generated: false
+---
+
+Three embedded components – accordions, callouts and cards are available out of the box.
+
+<Callout
+  body={<>
+    We can embed non-standard features into our markdown with the power of [MDX](https://mdxjs.com/).
+  </>}
+  variant="idea"
+/>
+
+## Using Embedded Components
+
+You can see and add an Embed from the rich-text editor toolbar.
+
+![](/img/docs-assets/embed-toolbar-access.png "Access the embed tab of the toolbar.")
+
+## Cards
+
+Cards can be used to showcase information or as links.
+
+They highlight on hover based on the theme.
+
+<cardGrid
+  cards={[
+    {
+      title: "Pine",
+      description: "Linked card.",
+      link: "https://www.google.com",
+      linkText: "Search now"
+    },
+    {
+      title: "Indigo",
+      description: "This card doesn't link anywhere.",
+      link: "",
+      linkText: ""
+    },
+    { title: "Blossom", description: "🌸", link: "", linkText: "" },
+    { title: "Lake", description: "🏞️", link: "", linkText: "Search now" }
+  ]}
+/>
+
+## Accordions
+
+Collapsible content areas.
+
+This is ideal for FAQs, advanced explanations, or progressive disclosure UI patterns.
+
+### Multi-accordion
+
+You can block all of your accordions with the option to have them as full-width or half-width.
+
+<accordionBlock
+  fullWidth={true}
+  accordionItems={[
+    {
+      heading: "Click to expand",
+      docText: "Default Text. Edit me!\n",
+      image: "/img/rico-replacement.jpg"
+    },
+    {
+      heading: "Click to expand",
+      docText: "Default Text. Edit me!\n",
+      image: "/img/rico-replacement.jpg"
+    }
+  ]}
+/>
+
+### Individual Accordion
+
+Accordions can also exist standalone.
+
+<accordion
+  heading="Click to expand"
+  docText={<>
+    Default Text. Edit me!
+  </>}
+  image="/img/rico-replacement.jpg"
+  fullWidth={true}
+/>
+
+## Callouts
+
+Callouts are similar to block-quotes, to add a note or indication outside the normal content flow.
+
+<Callout
+  body={<>
+    Multiple variants exist to convey different messaging.
+  </>}
+  variant="success"
+/>
+
+<Callout
+  body={<>
+    Some callouts indicate potential issues to users.
+  </>}
+  variant="warning"
+/>
+
+<Callout
+  body={<>
+    Some callouts indicate existing issues, or negative examples.
+  </>}
+  variant="error"
+/>
+
+<Callout
+  body={<>
+    Some are just for a note or tip.
+  </>}
+  variant="idea"
+/>
+
+<Callout
+  body={<>
+    Security related callouts exist too 👮.
+  </>}
+  variant="lock"
+/>
+
+<Callout
+  body={<>
+    …or some other specific options!
+  </>}
+  variant="api"
+/>