Skip to content

Commit

Permalink
Fix #63
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobertoPrevato
RobertoPrevato authored Aug 10, 2024
1 parent 1cd0989 commit 7a5df89
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 19 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.1.0] 2024-08-10 🐢

- Improve the `cards` plugin to automatically use cards' titles for the `alt`
property of their images, when `alt` is not specified.
See [#63](https://github.com/Neoteroi/mkdocs-plugins/issues/63), reported by
@Valerie-ts.

## [1.0.5] 2024-02-01 :mage:

- Show event description in Gantt diagrams, by @changbowen
Expand Down
2 changes: 1 addition & 1 deletion neoteroi/mkdocs/__init__.py
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
__version__ = "1.0.5"
__version__ = "1.1.0"
4 changes: 4 additions & 0 deletions neoteroi/mkdocs/cards/domain.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ class CardItem:
key: Optional[str] = None
image: Optional[Image] = None

def __post_init__(self):
if self.image and not self.image.alt:
self.image.alt = self.title


@dataclass
class Cards:
Expand Down
54 changes: 36 additions & 18 deletions tests/test_cards.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,43 @@
import pytest

from neoteroi.mkdocs.cards import BaseCardsProcessor, CardsExtension
from neoteroi.mkdocs.cards.domain import CardItem
from neoteroi.mkdocs.markdown.images import Image
from tests import equal_html

EXAMPLE_1 = """
<div class="nt-cards nt-grid cols-3">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
"""

EXAMPLE_1_b = """
<div class="nt-cards nt-grid cols-3">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
"""

EXAMPLE_2 = """
<div class="nt-cards nt-grid cols-3">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
"""

EXAMPLE_3 = """
<div class="nt-cards nt-grid cols-4">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
"""

Expand All @@ -47,7 +49,7 @@
<div class="nt-card aaa">
<div class="nt-card-wrap">
<div>
<div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-1.png" /></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>
Expand All @@ -58,7 +60,7 @@
<div class="nt-card bbb">
<div class="nt-card-wrap">
<div>
<div class="nt-card-image tags"><img src="/img/icons/lorem-ipsum-2.png" /></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>
Expand Down Expand Up @@ -366,3 +368,19 @@ def test_cards_extension(example, expected_result):
def test_cards_extension_icons(example, expected_result):
html = markdown.markdown(example, extensions=[CardsExtension(priority=100)])
assert html.strip() == expected_result.strip()


def test_card_item_image_alt_default():
"""
When a CardItem is instantiated and its image does not have an alt value, the image
alt value is set to match the title.
"""

card = CardItem("A nice Example", image=Image("example.jpg"))

assert card.image is not None
assert card.image.alt == card.title

card = CardItem("A nice Example", image=Image("example.jpg", alt="Different alt"))
assert card.image is not None
assert card.image.alt == "Different alt"

0 comments on commit 7a5df89

Please sign in to comment.