Skip to content

Commit 7a5df89

Browse files
RobertoPrevatoRobertoPrevato
authored
Fix #63 
1 parent 1cd0989 commit 7a5df89

File tree

4 files changed

+48
-19
lines changed

4 files changed

+48
-19
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [1.1.0] 2024-08-10 🐢
9+
10+
- Improve the `cards` plugin to automatically use cards' titles for the `alt`
11+
property of their images, when `alt` is not specified.
12+
See [#63](https://github.com/Neoteroi/mkdocs-plugins/issues/63), reported by
13+
@Valerie-ts.
14+
815
## [1.0.5] 2024-02-01 :mage:
916

1017
- Show event description in Gantt diagrams, by @changbowen

‎neoteroi/mkdocs/__init__.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
__version__ = "1.0.5"
1+
__version__ = "1.1.0"

‎neoteroi/mkdocs/cards/domain.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ class CardItem:
1313
key: Optional[str] = None
1414
image: Optional[Image] = None
1515

16+
def __post_init__(self):
17+
if self.image and not self.image.alt:
18+
self.image.alt = self.title
19+
1620

1721
@dataclass
1822
class Cards:

‎tests/test_cards.py‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,43 @@
44
import pytest
55

66
from neoteroi.mkdocs.cards import BaseCardsProcessor, CardsExtension
7+
from neoteroi.mkdocs.cards.domain import CardItem
8+
from neoteroi.mkdocs.markdown.images import Image
79
from tests import equal_html
810

911
EXAMPLE_1 = """
1012
<div class="nt-cards nt-grid cols-3">
11-
<div class="nt-card"><a href="/some-path/a"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
12-
<div class="nt-card"><a href="/some-path/b"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
13-
<div class="nt-card"><a href="/some-path/c"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
14-
<div class="nt-card"><a href="/some-path/d"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
13+
<div class="nt-card"><a href="/some-path/a"><div><div class="nt-card-image tags"><img alt="Title A" src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
14+
<div class="nt-card"><a href="/some-path/b"><div><div class="nt-card-image tags"><img alt="Title B" src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
15+
<div class="nt-card"><a href="/some-path/c"><div><div class="nt-card-image tags"><img alt="Title C" src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
16+
<div class="nt-card"><a href="/some-path/d"><div><div class="nt-card-image tags"><img alt="Title D" src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
1517
</div>
1618
"""
1719

1820
EXAMPLE_1_b = """
1921
<div class="nt-cards nt-grid cols-3">
20-
<div class="nt-card"><a href="/some-path/a" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
21-
<div class="nt-card"><a href="/some-path/b" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
22-
<div class="nt-card"><a href="/some-path/c" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
23-
<div class="nt-card"><a href="/some-path/d" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
22+
<div class="nt-card"><a href="/some-path/a" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img alt="Title A" src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
23+
<div class="nt-card"><a href="/some-path/b" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img alt="Title B" src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
24+
<div class="nt-card"><a href="/some-path/c" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img alt="Title C" src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
25+
<div class="nt-card"><a href="/some-path/d" rel="noopener" target="_blank"><div><div class="nt-card-image tags"><img alt="Title D" src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
2426
</div>
2527
"""
2628

2729
EXAMPLE_2 = """
2830
<div class="nt-cards nt-grid cols-3">
29-
<div class="nt-card"><a href="/some-path/a"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
30-
<div class="nt-card"><a href="/some-path/b"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
31-
<div class="nt-card"><a href="/some-path/c"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
32-
<div class="nt-card"><a href="/some-path/d"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
31+
<div class="nt-card"><a href="/some-path/a"><div><div class="nt-card-image tags"><img alt="Title A" src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
32+
<div class="nt-card"><a href="/some-path/b"><div><div class="nt-card-image tags"><img alt="Title B" src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
33+
<div class="nt-card"><a href="/some-path/c"><div><div class="nt-card-image tags"><img alt="Title C" src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
34+
<div class="nt-card"><a href="/some-path/d"><div><div class="nt-card-image tags"><img alt="Title D" src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
3335
</div>
3436
"""
3537

3638
EXAMPLE_3 = """
3739
<div class="nt-cards nt-grid cols-4">
38-
<div class="nt-card aaa"><a href="/some-path/a"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
39-
<div class="nt-card bbb"><a href="/some-path/b"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
40-
<div class="nt-card ccc"><a href="/some-path/c"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
41-
<div class="nt-card ddd"><a href="/some-path/d"><div><div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
40+
<div class="nt-card aaa"><a href="/some-path/a"><div><div class="nt-card-image tags"><img alt="Title A" src="/img/icons/lorem-ipsum-1.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
41+
<div class="nt-card bbb"><a href="/some-path/b"><div><div class="nt-card-image tags"><img alt="Title B" src="/img/icons/lorem-ipsum-2.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
42+
<div class="nt-card ccc"><a href="/some-path/c"><div><div class="nt-card-image tags"><img alt="Title C" src="/img/icons/lorem-ipsum-3.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
43+
<div class="nt-card ddd"><a href="/some-path/d"><div><div class="nt-card-image tags"><img alt="Title D" src="/img/icons/lorem-ipsum-4.png" /></div><div class="nt-card-content"><p class="nt-card-title">Title D</p><p class="nt-card-text">Lorem ipsum dolor sit amet 4.</p></div></div></a></div>
4244
</div>
4345
"""
4446

@@ -47,7 +49,7 @@
4749
<div class="nt-card aaa">
4850
<div class="nt-card-wrap">
4951
<div>
50-
<div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></div>
52+
<div class="nt-card-image tags"><img alt="Title A" src="/img/icons/lorem-ipsum-1.png" /></div>
5153
<div class="nt-card-content">
5254
<p class="nt-card-title">Title A</p>
5355
<p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p>
@@ -58,7 +60,7 @@
5860
<div class="nt-card bbb">
5961
<div class="nt-card-wrap">
6062
<div>
61-
<div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></div>
63+
<div class="nt-card-image tags"><img alt="Title B" src="/img/icons/lorem-ipsum-2.png" /></div>
6264
<div class="nt-card-content">
6365
<p class="nt-card-title">Title B</p>
6466
<p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p>
@@ -366,3 +368,19 @@ def test_cards_extension(example, expected_result):
366368
def test_cards_extension_icons(example, expected_result):
367369
html = markdown.markdown(example, extensions=[CardsExtension(priority=100)])
368370
assert html.strip() == expected_result.strip()
371+
372+
373+
def test_card_item_image_alt_default():
374+
"""
375+
When a CardItem is instantiated and its image does not have an alt value, the image
376+
alt value is set to match the title.
377+
"""
378+
379+
card = CardItem("A nice Example", image=Image("example.jpg"))
380+
381+
assert card.image is not None
382+
assert card.image.alt == card.title
383+
384+
card = CardItem("A nice Example", image=Image("example.jpg", alt="Different alt"))
385+
assert card.image is not None
386+
assert card.image.alt == "Different alt"

0 commit comments

Comments
 (0)