Updates for the flask app

camilo 2 years ago
parent f4649c8361
commit 7da43ba836

@ -0,0 +1,36 @@
Interface for the polyfill
Paged.js will manipulate the DOM so the browser can understand the css rules you wrote. On screen, pages will be shown from top to bottom on the left side of the page. To have a better understanding of whats happening on the page, we made a small CSS file call interface that defines the layout to show your book on screen. Since were using @media screen, page borders and shadow wont appear on paper when printed.
Note that when the PDF is generated the pages are always in recto/verso, it'is not possible to lay out the pages on a plate.
## How to use it
Download the `interface.css` file and link the stylesheet to your document in the `<head>`:
```<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">```
Please check the file, as it already offers options to show facing pages, recto/verso, baseline, etc.
## Releases
### v0.1
`git checkout a1b3200e`
- Show facing pages or recto-verso (uncomment line of code for recto-verso)
- Show baseline (uncomment line of code)
- Show margin boxes (default: transparent)
- Variables to change the look
### v0.2
`git checkout 828b9865`
- Delete bleed inside for facing pages (on screen only)
![Screenshot of the interface (v0.2)](img-interface_v0.2.png)

Binary file not shown.


Width:  |  Height:  |  Size: 394 KiB

@ -0,0 +1,181 @@
/* CSS for Paged.js interface v0.2 */
/* Change the look */
:root {
--color-background: rgb(48, 48, 48);
--color-pageSheet: #cfcfcf;
--color-pageBox: violet;
--color-paper: white;
--color-marginBox: transparent;
--pagedjs-crop-color: black;
--pagedjs-crop-shadow: white;
--pagedjs-crop-stroke: 1px;
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 1px var(--color-pageSheet);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
.pagedjs_first_page {
margin-left: var(--pagedjs-width);
.pagedjs_page:last-of-type {
margin-bottom: 10mm;
box-shadow: 0 0 0 1px var(--color-pageBox);
z-index: 20;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
border-color: transparent;
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: 0;
z-index: 10;
position: relative;
left: calc(var(--pagedjs-bleed-left)*-1);
/* show the margin-box */
.pagedjs_margin-left-bottom {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
/* uncomment this part for recto/verso book : ------------------------------------ */
.pagedjs_pages {
flex-direction: column;
width: 100%;
.pagedjs_first_page {
margin-left: 0;
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
border-color: var(--pagedjs-crop-color);
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: var(--pagedjs-cross-size)!important;
left: 0;
/* uncomment this par to see the baseline : -------------------------------------------*/
/* .pagedjs_pagebox {
--pagedjs-baseline: 22px;
--pagedjs-baseline-position: 5px;
--pagedjs-baseline-color: cyan;
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
background-size: 100% var(--pagedjs-baseline);
background-repeat: repeat-y;
background-position-y: var(--pagedjs-baseline-position);
} */
/* Marks (to delete when merge in paged.js) */
z-index: 999999999999;
.pagedjs_bleed-top .pagedjs_marks-crop,
.pagedjs_bleed-bottom .pagedjs_marks-crop{
box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
.pagedjs_bleed-left .pagedjs_marks-crop,
.pagedjs_bleed-right .pagedjs_marks-crop{
box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);

File diff suppressed because it is too large Load Diff

@ -4,26 +4,26 @@ import json, pypandoc
from urllib.request import urlopen
from urllib.parse import urlencode
# Connecting via API with the pad
# Connecting via API with the pad !!!!!!!!!!!!!!! <----------
# To enable the connection you need to have acces to the API key of the pad instance, it is usually inside the pad server in the link: /opt/etherpad/APIKEY.txt
with open("/opt/etherpad/APIKEY.txt") as f:
api_key = f.read().strip()
# Afterward you need to declare the API you want to access !!!!!!!!!! <--------
api_url = "https://hub.xpub.nl/soupboat/pad/api/1.2.15/"
# wrap in a convenient function (APICALL)
# wrap in a convenient function (APICALL)
def ep (api_fn, api_url, api_key, **data):
data['apikey'] = api_key
return json.load(urlopen(f"{api_url}{api_fn}", data=urlencode(data).encode()))
glossary = ep("getText", api_url, api_key, padID="camilo_glossary")
# Here you declare what's the padID of your glossary !!!!!!!!!!!!!! <---------
glossary = ep("getText", api_url, api_key, padID="example_glossary")
text = glossary["data"]["text"]
# Converting markdown text into html
words = pypandoc.convert_text(text, 'html', format='md')
# Defining a dictionary of properties

@ -0,0 +1,120 @@
# Libraries
import pypandoc
# Converting markdown text into html
text = open('glossary.txt', 'r')
with text as f:
text = f.read()
words = pypandoc.convert_text(text, 'html', format='md')
# Defining a dictionary of properties
properties = [
'color': 'green'
'color': 'aqua'
'color': 'orange'
# Writing a legend using the properties
legend = ''
i = 0
for title, symbol, color in properties:
title = properties[i]['title']
legend += f'''<button id="{title}" class="btn {title}-s" onclick="filterSelection('{title}')">{title}</button>\n'''
i += 1
# Adding property symbols in front of each word generating a Java script code:
script = ''
i = 0
for title, symbol, color in properties:
title = properties[i]['title']
symbol = properties[i]['symbol']
script += (f"""const {title} = document.getElementsByClassName("{title}");
for (let i = 0; i < {title}.length; i++)"""'{\n'
f"""{title}[i].innerHTML += "<span class='symbol {title}-s'>{symbol}</span>";"""
i += 1
# Generating a css style using the properties values above:
style = ''
i = 0
for title, symbol, color in properties:
title = properties[i]['title']
color = properties[i]['color']
style += f'''.{title}-s''' + '{' + f'''color:{color};''''}'
i += 1
# Writing the glossary website
# Note that here you are using the previous variables **style**, **legend**, and **script**
body = f'''<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Attempt to Glossary</title>
<style> {style} </style>
<body id="glo_body">
<div class="head">
<h1> Living Glossary Example </h1>
<div class="description">
<p>This glossary project is an ongoing and ever-transforming experiment that introduces a diffractive methodology inside the publishing practice. It is seen as a mutable and living publication result of collective workshops where participants are invited to think and converse around its words and annotations. During the workshop, diffraction performs a conscious interconnection of practices beyond reflection. The current state of the glossary gathers different annotations on each word instead of a closed definition for each one.</p>
<p>Concretly, the glossary as a publication uses questions as triggers and it aims to weave as a conversation the multiple{description}of the current practice, with other vocabularies that come from critical theory, new materialism and others. The final intention is not just to envision our future as publishers but to help to initiate conversations with others.</p>
<div class="question">
<div id="sptContainer"></div>
<div id="legend" class="legend">
<button class="btn active" onclick="filterSelection('all')">properties</button> {legend}
<div class="words">
<script src="main.js"></script>
# Writing the `index.html` file
website = open('index.html','w')