rework layout, bugfixing
This commit is contained in:
parent
709d4344e6
commit
8ce3d91bd0
|
|
@ -1,4 +1,7 @@
|
|||
import os
|
||||
import os
|
||||
#import toml
|
||||
|
||||
#base_url = toml.load('settings.toml')["general"]["base_url"]
|
||||
|
||||
def make_tree(path="templates/content"):
|
||||
if '/' in path:
|
||||
|
|
@ -59,7 +62,7 @@ def build_index(path, file_ending):
|
|||
data = _f.readlines()
|
||||
data[0] = data[0].strip('# \n')
|
||||
#searchable[data[0]] = [''.join(data), item[len(path):-len(file_ending)]]
|
||||
searchable["index"].append(dict(uri=item[len(path):-len(file_ending)] + '.html', title=data[0],tags=[],content=''.join(data), description=""))
|
||||
searchable["index"].append(dict(uri= "/" + item[len(path):-len(file_ending)] + '.html', title=data[0],tags=[],content=''.join(data), description=""))
|
||||
#searchable[str(uuid.uuid1())] = (dict(href=item[len(path):-len(file_ending)], title=data[0],tags=[],content=''.join(data)))
|
||||
if isinstance(item, dict):
|
||||
build_index(item)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
[content]
|
||||
path = "templates/content/"
|
||||
style = "material" # Take a look at https://pygments.org/styles/
|
||||
style = "one-dark" # Take a look at https://pygments.org/styles/
|
||||
|
|
|
|||
|
|
@ -34,17 +34,15 @@ def index():
|
|||
@app.route('/', defaults={'path': 'README'})
|
||||
@app.route('/<path:path>.html')
|
||||
def content(path="README"):
|
||||
with open(os.path.join(app.root_path, f'{content_path}{path}.md'), "r") as _f:
|
||||
with open(os.path.join(app.root_path, content_path, f'{path}.md'), "r") as _f:
|
||||
md_file = _f.read()
|
||||
if not md_file.startswith("[TOC]"):
|
||||
md_file = "[TOC]\n" + md_file
|
||||
md_template_string = markdown.markdown(md_file, extensions=["fenced_code", "codehilite", "toc", TocExtension(toc_class="column column-3", title=""), "mdx_math"],
|
||||
extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
|
||||
md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="HolyGrail-ads", title=""),"fenced_code", "codehilite", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
|
||||
html = md.convert(md_file)
|
||||
formatter = HtmlFormatter(style=highlight_style, full=True, cssclass="codehilite")
|
||||
css_string = formatter.get_style_defs()
|
||||
md_css_string = "<style>" + css_string + "</style>"
|
||||
md_template = md_css_string + md_template_string
|
||||
res = render_template("documentation.html", md_doc=md_template, tree=
|
||||
md_template = md_css_string + html
|
||||
res = render_template("documentation.html", toc=md.toc, md_doc=md_template, tree=
|
||||
cut_path_tree(
|
||||
make_tree(content_path), content_path, ".md")
|
||||
)
|
||||
|
|
|
|||
|
|
@ -83,14 +83,14 @@ $( document ).ready(function() {
|
|||
divsuggestion.setAttribute("data-title", item.title);
|
||||
divsuggestion.setAttribute("data-uri", item.uri);
|
||||
divsuggestion.setAttribute("data-context", item.context);
|
||||
divsuggestion.innerText = '» ' + item.title;
|
||||
divsuggestion.innerText = '>> ' + item.title;
|
||||
divsuggestion.appendChild(divcontext);
|
||||
console.log(1);
|
||||
return divsuggestion.outerHTML;
|
||||
},
|
||||
/* onSelect callback fires when a search suggestion is chosen */
|
||||
onSelect: function(e, term, item) {
|
||||
location.href = item.getAttribute('data-uri');
|
||||
console.log("this is " + location.href);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; color: #222;}
|
||||
body { padding: 0 10px; text-decoration: none; color: #263238;}
|
||||
body { text-decoration: none; color: #263238;}
|
||||
h1 { font-size: 28px; }
|
||||
h2 { font-size: 22px; margin-bottom: 2px; }
|
||||
h3 { font-size: 14px; }
|
||||
p { font-size: 16px; }
|
||||
blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
|
||||
|
||||
pre { background-color: #263238;color: #eeffff;border: 1px solid #ddd; font-size: 14px; padding-left: 2ch;padding-top:1ch; padding-bottom: 1ch; line-height: 18px; overflow: auto; }
|
||||
code { background-color: #263238;color: #eeffff; }
|
||||
pre { background-color: #263238;color: #eeffff;border: 1px solid #ddd; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; line-height: 18px; overflow: auto; }
|
||||
code { background-color: #263238; color: #eeffff; }
|
||||
hr { height: 0px; }
|
||||
a {color: inherit; text-decoration: solid underline;}
|
||||
a:hover {color: red;}
|
||||
|
|
@ -17,8 +17,8 @@ details > summary{ background-color: #eee; font-size: 18px;}
|
|||
|
||||
details > summary:hover { background-color: #263238; color: #eee;}
|
||||
details summary::-webkit-details-marker,
|
||||
details summary::marker { content: "\20\00BB\20";}
|
||||
ul { padding-left:0em; padding: 0px 8px;}
|
||||
details summary::marker { content: "\1F5C0\20";}
|
||||
ul {}
|
||||
ul:active {}
|
||||
.toctitle{ padding: 1em; }
|
||||
.toc > ul li { text-decoration: none; }
|
||||
|
|
@ -27,76 +27,82 @@ ul:active {}
|
|||
.menu { line-height: 1em; font-size: 24px; line-height: 1em; text-decoration: none; }
|
||||
.index { color: inherit; text-decoration: solid underline; }
|
||||
.references { text-decoration: solid underline; text-underline-position: under; }
|
||||
.contact{text-align: center;}
|
||||
|
||||
.columns { Width: 100%; border-top: 1px solid #263238; border-bottom: 1px solid #263238; }
|
||||
.column-1, .column-2, .column-3{
|
||||
width: 100%;
|
||||
.HolyGrail,
|
||||
.HolyGrail-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.HolyGrail-nav {
|
||||
padding-right: 1em;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.column-1 {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
overflow: auto;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.column-1 > ul li {
|
||||
list-style-type: none;
|
||||
.HolyGrail-body {
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
border-top: 1px solid #263238; border-bottom: 1px solid #263238;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.HolyGrail-content {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.HolyGrail-nav, .HolyGrail-ads {
|
||||
/* 12em is the width of the columns */
|
||||
flex: 0 0 14em;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.HolyGrail-ads ul li {
|
||||
list-style-type: none!important;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
border: none;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
}
|
||||
.column-1 ul {
|
||||
padding-left: 16px;
|
||||
padding-right: 0;
|
||||
.HolyGrail-nav ul {
|
||||
list-style-type: none!important;
|
||||
padding-left : 0.3em;
|
||||
margin: 0em;
|
||||
text-align: left;
|
||||
}
|
||||
.column-1 a:hover{
|
||||
|
||||
.HolyGrail-nav li {
|
||||
list-style-type: none!important;
|
||||
padding-left : 1em;
|
||||
margin: 0em;
|
||||
text-align: left;
|
||||
}
|
||||
.HolyGrail-nav a{
|
||||
overflow-wrap: break-word;
|
||||
|
||||
}
|
||||
|
||||
.HolyGrail-nav a:hover{
|
||||
background-color: #263238; color: #eee;
|
||||
}
|
||||
|
||||
.column-2 {
|
||||
width: 80%;
|
||||
float: left;
|
||||
overflow: auto;
|
||||
clear: none;
|
||||
padding-left: 16px;
|
||||
.HolyGrail-nav a:before{
|
||||
content: "";
|
||||
}
|
||||
|
||||
.column-3 {
|
||||
width: 25%;
|
||||
position: relative;
|
||||
float: right;
|
||||
overflow: auto;
|
||||
margin: 24.25px 16px;
|
||||
clear: none;
|
||||
background-color: #eee;
|
||||
.HolyGrail-ads ul{
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0;
|
||||
}
|
||||
.column-3 > ul li {
|
||||
outline 0;
|
||||
border: none;
|
||||
display: block;
|
||||
padding: 0.2em 0.4em;
|
||||
white-space: normal;
|
||||
list-style-type: none;
|
||||
}
|
||||
.column-3 ul li:before {
|
||||
|
||||
|
||||
.HolyGrail-ads ul li:before {
|
||||
content: "\00BB\20";
|
||||
}
|
||||
.column-3 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.columns {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container{
|
||||
|
|
|
|||
|
|
@ -15,8 +15,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- topmenu -->
|
||||
<body class="HolyGrail">
|
||||
<header>
|
||||
|
||||
<div class="menu">
|
||||
<a href="{{ url_for('content') }}" style="text-decoration:none">Husk</a>
|
||||
</div>
|
||||
|
|
@ -28,14 +29,10 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu">
|
||||
</div>
|
||||
<!--br><br-->
|
||||
</center>
|
||||
<p></p>
|
||||
<div class="columns">
|
||||
<!-- Sidebar -->
|
||||
<div class="column column-1">
|
||||
|
||||
</header>
|
||||
<div class="HolyGrail-body">
|
||||
<nav class="HolyGrail-nav">
|
||||
<ul>
|
||||
{%- for item in tree.children recursive %}
|
||||
{%- set name = item.name.split('/')[-1] -%}
|
||||
|
|
@ -51,18 +48,19 @@
|
|||
{%- endif %}
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column column-2">{% block content %}{% endblock %}</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
</nav>
|
||||
<main class="HolyGrail-content">{% block content %}{% endblock %}</main>
|
||||
{{ toc | safe }}
|
||||
</div>
|
||||
<footer>
|
||||
{% block footer %}
|
||||
<p></p>
|
||||
<center>
|
||||
© Stefan Friese
|
||||
</center>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
<script>
|
||||
function linkClick(obj) {
|
||||
if (obj.open) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue