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 = [];
|
let headings = [];
|
||||||
|
|
||||||
// First get the anchors in the ToC.
|
// 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) {
|
for (const anchor of toc_anchors) {
|
||||||
// Then get the heading from its selector in the anchor's href.
|
// 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");
|
console.error("Got ToC anchor without href");
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const heading = document.querySelector(selector);
|
const heading = document.querySelector(selector);
|
||||||
if (!heading) {
|
if (!heading) {
|
||||||
console.error("Heading not found for selector:", selector);
|
console.error("Heading not found for selector:", selector);
|
||||||
|
|
@ -122,13 +122,13 @@ function getCurrentHeading(headings, headerOffset) {
|
||||||
*/
|
*/
|
||||||
function selectTocEntry(id) {
|
function selectTocEntry(id) {
|
||||||
// Deselect previously selected entries.
|
// Deselect previously selected entries.
|
||||||
const activeEntries = document.querySelectorAll("#toc nav a.active");
|
const activeEntries = document.querySelectorAll("#TableOfContents a.active");
|
||||||
for (const activeEntry of activeEntries) {
|
for (const activeEntry of activeEntries) {
|
||||||
activeEntry.classList.remove('active');
|
activeEntry.classList.remove('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Find the new entry and select it.
|
// 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) {
|
if (!newEntry) {
|
||||||
console.error("ToC entry not found for ID:", id);
|
console.error("ToC entry not found for ID:", id);
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -76,52 +76,126 @@ Custom SCSS for the Matrix spec
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
|
|
||||||
&>.td-sidebar-nav__section {
|
& > .td-sidebar-nav__section {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.td-sidebar-nav__section .ul-1 ul {
|
.ul-1 ul {
|
||||||
padding-left: 0;
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active, &active:hover {
|
/* This is to make the width of the items that have sub-items (like room versions)
|
||||||
background-color: $secondary-background;
|
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;
|
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 {
|
.endpoints-toc {
|
||||||
summary {
|
summary {
|
||||||
cursor: pointer;
|
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:
|
||||||
|
|
||||||
*/}}
|
* show the page's title instead of "on this page"
|
||||||
{{ $page := .Params }}
|
|
||||||
|
*/ -}}
|
||||||
|
|
||||||
|
{{/*
|
||||||
|
|
||||||
|
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 -}}
|
{{ if not .Params.notoc -}}
|
||||||
{{ with .TableOfContents -}}
|
{{ $toc := .TableOfContents -}}
|
||||||
<hr>
|
{{ if and $toc (ne $toc `<nav id="TableOfContents"></nav>`) -}}
|
||||||
<div id="toc">
|
<div class="td-toc-title">
|
||||||
<a id="toc-title" href="#">{{ $page.Title }}</a>
|
<span class="td-toc-title__text">{{ .Params.Title }}</span>
|
||||||
{{ . }}
|
<a class="td-toc-title__link" title="{{ i18n "toc_top_of_page" }}" href="#"></a>
|
||||||
</div>
|
</div>
|
||||||
|
{{ $toc | safeHTML }}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
</div>
|
||||||
|
{{/* */ -}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue