Skip to content

Commit

Permalink
Combination (mmistakes#578)
Browse files Browse the repository at this point in the history 
This PR combines (and resolves conflicts between) mmistakes#448, mmistakes#463, mmistakes#466, mmistakes#494, mmistakes#495, mmistakes#496, mmistakes#498, and mmistakes#572. 

The main aim is to facilitate use of several of the implemented features _together_, when using the fork as a remote theme. It should also simplify merging the included PRs into a future release.

The branch [combination-rec-nav](https://github.com/pdmosses/just-the-docs/tree/combination-rec-nav) adds [multi-level navigation](just-the-docs/just-the-docs#462) and (NEW:) [sibling links](just-the-docs/just-the-docs#394) to the branch used for this PR. It includes updated [documentation for the navigation structure](https://pdmosses.github.io/just-the-docs/docs/navigation-structure/), and reorganised and extended [navigation tests](https://pdmosses.github.io/just-the-docs/tests/navigation/). The documentation and the tests can be browsed at the (temporary) [website published from the combination-rec-nav branch](https://pdmosses.github.io/just-the-docs/).

_Caveat:_ The changes to v0.3.3 in this PR and mmistakes#462 have not yet been reviewed or approved, and may need updating before merging into a release of the theme. If you use a branch from a PR as a remote theme, there is a risk of such updates affecting your website. Moreover, these branches are likely to be deleted after they have been merged. To avoid  such problems, you could copy the branch that you want to use to your own fork of the theme.

Co-authored-by: Matt Wang <matt@matthewwang.me>
  • Loading branch information
@pdmosses @mattxwang
pdmosses and mattxwang authored Jul 4, 2022
1 parent 2b4f399 commit 70b34f0
Show file tree
Hide file tree
Showing 96 changed files with 1,137 additions and 1,451 deletions.
2 changes: 1 addition & 1 deletion 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@

<h1>Page not found</h1>

<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | absolute_url }}">site's home page</a>.</p>
<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | relative_url }}">site's home page</a>.</p>
10 changes: 1 addition & 9 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,7 @@ baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
url: "https://just-the-docs.github.io" # the base hostname & protocol for your site, e.g. http://example.com

permalink: pretty
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"
, "docs/tests/"
]

# Regression tests
# By default, the pages in /docs/tests are excluded when the ste is built.
# To include them, comment-out the relevant line above.
# Uncommenting the following line doesn't work - see https://github.com/jekyll/jekyll/issues/4791
# include: ["docs/tests/"]
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]

# Set a path/url to a logo that will be displayed instead of the title
#logo: "/assets/images/just-the-docs.png"
Expand Down
93 changes: 93 additions & 0 deletions _includes/css/callouts.scss.liquid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{%- comment -%}
{% include css/callouts.scss.liquid color_scheme = string %}
produces SCSS for all the callouts in site.callouts. For the "dark"
color scheme, the levels of the text and background colors are reversed.
{%- endcomment -%}

{%- assign callout_background_hue = "000" -%}
{%- assign callout_color_hue = "300" -%}
{%- if site.callouts_level == "loud" or include.color_scheme == "dark" and site.callouts_level != "quiet" -%}
{%- assign callout_background_hue = "300" -%}
{%- assign callout_color_hue = "000" -%}
{%- endif -%}

div.opaque {
background-color: $body-background-color;
}

{%- for callout in site.callouts %}

{%- assign callout_opacity = callout[1].opacity | default: site.callouts_opacity | default: 0.2 -%}

p.{{ callout[0] }}, blockquote.{{ callout[0] }} {
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
padding: .8rem;
{% if callout[1].title %}
&::before {
color: ${{ callout[1].color }}-{{ callout_color_hue }};
content: "{{ callout[1].title }}";
display: block;
font-weight: bold;
text-transform: uppercase;
font-size: .75em;
padding-bottom: .125rem;
}
{% endif %}
> .{{ callout[0] }}-title {
color: ${{ callout[1].color }}-{{ callout_color_hue }};
display: block;
font-weight: bold;
text-transform: uppercase;
font-size: .75em;
padding-bottom: .125rem;
}
}

p.{{ callout[0] }}-title, blockquote.{{ callout[0] }}-title {
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
padding: .8rem;
> p:first-child {
margin-top: 0;
margin-bottom: 0;
color: ${{ callout[1].color }}-{{ callout_color_hue }};
display: block;
font-weight: bold;
text-transform: uppercase;
font-size: .75em;
padding-bottom: .125rem;
}
}

blockquote.{{ callout[0] }} {
margin-left: 0;
margin-right: 0;

> p:first-child {
margin-top: 0;
}

> p:last-child {
margin-bottom: 0;
}
}

blockquote.{{ callout[0] }}-title {
margin-left: 0;
margin-right: 0;

> p:nth-child(2) {
margin-top: 0;
}

> p:last-child {
margin-bottom: 0;
}
}

{% endfor -%}
3 changes: 2 additions & 1 deletion _includes/css/just-the-docs.scss.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
$logo: "{{ site.logo | relative_url }}";
{% endif %}
@import "./support/support";
@import "./color_schemes/{{ include.color_scheme }}";
@import "./modules";
{% include css/custom.scss.liquid %}
{% include css/callouts.scss.liquid color_scheme = include.color_scheme %}
34 changes: 30 additions & 4 deletions _includes/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@
{%- for node in pages_list -%}
{%- if node.parent == nil -%}
{%- unless node.nav_exclude -%}
<li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
<li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
<a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
<ul class="nav-list ">
Expand All @@ -74,14 +74,14 @@
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
<a href="{{ child.url | relative_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
<ul class="nav-list">
{%- for grand_child in grand_children_list -%}
{%- unless grand_child.nav_exclude -%}
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
<a href="{{ grand_child.url | relative_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{%- endunless -%}
{%- endfor -%}
Expand All @@ -97,3 +97,29 @@
{%- endif -%}
{%- endfor -%}
</ul>

{%- if page.collection == include.key -%}

{%- for node in pages_list -%}
{%- if node.parent == nil -%}
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | relative_url -%}
{%- endif -%}
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
{%- for child in children_list -%}
{%- if child.has_children -%}
{%- if page.url == child.url or page.parent == child.title and page.grand_parent == child.parent -%}
{%- assign second_level_url = child.url | relative_url -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}

{% if page.has_children == true and page.has_toc != false %}
{%- assign toc_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
{%- endif -%}

{%- endif -%}
52 changes: 28 additions & 24 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,47 @@

<div class="side-bar">
<div class="site-header">
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
<a href="#" id="menu-button" class="site-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
</a>
</div>
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% assign pages_top_size = site.html_pages
| where_exp:"item", "item.title != nil"
| where_exp:"item", "item.parent == nil"
| where_exp:"item", "item.nav_exclude != true"
| size %}
{% if pages_top_size > 0 %}
{% include nav.html pages=site.html_pages key=nil %}
{% endif %}
{% if site.just_the_docs.collections %}
{% assign collections_size = site.just_the_docs.collections | size %}
{% for collection_entry in site.just_the_docs.collections %}
{% assign collection_key = collection_entry[0] %}
{% assign collection_value = collection_entry[1] %}
{% assign collection = site[collection_key] %}
{% if collection_value.nav_exclude != true %}
{% if collections_size > 1 %}
<div class="nav-category">{{ collection_value.name }}</div>
{% if collections_size > 1 or pages_top_size > 0 %}
{% if collection_value.nav_fold == true %}
<ul class="nav-list nav-category-list">
<li class="nav-list-item{% if page.collection == collection_key %} active{% endif %}">
{%- if collection.size > 0 -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<div class="nav-category">{{ collection_value.name }}</div>
{% include nav.html pages=collection key=collection_key %}
</li>
</ul>
{% else %}
<div class="nav-category">{{ collection_value.name }}</div>
{% include nav.html pages=collection key=collection_key %}
{% endif %}
{% else %}
{% include nav.html pages=collection key=collection_key %}
{% endif %}
{% include nav.html pages=collection %}
{% endif %}
{% endfor %}
{% else %}
{% include nav.html pages=site.html_pages %}
{% endif %}
</nav>
<footer class="site-footer">
Expand Down Expand Up @@ -102,21 +122,6 @@
<div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
{%- for node in pages_list -%}
{%- if node.parent == nil -%}
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%}
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
{%- for child in children_list -%}
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
Expand All @@ -141,10 +146,9 @@
<hr>
<h2 class="text-delta">Table of contents</h2>
<ul>
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
{% for child in children_list %}
{% for child in toc_list %}
<li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
<a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endfor %}
</ul>
Expand Down
Loading

0 comments on commit 70b34f0

Please sign in to comment.