fix: update CustomTinaMarkdown custom components

Author: completejavascript

README.md

@@ -87,3 +87,7 @@ Make sure to deploy the output of `pnpm run build`
 ## Styling
 
 This template comes with [Mantine](https://mantine.dev/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
+
+## TODO
+
+- Update `CustomTinaMarkdown` custom components.

app/components/CustomTinaMarkdown.tsx

@@ -1,5 +1,20 @@
-import { Blockquote, Code, Text, Title } from "@mantine/core";
+import {
+  Anchor,
+  Blockquote,
+  Code,
+  Divider,
+  Image,
+  Kbd,
+  List,
+  Mark,
+  Table,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { IconCircleCheck, IconCircleDot } from "@tabler/icons-react";
 import React from "react";
+import { Link } from "react-router";
 import { TinaMarkdown, type TinaMarkdownContent } from "tinacms/dist/rich-text";
 
 interface CustomTinaMarkdownProps {
@@ -13,26 +28,92 @@ export const CustomTinaMarkdown: React.FC<CustomTinaMarkdownProps> = ({
 };
 
 const components = {
-  h1: (props: any) => <Title order={1} mb="md" {...props} />,
-  h2: (props: any) => <Title order={2} mb="md" {...props} />,
-  h3: (props: any) => <Title order={3} mb="sm" {...props} />,
-  h4: (props: any) => <Title order={4} mb="sm" {...props} />,
-  h5: (props: any) => <Title order={5} mb="xs" {...props} />,
-  h6: (props: any) => <Title order={6} mb="xs" {...props} />,
-  p: (props: any) => <Text mb="md" {...props} />,
-  ul: (props: any) => (
-    <ul style={{ marginBottom: "1rem", paddingLeft: "1.5rem" }} {...props} />
+  // Headings
+  h1: (props: any) => <Title order={1} mb="md" mt="xl" {...props} />,
+  h2: (props: any) => <Title order={2} mb="md" mt="xl" {...props} />,
+  h3: (props: any) => <Title order={3} mb="sm" mt="lg" {...props} />,
+  h4: (props: any) => <Title order={4} mb="sm" mt="md" {...props} />,
+  h5: (props: any) => <Title order={5} mb="xs" mt="sm" {...props} />,
+  h6: (props: any) => <Title order={6} mb="xs" mt="xs" {...props} />,
+
+  // Paragraph and basic text
+  p: (props: any) => <Text mb="md" size="md" {...props} />,
+
+  // Lists
+  ul: (props: any) => <List mb="md" spacing="xs" {...props} />,
+  ol: (props: any) => <List mb="md" spacing="xs" type="ordered" {...props} />,
+  li: (props: any) => <List.Item {...props} />,
+
+  // Block elements
+  blockquote: (props: any) => (
+    <Blockquote color="blue" mb="md" mt="md" cite={props.cite} {...props} />
   ),
-  ol: (props: any) => (
-    <ol style={{ marginBottom: "1rem", paddingLeft: "1.5rem" }} {...props} />
+
+  // Code blocks
+  code_block: (props: any) => (
+    <Code block lang={props.language} mb="lg" mt="md">
+      {props.value}
+    </Code>
   ),
-  li: (props: any) => <li style={{ marginBottom: "0.25rem" }} {...props} />,
-  blockquote: (props: any) => <Blockquote color="blue" mb="md" {...props} />,
-  code_block: (props: any) => {
+
+  // Inline elements
+  code: (props: any) => <Code {...props} />,
+  em: (props: any) => <Text component="em" fs="italic" {...props} />,
+  strong: (props: any) => <Text component="strong" fw={700} {...props} />,
+  del: (props: any) => <Text component="del" td="line-through" {...props} />,
+  hr: () => <Divider my="lg" />,
+
+  // Links and media
+  a: (props: any) => {
+    const isExternal = props.url.startsWith("http");
+
+    return (
+      <Anchor
+        component={isExternal ? "a" : Link}
+        href={props.url}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        {...props}
+      >
+        {props.children}
+      </Anchor>
+    );
+  },
+  img: (props: any) => (
+    <Image src={props.url} alt={props.alt || ""} title={props.title} my="md" />
+  ),
+
+  // Tables
+  table: (props: any) => <Table mb="lg" {...props} />,
+  thead: (props: any) => <Table.Thead {...props} />,
+  tbody: (props: any) => <Table.Tbody {...props} />,
+  tr: (props: any) => <Table.Tr {...props} />,
+  td: (props: any) => <Table.Td {...props} />,
+  th: (props: any) => <Table.Th {...props} />,
+
+  // Special inline elements
+  mark: (props: any) => <Mark {...props} />,
+  kbd: (props: any) => <Kbd {...props} />,
+
+  // Specific Tina components
+  rich_text: (props: any) => <div {...props} />,
+
+  // Task lists (checkboxes)
+  task_list_item: (props: any) => {
+    const { checked } = props;
     return (
-      <Code block lang={props.language} mb="md">
-        {props.value}
-      </Code>
+      <List.Item
+        icon={
+          <ThemeIcon color={checked ? "green" : "gray"} size={20} radius="xl">
+            {checked ? (
+              <IconCircleCheck size={12} />
+            ) : (
+              <IconCircleDot size={12} />
+            )}
+          </ThemeIcon>
+        }
+        {...props}
+      />
     );
   },
 };

app/components/Welcome.tsx

@@ -36,9 +36,13 @@ export const Welcome: React.FC = () => {
             <List spacing="xs">
               {resources.map(({ href, text, icon }) => (
                 <List.Item key={href} icon={icon}>
-                  <Link to={href}>
-                    <Text c={isDark ? "blue.5" : "blue.7"}>{text}</Text>
-                  </Link>
+                  <Anchor
+                    to={href}
+                    component={Link}
+                    c={isDark ? "blue.5" : "blue.7"}
+                  >
+                    {text}
+                  </Anchor>
                 </List.Item>
               ))}
             </List>

content/posts/hello-world.md

@@ -8,9 +8,14 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lorem diam. Quis
 
 Suspendisse facilisis, mi ac scelerisque interdum, ligula ex imperdiet felis, a posuere eros justo nec sem. Nullam laoreet accumsan metus, sit amet tincidunt orci egestas nec. Pellentesque ut aliquet ante, at tristique nunc. Donec non massa nibh. Ut posuere lacus non aliquam laoreet. Fusce pharetra ligula a felis porttitor, at mollis ipsum maximus. Donec quam tortor, vehicula a magna sit amet, tincidunt dictum enim. In hac habitasse platea dictumst. Mauris sit amet ornare ligula, blandit consequat risus. Duis malesuada pellentesque lectus, non feugiat turpis eleifend a. Nullam tempus ante et diam pretium, ac faucibus ligula interdum.
 
-Link: [google](https://google.com)
+External Link: [google](https://google.com)
 
-![](/image.png)
+Internal Link: [Blog Posts](/posts)
+
+
+External Image: ![](https://octodex.github.com/images/minion.png)
+
+Internal Image: ![](/image.png)
 
 > blockqoute
 
@@ -31,3 +36,19 @@ function sum(a, b) {
   return a + b;
 }
 ```
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |

package.json

@@ -25,6 +25,7 @@
     "@mantine/core": "^7.17.1",
     "@mantine/hooks": "^7.17.1",
     "@react-router/node": "^7.3.0",
+    "@tabler/icons-react": "^3.31.0",
     "isbot": "^5.1.23",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",