New data base, better JS

3 years ago · 9075297745
parent 8b0f830494
commit 9075297745
14 changed files with 3107 additions and 3914 deletions
--- a/Database-making.ipynb
+++ b/Database-making.ipynb
@ -45,7 +45,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 94,
   "metadata": {},
   "outputs": [],
   "source": [
@ -55,7 +55,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 95,
   "metadata": {},
   "outputs": [],
   "source": [
@ -63,6 +63,22 @@
    "    soup = BeautifulSoup(file_in, 'html.parser')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Define My GLossary Bag"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 96,
   "metadata": {},
   "outputs": [],
   "source": [
    "glossary_bag = [] "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
@ -77,11 +93,91 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 97,
   "metadata": {},
   "outputs": [],
   "source": [
    "title = soup.find(id=\"title\").text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PROPERTIES"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 98,
   "metadata": {},
   "outputs": [],
   "source": [
    "master_properties = [\n",
    "    {\n",
    "      'title':'action',\n",
    "      'symbol':'A',\n",
    "      'color': 'var(--action-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'situation',\n",
    "      'symbol':'S',\n",
    "      'color': 'var(--situation-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'logic',\n",
    "      'symbol':'C',\n",
    "      'color': 'var(--logic-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'proposition',\n",
    "      'symbol':'T',\n",
    "      'color': 'var(--proposition-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'hyperlink',\n",
    "      'symbol':'N',\n",
    "      'color': 'var(--hyperlink-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'process',\n",
    "      'symbol':'P',\n",
    "      'color': 'var(--process-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'language',\n",
    "      'symbol':'G',\n",
    "      'color': 'var(--language-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'agent',\n",
    "      'symbol':'E',\n",
    "      'color': 'var(--agent-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'tool',\n",
    "      'symbol':'T',\n",
    "      'color': 'var(--tool-color)'\n",
    "    },\n",
    "    {\n",
    "      'title':'form',\n",
    "      'symbol':'Y',\n",
    "      'color': 'var(--form-color)'\n",
    "    }\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 99,
   "metadata": {},
   "outputs": [],
   "source": [
-    "title = soup.find(id=\"title\")"
+    "title1 = [ {'title': title } ]\n",
    "properties = [ {'properties' : master_properties } ]\n",
    "\n",
    "glossary_bag.append(title1)\n",
    "glossary_bag.append(properties)"
   ]
  },
  {
@ -95,7 +191,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": 100,
   "metadata": {
    "collapsed": true,
    "jupyter": {
@ -103,241 +199,13 @@
    },
    "tags": []
   },
-   "outputs": [
+   "outputs": [],
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://issue.xpub.nl/13/ATATA/\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"http://postgrowth.art/\">⤴</a>]\n",
      "[]\n",
      "[<a href=\"https://tdingsun.github.io/reading-machines/\">⤴</a>]\n",
      "[<a href=\"https://en.wikipedia.org/wiki/Teleology\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://soulellis.com/writing/urgentcraft2/\">⤴</a>]\n",
      "[<a href=\"https://soulellis.com/work/urgentcraft/index.html\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0\">⤴</a>]\n",
      "[<a href=\"https://networkcultures.org/digitalpublishing/\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://odotoo.com/risograph/\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://constantvzw.org/wefts/webpublications.en.html\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a>]\n",
      "[<a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a>]\n",
      "[<a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://daringfireball.net/projects/markdown/syntax#overview\">⤴</a>]\n",
      "[]\n",
      "[<a href=\"https://hub.xpub.nl/soupboat/pad/p/camilo_glossary\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[<a href=\"https://www.livingbooksaboutlife.org/\">⤴</a>]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n",
      "[]\n"
     ]
    }
   ],
   "source": [
-    "glossary_bag = [] \n",
+    "\n",
    "word_no = 1\n",
    "words = soup.find_all('div',attrs={'class':'word'})\n",
    "glossary = []\n",
    "\n",
    "\n",
    "for word in words:\n",
    "    \n",
@ -348,12 +216,26 @@
    "    links = word.find_all('a')\n",
    "    \n",
    "    properties = word.get('class')\n",
    "\n",
    "    li_properties = []\n",
    "\n",
    "    for prop in properties:\n",
    "        title_p = prop\n",
    "        for m_prop in master_properties:\n",
    "            if title_p == m_prop['title']:\n",
    "                symb = m_prop['symbol']\n",
    "                color = m_prop['color']\n",
    "                propert = {}\n",
    "                propert[\"title\"] = title_p\n",
    "                propert[\"symbol\"] = symb\n",
    "                propert[\"color\"] = color\n",
    "\n",
    "                li_properties.append(propert)\n",
    "            \n",
    "    li_voices = []\n",
    "    \n",
    "    for voice in voices:\n",
    "        links = voice.find_all('a')\n",
    "        print(links)\n",
    "        sentence = {}\n",
    "        sentence[\"voice\"]= voice.text.replace(\"⤴\",\"\")\n",
    "        if len(links) > 0:\n",
@ -365,34 +247,25 @@
    "            \n",
    "        li_voices.append(sentence)\n",
    "        \n",
    "    for link in links:\n",
    "        url = link.get('href')\n",
    "        li_links.append(url)\n",
    "        \n",
    "    word = {\n",
    "        'Word#': str(word_no), \n",
    "        'title': title, \n",
-    "        'properties': properties,\n",
+    "        'properties': li_properties,\n",
    "        'voices': li_voices,\n",
    "    }\n",
    "    \n",
-    "    glossary_bag.append(word)\n",
+    "    glossary.append(word)\n",
    "    \n",
-    "    word_no += 1\n"
+    "    word_no += 1\n",
    "\n",
    "words = [ { 'words' : glossary } ]\n",
    "\n",
    "glossary_bag.append(words)"
   ]
  },
  {
   "cell_type": "code",
-   "execution_count": 159,
+   "execution_count": 101,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
@ -400,30 +273,14 @@
    "        json.dump(glossary_bag, f, indent=5, ensure_ascii=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 140,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<_io.TextIOWrapper name='glossary.json' mode='w' encoding='utf-8'>"
      ]
     },
     "execution_count": 140,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
-   "source": []
+   "source": [
    "glossary_bag"
   ]
  }
 ],
 "metadata": {
@ -442,7 +299,7 @@
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
-   "version": "3.7.3"
+   "version": "3.8.5"
  }
 },
 "nbformat": 4,
--- a/glossary.js
+++ b/glossary.js
--- a/glossary.json
+++ b/glossary.json
--- a/images/pattern-01.svg
+++ b/images/pattern-01.svg
@ -1 +0,0 @@
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M255.18,259.07H43.1c-.25-3.53-.66-7.14-.73-10.75-.06-3.29.35-6.58.39-9.86q.5-38.76.87-77.53a31.26,31.26,0,0,0-.86-5.37"/><path class="cls-1" d="M255.63,35.91a26.15,26.15,0,0,1-12.57,1c-4.07-.68-8.34-.15-12.52-.15H214.4c-24.64,0-49.29.12-73.94,0-27.93-.16-55.86-.57-83.79-.86-3.29,0-6.58,0-11,0-.07,2.21-.19,4.47-.22,6.72Q45,75.79,44.56,109c-.11,7.32-.37,14.64-.39,22a63.24,63.24,0,0,0,.94,7.63,55.43,55.43,0,0,1-12.56,31.71c-10.76-6.48-15.76-16.2-18.9-27.24"/><path class="cls-1" d="M121.64,151.07c-1.34-5.37-2.5-10.81-4.11-16.1a19.79,19.79,0,0,0-3.55-6.26c-3.6-4.5-8.23-4.52-11,.48a133,133,0,0,0-7.69,17.43c-2.2,5.72-3.73,11.71-6,17.41-1,2.48-3,4.54-4.65,6.95-7-3.64-10.06-9.35-12.19-15.46-3-8.69-5.38-17.62-8.2-26.39-.92-2.85-2.22-5.89-5.79-6.23s-5.65,1.84-7.19,4.86c-1.65,3.21-3.56,6.29-5.35,9.42"/><path class="cls-1" d="M265.49,8.57l-1.34,12.55"/><path class="cls-1" d="M257.87,16.19l-.45,9"/><path class="cls-1" d="M274.9,130c-1-3.73-2-7.5-3.19-11.18a17.51,17.51,0,0,0-2.19-3.6"/><path class="cls-1" d="M248.91,22c1.82,3.88,1.84,8.78,6.27,11.2"/><path class="cls-1" d="M269.07,276.55q-.22,9.4-.44,18.82"/><path class="cls-1" d="M273.56,146.59,270,147.94"/><path class="cls-1" d="M252.94,250.56c.21,4,4.14,3.93,6.28,5.82"/><path class="cls-1" d="M269.07,273.86l-3.13-.45"/></g></svg>
--- a/images/pattern-02.svg
+++ b/images/pattern-02.svg
@ -1 +0,0 @@
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M124.05,130.46c-4.58,1.92-5.63,6.4-7.09,10.34-2.39,6.46-4.07,13.18-6.43,19.66a50,50,0,0,1-5.44,11.14c-1.52,2.23-3.86,2-6.2-.29-6.76-6.46-8.93-15.16-12-23.4-1.8-4.91-2.63-10.17-4.16-15.2-1.91-6.28-2.75-6.52-8.55-6.28-6.07,3.82-7.59,10.4-9.78,16.58-2.26,6.41-4.38,12.88-6.76,19.25-1.24,3.31-2.91,6.45-4.83,10.65-2.73-1.14-5.36-1.61-7.17-3.09-8.26-6.76-9.26-9.5-8.58-20.54.2-3.28.4-6.57.44-9.86.18-18.82.29-37.64.47-56.46.12-13.14.24-26.29.48-39.43a59.41,59.41,0,0,1,1-7.17c8.39,0,16.46-.06,24.52,0,8.37.08,16.73.36,25.1.42,11.2.07,22.4,0,33.6,0,1.65,0,3.29-.27,4.93-.42"/><path class="cls-1" d="M130.77,259.52c-12.55,0-25.09-.06-37.64,0-9.71.06-19.42.33-29.13.41-9.11.08-18.22,0-27.78,0v-7.62c0-11.65-.11-23.3,0-34.95.2-16.88.56-33.76.91-50.64a13.13,13.13,0,0,1,.86-3.14"/><path class="cls-1" d="M140.63,10.37l-1.35,10.75"/><path class="cls-1" d="M150,36.8l23.75.45"/><path class="cls-1" d="M143.77,114.33c4.76,5,5,11.67,6.27,17.92"/><path class="cls-1" d="M144.21,277.44v17"/><path class="cls-1" d="M132.56,15.74V26.05"/><path class="cls-1" d="M137,277.44q-.43,4.94-.89,9.86"/><path class="cls-1" d="M124.94,24.26c.59,3.71,2,6.93,5.38,9"/><path class="cls-1" d="M127.19,128.22l9.86,6.27c.11.06.29,0,.44,0"/><path class="cls-1" d="M128.08,250.56c.21,4,4.14,3.93,6.28,5.82"/><path class="cls-1" d="M144.21,273.86l-3.13-.45"/></g></svg>
--- a/images/pattern-03.svg
+++ b/images/pattern-03.svg
@ -1 +0,0 @@
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M138.21,123.3c-.27,1.43-.54,2.85-.8,4.24-5.46,1-8.21,4.91-9.89,9.46-3.09,8.42-5.84,17-8.55,25.52-1.82,5.78-3.14,7.81-7.78,10.37-6.12-3.1-8.89-8.91-11-14.89-3-8.69-5.38-17.62-8.21-26.39-.92-2.85-2.22-5.89-5.78-6.23s-5.79,1.77-7.16,4.87c-2.11,4.77-4.34,9.5-6.24,14.35-3,7.57-5.62,15.26-8.62,22.81-.72,1.8-2.31,3.25-3.77,5.21-8.07-4.4-13.15-10.3-14.54-19.07"/><path class="cls-1" d="M162.85,258a7.36,7.36,0,0,0,1.8.43c17.92-.12,35.85-.31,53.77-.4,3.88,0,7.77.33,11.65.41q13.89.28,27.78.44c4.17.05,5.38-1.32,5.38-5.81,0-16.43-.05-32.86,0-49.29.11-29.28.31-58.55.43-87.83.05-11.8-.05-23.6,0-35.4.07-12.25.35-24.5.36-36.75,0-2.44-.82-4.88-1.23-7.17-13.34,0-25.74.12-38.14,0-10-.12-20-.69-30-.83-10.31-.15-20.61,0-30.92,0a17.92,17.92,0,0,1-2.69-.43"/><path class="cls-1" d="M136,19.12q1.78,4.47,3.58,9"/><path class="cls-1" d="M140,35.25c-7.17.15-14.34.48-21.51.4-8.07-.09-16.13-.74-24.2-.81-15.08-.14-30.17-.05-45.26,0-4.92,0-4.9,0-4.93,4.93-.14,22.55-.22,45.11-.47,67.66-.15,13.3-.67,26.59-.85,39.89-.24,17.47-.31,34.95-.47,52.43q-.21,21.28-.46,42.57c-.06,4-.35,8.06-.39,12.1,0,1.05.48,2.11,1,4,7,0,14.23.06,21.4,0,5.68-.06,11.35-.41,17-.39,7.47,0,14.93.31,22.4.4,6.28.07,12.55.13,18.82,0,7-.16,14.05-.57,21.07-.87"/><path class="cls-1" d="M159.27,108.29c7.72,2,11.7,8.14,15.12,14.4,3.59,6.58,4.27,14,3.69,21.45a19.69,19.69,0,0,1-.44,2.24c-.75,3.74-2.73,7.75-2,11.14,1.38,6.14-.71,11.07-3,16.18s-5.31,9.71-10.72,12.12"/><path class="cls-1" d="M152.1,5.67l-.9,11.65"/><path class="cls-1" d="M156.13,274.54c0,5.38,0,10.76,0,16.14a7.9,7.9,0,0,1-.43,1.79"/><path class="cls-1" d="M162.41,119.49c5.31,3.91,7,9.43,6.67,15.69-.15,2.65,0,4.78,2.2,6.82,1.92,1.77,3.08,4.38,4.57,6.62"/><path class="cls-1" d="M149,273.65q-.45,4.47-.89,9"/><path class="cls-1" d="M144.93,13.29l-.45,9"/><path class="cls-1" d="M137.76,127.56l9,9.41"/><path class="cls-1" d="M160.16,159.82c-3.19,1.11-6.15,3.5-9.85,1.8"/><path class="cls-1" d="M169.58,141.9c-.49.86-1,1.72-1.74,3.08-2.84-3-4.76-5.1-6.79-7.1-3.13-3.08-6.81-3.31-10.74-1.81"/><path class="cls-1" d="M162.85,154.45l5.22-3.66c.69,3.69,1.32,7,2,10.38"/><path class="cls-1" d="M157.48,147.73l5.07,6.34c-1.35,5.54-1.85,10.71-4.63,15.17"/><path class="cls-1" d="M150.75,122.18c3.75.63,6.22,2.81,8.25,7.17h-8.25"/><path class="cls-1" d="M175,158c-3.31,3.42-6.63,6.83-10.7,11l-13.94,2.43"/><path class="cls-1" d="M167.78,144.14l-.45,6.72"/></g></svg>
--- a/images/pattern-04.svg
+++ b/images/pattern-04.svg
@ -1 +0,0 @@
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M147.06,275.9l.45-3.14"/><path class="cls-1" d="M141.68,261.11H45c-.19-3.87-.51-7.31-.49-10.75.07-10.61.25-21.21.42-31.82q.44-25.54.89-51.08.26-14.11.45-28.24c.31-21.36.65-42.72.88-64.08.11-10.45-.08-20.91.1-31.36,0-2.33,1.08-4.64,1.38-5.83H67.74q32.94,0,65.88,0c1.79,0,3.58.28,5.37.43"/><path class="cls-1" d="M160.06,38.4q39.21.23,78.42.46c7.76.06,15.53.27,23.3.44,3.45.07,5.34,1.72,5.33,5.37,0,12.55-.27,25.1-.39,37.64-.06,6,0,12,0,17.93V124c0,16.88.06,33.76,0,50.64-.08,18.52-.3,37-.42,55.56-.06,8.67,0,17.33,0,26a45.29,45.29,0,0,1-.59,4.93h-4.77q-47.06,0-94.1,0c-1.79,0-3.59.28-5.38.43"/><path class="cls-1" d="M154,276.35l.67,15.68"/><path class="cls-1" d="M144.37,135.64c-1.19-1.2-2.45-2.33-3.57-3.6-3.8-4.29-8-4.45-10.63.54-3.27,6.11-5.69,12.7-8.15,19.21-2,5.43-3.45,11.11-5.48,16.54-2.3,6.17-6.71,6.95-10.62,1.75a43.92,43.92,0,0,1-6.25-11.18C96.48,150.07,93.91,141,91,132.06c-.51-1.58-1.32-3.06-2.11-4.87l-6.08-.7c-6.89,5.65-8.54,14-11.51,21.69-2.79,7.19-5.38,14.48-8.61,21.47-1.92,4.14-4.06,4.29-7.49,1.36-2.81-2.39-5.4-5-8.09-7.59"/><path class="cls-1" d="M187.84,196.14c4,.39,4.91-3.23,6.65-5.44a68.81,68.81,0,0,0,11.74-22.79,5.89,5.89,0,0,1,.88-1.35"/><path class="cls-1" d="M209.13,157.15c-.08-3.44-.15-6.87-.23-10.31"/><path class="cls-1" d="M209.13,141c-.08-4.78.62-9.73-.36-14.32-5.54-26-22.1-41.84-46.93-49.73a10.9,10.9,0,0,0-3.13,0"/><path class="cls-1" d="M208.45,166.11c.45,2.84,1.59,5.77,1.24,8.5-2.42,18.77-10.05,34.82-24.93,47.14-5.49,4.55-11.2,8.45-18,10.66-1.3.43-2.68.62-4,.92"/><path class="cls-1" d="M193.67,154c.59,1.2,1.65,2.37,1.72,3.59a62.11,62.11,0,0,1-6.63,32.28,43,43,0,0,0-1.82,4.91"/><path class="cls-1" d="M182.46,201.51c-3.28,2.54-6.63,5-9.84,7.64-2.78,2.29-5.3,4.88-8.13,7.09-1.05.82-2.64,1-4,1.41"/><path class="cls-1" d="M175.74,123.54c5.59,2.39,8.8,7,11.7,12.07a71.32,71.32,0,0,0,5,6.76l.91,9.45c-1.74,4.93-3.13,9.73-5.12,14.26-1.81,4.13-3.32,8.69-8,10.79"/><path class="cls-1" d="M156.92,93.52c4.36-.09,8.2,1.15,11.2,4.48"/><path class="cls-1" d="M189.63,116.37c5.1,2.62,7.49,7.57,10.27,12.12,1.84,3,3.26,6.29,5,9.37.89,1.59,2.06,3,3.1,4.5"/><path class="cls-1" d="M160.5,120c.75.14,1.84,0,2.19.48,3.53,4.6,6.71,9.2,5.63,15.68-.34,2,1.21,4.73,2.58,6.63,2.41,3.34,5.31,6.32,5.29,10.81"/><path class="cls-1" d="M178.65,164.32c.8,6.69,1.26,12.72-2.47,19.51s-8.35,12-13.43,17.23"/><path class="cls-1" d="M169,117.27l4.54,6.65.86-1.17a59.16,59.16,0,0,1,1.72,7.07c.61,5.06,1.1,10.15,1.28,15.23,0,1.17-1.38,2.39-2.13,3.58"/><path class="cls-1" d="M188.29,116.82a66.79,66.79,0,0,1,2.18,7.63c.92,5.48,5.18,10.62,1.85,16.57"/><path class="cls-1" d="M176.64,163.87a15,15,0,0,0-1.32,2.7,42.41,42.41,0,0,1-13,21.05"/><path class="cls-1" d="M174,185.83c-1.94.75-3.89,1.47-5.83,2.24s-3.58,1.49-5.37,2.24"/><path class="cls-1" d="M151.09,6.13l-1.34,10.76"/><path class="cls-1" d="M168.57,99.34c-2.09-.15-4.19-.24-6.27-.46s-3.89-.58-5.83-.88"/><path class="cls-1" d="M143.48,10.61,143,21.82"/><path class="cls-1" d="M169.91,210.48H161.4"/><path class="cls-1" d="M175.29,158.49c-5.19,3.46-9.42,7.63-11.27,13.87-.58,1.94-2,3.61-3.07,5.4"/><path class="cls-1" d="M167.23,145.05c-2.24-2.09-4.27-4.5-6.79-6.18-2.07-1.37-4.72-1.89-7.11-2.78"/><path class="cls-1" d="M160.06,160.73l-6.2,2.55-4.56-.75"/><path class="cls-1" d="M167.23,152.22c.44,1.64,1,3.27,1.32,4.93s.62,3.58.92,5.38"/><path class="cls-1" d="M158.71,150l3.17,5.82c-1.8,7.91-1.83,16.64-12.58,17.48"/><path class="cls-1" d="M159.61,121.3v4.64l-1.51,1.12-9.25-4"/><path class="cls-1" d="M167.23,137c-3.2-1.23-5.85-3.28-8.67-5.14-2.56-1.7-6.42-1.43-9.71-2"/><path class="cls-1" d="M169.47,142.81l-3.1,7.8.67.29-4.74,4.9"/><path class="cls-1" d="M157.37,128l-.45,1.79"/></g></svg>
--- a/images/pattern-05.svg
+++ b/images/pattern-05.svg
--- a/images/pattern-06.svg
+++ b/images/pattern-06.svg
--- a/images/pattern-07.svg
+++ b/images/pattern-07.svg
--- a/images/pattern-08.svg
+++ b/images/pattern-08.svg
--- a/index.html
+++ b/index.html
@ -7,101 +7,26 @@
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <title>Glossary</title>
    </head>
-        <style> .action-s:hover{color:green;}.situation-s:hover{color:aqua;}.logic-s:hover{color:orange;}.proposition-s:hover{color:blue;}.hyperlink-s:hover{color:pink;}.process-s:hover{color:gray;}.language-s:hover{color:violet;}.agent-s:hover{color:purple;}.tool-s:hover{color:lightblue;}.form-s:hover{color:gold;} </style>
+        <!-- <style> .action-s:hover{color:green;}.situation-s:hover{color:aqua;}.logic-s:hover{color:orange;}.proposition-s:hover{color:blue;}.hyperlink-s:hover{color:pink;}.process-s:hover{color:gray;}.language-s:hover{color:violet;}.agent-s:hover{color:purple;}.tool-s:hover{color:lightblue;}.form-s:hover{color:gold;} </style> -->
    <body id="glo_body">
    <div class="head">
-        <h1 id="title"> Permeable Glossary for a Living Publishing Practice </h1>
+        <h1 id="title"> Living Glossary for a Diffractive Publishing Practice </h1>
            <div class="question">
-        <input id="search" type="text" ><span onclick="document.getElementById('search').value= ''">X</span>
+        <input id="search" type="text" ><span onclick="document.getElementById('search').value= ''"></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 id="legend" class="legend"> 
+    <div id="legend" class="legend"></div>
        <button class="btn active" onclick="filterSelection('all')">properties</button> <button id="action" class="btn action-s" onclick="filterSelection('action')">action→  <span class='symbol action-s'>A</span> </button>
        <button id="situation" class="btn situation-s" onclick="filterSelection('situation')">situation→  <span class='symbol situation-s'>S</span> </button>
        <button id="logic" class="btn logic-s" onclick="filterSelection('logic')">logic→  <span class='symbol logic-s'>C</span> </button>
        <button id="proposition" class="btn proposition-s" onclick="filterSelection('proposition')">proposition→  <span class='symbol proposition-s'>T</span> </button>
        <button id="hyperlink" class="btn hyperlink-s" onclick="filterSelection('hyperlink')">hyperlink→  <span class='symbol hyperlink-s'>N</span> </button>
        <button id="process" class="btn process-s" onclick="filterSelection('process')">process→  <span class='symbol process-s'>P</span> </button>
        <button id="language" class="btn language-s" onclick="filterSelection('language')">language→  <span class='symbol language-s'>G</span> </button>
        <button id="agent" class="btn agent-s" onclick="filterSelection('agent')">agent→  <span class='symbol agent-s'>E</span> </button>
        <button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool→  <span class='symbol tool-s'>T</span> </button>
        <button id="form" class="btn form-s" onclick="filterSelection('form')">form→  <span class='symbol form-s'>Y</span> </button>
    </div>
    <div id="words" class="words">
    </div>
    </div>
    </body>
        <script>
            const action = document.getElementsByClassName("action");
    for (let i = 0; i < action.length; i++){
 action[i].innerHTML += "<span class='symbol action-s'>A</span>";
 }
 const situation = document.getElementsByClassName("situation");
    for (let i = 0; i < situation.length; i++){
 situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
 }
 const logic = document.getElementsByClassName("logic");
    for (let i = 0; i < logic.length; i++){
 logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
 }
 const proposition = document.getElementsByClassName("proposition");
    for (let i = 0; i < proposition.length; i++){
 proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
 }
 const hyperlink = document.getElementsByClassName("hyperlink");
    for (let i = 0; i < hyperlink.length; i++){
 hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
 }
 const process = document.getElementsByClassName("process");
    for (let i = 0; i < process.length; i++){
 process[i].innerHTML += "<span class='symbol process-s'>P</span>";
 }
 const language = document.getElementsByClassName("language");
    for (let i = 0; i < language.length; i++){
 language[i].innerHTML += "<span class='symbol language-s'>G</span>";
 }
 const agent = document.getElementsByClassName("agent");
    for (let i = 0; i < agent.length; i++){
 agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
 }
 const tool = document.getElementsByClassName("tool");
    for (let i = 0; i < tool.length; i++){
 tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
 }
 const form = document.getElementsByClassName("form");
    for (let i = 0; i < form.length; i++){
 form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
 }
        </script>
        <!-- <script type="text/javascript" src="glossary.js"></script> -->
        <script src="main.js"></script>
    </html>
--- a/main.js
+++ b/main.js
@ -3,35 +3,119 @@
 fetch("glossary.json").then(response => response.json()).then(data => glossary = data).then(()=>{
  let [title_bag, properties_bag, words_bag] = glossary;
  function links(link){
    return`
    <a href="${link}">⤴︎</a>
    `
  }
  function voices(voices) {
      return `
-      ${voices.map((voice) => `<p>${voice}</p>`).join("")}
+      <p>${voices.voice} ${voices.link ? links(voices.link) : ''}</p>
      `
  }
-  function links(links) {
+  function properties(prop) {
    return `${prop.title}`
  }
  function wordBag(words) {
    return `
-      ${links.map((links) => `<p><a href="${links}">⤴︎</a></p>`).join("")}
+      ${words.words.map(wordTemplate).join("")}
    `
  }
  function propBag(props) {
    return `
      ${props.properties.map(legendTemplate).join("")}
    `
  }
  function wordTemplate(word) {
      return `
-    <div class="${word.properties.join(' ')}">
+      <div class="word ${word.properties.map(properties).join(" ")}">
-    <h1 id="${word.title}"class="title">${word.title}</h1>
+        <h1 class="title">${word.title}</h1>
-    ${voices(word.voices)}
+        ${word.voices.map(voices).join('')}
    ${links(word.links)}
      </div>
      `
  }
-  document.getElementById("words").innerHTML = `${glossary.map(wordTemplate).join("")}`
+  function legendTemplate(prop){
    return `
    <button id="${prop.title}" class="btn" style="color: ${prop.color};" "onclick="filterSelection('${prop.title}')">${prop.title} → <span class="symbol" style="color: ${prop.color};" >${prop.symbol}</span></button>
    `
  }
-  console.log(glossary)
+  document.getElementById("words").innerHTML = `${words_bag.map(wordBag).join("")}`
  document.getElementById("legend").innerHTML = `
        <button class="btn active" onclick="filterSelection('all')">properties</button>
        ${properties_bag.map(propBag).join("")}
  `
-}); ///// END OF FETCH!!!!!!
+  // function symbols(symbol){
  //   return `
  //     <span class='symbol ${symbol.title}-s'>${symbol.symbol}</span>
  //   `
  // }
  // const action = document.getElementsByClassName("action");
  // for (let i = 0; i < action.length; i++){
  // action[i].innerHTML += "<span class='symbol action-s'>A</span>";
  // }
  // const situation = document.getElementsByClassName("situation");
  //   for (let i = 0; i < situation.length; i++){
  // situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
  // }
  // const logic = document.getElementsByClassName("logic");
  //   for (let i = 0; i < logic.length; i++){
  // logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
  // }
  // const proposition = document.getElementsByClassName("proposition");
  //   for (let i = 0; i < proposition.length; i++){
  // proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
  // }
  // const hyperlink = document.getElementsByClassName("hyperlink");
  //   for (let i = 0; i < hyperlink.length; i++){
  // hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
  // }
  // const process = document.getElementsByClassName("process");
  //   for (let i = 0; i < process.length; i++){
  // process[i].innerHTML += "<span class='symbol process-s'>P</span>";
  // }
  // const language = document.getElementsByClassName("language");
  //   for (let i = 0; i < language.length; i++){
  // language[i].innerHTML += "<span class='symbol language-s'>G</span>";
  // }
  // const agent = document.getElementsByClassName("agent");
  //   for (let i = 0; i < agent.length; i++){
  // agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
  // }
  // const tool = document.getElementsByClassName("tool");
  //   for (let i = 0; i < tool.length; i++){
  // tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
  // }
  // const form = document.getElementsByClassName("form");
  //   for (let i = 0; i < form.length; i++){
  // form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
  // }
 }); ///// END OF FETCH!!!!!!
--- a/style.css
+++ b/style.css
@ -1,6 +1,18 @@
 :root {
  --blue: #1e90ff;
  --white: #ffffff;
  --links-color: blue;
  --body-text-color: rgb(20, 20, 20);
  --action-color: rgb(31, 31, 31);
  --situation-color: aqua;
  --logic-color:orange;
  --proposition-color: rgb(255, 115, 96);
  --hyperlink-color: pink;
  --process-color: rgb(81, 241, 167);
  --language-color: violet;
  --agent-color: purple;
  --tool-color: lightblue;
  --form-color: gold;
 }
@font-face {
@ -25,7 +37,7 @@ body {
 }
 hr {
-    background: black;
+    background: var(--body-text-color);
    height: 0.1pt;
    margin: 0;
 }
@ -65,13 +77,14 @@ ul {
 a {
    font-size: 18pt;
    font-family: mono;   
-    color:blue;
+    color: var(--links-color);
    text-decoration:none;
 }
 .head{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 15pt;
    margin-right: 15pt;
@ -82,8 +95,11 @@ a {
    margin-bottom:10pt;
 }
 .description{
    margin-bottom: 20pt;
 }
 .description p{
    margin-top: 10pt;
    margin-bottom: 10pt;
    margin-left: 15pt;
    margin-right: 15pt;
@ -101,16 +117,17 @@ a {
 .question input{
    width:500px;
-    font-size: 14pt;
+    font-size: 18pt;
    padding-top: 3pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 3pt;
    margin-left: 15pt;
    margin-right: 2pt;
-    margin-top: 14pt;
+    margin-top: 2pt;
-    color:white;
+    color:rgb(3, 3, 3);
-    background-color:black;
+    background-color: white;
    border:  1.2pt solid black;
    border-radius: 8pt; 
 }
@ -126,7 +143,7 @@ a {
 .btn{
    background: white;
-    font-size: 20pt;
+    font-size: 18pt;
    border-radius: 8pt; 
    border:  1.2pt solid black;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
@ -169,25 +186,20 @@ img{
 }
 .words {
 /*     -webkit-column-count: 3;
    -moz-column-count: 3;
        column-count: 3;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
        column-width: 400px;
    overflow: hidden; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-    gap: 1.3rem;
+    gap: 0;
    margin-top: 10pt;
-    margin-left: 15pt;
+    margin-left: 0;
-    margin-right: 15pt;
+    margin-right: 0;
 }
 .word {
    display: none;
-    margin-top: 7pt;
+    padding-top: 15pt;
-    margin-bottom: 7pt;
+    padding-bottom: 15pt;
    padding-left: 20pt;
    padding-right: 20pt;
 }
 .show {
@ -228,7 +240,34 @@ img{
    transition: color .5s;
 }
 .action{
    box-shadow: inset 0 0 10px 2px var(--action-color);
 }
 .situation{
    border-top: var(--situation-color) 3pt solid;
 }
 .logic{
    border-bottom: var(--logic-color) 3pt solid;
 }
 .proposition {
    border-left: var(--proposition-color) 3pt solid;
 }
 .hyperlink {
    border-radius: 0px 0px 70px 0px / 0px 0px 72px 1px;
 }
 .form {
    border-right: var(--form-color) 3pt solid;
 }
 .tool {
    box-shadow: 0 0 10px 2px var(--tool-color);
 }
 .language {
    text-shadow: 0 0 2px var(--text-color);
 }
		`@ -1 +0,0 @@`
			<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M255.18,259.07H43.1c-.25-3.53-.66-7.14-.73-10.75-.06-3.29.35-6.58.39-9.86q.5-38.76.87-77.53a31.26,31.26,0,0,0-.86-5.37"/><path class="cls-1" d="M255.63,35.91a26.15,26.15,0,0,1-12.57,1c-4.07-.68-8.34-.15-12.52-.15H214.4c-24.64,0-49.29.12-73.94,0-27.93-.16-55.86-.57-83.79-.86-3.29,0-6.58,0-11,0-.07,2.21-.19,4.47-.22,6.72Q45,75.79,44.56,109c-.11,7.32-.37,14.64-.39,22a63.24,63.24,0,0,0,.94,7.63,55.43,55.43,0,0,1-12.56,31.71c-10.76-6.48-15.76-16.2-18.9-27.24"/><path class="cls-1" d="M121.64,151.07c-1.34-5.37-2.5-10.81-4.11-16.1a19.79,19.79,0,0,0-3.55-6.26c-3.6-4.5-8.23-4.52-11,.48a133,133,0,0,0-7.69,17.43c-2.2,5.72-3.73,11.71-6,17.41-1,2.48-3,4.54-4.65,6.95-7-3.64-10.06-9.35-12.19-15.46-3-8.69-5.38-17.62-8.2-26.39-.92-2.85-2.22-5.89-5.79-6.23s-5.65,1.84-7.19,4.86c-1.65,3.21-3.56,6.29-5.35,9.42"/><path class="cls-1" d="M265.49,8.57l-1.34,12.55"/><path class="cls-1" d="M257.87,16.19l-.45,9"/><path class="cls-1" d="M274.9,130c-1-3.73-2-7.5-3.19-11.18a17.51,17.51,0,0,0-2.19-3.6"/><path class="cls-1" d="M248.91,22c1.82,3.88,1.84,8.78,6.27,11.2"/><path class="cls-1" d="M269.07,276.55q-.22,9.4-.44,18.82"/><path class="cls-1" d="M273.56,146.59,270,147.94"/><path class="cls-1" d="M252.94,250.56c.21,4,4.14,3.93,6.28,5.82"/><path class="cls-1" d="M269.07,273.86l-3.13-.45"/></g></svg>