mohamad
246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
{% extends "base.html" %}
|
||
{% load static %}
|
||
|
||
{% block title %}{{ sub_product.name }} — {{ main_product.name }}{% endblock %}
|
||
{% block meta_description %}{{ sub_product.short_description }}{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<section class="page-hero" aria-labelledby="sub-product-heading">
|
||
<div class="page-hero-blobs" aria-hidden="true">
|
||
<div class="blob blob--1"></div>
|
||
<div class="blob blob--2"></div>
|
||
</div>
|
||
<div class="container">
|
||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||
<ol class="breadcrumb-list" role="list">
|
||
<li><a href="{% url 'pages:home' %}">Home</a></li>
|
||
<li aria-hidden="true" class="breadcrumb-sep">›</li>
|
||
<li><a href="{% url 'products:overview' %}">Products</a></li>
|
||
<li aria-hidden="true" class="breadcrumb-sep">›</li>
|
||
<li><a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a></li>
|
||
<li aria-hidden="true" class="breadcrumb-sep">›</li>
|
||
<li aria-current="page">{{ sub_product.name }}</li>
|
||
</ol>
|
||
</nav>
|
||
<div class="page-hero-content">
|
||
<div class="section-badge">{{ main_product.name }}</div>
|
||
<h1 class="page-hero-title" id="sub-product-heading">{{ sub_product.name }}</h1>
|
||
<p class="page-hero-subtitle">{{ sub_product.short_description }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="section sub-product-layout">
|
||
<div class="container">
|
||
<div class="sub-product-grid">
|
||
|
||
<main class="sub-product-main">
|
||
{% if sub_product.image %}
|
||
<div class="sub-product-image glass-card fade-in">
|
||
<img src="{{ sub_product.image.url }}" alt="{{ sub_product.name }}" loading="lazy" />
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="sub-product-desc glass-card fade-in">
|
||
<h2>About {{ sub_product.name }}</h2>
|
||
<div class="rich-content" data-readmore="220">{{ sub_product.rendered_description }}</div>
|
||
</div>
|
||
|
||
{% if show_releases_section %}
|
||
{% if distribution_installable %}
|
||
<section class="sub-downloads fade-in" aria-labelledby="sub-dl-heading">
|
||
<h2 class="sub-downloads-title" id="sub-dl-heading">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||
</svg>
|
||
Downloads
|
||
</h2>
|
||
|
||
<div class="sub-downloads-channel">
|
||
{% if featured_version.is_featured_stable %}
|
||
<span class="release-channel-label release-channel-label--stable">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
Stable
|
||
</span>
|
||
{% endif %}
|
||
{% if featured_install_cells %}
|
||
<div class="sub-downloads-grid">
|
||
{% for cell in featured_install_cells %}
|
||
<div class="sub-dl-item">
|
||
<div class="sub-dl-icon-wrap">
|
||
{% if cell.icon %}
|
||
<img src="{% static cell.icon %}" alt="" width="32" height="32" class="platform-icon sub-dl-icon" aria-hidden="true" />
|
||
{% else %}
|
||
<span class="sub-dl-source-mark" aria-hidden="true">
|
||
<svg class="sub-dl-source-svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round">
|
||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||
</svg>
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
<span class="sub-dl-platform">{{ cell.label }}</span>
|
||
<span class="download-version">v{{ featured_version.version }}</span>
|
||
<a href="{{ cell.url }}" class="btn-primary btn--sm"{% if cell.label == "Source code" %} target="_blank" rel="noopener noreferrer"{% endif %}>{% if cell.label == "Source code" %}Source{% else %}Download{% endif %}</a>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if featured_version.package_resource_url %}
|
||
<p class="sub-install-extra-resource">
|
||
<a href="{{ featured_version.package_resource_url }}" target="_blank" rel="noopener noreferrer">Package resource</a>
|
||
</p>
|
||
{% endif %}
|
||
|
||
{% if featured_version.release_notes %}
|
||
<p class="sub-release-notes">{{ featured_version.release_notes }}</p>
|
||
{% endif %}
|
||
|
||
{% if show_older_versions_link %}
|
||
<p class="sub-older-versions-inner">
|
||
<a href="{{ sub_product.get_versions_archive_url }}" class="link-arrow">Older releases</a>
|
||
</p>
|
||
{% endif %}
|
||
</section>
|
||
|
||
{% elif distribution_package %}
|
||
<section class="sub-downloads sub-downloads--package fade-in" aria-labelledby="sub-resources-heading">
|
||
<h2 class="sub-downloads-title" id="sub-resources-heading">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||
</svg>
|
||
Resources
|
||
</h2>
|
||
<ul class="pkg-version-list" role="list">
|
||
{% for ver in package_versions %}
|
||
<li class="pkg-version-row">
|
||
<div class="pkg-version-meta">
|
||
<span class="download-version">v{{ ver.version }}</span>
|
||
{% if ver.is_featured_stable %}
|
||
<span class="release-channel-label release-channel-label--stable pkg-stable-inline">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
Stable
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="pkg-version-actions">
|
||
{% if ver.package_resource_url %}
|
||
<a href="{{ ver.package_resource_url }}" class="btn-primary btn--sm" target="_blank" rel="noopener noreferrer">Open</a>
|
||
{% endif %}
|
||
{% if ver.source_code_url %}
|
||
<a href="{{ ver.source_code_url }}" class="btn-ghost btn--sm" target="_blank" rel="noopener noreferrer">Source</a>
|
||
{% endif %}
|
||
</div>
|
||
{% if ver.release_notes %}
|
||
<p class="pkg-version-notes">{{ ver.release_notes }}</p>
|
||
{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</section>
|
||
{% endif %}
|
||
|
||
{% endif %}
|
||
|
||
{% if articles %}
|
||
<section aria-label="Content sections">
|
||
<div class="articles-list">
|
||
{% for article in articles %}
|
||
<article class="article-card glass-card fade-in" aria-labelledby="article-{{ article.pk }}-title">
|
||
{% if article.badge %}<div class="article-card-header"><div class="section-badge article-badge">{{ article.badge }}</div></div>{% endif %}
|
||
<h3 class="article-title" id="article-{{ article.pk }}-title">{{ article.title }}</h3>
|
||
<div class="article-description rich-content" data-readmore="260">{{ article.rendered_description }}</div>
|
||
{% if article.sections.all %}
|
||
<div class="article-sections">
|
||
<dl class="article-sections-list">
|
||
{% for section in article.sections.all %}
|
||
<div class="article-section-item">
|
||
<dt class="section-key">{{ section.title }}</dt>
|
||
<dd class="section-value rich-content" data-readmore="160">{{ section.rendered_value }}</dd>
|
||
</div>
|
||
{% endfor %}
|
||
</dl>
|
||
</div>
|
||
{% endif %}
|
||
{% if article.citations.all %}
|
||
<div class="article-citations" id="article-{{ article.pk }}-citations">
|
||
<h4 class="article-citations-title">Citations</h4>
|
||
<ol class="article-citations-list">
|
||
{% for citation in article.citations.all %}
|
||
<li class="article-citation-item">
|
||
<span class="citation-text">{{ citation.text }}</span>
|
||
{% if citation.url %}
|
||
<a href="{{ citation.url }}" class="citation-link" target="_blank" rel="noopener noreferrer" aria-label="Open citation source">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<path d="M7 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1V9M10 2h4m0 0v4m0-4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</a>
|
||
{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ol>
|
||
</div>
|
||
{% endif %}
|
||
{% if article.citation_count_display is not None or article.citation_count_label %}
|
||
{% if article.citations.exists %}
|
||
<a href="#article-{{ article.pk }}-citations" class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
|
||
{% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
|
||
{% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
|
||
</a>
|
||
{% else %}
|
||
<div class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
|
||
{% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
|
||
{% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
</main>
|
||
|
||
<aside class="sub-product-sidebar" aria-label="Related modules">
|
||
<div class="sidebar-sticky">
|
||
<div class="sidebar-section glass-card">
|
||
<h3 class="sidebar-title">
|
||
<a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a> Modules
|
||
</h3>
|
||
{% if siblings %}
|
||
<ul class="sidebar-list" role="list">
|
||
{% for sibling in siblings %}
|
||
<li>
|
||
<a href="{{ sibling.get_absolute_url }}" class="sidebar-link">
|
||
<span class="sidebar-dot" aria-hidden="true"></span>
|
||
{{ sibling.name }}
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% else %}
|
||
<p class="sidebar-empty">No other modules in this product.</p>
|
||
{% endif %}
|
||
</div>
|
||
<a href="{{ main_product.get_absolute_url }}" class="btn-ghost sidebar-back-btn">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
Back to {{ main_product.name }}
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %}
|