# 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()
