From 5bcb269331fbf07a17efe66c63dce01a27224cd3 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 17 Sep 2025 11:30:35 +0200 Subject: [PATCH 1/2] POC snap details page updates --- templates/store/_package_header.poc.jinja | 130 ++++++ templates/store/snap-details.html | 28 +- templates/store/snap-details.old.html | 383 ++++++++++++++++++ ..._distro-instructions-for-snap-support.html | 21 +- 4 files changed, 543 insertions(+), 19 deletions(-) create mode 100644 templates/store/_package_header.poc.jinja create mode 100644 templates/store/snap-details.old.html diff --git a/templates/store/_package_header.poc.jinja b/templates/store/_package_header.poc.jinja new file mode 100644 index 0000000000..fcb6b7d13d --- /dev/null +++ b/templates/store/_package_header.poc.jinja @@ -0,0 +1,130 @@ +{%- from 'store/_developer_info.jinja' import developer_info -%} +{%- from 'store/_publisher_info.jinja' import publisher_info -%} + + +{%- macro package_icon_poc( + package_title, + icon_url, + image) -%} + {% if icon_url %} + {% if icon_url.startswith("blob") %} + + {% else %} + {{ image(url=icon_url, + alt=package_title, + width=120, + height=120, + hi_def=True, + loading="eager", + attrs={"class": "", "data-live": "icon"}) | safe + }} + {% endif %} + {% else %} + + {% endif %} +{%- endmacro -%} + + +{%- macro package_header_data_poc( + package_title, + icon_url, + developer, + categories, + image, + display_name, + username, + publisher, + developer_validation, + STAR_DEVELOPER, + VERIFIED_PUBLISHER) -%} + +
+

{{ package_title }}

+ + {# TODO: + Extract the section below as own slot, to avoid dependency on a lot of publisher data? + #} +
+ {% if developer %} + {{ developer_info(name=developer[0], url=developer[1]) }} + {% endif %} + {{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }} + +
+ +
+{%- endmacro -%} + + + + +{# +Context variables needed: + +Snap data: + snap_title: Title of the snap + icon_url: URL of the icon + categories: List of categories with slug/name + +Publisher data: + username: Publisher's username + publisher: Publisher object (used in display_name) + developer: Tuple/List – name and URL + developer_validation: Status string + +Other: + image: template function + display_name: template function + VERIFIED_PUBLISHER: const (value of developer_validation) + STAR_DEVELOPER: const (value of developer_validation) +#} + +{%- macro package_header_poc() -%} + {%- set buttons_content = caller('buttons') -%} + {%- set has_buttons_content = buttons_content|trim|length > 0 -%} +
+
+ {{ package_icon_poc(package_title, icon_url, image) }} +
+
+
+ {{ package_header_data_poc(package_title=snap_title, + icon_url=icon_url, + developer=developer, + categories=categories, + image=image, + display_name=display_name, + username=username, + publisher=publisher, + developer_validation=developer_validation, + STAR_DEVELOPER=STAR_DEVELOPER, + VERIFIED_PUBLISHER=VERIFIED_PUBLISHER) }} + +
+ {%- if has_buttons_content -%} +
{{ buttons_content }}
+ {%- endif -%} +
+
+ +{%- endmacro -%} + diff --git a/templates/store/snap-details.html b/templates/store/snap-details.html index 20fca327a5..8dfd8ad6b1 100644 --- a/templates/store/snap-details.html +++ b/templates/store/snap-details.html @@ -1,5 +1,5 @@ {% extends "_layout.html" %} -{% from "store/_package_header.jinja" import package_header with context %} +{% from "store/_package_header.poc.jinja" import package_header_poc with context %} {% block meta_copydoc %}{% endblock %} @@ -88,8 +88,7 @@ {% endif %} -
- {%- call(slot) package_header() -%} + {%- call(slot) package_header_poc() -%} {%- if slot == 'buttons' -%}
{% include "store/snap-details/_channel_map.html" %} @@ -155,12 +153,8 @@
-
-
- {% if summary or is_preview %}

{{ summary }}

{% endif %} -
{{ description | safe }}
-
-
+
+
{% include "store/snap-details/_details.html" %} {# EMBEDDABLE CARD SECTION - hidden in preview #} @@ -172,6 +166,10 @@

Share this snap

{% include "store/snap-details/_embedded_card_modal.html" %} {% endif %}
+
+ {% if summary or is_preview %}

{{ summary }}

{% endif %} +
{{ description | safe }}
+
@@ -190,15 +188,17 @@

Share this snap

Where people are using {{ snap_title }}

+
+
{% if countries %} -
+
{% endif %} {% if normalized_os %} {% if normalized_os|length > 21 %} -
{% endif %} diff --git a/templates/store/snap-details.old.html b/templates/store/snap-details.old.html new file mode 100644 index 0000000000..2ea98f8aec --- /dev/null +++ b/templates/store/snap-details.old.html @@ -0,0 +1,383 @@ +{% extends "_layout.html" %} +{% from "store/_package_header.jinja" import package_header with context %} + +{% block meta_copydoc %}{% endblock %} + +{% block meta_title %}Install {{ snap_title }} on Linux | Snap Store{% endblock %} +{% block meta_description %}Get the latest version of {{ snap_title }} for Linux - {{ summary }}{% endblock %} +{% block meta_image %}{% if icon_url %}{{ icon_url }}{% else %}https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg{% endif %}{% endblock %} + +{% block meta_image_width %}200{% endblock %} +{% block meta_image_height %}200{% endblock %} +{% block meta_twitter_card %}summary{% endblock %} +{% block meta_image_alt %}{{ snap_title }} snap logo{% endblock %} + +{% block extra_meta %} + {% if unlisted %} + + {% endif %} +{% endblock %} + +{% block meta_schema %} + +{% endblock %} + +{% block content %} + {% if is_preview %} +
+
+
+

You are previewing the listing page for {{package_name}}

+
+
+
+ + + + + +
+
+
+
+ {% endif %} + {% if is_preview %} +
+ {% endif %} +
+ {% if is_users_snap and not is_preview %} +
+
+
+

+ Ensure your snap always stays relevant and compelling. Update its listing information here. +

+
+
+
+ {% endif %} +
+ {%- call(slot) package_header() -%} + {%- if slot == 'buttons' -%} + + {% if has_stable %} + + {% endif %} + {% if package_name in appliances %} +

+ Available as an + + Ubuntu Appliance + Install a ready-made {{snap_title}} image
on a Raspberry Pi, an Intel NUC or try
it in a VM and get started. + +

+ {% endif %} + {% if (categories[0] and categories[0].slug == "devices-and-iot") or (categories[1] and categories[1].slug == "devices-and-iot") %} +

+ + Contact us about Snaps and IoT › + +

+ {% endif %} + {%- endif -%} + {%- endcall -%} +
+
+ + {% include "store/snap-details/_channel_map.html" %} + + {% if screenshots or video or is_preview %} +
+ {% include "store/snap-details/_screenshots.html" %} +
+ {% endif %} + +
+
+
+
+ {% if summary or is_preview %}

{{ summary }}

{% endif %} +
{{ description | safe }}
+
+
+ {% include "store/snap-details/_details.html" %} + + {# EMBEDDABLE CARD SECTION - hidden in preview #} + {% if not IS_BRAND_STORE %} +

Share this snap

+

Generate an embeddable card to be shared on external websites.

+

+ + {% include "store/snap-details/_embedded_card_modal.html" %} + {% endif %} +
+
+
+ + {% if not IS_BRAND_STORE %} + {% include "store/snap-details/_distro-instructions-for-snap-support.html" %} + {% endif %} + + {% if not IS_BRAND_STORE and package_name == "hiri" %} + {% include "partials/_hiri-case-study.html" %} + {% endif %} + + {% if countries or normalized_os %} +
+
+
+
+

Where people are using {{ snap_title }}

+
+
+ {% if countries %} +
+
+
+ {% endif %} + {% if normalized_os %} + {% if normalized_os|length > 21 %} + + {% else %} +
+

Users by distribution (log)

+
+
+ {% for distro in normalized_os %} +
+ {{ distro.name }}
+ {% endfor %} +
+
+ {% for distro in normalized_os %} +
+ {% endfor %} +
+
+
+ {% endif %} + {% endif %} +
+
+
+ {% endif %} + + {% if has_publisher_page %} +
+
+

More snaps from {{ display_name(publisher, username) }}

+ View all snaps +
+ {% if publisher_featured_snaps %} + {% if publisher_featured_snaps[1]%} +
+ {% else %} +
+ {% endif %} + {% set snap = publisher_featured_snaps[0] %} + {% include 'partials/_publisher-featured-snap.html' %} + {% if publisher_featured_snaps[1] %} + {% set snap = publisher_featured_snaps[1] %} + {% include 'partials/_publisher-featured-snap.html' %} + {% endif %} +
+
+ {% endif %} + {% if publisher_snaps %} +
+
+ {% for snap in publisher_snaps %} + {% set hide_publisher = True %} + {% set show_summary = True %} +
+ {% include "store/_media-object-snap-partial.html" %} +
+ {% endfor %} +
+
+ {% endif %} +
+ {% endif %} + {% if is_preview %} +
+ {% endif %} + + {% if api_error %} +
+
+
+
Error
+

API request failed

+
+
+
+ {% endif %} + + {% include "store/snap-details/_templates.html" %} +{% endblock %} + +{% block scripts_includes %} + +{% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/templates/store/snap-details/_distro-instructions-for-snap-support.html b/templates/store/snap-details/_distro-instructions-for-snap-support.html index 305b3f8b40..0b8b4789b2 100644 --- a/templates/store/snap-details/_distro-instructions-for-snap-support.html +++ b/templates/store/snap-details/_distro-instructions-for-snap-support.html @@ -1,11 +1,17 @@ -
+
-
-

Install {{snap_title}} on your Linux distribution

-

Choose your Linux distribution to get detailed installation instructions. If yours is not shown, get more details on the installing snapd documentation.

+
+
+
+

Install {{snap_title}}
on your Linux distribution

-
-
+
+

Choose your Linux distribution to get detailed installation instructions. If yours is not shown, get more details on the installing snapd documentation.

+
+
+
+
+
+
+
+
From 398098966a7e611e60b7c7ed7eefd07e2a15a3e2 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 2 Oct 2025 12:42:55 +0200 Subject: [PATCH 2/2] Enable paper backround --- templates/_base-layout.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/_base-layout.html b/templates/_base-layout.html index 72f968d525..c51ba563c7 100644 --- a/templates/_base-layout.html +++ b/templates/_base-layout.html @@ -61,7 +61,7 @@ - +