feat: enhance content type handling and code styling

- Added 'type' attribute to the Text dataclass to support HTML tag designation.
- Trimmed text content and assigned types in MediumClient to improve consistency.
- Updated article template to dynamically use text types, allowing for more flexible HTML structure.
- Applied CSS styling for 'pre' tags to enhance code block appearance.

These changes improve the semantic structure of articles and enhance the visual presentation of code blocks in the user interface.

src/small/models/nodes.py

@@ -5,6 +5,7 @@ from typing import List, Union
 @dataclass
 class Text:
     content: str
+    type: str
 
 
 @dataclass

src/small/services/medium_client.py

@@ -58,7 +58,7 @@ class MediumClient:
                     )
                 ]
             else:
-                children = [Text(content=p["text"])]
+                children = [Text(content=p["text"].strip(), type=p["type"])]
             paragraphs.append(Paragraph(children=children))
 
         return Page(

src/small/static/css/style.css

@@ -72,6 +72,13 @@ article img {
     margin: 20px 0;
 }
 
+pre {
+    background-color: #f4f4f4;
+    padding: 10px;
+    border-left: 3px solid #1a73e8;
+    overflow-x: auto;
+}
+
 /* Error Page Styles */
 .error-container {
     text-align: center;

src/small/templates/article.html

@@ -7,15 +7,17 @@
 <p>By {{ page.author }} on {{ page.created_at }}</p>
 <article>
     {% for paragraph in page.content %}
-        <p>
         {% for child in paragraph.children %}
             {% if child.__class__.__name__ == 'Text' %}
+            <{{ child.type | lower }}>
                 {{ child.content }}
+            </{{ child.type | lower }}>
             {% elif child.__class__.__name__ == 'Image' %}
+            <p>
                 <img src="{{ child.src }}" alt="{{ child.alt }}" width="{{ child.width }}" height="{{ child.height }}">
+            </p>
             {% endif %}
         {% endfor %}
-        </p>
     {% endfor %}
 </article>
 {% endblock %}