improve markdown parsing

kulturspektakel · Oct 8, 2023 · 8ea079c · 8ea079c
1 parent 57ebe84
commit 8ea079c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/app/components/MarkDownWithOverrides.tsx b/app/components/MarkDownWithOverrides.tsx
@@ -1,6 +1,14 @@
 import Markdown from 'markdown-to-jsx';
 import type {HeadingProps, LinkProps} from '@chakra-ui/react';
-import {Text, Heading, Image, Link as ChakraLink} from '@chakra-ui/react';
+import {
+  Text,
+  Heading,
+  Image,
+  Link as ChakraLink,
+  UnorderedList,
+  OrderedList,
+  ListItem,
+} from '@chakra-ui/react';
 import {Link} from '@remix-run/react';
 
 export default function MarkDownWithOverrides(props: any) {
@@ -44,9 +52,13 @@ export default function MarkDownWithOverrides(props: any) {
               mb="2"
               transition="transform 0.1s ease-in-out"
               _hover={{transform: 'rotate(1deg)'}}
+              loading='lazy'
               {...props}
             />
           ),
+          ul: UnorderedList,
+          ol: OrderedList,
+          li: ListItem,
         },
       }}
     >

diff --git a/app/components/news/ArticleHead.tsx b/app/components/news/ArticleHead.tsx
@@ -1,8 +1,8 @@
-import {gql} from '@apollo/client';
-import {Heading} from '@chakra-ui/react';
+import { gql } from '@apollo/client';
+import { Heading } from '@chakra-ui/react';
 import DateString from '../DateString';
 import Mark from '../Mark';
-import type {ArticleHeadFragment} from '../../types/graphql';
+import type { ArticleHeadFragment } from '../../types/graphql';
 
 gql`
   fragment ArticleHead on News {
@@ -14,20 +14,18 @@ gql`
 
 export default function ArticleHead(props: ArticleHeadFragment) {
   return (
-    <>
-      <Heading size="lg">{props.title}</Heading>
-      <a href={`/news/${props.slug}`}>
-        <Mark>
-          <DateString
-            options={{
-              day: 'numeric',
-              month: 'long',
-              year: 'numeric',
-            }}
-            date={props.createdAt}
-          />
-        </Mark>
-      </a>
-    </>
+    <a href={`/news/${props.slug}`}>
+      <Heading size="lg" mb="2">{props.title}</Heading>
+      <Mark>
+        <DateString
+          options={{
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+          }}
+          date={props.createdAt}
+        />
+      </Mark>
+    </a>
   );
 }