{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Glossary Making Tool"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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.\n",
    "\n",
    "**What makes it living?** \n",
    "\n",
    "* 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.\n",
    "\n",
    "* This tool also offers the option of add properties to each word in order to find connections and multiple types of organization. \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Words\n",
    "Communicating via **API** with the glossary **Pad** and translating the text written in **Markdown** format using **Pandoc** library."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import json, pypandoc\n",
    "from urllib.request import urlopen\n",
    "from urllib.parse import urlencode\n",
    "\n",
    "\n",
    "with open(\"/opt/etherpad/APIKEY.txt\") as f:\n",
    "    api_key = f.read().strip()\n",
    "\n",
    "api_url = \"https://hub.xpub.nl/soupboat/pad/api/1.2.15/\"\n",
    "\n",
    "# wrap in a convenient function (APICALL)\n",
    "def ep (api_fn, api_url, api_key, **data):\n",
    "    data['apikey'] = api_key\n",
    "    return json.load(urlopen(f\"{api_url}{api_fn}\", data=urlencode(data).encode()))\n",
    "\n",
    "\n",
    "glossary = ep(\"getText\", api_url, api_key, padID=\"camilo_glossary\")\n",
    "\n",
    "text = glossary[\"data\"][\"text\"]\n",
    "\n",
    "words = pypandoc.convert_text(text, 'html', format='md')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From a local markdown text file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Properties"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following is a word property dictionary "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "properties = [\n",
    "\t{\n",
    "\t\t'title':'action',\n",
    "\t\t'symbol':'A',\n",
    "        'color': 'green'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'situation',\n",
    "\t\t'symbol':'S',\n",
    "\t\t'color': 'aqua'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'logic',\n",
    "\t\t'symbol':'C',\n",
    "\t\t'color': 'orange'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'proposition',\n",
    "\t\t'symbol':'T',\n",
    "\t\t'color': 'blue'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'hyperlink',\n",
    "\t\t'symbol':'N',\n",
    "\t\t'color': 'pink'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'process',\n",
    "\t\t'symbol':'P',\n",
    "\t\t'color': 'gray'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'language',\n",
    "\t\t'symbol':'G',\n",
    "\t\t'color': 'violet'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'agent',\n",
    "\t\t'symbol':'E',\n",
    "\t\t'color': 'purple'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'tool',\n",
    "\t\t'symbol':'T',\n",
    "\t\t'color': 'lightblue'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'form',\n",
    "\t\t'symbol':'Y',\n",
    "\t\t'color': 'gold'\n",
    "\t}\n",
    "]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Writing the Website"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Write properties legend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "description = ''\n",
    "\n",
    "i = 0\n",
    "\n",
    "for title, symbol, color in properties:\n",
    "    title = properties[i]['title']\n",
    "    description += (f''' {title}s,''')\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "legend = ''\n",
    "\n",
    "i = 0\n",
    "\n",
    "for title, symbol, color in properties:\n",
    "    title = properties[i]['title']\n",
    "    symbol = properties[i]['symbol']\n",
    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\\n'''\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Write Script that will add properties to each word"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "script = ''\n",
    "\n",
    "i = 0 \n",
    "\n",
    "for title, symbol, color in properties:\n",
    "    title = properties[i]['title']\n",
    "    symbol = properties[i]['symbol']\n",
    "    script += (f\"\"\"const {title} = document.getElementsByClassName(\"{title}\");\n",
    "    for (let i = 0; i < {title}.length; i++)\"\"\"'{\\n' \n",
    "               f\"\"\"{title}[i].innerHTML += \"<span class='symbol {title}-s'>{symbol}</span>\";\"\"\" \n",
    "    '\\n}\\n\\n')\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Assign a different color for each property "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "style = ''\n",
    "\n",
    "i = 0 \n",
    "\n",
    "for title, symbol, color in properties:\n",
    "    title = properties[i]['title']\n",
    "    color = properties[i]['color']\n",
    "    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "body = f'''<!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "        <meta charset=\"utf-8\">\n",
    "        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
    "        <link rel=\"stylesheet\" href=\"style.css\"> \n",
    "        <title>Glossary</title>\n",
    "    </head>\n",
    "        <style> {style} </style>\n",
    "    <body id=\"glo_body\">\n",
    "    <div class=\"head\">\n",
    "        <h1 id=\"title\"> Permeable Glossary for a Living Publishing Practice </h1>\n",
    "            <div class=\"question\">\n",
    "        <input id=\"search\" type=\"text\" ><span onclick=\"document.getElementById('search').value= ''\">X</span>\n",
    "    </div>\n",
    "        <a href=\"rss.xml\">\n",
    "            <p>follow what is new (rss)</p>\n",
    "        </a>\n",
    "    </div>\n",
    "    <div class='diffraction'>\n",
    "        <img src='images/pattern-01.svg'>\n",
    "        <img src='images/pattern-02.svg'>\n",
    "        <img src='images/pattern-03.svg'>\n",
    "        <img src='images/pattern-04.svg'>\n",
    "        <img src='images/pattern-05.svg'>\n",
    "        <img src='images/pattern-06.svg'>\n",
    "        <img src='images/pattern-07.svg'>\n",
    "        <img src='images/pattern-08.svg'>\n",
    "    </div>\n",
    "    <div class=\"description\">\n",
    "        <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> \n",
    "        <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>\n",
    "    </div>\n",
    "    <div class;\n",
    "    <div id=\"legend\" class=\"legend\"> \n",
    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
    "    </div>\n",
    "    <div class=\"words\">\n",
    "        {words} \n",
    "    </div>\n",
    "    </body>\n",
    "        <script>\n",
    "            {script}\n",
    "        </script>\n",
    "        <script src=\"main.js\"></script>\n",
    "    </html>'''\n",
    "\n",
    "website = open('index.html','w')\n",
    "\n",
    "website.write(body)\n",
    "website.close()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print(words)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "\n",
    "while True:\n",
    "    print('hey')\n",
    "    sleep(5)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}