BackUp and ready to start
camilo
3 years ago
commit
1d51f9039f
@ -0,0 +1,419 @@
|
||||
{
|
||||
"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": 43,
|
||||
"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": 44,
|
||||
"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": 45,
|
||||
"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": 46,
|
||||
"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": 47,
|
||||
"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": 48,
|
||||
"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": 55,
|
||||
"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>Attempt to Glossary</title>\n",
|
||||
" </head>\n",
|
||||
" <style> {style} </style>\n",
|
||||
" <body id=\"glo_body\">\n",
|
||||
" <div class=\"head\">\n",
|
||||
" <h1> 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
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
///////// filters with buttons ///////////
|
||||
|
||||
filterSelection("all")
|
||||
function filterSelection(c) {
|
||||
var x, i;
|
||||
x = document.getElementsByClassName("word");
|
||||
if (c == "all") c = "";
|
||||
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
|
||||
for (i = 0; i < x.length; i++) {
|
||||
w3RemoveClass(x[i], "show");
|
||||
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
|
||||
}
|
||||
}
|
||||
|
||||
// Show filtered elements
|
||||
function w3AddClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
if (arr1.indexOf(arr2[i]) == -1) {
|
||||
element.className += " " + arr2[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide elements that are not selected
|
||||
function w3RemoveClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
while (arr1.indexOf(arr2[i]) > -1) {
|
||||
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
||||
}
|
||||
}
|
||||
element.className = arr1.join(" ");
|
||||
}
|
||||
|
||||
// Add active class to the current control button (highlight it)
|
||||
var btnContainer = document.getElementById("legend");
|
||||
var btns = btnContainer.getElementsByClassName("btn");
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].addEventListener("click", function() {
|
||||
var current = document.getElementsByClassName("active");
|
||||
current[0].className = current[0].className.replace(" active", "");
|
||||
this.className += " active";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/////////////. ADD SNIPPETS TO A DIV ../////////
|
||||
|
||||
var snippet = document.getElementsByTagName("strong");
|
||||
var sptContainer = document.getElementById("sptContainer");
|
||||
|
||||
for (var i = 0; i < snippet.length; i++) {
|
||||
sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
|
||||
}
|
||||
|
||||
|
||||
//////////// Randomise Font ////////////////
|
||||
|
||||
// JavaScript code to pick
|
||||
// a random color from array
|
||||
function pickColor() {
|
||||
|
||||
// Array containing colors
|
||||
var colors = [
|
||||
'#ff0000', '#00ff00', '#0000ff',
|
||||
'#ff3333', '#ffff00', '#ff6600'
|
||||
];
|
||||
|
||||
// selecting random color
|
||||
var random_color = colors[Math.floor(
|
||||
Math.random() * colors.length)];
|
||||
|
||||
var x = document.getElementById('pick');
|
||||
x.style.color = random_color;
|
||||
}
|
||||
|
||||
|
||||
//////////Search Bar ////////////////////
|
||||
|
||||
|
||||
function search_word() {
|
||||
let input = document.getElementById('search').value;
|
||||
input=input.toLowerCase();
|
||||
let x = document.getElementsByClassName('word');
|
||||
|
||||
for (i = 0; i < x.length; i++) {
|
||||
if (!x[i].innerHTML.toLowerCase().includes(input)) {
|
||||
x[i].style.display="none";
|
||||
}
|
||||
else {
|
||||
x[i].style.display="show";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>glossary</title>
|
||||
<style type="text/css">
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p>Electronic publishing Traditional book Art-oriented publisher Design-oriented publishing Hybrid publishing Printed publishing Word Processors (Microsoft Word) Desktop publishing suites (DTP)(Adobe Indesign) Do-it-yourself (DIY) EPUB3: Electronic publication format Markdown: Word processing format Small-edition Low cost Ease to use Sustainability Platform independence Open Source Layout E-reader hardware E-reader software WYSIWYG (what you see is what you get) Logical-semantic markup HTML(hypertext Markup Language) Electronic text Paged-centered Reflowable layout Optical character recognition(OCR) Hyperlinks Bitstreams One-to-one: single book published in different media One-to-many: single book that has different appearances in different media One-to-database: book based on the content of the data base which can be used in a number of ways Table con tontines Footnotes Endnotes cross.references citations bibliography Real-time data</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,87 @@
|
||||
body {
|
||||
font-size: 2vw;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
li {
|
||||
/* border: solid 0.3pt; */
|
||||
list-style-type: none;
|
||||
padding: 0%;
|
||||
width: 20%;
|
||||
margin-top: -0.5pt;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.head{
|
||||
margin: 0.4vw;
|
||||
margin-left: 0.5vw;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.words {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-width: 400px;
|
||||
-moz-column-width: 400px;
|
||||
column-width: 400px;
|
||||
margin: 0.5vw;
|
||||
margin-left: 0.7vw;
|
||||
margin-right: 0.7vw;
|
||||
}
|
||||
|
||||
.word_title {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 2vw;
|
||||
font-weight:normal;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
padding: 0%;
|
||||
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 2vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
text-decoration: underline;
|
||||
text-decoration-color:gold;
|
||||
}
|
||||
|
||||
p {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 2vw;
|
||||
font-weight:normal;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
padding: 0%;
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
height: 1.5vw;
|
||||
weight: 100%;
|
||||
margin-bottom: 1pt;
|
||||
margin-left: 2pt;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
#trans_input {
|
||||
border: none;
|
||||
padding-left: 15pt;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b{
|
||||
color: gold;
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
body {
|
||||
font-size: 2vw;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
li {
|
||||
/* border: solid 0.3pt; */
|
||||
list-style-type: none;
|
||||
padding: 0%;
|
||||
width: 20%;
|
||||
margin-top: -0.5pt;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.head{
|
||||
margin: 0.4vw;
|
||||
margin-left: 0.5vw;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.words {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-width: 400px;
|
||||
-moz-column-width: 400px;
|
||||
column-width: 400px;
|
||||
margin: 0.5vw;
|
||||
margin-left: 0.7vw;
|
||||
margin-right: 0.7vw;
|
||||
}
|
||||
|
||||
.word_title {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 2vw;
|
||||
font-weight:normal;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
padding: 0%;
|
||||
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 2vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
text-decoration: underline;
|
||||
text-decoration-color:gold;
|
||||
}
|
||||
|
||||
p {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 2vw;
|
||||
font-weight:normal;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
padding: 0%;
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
height: 1.5vw;
|
||||
weight: 100%;
|
||||
margin-bottom: 1pt;
|
||||
margin-left: 2pt;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
#trans_input {
|
||||
border: none;
|
||||
padding-left: 15pt;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b{
|
||||
color: gold;
|
||||
}
|
||||
@ -0,0 +1,419 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
@ -0,0 +1,234 @@
|
||||
:root {
|
||||
--blue: #1e90ff;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fluxisch;
|
||||
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: symbols1;
|
||||
src: url(fonts/symbols.woff) format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mono;
|
||||
src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16pt;
|
||||
font-family: mono;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: black;
|
||||
height: 0.1pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 2pt;
|
||||
margin-bottom: 2pt;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18pt;
|
||||
font-family: mono;
|
||||
color:blue;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.head{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
|
||||
}
|
||||
|
||||
.head a{
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
}
|
||||
|
||||
.description p{
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
#sptContainer {
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
|
||||
.question input{
|
||||
width:500px;
|
||||
font-size: 14pt;
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 14pt;
|
||||
color:white;
|
||||
background-color:black;
|
||||
border-radius: 8pt;
|
||||
}
|
||||
|
||||
|
||||
.legend{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background: white;
|
||||
font-size: 20pt;
|
||||
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);
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 2pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 1pt;
|
||||
margin-bottom: 1pt;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.snippet {
|
||||
background:white;
|
||||
font-family: serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.diffraction{
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
object-fit: contain;
|
||||
margin-left: 15pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 11.8%;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: none;
|
||||
margin-top: 7pt;
|
||||
margin-bottom: 7pt;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.word p{
|
||||
order:2;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 20pt;
|
||||
font-weight:bold;
|
||||
font-family: Fluxisch;
|
||||
padding: 0%;
|
||||
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 2vw;
|
||||
margin-right: 0.5vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
text-decoration: underline 1pt;
|
||||
text-decoration-color:black;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
order:1;
|
||||
color:black;
|
||||
margin-top: -5pt;
|
||||
font-family: symbols1;
|
||||
font-size: 20pt;
|
||||
cursor: pointer;
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,419 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
|
||||
ITEM { font-family: monospace; color:green }
|
||||
@ -0,0 +1,102 @@
|
||||
///////// filters with buttons ///////////
|
||||
|
||||
filterSelection("all")
|
||||
function filterSelection(c) {
|
||||
var x, i;
|
||||
x = document.getElementsByClassName("word");
|
||||
if (c == "all") c = "";
|
||||
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
|
||||
for (i = 0; i < x.length; i++) {
|
||||
w3RemoveClass(x[i], "show");
|
||||
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
|
||||
}
|
||||
}
|
||||
|
||||
// Show filtered elements
|
||||
function w3AddClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
if (arr1.indexOf(arr2[i]) == -1) {
|
||||
element.className += " " + arr2[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide elements that are not selected
|
||||
function w3RemoveClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
while (arr1.indexOf(arr2[i]) > -1) {
|
||||
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
||||
}
|
||||
}
|
||||
element.className = arr1.join(" ");
|
||||
}
|
||||
|
||||
// Add active class to the current control button (highlight it)
|
||||
var btnContainer = document.getElementById("legend");
|
||||
var btns = btnContainer.getElementsByClassName("btn");
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].addEventListener("click", function() {
|
||||
var current = document.getElementsByClassName("active");
|
||||
current[0].className = current[0].className.replace(" active", "");
|
||||
this.className += " active";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/////////////. ADD SNIPPETS TO A DIV ../////////
|
||||
|
||||
var snippet = document.getElementsByTagName("strong");
|
||||
var sptContainer = document.getElementById("sptContainer");
|
||||
|
||||
for (var i = 0; i < snippet.length; i++) {
|
||||
sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
|
||||
}
|
||||
|
||||
|
||||
//////////// Randomise Font ////////////////
|
||||
|
||||
// JavaScript code to pick
|
||||
// a random color from array
|
||||
function pickColor() {
|
||||
|
||||
// Array containing colors
|
||||
var colors = [
|
||||
'#ff0000', '#00ff00', '#0000ff',
|
||||
'#ff3333', '#ffff00', '#ff6600'
|
||||
];
|
||||
|
||||
// selecting random color
|
||||
var random_color = colors[Math.floor(
|
||||
Math.random() * colors.length)];
|
||||
|
||||
var x = document.getElementById('pick');
|
||||
x.style.color = random_color;
|
||||
}
|
||||
|
||||
|
||||
//////////Search Bar ////////////////////
|
||||
|
||||
|
||||
function search_word() {
|
||||
let input = document.getElementById('search').value;
|
||||
input=input.toLowerCase();
|
||||
let x = document.getElementsByClassName('word');
|
||||
|
||||
for (i = 0; i < x.length; i++) {
|
||||
if (!x[i].innerHTML.toLowerCase().includes(input)) {
|
||||
x[i].style.display="none";
|
||||
}
|
||||
else {
|
||||
x[i].style.display="show";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,234 @@
|
||||
:root {
|
||||
--blue: #1e90ff;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fluxisch;
|
||||
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: symbols1;
|
||||
src: url(fonts/symbols.woff) format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mono;
|
||||
src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16pt;
|
||||
font-family: mono;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: black;
|
||||
height: 0.1pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 2pt;
|
||||
margin-bottom: 2pt;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18pt;
|
||||
font-family: mono;
|
||||
color:blue;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.head{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
|
||||
}
|
||||
|
||||
.head a{
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
}
|
||||
|
||||
.description p{
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
#sptContainer {
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
|
||||
.question input{
|
||||
width:500px;
|
||||
font-size: 14pt;
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 14pt;
|
||||
color:white;
|
||||
background-color:black;
|
||||
border-radius: 8pt;
|
||||
}
|
||||
|
||||
|
||||
.legend{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background: white;
|
||||
font-size: 20pt;
|
||||
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);
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 2pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 1pt;
|
||||
margin-bottom: 1pt;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.snippet {
|
||||
background:white;
|
||||
font-family: serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.diffraction{
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
object-fit: contain;
|
||||
margin-left: 15pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 11.8%;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: none;
|
||||
margin-top: 7pt;
|
||||
margin-bottom: 7pt;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.word p{
|
||||
order:2;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 20pt;
|
||||
font-weight:bold;
|
||||
font-family: Fluxisch;
|
||||
padding: 0%;
|
||||
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 2vw;
|
||||
margin-right: 0.5vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
text-decoration: underline 1pt;
|
||||
text-decoration-color:black;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
order:1;
|
||||
color:black;
|
||||
margin-top: -5pt;
|
||||
font-family: symbols1;
|
||||
font-size: 20pt;
|
||||
cursor: pointer;
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,419 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,102 @@
|
||||
///////// filters with buttons ///////////
|
||||
|
||||
filterSelection("all")
|
||||
function filterSelection(c) {
|
||||
var x, i;
|
||||
x = document.getElementsByClassName("word");
|
||||
if (c == "all") c = "";
|
||||
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
|
||||
for (i = 0; i < x.length; i++) {
|
||||
w3RemoveClass(x[i], "show");
|
||||
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
|
||||
}
|
||||
}
|
||||
|
||||
// Show filtered elements
|
||||
function w3AddClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
if (arr1.indexOf(arr2[i]) == -1) {
|
||||
element.className += " " + arr2[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide elements that are not selected
|
||||
function w3RemoveClass(element, name) {
|
||||
var i, arr1, arr2;
|
||||
arr1 = element.className.split(" ");
|
||||
arr2 = name.split(" ");
|
||||
for (i = 0; i < arr2.length; i++) {
|
||||
while (arr1.indexOf(arr2[i]) > -1) {
|
||||
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
||||
}
|
||||
}
|
||||
element.className = arr1.join(" ");
|
||||
}
|
||||
|
||||
// Add active class to the current control button (highlight it)
|
||||
var btnContainer = document.getElementById("legend");
|
||||
var btns = btnContainer.getElementsByClassName("btn");
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].addEventListener("click", function() {
|
||||
var current = document.getElementsByClassName("active");
|
||||
current[0].className = current[0].className.replace(" active", "");
|
||||
this.className += " active";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/////////////. ADD SNIPPETS TO A DIV ../////////
|
||||
|
||||
var snippet = document.getElementsByTagName("strong");
|
||||
var sptContainer = document.getElementById("sptContainer");
|
||||
|
||||
for (var i = 0; i < snippet.length; i++) {
|
||||
sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
|
||||
}
|
||||
|
||||
|
||||
//////////// Randomise Font ////////////////
|
||||
|
||||
// JavaScript code to pick
|
||||
// a random color from array
|
||||
function pickColor() {
|
||||
|
||||
// Array containing colors
|
||||
var colors = [
|
||||
'#ff0000', '#00ff00', '#0000ff',
|
||||
'#ff3333', '#ffff00', '#ff6600'
|
||||
];
|
||||
|
||||
// selecting random color
|
||||
var random_color = colors[Math.floor(
|
||||
Math.random() * colors.length)];
|
||||
|
||||
var x = document.getElementById('pick');
|
||||
x.style.color = random_color;
|
||||
}
|
||||
|
||||
|
||||
//////////Search Bar ////////////////////
|
||||
|
||||
|
||||
function search_word() {
|
||||
let input = document.getElementById('search').value;
|
||||
input=input.toLowerCase();
|
||||
let x = document.getElementsByClassName('word');
|
||||
|
||||
for (i = 0; i < x.length; i++) {
|
||||
if (!x[i].innerHTML.toLowerCase().includes(input)) {
|
||||
x[i].style.display="none";
|
||||
}
|
||||
else {
|
||||
x[i].style.display="show";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,234 @@
|
||||
:root {
|
||||
--blue: #1e90ff;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fluxisch;
|
||||
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: symbols1;
|
||||
src: url(fonts/symbols.woff) format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mono;
|
||||
src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16pt;
|
||||
font-family: mono;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: black;
|
||||
height: 0.1pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20pt;
|
||||
font-family: Fluxisch;
|
||||
font-style: bold;
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 2pt;
|
||||
margin-bottom: 2pt;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18pt;
|
||||
font-family: mono;
|
||||
color:blue;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.head{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
|
||||
}
|
||||
|
||||
.head a{
|
||||
margin-top: 10pt;
|
||||
margin-bottom:10pt;
|
||||
}
|
||||
|
||||
.description p{
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
#sptContainer {
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
|
||||
|
||||
.question input{
|
||||
width:500px;
|
||||
font-size: 14pt;
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 14pt;
|
||||
color:white;
|
||||
background-color:black;
|
||||
border-radius: 8pt;
|
||||
}
|
||||
|
||||
|
||||
.legend{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
margin-top: 10pt;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background: white;
|
||||
font-size: 20pt;
|
||||
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);
|
||||
padding-top: 3pt;
|
||||
padding-right: 8pt;
|
||||
padding-left: 8pt;
|
||||
padding-bottom: 3pt;
|
||||
margin-left: 2pt;
|
||||
margin-right: 2pt;
|
||||
margin-top: 1pt;
|
||||
margin-bottom: 1pt;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.btn.snippet {
|
||||
background:white;
|
||||
font-family: serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.diffraction{
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
object-fit: contain;
|
||||
margin-left: 15pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 11.8%;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 10pt;
|
||||
margin-left: 15pt;
|
||||
margin-right: 15pt;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: none;
|
||||
margin-top: 7pt;
|
||||
margin-bottom: 7pt;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.word p{
|
||||
order:2;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* border: solid 0.3pt; */
|
||||
font-size: 20pt;
|
||||
font-weight:bold;
|
||||
font-family: Fluxisch;
|
||||
padding: 0%;
|
||||
|
||||
/* width: 20%; */
|
||||
margin-top: -0.5pt;
|
||||
margin-left: 2vw;
|
||||
margin-right: 0.5vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
text-decoration: underline 1pt;
|
||||
text-decoration-color:black;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
order:1;
|
||||
color:black;
|
||||
margin-top: -5pt;
|
||||
font-family: symbols1;
|
||||
font-size: 20pt;
|
||||
cursor: pointer;
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue