feat: support full formatting of summary

src/components/Article/Header/Article.Summary.tsx

@@ -1,3 +1,4 @@
+import { removeDynamicSection } from '@/utils/html.utils'
 import { lsdUtils } from '@/utils/lsd.utils'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
@@ -7,14 +8,20 @@ type Props = {
   className?: string
   showLabel?: boolean
 }
-const ArticleSummary = ({ summary, className, showLabel }: Props) => (
-  <ArticleSummaryContainer className={className}>
-    {showLabel && <Typography variant="body3">summary</Typography>}
-    <SummaryParagraph variant="h6" component={'p'}>
-      {summary}
-    </SummaryParagraph>
-  </ArticleSummaryContainer>
-)
+const ArticleSummary = ({ summary, className, showLabel }: Props) => {
+  return (
+    <ArticleSummaryContainer className={className}>
+      {showLabel && <Typography variant="body3">summary</Typography>}
+      <SummaryParagraph
+        variant="h6"
+        component={'div'}
+        dangerouslySetInnerHTML={{
+          __html: removeDynamicSection(summary),
+        }}
+      ></SummaryParagraph>
+    </ArticleSummaryContainer>
+  )
+}
 
 const ArticleSummaryContainer = styled('div')`
   display: block;
@@ -30,6 +37,7 @@ const ArticleSummaryContainer = styled('div')`
 const SummaryParagraph = styled(Typography)`
   display: block;
   padding: 24px 0;
+  white-space: pre-wrap;
 
   ${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'down')} {
     ${lsdUtils.typography('subtitle1')}

src/components/Episode/Header/Episode.Header.tsx

@@ -18,6 +18,7 @@ export type EpisodeHeaderProps = LPE.Podcast.Document & {
 
 const EpisodeHeader = ({
   channel,
+  summary,
   title,
   description,
   publishedAt,
@@ -59,7 +60,7 @@ const EpisodeHeader = ({
       <TagsAndSocial tags={tags.map((tag) => tag.name)} />
       {channels && <EpisodeChannels channels={channels} />}
       {description && (
-        <ArticleSummary summary={description} showLabel={false} />
+        <ArticleSummary summary={summary ?? description} showLabel={false} />
       )}
     </EpisodeHeaderContainer>
   )

src/services/strapi/transformers/Post.transformer.ts

@@ -111,6 +111,7 @@ export const postTransformer: Transformer<
         authors,
         content,
         episodeNumber: attributes.episode_number,
+        summary: attributes.summary,
         showId: attributes.podcast_show.data?.id || null,
         modifiedAt: publishedAt,
         // will be filled in later

src/types/lpe.types.ts

@@ -239,6 +239,7 @@ export namespace LPE {
       isDraft?: boolean
       coverImage?: Image.Document
       show?: Show
+      summary?: string
       type: typeof LPE.PostTypes.Podcast
     }
 

src/utils/html.utils.ts

@@ -80,3 +80,7 @@ export function extractContentFromHTML(htmlString: string) {
     return null
   }
 }
+
+export function removeDynamicSection(input: string) {
+  return input.replace(/<section[^>]*>.*?<\/section>/gs, '')
+}