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.
This commit is contained in:
Kumi 2024-09-19 14:19:20 +02:00
parent b6c7277535
commit d790b0b17a
Signed by: kumi
GPG key ID: ECBCC9082395383F
4 changed files with 13 additions and 3 deletions

View file

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

View file

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

View file

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

View file

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