Markdown + HTML5 Study: UI/UX Markdown HTML Injector Enhancer #113

New Issue

mik-tf · 2024-10-23T16:32:32Z

mik-tf commented

2024-10-23 16:32:32 +00:00

Situation

We use a lot of markdown
Markdown is useful and effective, but the UI/UX is limited
Markdown can take HTML
We could check how to convert markdown into UI/UX improved HTML
This could be done via a basic script converter (in bash or vlang)
The script could have different "themes"
This means we could write a hero mdbook, then convert the markdown to "updated" HTML (still markdown but using HTML to enhance UI), then publish the content on our websites.

Examples

Just using some basic html you can center a picture:
- This basic example shows we can inject HTML in markdown

   ```html
   <p align="center">
     <img src="path/to/your/image.jpg" alt="Description of the image">
   </p>

Use Cases

We create different themes
When we create websites, we can take our basic markdown collections of texts (e.g. https://git.ourworld.tf/tfgrid/info_tfgrid/src/branch/development/collections)
Then we apply the UI/UX Markdown HTML Injector Enhancer for our specific needs
- e.g. the text is shown on forum post, on a blog, on a modern website, on a basic book

Advanced Example

Basic mdbook page:

Enhanced mdbook page

This example uses the same markdown file, but it goes through a converter.

For now we use Zed Claude to generate the new file, just to show the concept. The idea is that we create a converter that takes a markdown and converter the text based on a theme, the example above could be "blue-theme-for-phone".

Future Updates

Once we have the converter from markdown to markdown-html-enhanced, we can create a converter from markdown-html-enhanced to markdown
Then we have "une transformée" and can go from one to the other
This means we could have the conversions happening in the background
From the UI/UX of the mdbook writer, it means we can just focus on the content and the converter sets nice themes. Writers only work with basic markdown

# Situation - We use a lot of markdown - Markdown is useful and effective, but the UI/UX is limited - Markdown can take HTML - We could check how to convert markdown into UI/UX improved HTML - This could be done via a basic script converter (in bash or vlang) - The script could have different "themes" - This means we could write a hero mdbook, then convert the markdown to "updated" HTML (still markdown but using HTML to enhance UI), then publish the content on our websites. # Examples - Just using some basic html you can center a picture: - This basic example shows we can inject HTML in markdown ``` ```html <p align="center"> <img src="path/to/your/image.jpg" alt="Description of the image"> </p> ``` # Use Cases - We create different themes - When we create websites, we can take our basic markdown collections of texts (e.g. https://git.ourworld.tf/tfgrid/info_tfgrid/src/branch/development/collections) - Then we apply the UI/UX Markdown HTML Injector Enhancer for our specific needs - e.g. the text is shown on forum post, on a blog, on a modern website, on a basic book # Advanced Example - Basic mdbook page: ![image](/attachments/cb94bdae-3fc0-4748-91d4-fa9e560427ad) - Enhanced mdbook page ![image](/attachments/ed276a30-3f5d-4f89-bfe3-77ac7ef5563d) This example uses the same markdown file, but it goes through a converter. For now we use Zed Claude to generate the new file, just to show the concept. The idea is that we create a converter that takes a markdown and converter the text based on a theme, the example above could be "blue-theme-for-phone". # Future Updates - Once we have the converter from markdown to markdown-html-enhanced, we can create a converter from markdown-html-enhanced to markdown - Then we have "une transformée" and can go from one to the other - This means we could have the conversions happening in the background - From the UI/UX of the mdbook writer, it means we can just focus on the content and the converter sets nice themes. Writers only work with basic markdown

image.png

73 KiB

image.png

96 KiB

mik-tf added the

Story

label 2024-10-23 16:32:32 +00:00

mik-tf commented

2024-10-23 16:59:56 +00:00

First Version

Here is a first version, with only 1 theme, in Python

import os
import re

def enhance_markdown(content):
    css_styles = """<style>
  .md-enhanced {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
  }
  .md-enhanced .container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
  .md-enhanced h1, .md-enhanced h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
  }
  .md-enhanced .hero {
    background-color: #3498db;
    color: white;
    padding: 40px 20px;
    margin: -20px -20px 20px -20px;
    border-radius: 8px 8px 0 0;
    text-align: center;
  }
  .md-enhanced .hero h1 {
    font-size: 2.5em;
    margin: 0;
    border: none;
    color: white;
  }
  .md-enhanced .nav-bar {
    background-color: #2c3e50;
    margin: -20px -20px 20px -20px;
    padding: 10px;
  }
  .md-enhanced .nav-bar ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
    margin: 0;
  }
  .md-enhanced .nav-bar ul li {
    margin: 5px 10px;
  }
  .md-enhanced .nav-bar ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
  }
  .md-enhanced .nav-bar ul li a:hover {
    color: #3498db;
  }
  .md-enhanced pre {
    background-color: #f8f8f8;
    border-left: 4px solid #3498db;
    padding: 15px;
    overflow-x: auto;
  }
  .md-enhanced code {
    font-family: 'Courier New', Courier, monospace;
  }
  .md-enhanced .button {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  .md-enhanced .button:hover {
    background-color: #2980b9;
  }
</style>

"""

    # Remove Table of Contents (including HTML-enclosed versions)
    content = re.sub(r'(?:<h2>)?\s*Table of Contents\s*(?:</h2>)?\n?(?:[-*].*\n?)*(?=\n#|\Z)', '', content, flags=re.IGNORECASE | re.MULTILINE)

    # Extract headers before modifying the content
    headers = re.findall(r'^##\s*(.+)$', content, re.MULTILINE)

    # Wrap the content in a div with a class for scoping
    content = f'<div class="md-enhanced">\n<div class="container">\n\n{content.strip()}\n\n</div>\n</div>'

    # Add hero section
    title_match = re.search(r'^#\s*(.+)$', content, re.MULTILINE)
    if title_match:
        title = title_match.group(1)
        hero_section = f'<div class="hero">\n  <h1>{title}</h1>\n</div>\n\n'
        content = re.sub(r'^#\s*.+$', hero_section, content, 1, re.MULTILINE)

    # Add navigation
    if headers:
        nav_items = '\n'.join([f'    <li><a href="#{h.lower().replace(" ", "-")}">{h}</a></li>' for h in headers])
        nav_section = f'<div class="nav-bar">\n  <ul>\n{nav_items}\n  </ul>\n</div>\n\n'
        # Insert nav section after the hero section
        content = re.sub(r'(</div>\n\n)', r'\1' + nav_section, content, 1)

    # Enhance code blocks
    content = re.sub(r'```(\w+)\n([\s\S]+?)```', lambda m: f'<pre><code class="{m.group(1)}">\n{m.group(2).strip()}\n</code></pre>', content)

    # Add CSS to the top of the file
    content = css_styles + content

    return content

def process_markdown_files():
    for filename in os.listdir('.'):
        if filename.endswith('.md'):
            with open(filename, 'r', encoding='utf-8') as file:
                content = file.read()

            enhanced_content = enhance_markdown(content)

            new_filename = f"{os.path.splitext(filename)[0]}_enhanced.md"
            with open(new_filename, 'w', encoding='utf-8') as file:
                file.write(enhanced_content)

            print(f"Enhanced {filename} --> {new_filename}")

if __name__ == "__main__":
    process_markdown_files()

# First Version Here is a first version, with only 1 theme, in Python ```python import os import re def enhance_markdown(content): css_styles = """<style> .md-enhanced { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; } .md-enhanced .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.1); } .md-enhanced h1, .md-enhanced h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; } .md-enhanced .hero { background-color: #3498db; color: white; padding: 40px 20px; margin: -20px -20px 20px -20px; border-radius: 8px 8px 0 0; text-align: center; } .md-enhanced .hero h1 { font-size: 2.5em; margin: 0; border: none; color: white; } .md-enhanced .nav-bar { background-color: #2c3e50; margin: -20px -20px 20px -20px; padding: 10px; } .md-enhanced .nav-bar ul { display: flex; justify-content: space-around; flex-wrap: wrap; padding: 0; list-style-type: none; margin: 0; } .md-enhanced .nav-bar ul li { margin: 5px 10px; } .md-enhanced .nav-bar ul li a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .md-enhanced .nav-bar ul li a:hover { color: #3498db; } .md-enhanced pre { background-color: #f8f8f8; border-left: 4px solid #3498db; padding: 15px; overflow-x: auto; } .md-enhanced code { font-family: 'Courier New', Courier, monospace; } .md-enhanced .button { display: inline-block; background-color: #3498db; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .md-enhanced .button:hover { background-color: #2980b9; } </style> """ # Remove Table of Contents (including HTML-enclosed versions) content = re.sub(r'(?:<h2>)?\s*Table of Contents\s*(?:</h2>)?\n?(?:[-*].*\n?)*(?=\n#|\Z)', '', content, flags=re.IGNORECASE | re.MULTILINE) # Extract headers before modifying the content headers = re.findall(r'^##\s*(.+)$', content, re.MULTILINE) # Wrap the content in a div with a class for scoping content = f'<div class="md-enhanced">\n<div class="container">\n\n{content.strip()}\n\n</div>\n</div>' # Add hero section title_match = re.search(r'^#\s*(.+)$', content, re.MULTILINE) if title_match: title = title_match.group(1) hero_section = f'<div class="hero">\n <h1>{title}</h1>\n</div>\n\n' content = re.sub(r'^#\s*.+$', hero_section, content, 1, re.MULTILINE) # Add navigation if headers: nav_items = '\n'.join([f' <li><a href="#{h.lower().replace(" ", "-")}">{h}</a></li>' for h in headers]) nav_section = f'<div class="nav-bar">\n <ul>\n{nav_items}\n </ul>\n</div>\n\n' # Insert nav section after the hero section content = re.sub(r'(</div>\n\n)', r'\1' + nav_section, content, 1) # Enhance code blocks content = re.sub(r'```(\w+)\n([\s\S]+?)```', lambda m: f'<pre><code class="{m.group(1)}">\n{m.group(2).strip()}\n</code></pre>', content) # Add CSS to the top of the file content = css_styles + content return content def process_markdown_files(): for filename in os.listdir('.'): if filename.endswith('.md'): with open(filename, 'r', encoding='utf-8') as file: content = file.read() enhanced_content = enhance_markdown(content) new_filename = f"{os.path.splitext(filename)[0]}_enhanced.md" with open(new_filename, 'w', encoding='utf-8') as file: file.write(enhanced_content) print(f"Enhanced {filename} --> {new_filename}") if __name__ == "__main__": process_markdown_files() ```

mik-tf commented

2024-10-23 17:53:48 +00:00

Update

Proof-of-concept available here: https://github.com/Mik-TF/markdown-enhancer
It goes back and forth between enhanced and non enhanced version

# Update - Proof-of-concept available here: https://github.com/Mik-TF/markdown-enhancer - It goes back and forth between enhanced and non enhanced version

Sign in to join this conversation.