diff --git a/contents.js b/contents.js
new file mode 100644
index 0000000..e2bf950
--- /dev/null
+++ b/contents.js
@@ -0,0 +1,115 @@
+let endpoint =
+ "https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*§ion=1&page=Padliography&prop=text";
+
+const container = document.getElementById("wiki-contents");
+const filtersContainer = document.getElementById("filters-container");
+
+// We use a set and not an array in order to avoid repetition
+let filters = new Set();
+
+// Request the content to the Wiki API and parse it as a JSON file
+fetch(endpoint)
+ .then((response) => response.json())
+ .then((data) => {
+ // Create a new element to insert the response from the wiki and get the table out of it
+ let section = document.createElement("div");
+ section.innerHTML = data.parse.text["*"];
+ let wikiTable = section.getElementsByTagName("table")[0];
+
+ // Create a new table using the data in the Wiki table
+ createTable(wikiTable);
+
+ // Fill the filter section with all the tags gathered in the filters Set
+ // We don't need any argument because the filters set is defined as global
+ createFilters();
+ });
+
+function createTable(data) {
+ let table = document.createElement("table");
+
+ // Traverse the rows collection as an array
+ [...data.rows].forEach((row, index) => {
+ // Avoid first row that contains column titles
+ if (index > 0) {
+ // Create a row element
+ let tableRow = document.createElement("tr");
+
+ // Columns order could be modified simply by reordering the next 4 sections
+
+ // Create a cell with title + link to the pad
+ let title = document.createElement("td");
+ title.appendChild(createTitleLink(row));
+ tableRow.appendChild(title);
+
+ // Create a cell with the overview
+ let overview = document.createElement("td");
+ overview.innerHTML = row.cells[2].innerText;
+ tableRow.appendChild(overview);
+
+ // Create a cell with categories
+ let categories = document.createElement("td");
+ categories.appendChild(createTags(row.cells[3].innerText));
+ tableRow.appendChild(categories);
+
+ // Create a cell with date
+ let date = document.createElement("td");
+ date.innerHTML = row.cells[4].innerText;
+ tableRow.appendChild(date);
+
+ // Insert the row in the table
+ table.appendChild(tableRow);
+ }
+ });
+ // Insert the table in the container
+ container.appendChild(table);
+}
+
+function createTitleLink(row) {
+ // Take the first cell of the wiki (link)
+ let url = row.cells[0].innerText;
+ // Take the second cell of the wiki (title)
+ let title = row.cells[1].innerText;
+
+ // Create a link element
+ let link = document.createElement("a");
+ link.setAttribute("target", "_blank");
+ // Use the link as href
+ link.href = url;
+ // Use the title as text
+ link.innerHTML = title;
+
+ return link;
+}
+
+function createTags(categories) {
+ // Split the comma separated list into an array
+ let tags = categories.split(",").map((category) => category.trim());
+
+ // Create a list to contain all the tags
+ let tagsContainer = document.createElement("ul");
+
+ // For each category create a li element
+ tags.forEach((item) => {
+ let tag = createTag(item);
+ tagsContainer.appendChild(tag);
+
+ // add the category to the filters Set to use it later
+ filters.add(item);
+ });
+
+ return tagsContainer;
+}
+
+function createTag(item) {
+ let tag = document.createElement("li");
+ tag.classList.add("tag");
+ tag.innerHTML = item;
+ return tag;
+}
+
+function createFilters() {
+ filters.forEach((item) => {
+ let tag = createTag(item);
+ filtersContainer.appendChild(tag);
+ });
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0dbe4ca
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ 🏓 PADliography
+
+
+
+
+