feat: Enhance rendering of meeting minutes with Tailwind CSS styles; add collapsible sections and improve list handling

Author: codeperfectplus

src/templates/view.html

@@ -361,14 +361,15 @@ <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Results (<
                     x-show="!showTranscript && !loading" x-transition:enter="transition-opacity ease-out duration-300"
                     x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                     <template x-if="file.minutes">
-                        <div x-html="highlightSearchResults(file.minutes)"
-                            :class="darkMode ? 'bg-gray-900 text-gray-100' : 'bg-white text-gray-900'"
-                            class="rounded-lg transition-colors duration-300"></div>
+                        <div 
+                            x-html="highlightSearchResults(file.minutes)"
+                            class="rounded-lg transition-colors duration-300 bg-white dark:bg-gray-900 shadow-md px-8 py-6 my-6 mx-auto"
+                            style="margin-top:2rem; margin-bottom:2rem; max-width: 100%;">
+                        </div>
                     </template>
 
                     <template x-if="!file.minutes">
-                        <div class="flex flex-col items-center justify-center p-8 text-center rounded-lg border-2 border-dashed"
-                            :class="darkMode ? 'border-gray-700 text-gray-400' : 'border-gray-300 text-gray-500'">
+                        <div class="flex flex-col items-center justify-center p-8 text-center rounded-lg border-2 border-dashed">
                             <i class="fa-regular fa-file-lines text-5xl mb-4 opacity-70"></i>
                             <h3 class="text-xl font-medium mb-2">No meeting minutes available</h3>
                             <p class="max-w-sm">Meeting minutes haven't been generated yet for this file. Please check

src/utils.py

@@ -1,72 +1,114 @@
 from markdown import markdown
-from bs4 import BeautifulSoup
+from bs4 import BeautifulSoup, Tag
+import re
 
-def render_minutes_with_tailwind(md_text):
-    html = markdown(md_text, extensions=['fenced_code', 'codehilite', 'tables', 'nl2br'])
+TAG_STYLES = {
+    'h1': 'text-4xl font-extrabold text-indigo-800 mb-6 mt-8 scroll-mt-24 flex justify-between items-center',
+    'h2': 'text-3xl font-bold text-indigo-700 mb-5 mt-7 scroll-mt-24 flex justify-between items-center',
+    'h3': 'text-2xl font-semibold text-indigo-600 mb-4 mt-6 flex justify-between items-center',
+    'h4': 'text-xl font-medium text-indigo-500 mb-3 mt-5',
+    'h5': 'text-lg font-medium text-indigo-400 mb-2 mt-4',
+    'h6': 'text-base font-medium text-indigo-300 mb-1 mt-3',
+    'p': 'mb-4 text-gray-800 leading-relaxed tracking-normal',
+    'ul': 'list-disc list-inside pl-6 mb-4 text-gray-800',
+    'ol': 'list-decimal list-inside pl-6 mb-4 text-gray-800',
+    'li': 'mb-1',
+    'blockquote': 'border-l-4 border-blue-400 pl-6 italic text-gray-700 bg-blue-50 py-3 px-4 rounded-md my-6',
+    'hr': 'my-8 border-t border-gray-300',
+    'a': 'text-blue-700 hover:text-blue-900 underline',
+    'code': 'bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-purple-700',
+    'pre': 'bg-gray-100 text-gray-800 p-5 rounded-lg overflow-x-auto text-sm shadow-inner my-6 whitespace-pre-wrap break-words',
+    'table': 'table-auto w-full border-collapse border border-gray-300 shadow-sm my-8 text-sm',
+    'thead': 'bg-gray-100',
+    'th': 'border px-4 py-3 text-left bg-gray-200 text-gray-700 font-semibold',
+    'td': 'border px-4 py-2 text-gray-800'
+}
+
+HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+
+def wrap_collapsible(start_tag, soup):
+    """
+    Wraps content under heading inside a collapsible div with toggle icon
+    """
+    level = int(start_tag.name[1])
+    toggle_id = f"section-{id(start_tag)}"
+    content_div = soup.new_tag("div", **{'id': toggle_id, 'class': 'collapsible-content'})
+
+    next_sibling = start_tag.find_next_sibling()
+    while next_sibling and (
+        not isinstance(next_sibling, Tag)
+        or next_sibling.name not in HEADING_TAGS
+        or int(next_sibling.name[1]) > level
+    ):
+        temp = next_sibling
+        next_sibling = next_sibling.find_next_sibling()
+        content_div.append(temp.extract())
+
+    start_tag.insert_after(content_div)
+
+    # Add toggle button
+    toggle_button = soup.new_tag("button", **{
+        'class': 'toggle-button text-indigo-700 text-xl font-bold ml-2 focus:outline-none',
+        'onclick': f"toggleContent('{toggle_id}', this)"
+    })
+    toggle_button.string = '+'
+    start_tag.append(toggle_button)
+
+def fix_nested_lists(soup):
+    for ul in soup.find_all(['ul', 'ol']):
+        for li in ul.find_all('li', recursive=False):
+            next_elem = li.find_next_sibling()
+            if next_elem and next_elem.name in ['ul', 'ol']:
+                nested_list = next_elem.extract()
+                li.append(nested_list)
+
+def process_nested_items(soup):
+    for li in soup.find_all('li'):
+        if li.strong and li.strong.text.strip().endswith(':'):
+            next_sibling = li.find_next_sibling()
+            sublist = soup.new_tag('ul', **{'class': TAG_STYLES['ul'].split()})
+            while next_sibling and next_sibling.name == 'li' and not next_sibling.strong:
+                temp = next_sibling
+                next_sibling = next_sibling.find_next_sibling()
+                sublist.append(temp.extract())
+            if sublist.find('li'):
+                li.append(sublist)
+
+def handle_special_formatting(soup):
+    for code in soup.find_all('code'):
+        if code.parent.name != 'pre':
+            code['class'] = TAG_STYLES['code'].split()
+    # Leave checkbox syntax unchanged
+
+def render_minutes_with_tailwind(md_text: str) -> str:
+    html = markdown(md_text, extensions=['fenced_code', 'codehilite', 'tables', 'nl2br', 'extra'])
     soup = BeautifulSoup(html, 'html.parser')
 
-    # Headings – updated for white background
-    heading_styles = {
-        'h1': 'text-4xl font-extrabold text-indigo-800 mb-6 mt-8',
-        'h2': 'text-3xl font-bold text-indigo-700 mb-5 mt-7',
-        'h3': 'text-2xl font-semibold text-indigo-600 mb-4 mt-6',
-        'h4': 'text-xl font-medium text-indigo-500 mb-3 mt-5',
-        'h5': 'text-lg font-medium text-indigo-400 mb-2 mt-4',
-        'h6': 'text-base font-medium text-indigo-300 mb-1 mt-3',
-    }
-    for tag, classes in heading_styles.items():
-        for el in soup.find_all(tag):
-            el['class'] = classes + ' scroll-mt-24'  # type: ignore
-
-    # Paragraphs
-    for tag in soup.find_all('p'):
-        tag['class'] = 'mb-4 text-gray-800 leading-relaxed tracking-normal'  # type: ignore
-
-    # Lists
-    for tag in soup.find_all('ul'):
-        tag['class'] = 'list-disc list-inside pl-6 mb-4 text-gray-800'  # type: ignore
-    for tag in soup.find_all('ol'):
-        tag['class'] = 'list-decimal list-inside pl-6 mb-4 text-gray-800'  # type: ignore
-    for tag in soup.find_all('li'):
-        tag['class'] = 'mb-1'  # type: ignore
-
-    # Blockquotes
-    for tag in soup.find_all('blockquote'):
-        tag['class'] = (
-            'border-l-4 border-blue-400 pl-6 italic text-gray-700 '
-            'bg-blue-50 py-3 px-4 rounded-md my-6'
-        )  # type: ignore
-
-    # Horizontal Rules
-    for tag in soup.find_all('hr'):
-        tag['class'] = 'my-8 border-t border-gray-300'  # type: ignore
-
-    # Links
-    for tag in soup.find_all('a'):
-        tag['class'] = 'text-blue-700 hover:text-blue-900 underline'  # type: ignore
-        tag['target'] = '_blank'  # type: ignore
-        tag['rel'] = 'noopener noreferrer'  # type: ignore
-
-    # Inline Code
-    for tag in soup.find_all('code'):
-        if tag.parent.name != 'pre':  # type: ignore
-            tag['class'] = 'bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-purple-700'  # type: ignore
-
-    # Code Blocks
-    for tag in soup.find_all('pre'):
-        tag['class'] = (
-            'bg-gray-100 text-gray-800 p-5 rounded-lg overflow-x-auto text-sm '
-            'shadow-inner my-6 whitespace-pre-wrap break-words'
-        )  # type: ignore
-
-    # Tables
-    for tag in soup.find_all('table'):
-        tag['class'] = 'table-auto w-full border-collapse border border-gray-300 shadow-sm my-8 text-sm'  # type: ignore
-    for tag in soup.find_all('thead'):
-        tag['class'] = 'bg-gray-100'  # type: ignore
-    for tag in soup.find_all('th'):
-        tag['class'] = 'border px-4 py-3 text-left bg-gray-200 text-gray-700 font-semibold'  # type: ignore
-    for tag in soup.find_all('td'):
-        tag['class'] = 'border px-4 py-2 text-gray-800'  # type: ignore
+    fix_nested_lists(soup)
+    process_nested_items(soup)
+    handle_special_formatting(soup)
+
+    for tag in soup.find_all(HEADING_TAGS):
+        level = int(tag.name[1])
+        if level <= 3:
+            wrap_collapsible(tag, soup)
+
+    for tag_name, class_list in TAG_STYLES.items():
+        for el in soup.find_all(tag_name):
+            if tag_name == 'code' and el.parent.name == 'pre':
+                continue
+            existing_classes = el.get('class', [])
+            el['class'] = list(set(existing_classes + class_list.split()))
+            if tag_name == 'a':
+                el['target'] = '_blank'
+                el['rel'] = 'noopener noreferrer'
 
     return str(soup)
+
+if __name__ == "__main__":
+    with open("data.md", "r") as f:
+        md_text = f.read()
+
+    html = render_minutes_with_tailwind(md_text)
+    with open("output.html", "w") as f:
+        f.write(html)