kenkeiras/new-codigoparallevar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add base table-of-contents, don't collapse headlines.

Browse Source
This commit is contained in:
Sergio Martínez Portela 2022-11-29 00:20:31 +01:00
parent 58bb7ccc49
commit e268734a3f
2 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
scripts/generate.py
View File

@ -620,7 +620,28 @@ def render_as_document(headline, doc, headlineLevel, graph, title):
</html> </html>
""" """
else: else:
return as_document(render(headline, doc, graph=graph, headlineLevel=headlineLevel), title) return as_document(render(headline, doc, graph=graph, headlineLevel=headlineLevel), title, render_toc(doc))
def render_toc(doc):
acc = ['<ul>']
for headline in doc.getTopHeadlines():
render_toc_headline(headline, acc)
acc.append('</ul>')
return ''.join(acc)
def render_toc_headline(headline, acc):
acc.append('<li>')
acc.append(f'<a href="#{headline.id}">{html.escape(headline.title.get_text())}</a>')
children = list(headline.children)
if children:
acc.append('<ul>')
for child in children:
render_toc_headline(child, acc)
acc.append('</ul>')
acc.append('</li>')
def render_connections(headline_id, content, graph): def render_connections(headline_id, content, graph):
if headline_id not in graph['backlinks']: if headline_id not in graph['backlinks']:
@ -665,13 +686,13 @@ def render(headline, doc, graph, headlineLevel):
tags = f'<span class="tags">{"".join(tag_list)}</span>' tags = f'<span class="tags">{"".join(tag_list)}</span>'
display_state = 'expanded' display_state = 'expanded'
# Update display based on document STARTUP config # # Update display based on document STARTUP config
visual_level = doc.get_keywords('STARTUP', 'showall') # visual_level = doc.get_keywords('STARTUP', 'showall')
if visual_level.startswith('show') and visual_level.endswith('levels'): # if visual_level.startswith('show') and visual_level.endswith('levels'):
visual_level_num = int(visual_level[len('show'):-len('levels')]) - 1 # visual_level_num = int(visual_level[len('show'):-len('levels')]) - 1
# Note that level is 0 indexed inside this loop # # Note that level is 0 indexed inside this loop
if headlineLevel >= visual_level_num: # if headlineLevel >= visual_level_num:
display_state = 'collapsed' # display_state = 'collapsed'
title = render_inline(headline.title, render_tag, headline, graph) title = render_inline(headline.title, render_tag, headline, graph)
@ -692,7 +713,7 @@ def render(headline, doc, graph, headlineLevel):
""" """
def as_document(html, title): def as_document(html, title, global_toc):
return f"""<!DOCTYPE html> return f"""<!DOCTYPE html>
<html> <html>
<head> <head>
@ -719,6 +740,10 @@ def as_document(html, title):
<h1><a href="./index.html">Código para llevar [Notes]</a></h1> <h1><a href="./index.html">Código para llevar [Notes]</a></h1>
<input type="text" id="searchbox" disabled="true" placeholder="Search (requires JS)" /> <input type="text" id="searchbox" disabled="true" placeholder="Search (requires JS)" />
</nav> </nav>
<div class="global-table-of-contents">
<h2>Table of contents</h2>
{global_toc}
</div>
{html} {html}
<script src="../static/search-box.js"></script> <script src="../static/search-box.js"></script>

43
static/style.css
View File

@ -149,7 +149,8 @@ body nav input {
} }
/* Item list */ /* Item list */
.node .contents ul { .node .contents ul,
.global-table-of-contents ul {
--tree-spacing : 1rem; --tree-spacing : 1rem;
--tree-radius : 0.75ex; --tree-radius : 0.75ex;
--tree-line-separation: 0.5rem; --tree-line-separation: 0.5rem;
@ -158,12 +159,14 @@ body nav input {
list-style: none; list-style: none;
} }
.node .contents ul li { .node .contents ul li,
.global-table-of-contents ul li{
position: relative; position: relative;
padding-left: calc(var(--tree-spacing) * 2); padding-left: calc(var(--tree-spacing) * 2);
} }
.node .contents ul li::after { .node .contents ul li::after,
.global-table-of-contents ul li::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -175,7 +178,8 @@ body nav input {
background: var(--tree-color); background: var(--tree-color);
} }
.node .contents ul li::before { .node .contents ul li::before,
.global-table-of-contents ul li::before {
content: ' '; content: ' ';
width: var(--tree-spacing); width: var(--tree-spacing);
display: inline-block; display: inline-block;
@ -186,26 +190,36 @@ body nav input {
} }
/* Nested item list */ /* Nested item list */
.node .contents ul ul { .node .contents ul ul,
.global-table-of-contents ul ul {
padding: 0; padding: 0;
margin-left: calc(var(--tree-spacing)); margin-left: calc(var(--tree-spacing));
list-style: none; list-style: none;
} }
.node .contents ul ul li { .node .contents ul > li > ul,
.global-table-of-contents ul > li > ul {
margin-left: calc(0px - var(--tree-spacing));
}
.node .contents ul ul li,
.global-table-of-contents ul ul li {
margin-left: calc(0px - var(--tree-radius) / 2 + 2px); margin-left: calc(0px - var(--tree-radius) / 2 + 2px);
border-left: 2px solid var(--tree-color); border-left: 2px solid var(--tree-color);
} }
.node .contents ul ul li::marker { .node .contents ul ul li::marker,
.global-table-of-contents ul ul li::marker {
content: ''; content: '';
} }
.node .contents ul ul li::after { .node .contents ul ul li::after,
.global-table-of-contents ul ul li::after {
left: calc(var(--tree-spacing) * 2 - 0.5ex); left: calc(var(--tree-spacing) * 2 - 0.5ex);
} }
.node .contents ul ul li::before { .node .contents ul ul li::before,
.global-table-of-contents ul ul li::before {
width: calc(var(--tree-spacing) * 2); width: calc(var(--tree-spacing) * 2);
height: calc(var(--tree-spacing) + 5px); height: calc(var(--tree-spacing) + 5px);
margin-top: -100%; margin-top: -100%;
@ -215,11 +229,13 @@ body nav input {
border-bottom-style: solid; border-bottom-style: solid;
} }
.node .contents ul ul li:last-of-type::before { .node .contents ul ul li:last-of-type::before,
.global-table-of-contents ul ul li:last-of-type::before {
border-bottom-left-radius: var(--tree-border-radius); border-bottom-left-radius: var(--tree-border-radius);
} }
.node .contents ul li:last-of-type { .node .contents ul li:last-of-type,
.global-table-of-contents ul li:last-of-type {
border-color: transparent; border-color: transparent;
} }
@ -533,8 +549,9 @@ tr.__table-separator {
border: 1px solid rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.5);
} }
.node .contents ul { .node .contents ul,
--tree-color: #666; .global-table-of-contents ul {
--tree-color: #aaa;
} }
/* Tables. */ /* Tables. */