Wiki Website Workshop

What is this about?

We want to use the mediaWiki api to turn a wiki page into a website.

How are we going to do it?

1. basics of styling any wiki page using inline css
2. getting to know API
3. Set up and Boilerplate

Style your Wiki page

Styling the wiki with CSS is a bit quirky because we are writing a mix of Wiki Markup (also called 'Wiki text') and inline-CSS.

source editing

to style your wiki page, open it with the source editor

this is also a great way to find out how other people applied styles to their wiki pages (just be careful to not make any changes if you inspect other Users pages)

Inline CSS?

we use CSS (Cascading Style Sheets) to apply styling to a websites content (HTML).

CSS can be connected to HTML in 3 different ways:

1. Inline (styles defined directly in an html element <h1 style="color: blue;">)

2. Internal (styles defined in your html document head, <style>)

3. External (link to an external stylesheet in the head of an HTML document <link rel="stylesheet" href="style.css">)

tips and tricks:

most things that you want to style, you can just wrap in a <div></div> HTML element and then apply some styling to the element itself. This will style whatever is contained inside it.

Some elements need a little extra care, such as headlines. The above mentioned <div></div> will not work. Instead they want to be wrapped in a <span> like this:
==<span style="color:red;">Style your Wiki page</span>== You can see that I used the Wiki Markup syntax to define a header (==) and added some inline styling to the span element.

feel free to add your tricks here to the list! ...

example pages

Background with Gradient: User:Aksellr

styled Table of Content: User:Martina

Layout adjustments and colorful headers: User:FLEM/Graduationprojectproposaldraft

feel free to add your examples here to the list! ...

What is an API?

Application Programming Interface

An application programming interface (API) is a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software.

This sounds a bit dry, lets try to reverse engineer the terms to try to understand them better. We start with the one that you've probably heard of by now: Interface. It is often used to describe what is more precisely a 'Graphical User Interface (GUI)' consisting of buttons, icons, a cursor etc. Through the GUI (by clicking, drag and dropping, hovering) a User interacts with a computer. Here we can see that the Interface is a space itself, which we perceive visually, but at the same time, it also mediates between two or more entities.
Now imagine the GUI, but less graphical and instead of a User on the one side and a Computer on the other side, both entities are computers. An Api allows them to interact, especially exchange information.

client waiter dialogue

The media wiki API

The media wiki API allows you to do many different things, such as requesting specific information from a wiki page (which is what we will do today), editing a wiki page or managing wiki users.
The media wiki API is a Web API. There are other API types that focus on e.g. Databases or Operating Systems. Today we will focus on web API. Web API use Hyper Text Transfer Protocol. HTTP works with a request and response logic. In Terms of Web API this means, we send a request for information to a specified address and will receive a formatted response (usually JSON or XML) containing the information.

Request

a request is sent to a specific address:
https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&page=Wiki_Website_Workshop&format=json&origin=* each request follows a specific structure:
|________________URL ENDPOINT________________?____ACTION__|_________PAGE TITLE________|___FORMAT__|_HEADER_|
In the URL we use / to separate strings and in the query we use & to delimit parameters
|________________URL ENDPOINT________________?________________QUERY STRING PARAMETERS______________________|

There are a bunch of different query string parameters that you can set, depending on what action you wan to perform and what format you would like to receive your response in.
To get basic page info you can use action=query demonstrated here: http://pzwiki.wdka.nl/mw-mediadesign/api.php?format=json&action=query&titles=Main_Page&prop=info
To output a wiki page in plain HTML you can use action=render like it is done here: http://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Wiki_publishing&action=render . In the following example we use action=parse to get the all page contents.

Response

After sending a request using fetch(), we will receive a response. The response contains the information we requested, formatted in JSON (Javascript object notation - basically a way to format information so that it is well readable with javascript).
I find it easiest to first log the response information to the console console.log(data) (before we insert it into the website). This way I can check how it is formatted and if I receive what I expect.

Boilerplate

HTML

<h1 id="fetchtitle"></h1>
<div id="fetchcontent"></div>

JS

document.addEventListener("DOMContentLoaded", (event) => {
        
    // getting our elements from the html body as variables
    let content = document.getElementById('fetchcontent');
    let title = document.getElementById('fetchtitle');

    // variable for the wiki page name you want to fetch
    let pagename = "Wiki Website Workshop";  // fetch a user page like this "User:Kim/reading"
    // variable for the full fetch address
    let url = "https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&page=" + pagename + "&format=json&origin=*";


    // fetch request
    fetch(url)
        // fetch returns a so called 'promise', using .then() we can get the response
        // in the first .then(), we get the JSON response and check if its ok
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        // in the second .then() we can do something with the JSON data returned by the previous .then()
        .then(data => {
            console.log(data);

            // insert the fetched content in the html page
            content.innerHTML = data.parse.text['*'];
                
            // insert the wiki page title in the html
            title.innerHTML = pagename;


            // patch the pages links
            document.querySelectorAll('a[href]').forEach((link) => {
                const href = link.getAttribute('href');
                // make sure its not a jump link (we use jumplinks e.g. in the table of contents)
                if (!href.startsWith('#')) {
            
                    if (href.startsWith('/mediadesign/')) {
                        let newUrl = 'https://pzwiki.wdka.nl/' + href;
                        link.setAttribute('href', newUrl);
                    }
                }
            });


            // patch images: (recycled this function from SI 25 page)
            // with foreach we loop over all images of the page
            document.querySelectorAll('img[src]').forEach((img) => {
                //extract the images src attribute
                let imgtitle = img.getAttribute('src');
            
                // function to get the filename from the images src (its url)
                const extractFileName = (relativeUrl) => {
                    const parts = relativeUrl.split('/');
                    return parts[parts.length - 2]; // Get the last part (file name)
                };
                
                let fileName = extractFileName(imgtitle); // run 'extractFileName' function on imgtitle
                let imgTitle = `File:${fileName}`; // Format the title with "File:" prefix
            
                let getImagurl = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=query&titles=${encodeURIComponent(imgTitle)}&prop=imageinfo&iiprop=url&format=json&formatversion=2&origin=*`;
                
                // another fetch request. this time not for a wiki page but we use the image url
                fetch(getImagurl)
                    .then(function(response){
                        return response.json();
                    })
                    .then(function(response) {
                            
                        //from the fetch response we extract the information that we need in order to set the img attributes
                        img.setAttribute("src", response.query.pages[0].imageinfo[0].url);
                        img.removeAttribute("srcset");
            
                        //set href for img link wrapper
                        img.parentElement.href = response.query.pages[0].imageinfo[0].url;
                        
                    })
                    .catch(function(error){console.log(error);
                });
            });


        })
        .catch(error => {
            console.error('Error:', error);
        });

    });

Resources

HTML and CSS Basics

• HTML/CSS Memo (from a workshop Kiara and I organized last year)
• Basics of Html video introduction by Laurel Schwulst
• Basics of CSS video introduction by Laurel Schwulst
• HTML color names
• HTML Cheatsheet by MDN
• CSS intro (from a workshop last year - page is in german but browser translation should work fine : )

more about wiki API

• Wiki publishing#API
• Here you can find the full documentation of the media wiki API. I find it a bit dense and not very easy to follow, but if you have some experience using API already this is a good resource.