generator and single contribution progress bar

master
km0 2 years ago
parent 4a6389e31b
commit b519e43d82

File diff suppressed because one or more lines are too long

@ -13,9 +13,11 @@ def dump(order=None):
if folders == None:
folders = [f.name for f in os.scandir(path) if f.is_dir()]
contents = []
contents = {}
total = 0
for folder in folders:
contribution = []
try:
with open(f"{path}/{folder}/contents.md", "r", encoding="utf8") as f:
metadata, body = frontmatter.parse(f.read())
@ -89,7 +91,7 @@ def dump(order=None):
start_f = f"{string.ascii_uppercase[start[0] + i]}{start[1]}"
# print(start_f)
pass
contents.append(
contribution.append(
{
"title": metadata["title"],
"definition": " ",
@ -107,14 +109,16 @@ def dump(order=None):
"description": content,
"slug": folder,
}
contents.append(postit)
contribution.append(postit)
amount = len(metadata["contents"])
print(f"{amount:03} - {folder}")
total = total + amount
contents[folder] = contribution
except Exception as e:
print(f"{folder} has an error!")
print(e)
print(f'Total: {len(contents)}')
print(f'Total: {total}')
with open("postit/contents.json", "w") as f:
f.write(json.dumps(contents))

@ -19,17 +19,18 @@ def blocks():
dump.dump(index)
with open("postit/contents.json", "r") as f:
contents = json.load(f)
return render_template("postit-single.html", contents=contents)
contributions = json.load(f)
return render_template("postit.html", contributions=contributions)
@bp.route("/<slug>")
def block(slug=None):
dump.dump([slug])
with open("postit/contents.json", "r") as f:
contents = json.load(f)
block = [post for post in contents if post["slug"] == slug]
return render_template("postit-single.html", contents=block)
contributions = {
slug: contents[slug]
}
return render_template("postit.html", contributions=contributions)

@ -82,13 +82,21 @@
.crosswords .category {
.crosswords .info {
position: absolute;
font-size: 21px;
left: 4mm;
top: 4mm;
}
.info .category {
color: var(--background);
font-weight:bold;
}
.crosswords .description {
font-size: 18px;
font-size: 28px;
text-align: start;
}

@ -1,87 +0,0 @@
@page {
size: A3;
margin: 5mm;
}
html,
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
font-size: 0;
}
.post-it {
position: relative;
vertical-align: middle;
display: inline-block;
width: 90mm;
height: 90mm;
border: 1px solid #ddd;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 50;
}
.title {
position: absolute;
bottom: 0;
margin: 4mm;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
}
.description {
display: inline-block;
margin: 4mm;
font-size: 28px;
line-height: 1.2;
white-space: pre-line;
margin-top: calc(4mm - 1em);
}
figcaption {
background-color: white;
font-size: 18px;
text-align: center;
display: inline-block;
position: absolute;
left: 50%;
bottom: 4mm;
transform: translate(-50%, 0);
z-index: 100;
}
a {
color: #ddd;
font-size: 12px;
}
.description.long-text {
font-size: 21px;
}
.page-number {
position: absolute;
right: 4mm;
bottom: 4mm;
font-size: 14px;
}

@ -1,114 +0,0 @@
@page {
size: A3;
margin: 5mm;
}
:root {
--background: #8f00ff33;
--color: #8f00ff;
}
html,
body {
margin: 0;
color: var(--color);
}
* {
box-sizing: border-box;
}
.container {
font-size: 0;
}
.post-it {
position: relative;
vertical-align: middle;
display: inline-block;
width: 90mm;
height: 90mm;
border: 1px solid #ddd;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
justify-content: end;
flex-direction: column;
}
footer {
width: 100%;
position: relative;
/* position: absolute; */
/* bottom: 0; */
border-top: 1px solid var(--background);
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 50;
}
.title {
/* position: absolute; */
/* bottom: 0; */
margin: 0.25em 4mm;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
}
.description {
display: inline-block;
margin: 4mm;
font-size: 28px;
line-height: 1.2;
white-space: pre-line;
/* margin-top: calc(4mm - 1em); */
vertical-align: bottom;
}
figcaption {
background-color: white;
font-size: 18px;
text-align: center;
display: inline-block;
position: absolute;
left: 50%;
bottom: 4mm;
transform: translate(-50%, 0);
z-index: 100;
}
a {
color: #ddd;
font-size: 12px;
}
.description.long-text {
font-size: 21px;
}
.page-number {
position: absolute;
right: 4mm;
bottom: 0.25em;
font-size: 14px;
}
.progress-bar {
height: 100%;
background-color: var(--background);
z-index: 0;
position: absolute;
top: 0;
left: 0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 KiB

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Post it</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
</head>
<body>
<div class="container">
{% for content in contents %}
<div class="post-it {{content['slug']}}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<div class="quote">{{content['quote']}}</div>
<dl>
<dt>Motivation</dt>
<dd>{{content['motivation']}}</dd>
<dt>Empathy</dt>
<dd>{{content['empathy']}}</dd>
<dt>Vision</dt>
<dd>{{content['vision']}}</dd>
<dt>Positivity</dt>
<dd>{{content['positivity']}}</dd>
</dl>
{%elif content['definition']%}
<h2 class="title">{{content['title']}}</h2>
<p
class="description {% if content['definition']|length > 200 %} long-text {%endif%}"
>
{{content['definition']}}
</p>
<div class="category">{{content['start']}} {{content['category']}}</div>
{%else%}
<h2 class="title">{{content['title']}}</h2>
<div class="page-number">{{loop.index}}/{{contents|length}}</div>
<p
class="description {% if content['description']|length > 200 %} long-text {%endif%}"
>
{{content['description']}}
</p>
{%endif%}
</div>
{% endfor %}
</div>
</body>
</html>

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Post it</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
</head>
<body>
<div class="container">
{% for content in contents %}
<div class="post-it {{content['slug']}}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<div class="quote">{{content['quote']}}</div>
<dl>
<dt>Motivation</dt>
<dd>{{content['motivation']}}</dd>
<dt>Empathy</dt>
<dd>{{content['empathy']}}</dd>
<dt>Vision</dt>
<dd>{{content['vision']}}</dd>
<dt>Positivity</dt>
<dd>{{content['positivity']}}</dd>
</dl>
{%elif content['definition']%}
<h2 class="title">{{content['title']}}</h2>
<p
class="description {% if content['definition']|length > 200 %} long-text {%endif%}"
>
{{content['definition']}}
</p>
<div class="category">{{content['start']}} {{content['category']}}</div>
{%else%}
<p
class="description {% if content['description']|length > 200 %} long-text {%endif%}"
>
{{content['description']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%endif%}
</div>
{% endfor %}
</div>
</body>
</html>

@ -1,96 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Post it</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script src="{{url_for('static', filename='js/bleed.js')}}"></script>
</head>
<body>
{% for content in contents %}
<div class="post-it {{content['slug']}} {% if content['card'] %} leader-card {%endif%}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
data-image="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<blockquote class="quote">{{content['quote']}} <span class="leader">The&nbsp;Leader</span></blockquote>
<dl>
<dt class="row-bg"><span>Motivation</span></dt>
<dd class="row-bg"><span>{{content['motivation']}}</span></dd>
<dt><span>Empathy</span></dt>
<dd><span>{{content['empathy']}}</span></dd>
<dt class="row-bg"><span>Vision</span></dt>
<dd class="row-bg"><span>{{content['vision']}}</span></dd>
<dt><span>Positivity</span></dt>
<dd><span>{{content['positivity']}}</span></dd>
</dl>
{%elif content['definition']%}
<div class="category">{{content['start']}} {{content['category']}}</div>
<p class="description {% if content['definition']|length > 200 %} long-text {%endif%}">
{{content['definition']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%elif content['type'] == 'mimic-colophon'%}
<div class="description">
<div class="colophon">{{content['original']}}</div>
<div>{{content['original-credits']}}</div>
<div class="action">{{content['original-action']}}</div>
<div>{{content['original-date']}}</div>
<br />
<div class="colophon">{{content['current']}}</div>
<div>{{content['current-credits']}}</div>
<code>{{content['current-action']}}</code>
<div>{{content['current-date']}}</div>
</div>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%else%}
<p class="description {% if content['description']|length > 200 %} long-text {%endif%}">
{{content['description']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%endif%}
</div>
{% endfor %}
</body>
</html>

@ -7,41 +7,94 @@
<title>Post it</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script src="{{url_for('static', filename='js/bleed.js')}}"></script>
</head>
<body>
<div class="container">
{% for content in contents %} {% for i in range(12)%}
<div class="post-it {{content['slug']}}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<div class="quote">{{content['quote']}}</div>
<dl>
<dt>Motivation</dt>
<dd>{{content['motivation']}}</dd>
<dt>Emphaty</dt>
<dd>{{content['emphaty']}}</dd>
<dt>Vision</dt>
<dd>{{content['vision']}}</dd>
<dt>Positivity</dt>
<dd>{{content['positivity']}}</dd>
</dl>
{%else%}
{%for contribution, contents in contributions.items()%}
{% for content in contents %}
<div class="post-it {{content['slug']}} {% if content['card'] %} leader-card {%endif%}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
data-image="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<blockquote class="quote">{{content['quote']}} <span class="leader">The&nbsp;Leader</span></blockquote>
<dl>
<dt class="row-bg"><span>Motivation</span></dt>
<dd class="row-bg"><span>{{content['motivation']}}</span></dd>
<dt><span>Empathy</span></dt>
<dd><span>{{content['empathy']}}</span></dd>
<dt class="row-bg"><span>Vision</span></dt>
<dd class="row-bg"><span>{{content['vision']}}</span></dd>
<dt><span>Positivity</span></dt>
<dd><span>{{content['positivity']}}</span></dd>
</dl>
{%elif content['definition']%}
<div class="info">{{content['start']}} <span class="category">{{content['category']}}</span></div>
<p class="description {% if content['definition']|length > 200 %} long-text {%endif%}">
{{content['definition']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<p class="description">{{content['description']}}</p>
{%endif%}
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%elif content['type'] == 'mimic-colophon'%}
<div class="description">
<div class="colophon">{{content['original']}}</div>
<div>{{content['original-credits']}}</div>
<div class="action">{{content['original-action']}}</div>
<div>{{content['original-date']}}</div>
<br />
<div class="colophon">{{content['current']}}</div>
<div>{{content['current-credits']}}</div>
<code>{{content['current-action']}}</code>
<div>{{content['current-date']}}</div>
</div>
{%endfor%} {% endfor %}
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%else%}
<p class="description {% if content['description']|length > 200 %} long-text {%endif%}">
{{content['description']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%endif%}
</div>
{% endfor %}
{%endfor%}
</body>
</html>

Loading…
Cancel
Save