{
 "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": 11,
   "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=\"binding_glossary\")\n",
    "\n",
    "text = glossary[\"data\"][\"text\"]\n",
    "\n",
    "words = pypandoc.convert_text(text, 'html', format='md')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From a local markdown text file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pypandoc\n",
    "\n",
    "text = open('glossary.txt', 'r')\n",
    "\n",
    "with text as f:\n",
    "    text = f.read()\n",
    "    \n",
    "words = pypandoc.convert_text(text, 'html', format='md')"
   ]
  },
  {
   "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": 13,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "properties = [\n",
    "\t{\n",
    "\t\t'title':'fact',\n",
    "\t\t'symbol':'A',\n",
    "        'color': 'green'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'process',\n",
    "\t\t'symbol':'S',\n",
    "\t\t'color': 'aqua'\n",
    "\t},\n",
    "\t{\n",
    "\t\t'title':'love',\n",
    "\t\t'symbol':'L',\n",
    "\t\t'color': 'orange'\n",
    "\t},\n",
    "    \t{\n",
    "\t\t'title':'tool',\n",
    "\t\t'symbol':'T',\n",
    "\t\t'color': 'blue'\n",
    "\t}\n",
    "]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Writing the Website"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Write properties legend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "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": 15,
   "metadata": {},
   "outputs": [],
   "source": [
    "legend = ''\n",
    "\n",
    "i = 0\n",
    "\n",
    "for title, symbol, color in properties:\n",
    "    title = properties[i]['title']\n",
    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}</button>\\n'''\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Write Script that will add properties to each word"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "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": 17,
   "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''' + '{' + f'''color:{color};''''}'\n",
    "    i += 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "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>Binding GLossary</title>\n",
    "    </head>\n",
    "        <style> {style} </style>\n",
    "    <body id=\"glo_body\">\n",
    "\n",
    "    <div class=\"head\">\n",
    "        <h1> Glossary for a Diffractive Publishing Practice </h1>\n",
    "    </div>\n",
    "    <hr>\n",
    "    <div class=\"description\">\n",
    "        <p>This glossary gathers words around bookbiding. It was made as an example to use the tool living-glossary.</p> \n",
    "        <p>{description} are the properties that organize and make connections between words.</p>\n",
    "    </div>\n",
    "    <div id=\"legend\" class=\"legend\"> \n",
    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
    "    </div>\n",
    "    <hr>\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
}