Blog Section Implementation Todo List

1. Support Images Inside the Article

Currently, the blog post content is rendered as HTML from markdown, but there’s no handling for images embedded within the content. The imagesInContent field exists in the blog post schema but isn’t being used in the rendering.

Subtasks

• Modify the markdownToHtml function in packages/markdown/src/markdown.ts to properly handle image tags in the markdown content
• Update the BlogPostPage.astro component to pass the imagesInContent array to the markdownToHtml function
• Ensure the imageReplacePlugin in markdown.ts correctly replaces image URLs in the markdown content
  • The plugin now correctly maps each image tag in the markdown to the corresponding image URL from the CMS
  • First image tag uses the first image in the list, second image tag uses the second image, and so on
• Add CSS styles for images in the blog post content
• Test with a blog post that includes images in the content

2. Fix Bug in Excerpt That Should Not Include the Title

Currently, in packages/frontend/app/src/cms/blog.ts, the excerpt is generated by taking the first 30 words of the entire content, which includes the title. The splitMarkdown function already exists and can correctly extract the intro (content between the title and the next heading).

Subtasks

• Update the getAllBlogPosts function in packages/frontend/app/src/cms/blog.ts to use the splitMarkdown function to generate the excerpt
• Ensure the excerpt is generated from the intro section only, not including the title
• Test the excerpt generation with various blog posts to ensure it works correctly

3. Internationalize All Strings and Put Them in the CMS

There are hardcoded strings in the components that need to be internationalized and moved to the CMS.

Subtasks

• Identify all hardcoded strings in the blog components
  • In BlogPage.astro
  • In BlobPostSection.astro (note: there’s a typo in the component name)
  • In BlogPostPage.astro
• Move these strings to the CMS (created blog.ts schema)
• Update the components to use the translated strings from the CMS
• Test the internationalization with both English and French content

Additional Notes

• Fixed the typo in the component name: BlobPostSection.astro renamed to BlogPostSection.astro
• Updated the getBlogPageContent function in packages/frontend/app/src/cms/blog.ts to fetch values from the CMS with fallbacks
• Modified the blog page title schema to allow multiple lines (changed from string to text with rows: 2)
• Confirmed that the IntroSection.astro component already has the whitespace-pre-line class to preserve whitespace and new lines