I wrote a javascript code to generate a css toggle mechanism and a python code to parse the csv file I downloaded from are.na. Are.na API allows only 100 boxes or whatever they are called to be parsed per call. So I download the entire board, use the csv file that comes with that.
Below you can see first I made an everything radio input button that shows everything and styled it to make it work. Then I copy pasted the working CSS and replaced all the 'everything's with ${element}s to make it work for all the links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table,
tr,
td {
border: 1px solid;
}
tr:hover {
background-color: yellow;
}
label:hover {
border: 2px solid black;
}
#everything {
visibility: hidden
}
#everything-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: paleturquoise;
border: 1px solid;
border-radius: 3px;
}
#everything-btn:hover {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
border: 1px solid;
border-radius: 30px;
color: red;
}
/* Show hidden content when the radio is checked */
#everything:checked~* tr {
visibility: visible;
}
/* Style the button when the radio is checked */
#everything:checked~tr {
border: 3px solid;
background-color: yellow;
color: white !important;
}
</style>
<body>
<label for="everything" checked id="everything-btn">everything</label><input checked name="buttons" type="radio"
id="everything">
<table>
<tbody>
<tr>
<td><a href="https://blog.hnf.de/" target="_blank">https://blog.hnf.de/</a></td>
<td class="tags">museum</td>
</tr>
<tr>
<td><a href="http://oric.free.fr/" target="_blank">http://oric.free.fr/</a></td>
<td class="tags">computer</td>
</tr>
<tr>
<td><a href="https://www.cryptomuseum.com/index.htm"
target="_blank">https://www.cryptomuseum.com/index.htm</a></td>
<td class="tags">cipher-machines</td>
</tr>
<tr>
<td><a href="https://www.radiomuseum.org/" target="_blank">https://www.radiomuseum.org/</a></td>
<td class="tags">radio</td>
</tr>
</tbody>
</table>
In the script part first I gather all the tags. Then I make the tag td elements append the tags as their classes. For every tag item I make a new style sheet and inject it into the body. I also made a small random color generator for all the tags because why not.
<script>
// make new and empty array
var updatedtags = []
//gather all the tags (we will add these tags in the python script)
var alltags = document.getElementsByClassName("tags")
for (let i = 0; i < alltags.length; i++) {
const element = alltags[i];
//get the tags from inside and push them into the array
let mynewtag = element.innerText
updatedtags.push(mynewtag)
}
// eliminate doubles and make new new array
let unique = new Set(updatedtags)
let allmytags = Array.from(unique)
// get every tag and make them into classes(we will use this for the css toggle)
var tags = document.querySelectorAll(".tags")
tags.forEach(element => {
let newtags = new String(element.innerText)
// i wanted to have multiple tags at first but couldnt figure out the checkboxes
// console.log(newtags.split(" "))
let onlywords = newtags.split(" ")
for (let i = 0; i < onlywords.length; i++) {
element.parentNode.setAttribute("class", onlywords[i])
}
});
allmytags.forEach(element => {
let anchor = document.getElementById("everything")
let newinput = `<label for="` + element + `" id="` + element + `-btn">` + element + `</label><input unchecked name="buttons" type="radio" id="` + element + `">`
anchor.insertAdjacentHTML('afterend', newinput)
// Create shiny stylesheet with new and random colors for each tag
var randomnumr = Math.floor(Math.random() * (255 - 1 + 1)) + 1;
var randomnumg = Math.floor(Math.random() * (255 - 1 + 1)) + 1;
var randomnumb = Math.floor(Math.random() * (255 - 1 + 1)) + 1;
var bgcolor = "rgba(" + randomnumr + "," + randomnumg + "," + randomnumb + ",0.3)"
var style = document.createElement('style');
style.innerHTML = `
#`+ element + `{visibility:hidden}
#`+ element + `-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: `+ bgcolor + `;
border: 1px solid;
border-radius: 3px;
}
#`+ element + `-btn:hover {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: `+ bgcolor + `;
border: 1px solid;
border-radius: 30px;
color:red;
}
/* Hide expandable content by default */
.`+ element + ` {
visibility: collapse;
background-color: `+ bgcolor + `;
}
/* Show hidden content when the radio is checked */
#`+ element + `:checked ~ * .` + element + `{
visibility: visible;
}
/* Style the button when the radio is checked */
#`+ element + `:checked ~ #` + element + `-btn {
background-color: yellow;
}`
// console.log(style)
document.body.append(style)
});
</script>
</body>
import csv
import subprocess
# I wanted to make a website out of it so I made a .txt file
# that had all the head, body, meta etc. part
# I open it here and i call this piece of text listtop
f = open('list-top.txt', 'r')
listtop = f.read()
# I added all the other info like my script at the end of the body
# and all the closing tags to list-bottom.txt
f = open('list-bottom.txt', 'r')
listbottom = f.read()
# first I delete the old list, you can also do this by hand
# but I know I will forget and then it is confusing why
# your script is not working etc...
subprocess.run(["rm", "-rf","middlepart.txt"])
# Open the sheet and read whatevers inside. I think I copy pasted
# this from w3cs tutorial page
with open('museum-of-thing.csv', mode='r') as csv_file:
csv_reader = csv.DictReader(csv_file)
# for every row we are doind these things
for row in csv_reader:
# put all the links inside of an html element. I wanted to make a table so tr td etc.
# Source and Description come from are.na's csv. If you want to parse different values,
# check your csv file to see whats available.
updatelinks = f'\t{row["Source"]} {row["Description"]}
As I mention in the comments, I used 2 text files a top and a bottom to make the final html file. I think it
is also useful to link those here, even though it is the same thing as the html before.python3 whateveryouwant.py