david-swift/duckling
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Implement docs sidebar #3
Some checks are pending
Publish / publish (push) Waiting to run
Details

Browse Source
This commit is contained in:
david-swift 2025-04-01 14:31:12 +02:00
parent 6c9da90f7a
commit 5d621bc729
19 changed files with 212 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
sass/_docs.scss Normal file
View File

@ -0,0 +1,64 @@
#docs {
background-color: var(--fg-muted-1-soft);
padding: 0.5em 1em;
border-radius: var(--rounded-corner);
min-width: 200px;
margin: 0rem 1rem 0rem 1rem;
ul {
padding: 0;
list-style-type: none;
}
a {
display: block;
text-decoration: none;
color: var(--fg-muted-5);
padding: 0.5em 1em 0.5em 1em;
background: transparent;
border-radius: var(--rounded-corner-small);
width: 100%;
}
a:hover {
background: var(--fg-muted-1-soft);
transition: 0.1s;
}
.active {
background: var(--fg-muted-1);
color: var(--fg-muted-5);
}
h3 {
padding-left: 1em;
font-size: var(--font-size-medium);
}
}
#docs-container {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
#docs {
left: 1em;
margin-bottom: 1em;
}
article {
margin-left: auto;
margin-right: auto;
max-width: min(var(--container-width), 90%);
}
}
#toc-hidden {
visibility: hidden;
height: 0px;
}
.expand-main {
width: 100%;
}

3
sass/_general.scss
View File

@ -72,6 +72,9 @@ body {
main {
margin: 4.25rem auto 4rem;
}
.restricted-width {
width: min(var(--container-width), 90%);
}

2
sass/_variables.scss
View File

@ -21,6 +21,7 @@
--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--fg-color: rgb(255 255 255);
--fg-contrast: rgb(0 0 0 / 0.8);
--fg-muted-1-soft: rgb(255 255 255 / 0.03);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
--fg-muted-3: rgb(255 255 255 / 0.2);
@ -45,6 +46,7 @@
--fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
--fg-contrast-soft: rgb(255 255 255);
--fg-muted-1-soft: var(--fg-muted-1);
--fg-muted-1: rgb(0 0 0 / 0.05);
--fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-3: rgb(0 0 0 / 0.2);

1
sass/style.scss
View File

@ -15,6 +15,7 @@
@use "code";
@use "comments";
@use "crt";
@use "docs";
@use "emoji";
@use "external";
@use "footer";

2
templates/404.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}

2
templates/article.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}

2
templates/article_list.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}

2
templates/base.html
View File

@ -15,7 +15,7 @@
{%- if config.extra.nav.links %}
{% include "partials/nav.html" %}
{%- endif %}
<main id="main-content">
<main id="main-content" class="{% block classes %}{% endblock classes %}">
{% block custom %}{% endblock custom %}
{% block content %}{% endblock content %}
{% include "partials/extra_features.html" %}

2
templates/docs.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}

220
templates/documentation_page.html
View File

@ -1,5 +1,9 @@
{% extends "base.html" %}
{% block classes %}
expand-main
{% endblock classes %}
{% block content %}
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
@ -11,113 +15,119 @@
{%- set section = get_section(path=page.ancestors | last) -%}
<article>
{%- if page.extra.banner -%}
<div id="banner-container">
<img id="banner" class="full-bleed{% if page.extra.banner_pixels %} pixels{% endif %}" src="{{ current_url ~ page.extra.banner }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
</div>
{%- endif -%}
<div id="heading">
<h1>{{ page.title }}</h1>
{%- if page.authors or config.extra.show_reading_time -%}
<p>
<small>
{%- if page.authors -%}
<span>{% include "partials/authors.html" -%}</span>
{%- if config.extra.show_reading_time -%}
<span> {{ config.extra.separator | default(value="•") }} </span>
{%- endif -%}
{%- endif -%}
{%- if config.extra.show_reading_time -%}
<span>{{ macros_translate::translate(key="minutes_read", number=page.reading_time, default="$NUMBER minute read", language_strings=language_strings) }}</span>
{%- if page.taxonomies -%}
<span> {{ config.extra.separator | default(value="•") }} </span>
{%- endif -%}
{%- endif -%}
</small>
</p>
{%- endif -%}
{%- if page.taxonomies -%}
{%- for name, taxon in page.taxonomies %}
<ul class="tags">
{%-for item in taxon -%}
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
{%- endfor %}
</ul>
{%- endfor -%}
{%- endif %}
</div>
<div id="buttons-container">
{%- if page.extra.toc and page.toc | length > 0 -%}
<details id="toc" class="closable">
<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
<div>
<strong class="title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
<div>
<{{ list_element }}>
{%- for h1 in page.toc -%}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{%- if h1.children -%}
<{{ list_element }}>
{%- for h2 in h1.children -%}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
</li>
{%- endfor -%}
</{{ list_element }}>
{%- endif -%}
</li>
{%- endfor -%}
</{{ list_element }}>
</div>
</div>
</details>
{%- endif -%}
{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
<details id="backlinks" class="closable">
<summary title="{{ macros_translate::translate(key='backlinks', default='Backlinks', language_strings=language_strings) }}"><i class="icon"></i></summary>
<div>
<strong class="title">{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</strong>
<div>
<ul>
{%- for backlink in page.backlinks -%}
<li>
<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- endif -%}
<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- if config.extra.show_share_button -%}
<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}{% if page.description %}&text={{ page.description | urlencode }}{% endif %}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
{%- if config.extra.issues_url -%}
<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
</div>
{%- include "partials/statements.html" -%}
{%- if page.extra.toc_inline -%}
{%- include "partials/toc.html" -%}
{%- elif config.extra.toc_inline -%}
{%- include "partials/toc.html" -%}
{%- endif -%}
<div id="docs-container">
{% include "partials/docs_toc.html" %}
{{ page.content | safe }}
</article>
<article>
{%- if page.extra.banner -%}
<div id="banner-container">
<img id="banner" class="full-bleed{% if page.extra.banner_pixels %} pixels{% endif %}" src="{{ current_url ~ page.extra.banner }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
</div>
{%- endif -%}
<div id="heading">
<h1>{{ page.title }}</h1>
{%- if page.authors or config.extra.show_reading_time -%}
<p>
<small>
{%- if page.authors -%}
<span>{% include "partials/authors.html" -%}</span>
{%- if config.extra.show_reading_time -%}
<span> {{ config.extra.separator | default(value="•") }} </span>
{%- endif -%}
{%- endif -%}
{%- if config.extra.show_reading_time -%}
<span>{{ macros_translate::translate(key="minutes_read", number=page.reading_time, default="$NUMBER minute read", language_strings=language_strings) }}</span>
{%- if page.taxonomies -%}
<span> {{ config.extra.separator | default(value="•") }} </span>
{%- endif -%}
{%- endif -%}
</small>
</p>
{%- endif -%}
{%- if page.taxonomies -%}
{%- for name, taxon in page.taxonomies %}
<ul class="tags">
{%-for item in taxon -%}
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
{%- endfor %}
</ul>
{%- endfor -%}
{%- endif %}
</div>
<div id="buttons-container">
{%- if page.extra.toc and page.toc | length > 0 -%}
<details id="toc" class="closable">
<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
<div>
<strong class="title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
<div>
<{{ list_element }}>
{%- for h1 in page.toc -%}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{%- if h1.children -%}
<{{ list_element }}>
{%- for h2 in h1.children -%}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
</li>
{%- endfor -%}
</{{ list_element }}>
{%- endif -%}
</li>
{%- endfor -%}
</{{ list_element }}>
</div>
</div>
</details>
{%- endif -%}
{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
<details id="backlinks" class="closable">
<summary title="{{ macros_translate::translate(key='backlinks', default='Backlinks', language_strings=language_strings) }}"><i class="icon"></i></summary>
<div>
<strong class="title">{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</strong>
<div>
<ul>
{%- for backlink in page.backlinks -%}
<li>
<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- endif -%}
<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- if config.extra.show_share_button -%}
<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}{% if page.description %}&text={{ page.description | urlencode }}{% endif %}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
{%- if config.extra.issues_url -%}
<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
</div>
{%- include "partials/statements.html" -%}
{%- if page.extra.toc_inline -%}
{%- include "partials/toc.html" -%}
{%- elif config.extra.toc_inline -%}
{%- include "partials/toc.html" -%}
{%- endif -%}
{{ page.content | safe }}
</article>
<div id="toc-hidden">
{% include "partials/docs_toc.html" %}
</div>
</div>
{%- if page.extra.comments.id -%}
{%- include "partials/comments.html" -%}

2
templates/index.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{{ section.content | safe }}

2
templates/page.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
<h1>{{ page.title }}</h1>

12
templates/partials/docs_toc.html
View File

@ -1,8 +1,15 @@
{%- if page %}
{% set slug = page.slug %}
{%- else %}
{% set slug = "" %}
{%- endif %}
<div id="docs">
<ul>
{%- for page in section.pages %}
{%- if page.extra.section == 0 %}
<li>
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
<a class="{%- if slug == page.slug -%}active{%- endif -%}" href="{{ page.permalink | safe }}">{{ page.title }}</a>
</li>
{%- endif %}
{%- endfor %}
@ -12,9 +19,10 @@
<h3>{{ section.extra.sections | nth(n=int_section - 1) }}</h3>
{%- for page in pages %}
<li>
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
<a class="{%- if slug == page.slug -%}active{%- endif -%}" href="{{ page.permalink | safe }}">{{ page.title }}</a>
</li>
{%- endfor %}
{%- endif %}
{%- endfor %}
</ul>
</div>

5
templates/restricted_base.html Normal file
View File

@ -0,0 +1,5 @@
{% extends "base.html" %}
{% block classes %}
restricted-width
{% endblock classes %}

2
templates/section.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
<h1>{{ section.title }}</h1>

2
templates/subproject.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}

2
templates/subproject_list.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}

2
templates/taxonomy_list.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set number_of_tags = terms | length -%}

2
templates/taxonomy_single.html
View File

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "restricted_base.html" %}
{% block content %}
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}