stefan
/
husk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

rework layout, bugfixing

This commit is contained in:
Stefan Friese 2022-09-18 21:00:35 +02:00
parent 709d4344e6
commit 8ce3d91bd0
6 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
husk_helpers.py
View File

@ -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"): def make_tree(path="templates/content"):
if '/' in path: if '/' in path:
@ -59,7 +62,7 @@ def build_index(path, file_ending):
data = _f.readlines() data = _f.readlines()
data[0] = data[0].strip('# \n') data[0] = data[0].strip('# \n')
#searchable[data[0]] = [''.join(data), item[len(path):-len(file_ending)]] #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))) #searchable[str(uuid.uuid1())] = (dict(href=item[len(path):-len(file_ending)], title=data[0],tags=[],content=''.join(data)))
if isinstance(item, dict): if isinstance(item, dict):
build_index(item) build_index(item)

2
settings.toml
View File

@ -1,3 +1,3 @@
[content] [content]
path = "templates/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/

12
start_site.py
View File

@ -34,17 +34,15 @@ def index():
@app.route('/', defaults={'path': 'README'}) @app.route('/', defaults={'path': 'README'})
@app.route('/<path:path>.html') @app.route('/<path:path>.html')
def content(path="README"): 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() md_file = _f.read()
if not md_file.startswith("[TOC]"): md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="HolyGrail-ads", title=""),"fenced_code", "codehilite", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
md_file = "[TOC]\n" + md_file html = md.convert(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}})
formatter = HtmlFormatter(style=highlight_style, full=True, cssclass="codehilite") formatter = HtmlFormatter(style=highlight_style, full=True, cssclass="codehilite")
css_string = formatter.get_style_defs() css_string = formatter.get_style_defs()
md_css_string = "<style>" + css_string + "</style>" md_css_string = "<style>" + css_string + "</style>"
md_template = md_css_string + md_template_string md_template = md_css_string + html
res = render_template("documentation.html", md_doc=md_template, tree= res = render_template("documentation.html", toc=md.toc, md_doc=md_template, tree=
cut_path_tree( cut_path_tree(
make_tree(content_path), content_path, ".md") make_tree(content_path), content_path, ".md")
) )

4
static/js/search.js
View File

@ -83,14 +83,14 @@ $( document ).ready(function() {
divsuggestion.setAttribute("data-title", item.title); divsuggestion.setAttribute("data-title", item.title);
divsuggestion.setAttribute("data-uri", item.uri); divsuggestion.setAttribute("data-uri", item.uri);
divsuggestion.setAttribute("data-context", item.context); divsuggestion.setAttribute("data-context", item.context);
divsuggestion.innerText = '» ' + item.title; divsuggestion.innerText = '>> ' + item.title;
divsuggestion.appendChild(divcontext); divsuggestion.appendChild(divcontext);
console.log(1);
return divsuggestion.outerHTML; return divsuggestion.outerHTML;
}, },
/* onSelect callback fires when a search suggestion is chosen */ /* onSelect callback fires when a search suggestion is chosen */
onSelect: function(e, term, item) { onSelect: function(e, term, item) {
location.href = item.getAttribute('data-uri'); location.href = item.getAttribute('data-uri');
console.log("this is " + location.href);
} }
}); });
}); });

122
static/stylesheet.css
View File

@ -1,13 +1,13 @@
html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; color: #222;} 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; } h1 { font-size: 28px; }
h2 { font-size: 22px; margin-bottom: 2px; } h2 { font-size: 22px; margin-bottom: 2px; }
h3 { font-size: 14px; } h3 { font-size: 14px; }
p { font-size: 16px; } p { font-size: 16px; }
blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;} 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; } 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; } code { background-color: #263238; color: #eeffff; }
hr { height: 0px; } hr { height: 0px; }
a {color: inherit; text-decoration: solid underline;} a {color: inherit; text-decoration: solid underline;}
a:hover {color: red;} 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:hover { background-color: #263238; color: #eee;}
details summary::-webkit-details-marker, details summary::-webkit-details-marker,
details summary::marker { content: "\20\00BB\20";} details summary::marker { content: "\1F5C0\20";}
ul { padding-left:0em; padding: 0px 8px;} ul {}
ul:active {} ul:active {}
.toctitle{ padding: 1em; } .toctitle{ padding: 1em; }
.toc > ul li { text-decoration: none; } .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; } .menu { line-height: 1em; font-size: 24px; line-height: 1em; text-decoration: none; }
.index { color: inherit; text-decoration: solid underline; } .index { color: inherit; text-decoration: solid underline; }
.references { text-decoration: solid underline; text-underline-position: under; } .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; } .HolyGrail,
.column-1, .column-2, .column-3{ .HolyGrail-body {
width: 100%; display: flex;
flex-direction: column;
} }
.HolyGrail-nav {
padding-right: 1em;
order: -1;
}
@media (min-width: 48em) { @media (min-width: 48em) {
.column-1 { .HolyGrail-body {
width: 18%; flex-direction: row;
height: 100%; flex: 1;
float: left; border-top: 1px solid #263238; border-bottom: 1px solid #263238;
overflow: auto; text-align: left;
margin-top: 8px; }
margin-right: 8px;
} .HolyGrail-content {
.column-1 > ul li { flex: 1;
list-style-type: none; 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; text-align: left;
padding: 0;
margin: 0;
outline: 0;
border: none; border: none;
display: block;
white-space: normal; white-space: normal;
} }
.column-1 ul { .HolyGrail-nav ul {
padding-left: 16px; list-style-type: none!important;
padding-right: 0; 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; background-color: #263238; color: #eee;
} }
.column-2 { .HolyGrail-nav a:before{
width: 80%; content: "";
float: left;
overflow: auto;
clear: none;
padding-left: 16px;
} }
.column-3 { .HolyGrail-ads ul{
width: 25%; padding-left: 0.5em;
position: relative; padding-right: 0;
float: right;
overflow: auto;
margin: 24.25px 16px;
clear: none;
background-color: #eee;
} }
.column-3 > ul li {
outline 0;
border: none; .HolyGrail-ads ul li:before {
display: block;
padding: 0.2em 0.4em;
white-space: normal;
list-style-type: none;
}
.column-3 ul li:before {
content: "\00BB\20"; content: "\00BB\20";
} }
.column-3 a {
text-decoration: none;
}
.columns {
content: "";
display: table;
clear: both;
}
} }
.search-container{ .search-container{

30
templates/template.html
View File

@ -15,8 +15,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %} {% endblock %}
</head> </head>
<body> <body class="HolyGrail">
<!-- topmenu --> <header>
<div class="menu"> <div class="menu">
<a href="{{ url_for('content') }}" style="text-decoration:none">Husk</a> <a href="{{ url_for('content') }}" style="text-decoration:none">Husk</a>
</div> </div>
@ -28,14 +29,10 @@
</div> </div>
</div> </div>
<div class="menu">
</div> </header>
<!--br><br--> <div class="HolyGrail-body">
</center> <nav class="HolyGrail-nav">
<p></p>
<div class="columns">
<!-- Sidebar -->
<div class="column column-1">
<ul> <ul>
{%- for item in tree.children recursive %} {%- for item in tree.children recursive %}
{%- set name = item.name.split('/')[-1] -%} {%- set name = item.name.split('/')[-1] -%}
@ -51,18 +48,19 @@
{%- endif %} {%- endif %}
{%- endfor %} {%- endfor %}
</ul> </ul>
</div> </nav>
<div class="column column-2">{% block content %}{% endblock %}</div> <main class="HolyGrail-content">{% block content %}{% endblock %}</main>
</div> {{ toc | safe }}
<div id="footer"> </div>
<footer>
{% block footer %} {% block footer %}
<p></p> <p></p>
<center> <center>
&copy; Stefan Friese &copy; Stefan Friese
</center> </center>
{% endblock %} {% endblock %}
</div> </footer>
</body>
<script> <script>
function linkClick(obj) { function linkClick(obj) {
if (obj.open) { if (obj.open) {