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.

11 KiB

Raw Blame History

Glossary Making Tool¶

This is a Work-in-progress experiment tool to make living glossaries Webpages using simple Python, Javascript, and CSS from an markdown file written in a Etherpad instance.

What makes it living?

The glossary structure uses the idea of 'gloss' that means annottation and layer. It makes the glossary a layering of anotations rather than a list of definitions. The pad template uses each word as a card with multiple annotations. See the example.
This tool also offers the option of add properties to each word in order to find connections and multiple types of organization.

Words¶

Communicating via API with the glossary Pad and translating the text written in Markdown format using Pandoc library.

In [1]:

import json, pypandoc
from urllib.request import urlopen
from urllib.parse import urlencode


with open("/opt/etherpad/APIKEY.txt") as f:
    api_key = f.read().strip()

api_url = "https://hub.xpub.nl/soupboat/pad/api/1.2.15/"

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

text = glossary["data"]["text"]

words = pypandoc.convert_text(text, 'html', format='md')

From a local markdown text file

In [ ]:

Properties¶

The following is a word property dictionary

In [2]:

properties = [
	{
		'title':'action',
		'symbol':'A',
        'color': 'green'
	},
	{
		'title':'situation',
		'symbol':'S',
		'color': 'aqua'
	},
	{
		'title':'logic',
		'symbol':'C',
		'color': 'orange'
	},
	{
		'title':'proposition',
		'symbol':'T',
		'color': 'blue'
	},
	{
		'title':'hyperlink',
		'symbol':'N',
		'color': 'pink'
	},
	{
		'title':'process',
		'symbol':'P',
		'color': 'gray'
	},
	{
		'title':'language',
		'symbol':'G',
		'color': 'violet'
	},
	{
		'title':'agent',
		'symbol':'E',
		'color': 'purple'
	},
	{
		'title':'tool',
		'symbol':'T',
		'color': 'lightblue'
	},
	{
		'title':'form',
		'symbol':'Y',
		'color': 'gold'
	}
]

Writing the Website¶

Write properties legend

In [3]:

description = ''

i = 0

for title, symbol, color in properties:
    title = properties[i]['title']
    description += (f''' {title}s,''')
    i += 1

In [4]:

legend = ''

i = 0

for title, symbol, color in properties:
    title = properties[i]['title']
    symbol = properties[i]['symbol']
    legend += f'''<button id="{title}" class="btn {title}-s" onclick="filterSelection('{title}')">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\n'''
    i += 1

Write Script that will add properties to each word

In [5]:

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

Assign a different color for each property

In [6]:

style = ''

i = 0 

for title, symbol, color in properties:
    title = properties[i]['title']
    color = properties[i]['color']
    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'
    i += 1

In [ ]:

In [7]:

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>Glossary</title>
    </head>
        <style> {style} </style>
    <body id="glo_body">
    <div class="head">
        <h1 id="title"> Permeable Glossary for a Living Publishing Practice </h1>
            <div class="question">
        <input id="search" type="text" ><span onclick="document.getElementById('search').value= ''">X</span>
    </div>
        <a href="rss.xml">
            <p>follow what is new (rss)</p>
        </a>
    </div>
    <div class='diffraction'>
        <img src='images/pattern-01.svg'>
        <img src='images/pattern-02.svg'>
        <img src='images/pattern-03.svg'>
        <img src='images/pattern-04.svg'>
        <img src='images/pattern-05.svg'>
        <img src='images/pattern-06.svg'>
        <img src='images/pattern-07.svg'>
        <img src='images/pattern-08.svg'>
    </div>
    <div class="description">
        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </p> 
        <p>The current state of the glossary was made during different workshop  sessions were practitioners are invited to question, reflect and diffract on the current publishing practice. Based on the previous state of the glossary, this sessions are called Rumination Sessions as a performance of multiple digestion. The participants added new entries, annotated on previous ones, highlighted snippets of it, bring up questions. The process aims to re-think and create collectively every word definition as a layering of annotations. Unlike traditional glossaries, in this glossary words are open to interpretation, expansion and mostly transformation. </p>
    </div>
    <div class;
    <div id="legend" class="legend"> 
        <button class="btn active" onclick="filterSelection('all')">properties</button> {legend}
    </div>
    <div class="words">
        {words} 
    </div>
    </body>
        <script>
            {script}
        </script>
        <script src="main.js"></script>
    </html>'''

website = open('index.html','w')

website.write(body)
website.close()

In [ ]:

print(words)

In [ ]:

from time import sleep

while True:
    print('hey')
    sleep(5)

In [ ]:

11 KiB Raw Blame History

Glossary Making Tool¶

Words¶

Properties¶

Writing the Website¶

11 KiB

Raw Blame History