You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.4 KiB
Python
121 lines
3.4 KiB
Python
# 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 = [
|
|
{
|
|
'title':'action',
|
|
'symbol':'A',
|
|
'color': 'green'
|
|
},
|
|
{
|
|
'title':'situation',
|
|
'symbol':'S',
|
|
'color': 'aqua'
|
|
},
|
|
{
|
|
'title':'logic',
|
|
'symbol':'L',
|
|
'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>";"""
|
|
'\n}\n\n')
|
|
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>
|
|
<html>
|
|
<head>
|
|
<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>
|
|
</head>
|
|
<style> {style} </style>
|
|
<body id="glo_body">
|
|
|
|
<div class="head">
|
|
<h1> Living Glossary Example </h1>
|
|
</div>
|
|
<hr>
|
|
<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>
|
|
<hr>
|
|
<div class="question">
|
|
<div id="sptContainer"></div>
|
|
</div>
|
|
<hr>
|
|
<div id="legend" class="legend">
|
|
<button class="btn active" onclick="filterSelection('all')">properties</button> {legend}
|
|
</div>
|
|
<hr>
|
|
<div class="words">
|
|
{words}
|
|
</div>
|
|
</body>
|
|
<script>
|
|
{script}
|
|
</script>
|
|
<script src="main.js"></script>
|
|
</html>'''
|
|
|
|
# Writing the `index.html` file
|
|
|
|
```
|
|
website = open('index.html','w')
|
|
|
|
website.write(body)
|
|
website.close()
|