Creating a Navigation Table of Contents for Phoenix Blogs with MDEx

In this article, the author explains how to develop a Table of Contents (TOC) component for a Phoenix blog using the MDEx markdown parser. The goal is to allow users to quickly navigate through content sections by creating links to each heading. The article begins with configuring MDEx to include IDs and anchor links for headings in the generated HTML. It then explains how to parse the headings using the Floki library and convert them into a suitable data structure. Finally, the author walks through building the TOC component itself and demonstrates how to incorporate it into a Phoenix project layout, emphasizing the use of CSS classes from daisyUI for styling.