{# Showcase - Display & Navigation Images: unsplash.com | Icons: heroicons.com #} {% set required_keys = [] %} {# SVG Inline Icons from heroicons.com #} {% set logos = { "logo1": '', "logo2": '', "logo3": '', "logo4": '', "logo5": '', "logo6": '' } %} {% set partner_logos = [ {"src": logos.logo1, "alt": "Partner A"}, {"src": logos.logo2, "alt": "Partner B"}, {"src": logos.logo3, "alt": "Partner C"}, {"src": logos.logo4, "alt": "Partner D"}, {"src": logos.logo5, "alt": "Partner E"}, {"src": logos.logo6, "alt": "Partner F"} ] %} {% set partner_logos_linked = [ {"src": logos.logo1, "alt": "Partner A", "url": "https://example.com"}, {"src": logos.logo2, "alt": "Partner B", "url": "https://example.com"}, {"src": logos.logo3, "alt": "Partner C", "url": "https://example.com"}, {"src": logos.logo4, "alt": "Partner D", "url": "https://example.com"}, {"src": logos.logo5, "alt": "Partner E", "url": "https://example.com"}, {"src": logos.logo6, "alt": "Partner F", "url": "https://example.com"} ] %} {% set review_single = { "text": "Great framework, easy to use and well documented.", "author": "Max Mustermann", "role": "Developer", "rating": 5, "date": "2025-01-15" } %} {% set review_items = [ {"text": "Top product, highly recommended.", "author": "Anna B.", "rating": 5}, {"text": "Solid solution for our requirements.", "author": "Klaus M.", "role": "CTO", "rating": 4}, {"text": "Quick setup, runs stable.", "author": "Sara K.", "rating": 5}, {"text": "Excellent documentation and support.", "author": "John D.", "role": "Lead Dev", "rating": 5}, {"text": "Saved us weeks of development time.", "author": "Marie L.", "rating": 4} ] %} {% set faq_items = [ {"question": "What is APEP?", "answer": "APEP is a FastAPI + Jinja2 frontend framework for Python developers.", "open": true}, {"question": "Does it support dark mode?", "answer": "Yes - theme-switch.js persists the selection in localStorage and syncs with the OS preference."}, {"question": "Can I use custom HTML?", "answer": "Most content params accept raw HTML strings. Jinja2 | safe filters apply automatically inside macros."} ] %} {# gallery_images - all path strings, no raw img tags (img tags break data-overlay-src) #} {% set gallery_images = [ {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Nature 1", "caption": "Caption for image 1"}, {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Nature 2", "caption": "Caption for image 2"}, {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Nature 3"}, {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Nature 4", "caption": "Caption for image 4"}, {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Nature 5"}, {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Nature 6", "caption": "Caption for image 6"}, {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Nature 7"}, {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Nature 8", "caption": "Caption for image 8"}, {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Nature 9"} ] %} {% set scroller_items = [ {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Nature 2", "label": "Photo Two"}, {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Nature 5", "label": "Photo Five"}, {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Nature 8", "label": "Photo Eight"}, {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Nature 3", "label": "Photo Three"}, {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Nature 6", "label": "Photo Six"} ] %} {% set scroller_items_overlay = [ {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Nature 1", "label": "Click to expand", "overlay": true}, {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Nature 4", "label": "Click to expand", "overlay": true}, {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Nature 7", "label": "Click to expand", "overlay": true}, {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Nature 9", "label": "Click to expand", "overlay": true} ] %} {% set scroller_items_dl = [ {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Nature 2", "label": "Photo Two", "downloadable": true}, {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Nature 5", "label": "Photo Five", "downloadable": true}, {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Nature 8", "label": "Photo Eight", "downloadable": true} ] %}

Showcase - Display & Navigation

{# ---- Text Block -------------------------------------------------- #}

Text Block - Variants

{{ apep.macros.text_block(text="

Default text block with some formatted content and a border.

", max_width="600px", variant="default") }} {{ apep.macros.text_block(text="

Plain variant - no border, no background, but scrollable.

", max_width="600px", variant="plain") }} {{ apep.macros.text_block(text="

Vertical scroll. Item 1.

Item 2.

Item 3.

Item 4.

Item 5.

", max_height="80px", scroll="vertical") }} {{ apep.macros.text_block(text="

Horizontal scroll - long content that does not wrap and scrolls sideways instead of wrapping to a new line.

", scroll="horizontal") }}
{# ---- Block Text -------------------------------------------------- #}

Block Text - Variants

{{ apep.macros.block_text(title="Default", text="

Default variant with title and body.

", variant="default") }}
{{ apep.macros.block_text(title="Centered", text="

Centered variant, text and title aligned.

", variant="centered") }}
{{ apep.macros.block_text(title="Highlighted", text="

Highlight variant with accent left border.

", variant="highlight") }}
{# ---- FAQ --------------------------------------------------------- #}

FAQ

{{ apep.macros.faq(question="Open on load", answer="This FAQ item starts expanded.", open=true) }}
{{ apep.macros.faq(question="Closed on load", answer="This FAQ item starts collapsed.") }}
{{ apep.macros.faq_list(items=faq_items) }}
{# ---- Review Cards ------------------------------------------------ #}

Review Cards

Single with date

{{ apep.macros.review_card(text=review_single.text, author=review_single.author, role=review_single.role, rating=review_single.rating, date=review_single.date) }}

Expandable

{{ apep.macros.review_card(text="This is a very long review text that will overflow the card and trigger the expand button. It keeps going to demonstrate the expand/collapse feature properly. Even more text here to make sure it actually overflows the max-height of the card body.", author="Long Reviewer", rating=4, expandable=true, expand_text="Read more", collapse_text="Show less") }}
{{ apep.macros.review_gallery(reviews=review_items, expand_text="Read more", collapse_text="Show less") }}
{# ---- Logo Scroller ----------------------------------------------- #}
Icons by heroicons.com - MIT License

Logo Scroller - SVG Icons

{{ apep.macros.logo_scroller(logos=partner_logos, speed=25, logo_height=48) }}

Logo Scroller - With Links

{{ apep.macros.logo_scroller(logos=partner_logos_linked, speed=35, logo_height=48) }}
{# ---- Image ------------------------------------------------------- #}
Photos by unsplash.com - Free to use under the Unsplash License

Image - Variants

Default

{{ apep.macros.image(src="/apep-static/images/examples/unsplash1.svg", alt="Nature 1", width="200px") }}

Not Protected image(right-click)

{{ apep.macros.image(src="/apep-static/images/examples/unsplash2.svg", alt="Nature 2", width="200px", protected=false) }}

Downloadable

{{ apep.macros.image(src="/apep-static/images/examples/unsplash3.svg", alt="Nature 3", width="200px", downloadable=true) }}

With Link

{{ apep.macros.image(src="/apep-static/images/examples/unsplash9.svg", alt="Nature 9", width="200px", url="https://unsplash.com") }}

Image - SVG Inline (heroicons)

Default

{{ apep.macros.image(src=logos.logo1, alt="Icon 1", width="80px", height="80px") }}

Protected & Downloadable

{{ apep.macros.image(src=logos.logo2, alt="Icon 2", width="80px", height="80px", protected=true, downloadable=true) }}

Linked

{{ apep.macros.image(src=logos.logo3, alt="Icon 3", width="80px", height="80px", url="https://heroicons.com") }}
{# ---- Image Gallery ----------------------------------------------- #}

Image Gallery - All 9 Unsplash Photos

Click any image to open fullscreen overlay.

{{ apep.macros.image_gallery(images=gallery_images) }}

Image Gallery - Downloadable

{{ apep.macros.image_gallery(images=gallery_images[:6], downloadable=true) }}
{# ---- Sidescroller ------------------------------------------------ #}

Sidescroller - Variants

Default - drag to scroll

{{ apep.macros.sidescroller(items=scroller_items) }}

With Overlay - click to expand

{{ apep.macros.sidescroller(items=scroller_items_overlay) }}

Protected & Downloadable

{{ apep.macros.sidescroller(items=scroller_items_dl) }}