mirror of
https://github.com/matrix-org/matrix-spec
synced 2026-02-14 18:13:47 +01:00
Update toc.html
Bring in upstream changes and make it closer to upstream. This requires to change also toc.js and the CSS styles. Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
This commit is contained in:
Kévin Commaille
parent
94b3cda803
commit
9c4ddb6fa8
|
|
@ -50,7 +50,7 @@ function getHeadings() {
|
|||
let headings = [];
|
||||
|
||||
// First get the anchors in the ToC.
|
||||
const toc_anchors = document.querySelectorAll("#toc nav a");
|
||||
const toc_anchors = document.querySelectorAll("#TableOfContents a");
|
||||
|
||||
for (const anchor of toc_anchors) {
|
||||
// Then get the heading from its selector in the anchor's href.
|
||||
|
|
@ -59,7 +59,7 @@ function getHeadings() {
|
|||
console.error("Got ToC anchor without href");
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
const heading = document.querySelector(selector);
|
||||
if (!heading) {
|
||||
console.error("Heading not found for selector:", selector);
|
||||
|
|
@ -122,13 +122,13 @@ function getCurrentHeading(headings, headerOffset) {
|
|||
*/
|
||||
function selectTocEntry(id) {
|
||||
// Deselect previously selected entries.
|
||||
const activeEntries = document.querySelectorAll("#toc nav a.active");
|
||||
const activeEntries = document.querySelectorAll("#TableOfContents a.active");
|
||||
for (const activeEntry of activeEntries) {
|
||||
activeEntry.classList.remove('active');
|
||||
}
|
||||
|
||||
// Find the new entry and select it.
|
||||
const newEntry = document.querySelector(`#toc nav a[href="#${id}"]`);
|
||||
const newEntry = document.querySelector(`#TableOfContents a[href="#${id}"]`);
|
||||
if (!newEntry) {
|
||||
console.error("ToC entry not found for ID:", id);
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -76,52 +76,126 @@ Custom SCSS for the Matrix spec
|
|||
scroll-behavior: smooth;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
&>.td-sidebar-nav__section {
|
||||
& > .td-sidebar-nav__section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.td-sidebar-nav__section .ul-1 ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* This is to make the width of the items that have sub-items (like room versions)
|
||||
the same as the width of items that don't (like changelog) */
|
||||
.pr-md-3, .px-md-3 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ul-1 > li > a {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
.ul-2 > li > a {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
|
||||
a.td-sidebar-link.tree-root {
|
||||
color: $gray-800;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a, a.td-sidebar-link {
|
||||
color: $gray-800;
|
||||
font-weight: $font-weight-normal;
|
||||
padding-top: .2rem;
|
||||
padding-bottom: .2rem;
|
||||
|
||||
display: block;
|
||||
transition: all 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-lighter-background;
|
||||
color: $gray-800;
|
||||
.ul-1 ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.active, &active:hover {
|
||||
background-color: $secondary-background;
|
||||
/* This is to make the width of the items that have sub-items (like room versions)
|
||||
the same as the width of items that don't (like changelog) */
|
||||
.pr-md-3, .px-md-3 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ul-1 > li > a {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
.ul-2 > li > a {
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for the table of contents */
|
||||
& > .td-toc {
|
||||
padding-top: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
/* Add border above the toc */
|
||||
border-top: 1px solid var(--bs-tertiary-color);
|
||||
|
||||
ol {
|
||||
padding-left: 1rem;
|
||||
counter-reset: section;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
/* Remove the space between the title and the ToC */
|
||||
margin-top: 0;
|
||||
|
||||
&>ol>li {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&>a {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&>ol>li>a {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>a {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li a:before {
|
||||
counter-increment: section;
|
||||
content: counters(section, ".") " ";
|
||||
}
|
||||
|
||||
.td-toc-title {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.3rem;
|
||||
|
||||
/* Remove the border under the title */
|
||||
border-bottom: 0;
|
||||
/* Remove the space under the title */
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Fix the top of page link color */
|
||||
a, a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the same style to links in the navigation and in the ToC */
|
||||
& > .td-sidebar-nav__section, & > .td-toc #TableOfContents {
|
||||
li a.td-sidebar-link.tree-root {
|
||||
color: $gray-800;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li a, li a.td-sidebar-link {
|
||||
color: $gray-800;
|
||||
font-weight: $font-weight-normal;
|
||||
padding-top: .2rem;
|
||||
padding-bottom: .2rem;
|
||||
|
||||
transition: all 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-lighter-background;
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
&.active, &active:hover {
|
||||
background-color: $secondary-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -199,64 +273,6 @@ Custom SCSS for the Matrix spec
|
|||
scroll-margin-top: 5.5rem;
|
||||
}
|
||||
|
||||
/* Styles for the table of contents */
|
||||
#toc {
|
||||
padding-top: .5rem;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
ol {
|
||||
padding-left: 1rem;
|
||||
counter-reset: section;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
&>ol>li {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&>a {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&>ol>li>a {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>a {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
&>ol>li>ol>li>ol>li>ol>li>ol>li>a {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li a:before {
|
||||
counter-increment: section;
|
||||
content: counters(section, ".") " ";
|
||||
}
|
||||
|
||||
#toc-title {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.endpoints-toc {
|
||||
summary {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
{{/*
|
||||
|
||||
A modified version of the toc.html partial in Docsy.
|
||||
A copy of the toc.html partial in Docsy, modified to:
|
||||
|
||||
*/}}
|
||||
{{ $page := .Params }}
|
||||
* show the page's title instead of "on this page"
|
||||
|
||||
*/ -}}
|
||||
|
||||
{{/*
|
||||
|
||||
Always render the td-toc element. ScrollSpy is counting on it to exist,
|
||||
even if it's empty.
|
||||
|
||||
cSpell:ignore notoc
|
||||
*/ -}}
|
||||
|
||||
<div class="td-toc" data-proofer-ignore>
|
||||
{{ if not .Params.notoc -}}
|
||||
{{ with .TableOfContents -}}
|
||||
<hr>
|
||||
<div id="toc">
|
||||
<a id="toc-title" href="#">{{ $page.Title }}</a>
|
||||
{{ . }}
|
||||
{{ $toc := .TableOfContents -}}
|
||||
{{ if and $toc (ne $toc `<nav id="TableOfContents"></nav>`) -}}
|
||||
<div class="td-toc-title">
|
||||
<span class="td-toc-title__text">{{ .Params.Title }}</span>
|
||||
<a class="td-toc-title__link" title="{{ i18n "toc_top_of_page" }}" href="#"></a>
|
||||
</div>
|
||||
{{ $toc | safeHTML }}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{/* */ -}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue