mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: Refactor pagination and table of contents into separate includes for better maintainability
This commit is contained in:
codecalm
BIN
docs/public/img/banner-carbon.png
Normal file
BIN
docs/public/img/banner-carbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
46
shared/includes/docs/pagination.html
Normal file
46
shared/includes/docs/pagination.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
{% assign children = collections.docs | collection-children: page %}
|
||||||
|
{% if children.size > 0 %}
|
||||||
|
<div class="mt-6 pt-6">
|
||||||
|
<div class="row row-deck row-cards">
|
||||||
|
{% for c in children %}
|
||||||
|
{% include "docs/docs-card.html" href=c.url title=c.data.title description=c.data.description icon=c.data.icon %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
{% assign next-prev = collections.docs | next-prev: page %}
|
||||||
|
<div class="mt-6 pt-6">
|
||||||
|
<ul class="pagination">
|
||||||
|
{% if next-prev.prev %}
|
||||||
|
<li class="page-item page-prev">
|
||||||
|
<a class="page-link" href="{{ next-prev.prev.url }}">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-auto">
|
||||||
|
{% include "ui/icon.html" icon="chevron-left" %}
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="page-item-subtitle">previous</div>
|
||||||
|
<div class="page-item-title">{{ next-prev.prev.data.title }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if next-prev.next %}
|
||||||
|
<li class="page-item page-next">
|
||||||
|
<a class="page-link" href="{{ next-prev.next.url }}">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="page-item-subtitle">next</div>
|
||||||
|
<div class="page-item-title">{{ next-prev.next.data.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
{% include "ui/icon.html" icon="chevron-right" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
21
shared/includes/docs/toc.html
Normal file
21
shared/includes/docs/toc.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{% assign toc = content | toc %}
|
||||||
|
{% if toc.size > 0 %}
|
||||||
|
<h3>
|
||||||
|
Table of Contents
|
||||||
|
</h3>
|
||||||
|
<div class="nav nav-vertical" id="toc">
|
||||||
|
{% for item in toc %}
|
||||||
|
<a href="#{{ item.id }}" class="nav-link{% if item.level == 3 %} ms-3{% endif %}">
|
||||||
|
{{ item.text }}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a href="https://r.tabler.io/illustrations" class="card card-sm mt-6 shadow-none" target="_blank">
|
||||||
|
<div class="card-body">
|
||||||
|
<img src="/img/banner-carbon.png" class="mb-3" alt="">
|
||||||
|
|
||||||
|
<h4>{{ illustrations | size }} sleek illustrations for your startup's visual identity.</h4>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
@@ -107,52 +107,7 @@
|
|||||||
|
|
||||||
{{ content | headings-id }}
|
{{ content | headings-id }}
|
||||||
|
|
||||||
{% assign children = collections.docs | collection-children: page %}
|
{% include "docs/pagination.html" %}
|
||||||
{% if children.size > 0 %}
|
|
||||||
<div class="mt-6 pt-6">
|
|
||||||
<div class="row row-deck row-cards">
|
|
||||||
{% for c in children %}
|
|
||||||
{% include "docs/docs-card.html" href=c.url title=c.data.title description=c.data.description icon=c.data.icon %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
{% assign next-prev = collections.docs | next-prev: page %}
|
|
||||||
<div class="mt-6 pt-6">
|
|
||||||
<ul class="pagination">
|
|
||||||
{% if next-prev.prev %}
|
|
||||||
<li class="page-item page-prev">
|
|
||||||
<a class="page-link" href="{{ next-prev.prev.url }}">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-auto">
|
|
||||||
{% include "ui/icon.html" icon="chevron-left" %}
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="page-item-subtitle">previous</div>
|
|
||||||
<div class="page-item-title">{{ next-prev.prev.data.title }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% if next-prev.next %}
|
|
||||||
<li class="page-item page-next">
|
|
||||||
<a class="page-link" href="{{ next-prev.next.url }}">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="page-item-subtitle">next</div>
|
|
||||||
<div class="page-item-title">{{ next-prev.next.data.title }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
{% include "ui/icon.html" icon="chevron-right" %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="mt-7">
|
<div class="mt-7">
|
||||||
<div>
|
<div>
|
||||||
@@ -187,19 +142,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-2 d-none d-xxl-block">
|
<div class="col-2 d-none d-xxl-block">
|
||||||
<div class="py-6 sticky-top">
|
<div class="py-6 sticky-top">
|
||||||
{% assign toc = content | toc %}
|
{% include "docs/toc.html" %}
|
||||||
{% if toc.size > 0 %}
|
|
||||||
<h3>
|
|
||||||
Table of Contents
|
|
||||||
</h3>
|
|
||||||
<div class="nav nav-vertical" id="toc">
|
|
||||||
{% for item in toc %}
|
|
||||||
<a href="#{{ item.id }}" class="nav-link{% if item.level == 3 %} ms-3{% endif %}">
|
|
||||||
{{ item.text }}
|
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user