Mediawiki-customization

MediaWiki customizations are changes to the default install of MediaWiki that the IndieWeb community has made for various reasons to better serve how the community uses the wiki.

extensions

IndieWeb extensions

https://github.com/indieweb/mediawiki-extensions

• AllowAnchorTags - allows inserting <a> anchor tags into wikitext
• notitle - adds __NOTITLE__ tag to stop MediaWiki from adding its own page title
• raw - lets you embed raw HTML into wiki pages using raw
• RelWebmention - add webmention endpoint to wiki pages
• LassoAuth - enables web sign-in/IndieAuth via vouch-proxy
  • See Setting up MediaWiki with IndieAuth for details
• Calendar - adds <calendar> tag for creation of a single month calendar

dfn

https://github.com/aaronpk/mediawiki-mf2-dfn

Adds a p-summary tag around the first sentence of a page that contains a <dfn> tag

To actually enable the page to be an h-entry, you'll need to edit the theme to add the h-entry class.

In Vector 2022 and Vector 2010, the new version that uses mustache templates, do the following:

• Edit skin.mustache and skin-legacy.mustache
• Find the class="mw-body" line and add h-entry class
• Add below that line
• Wrap {{{html-title-heading}}} as: {{{html-title-heading}}}

CategoryTree

• https://www.mediawiki.org/wiki/Extension:CategoryTree

mf2 parser

The wiki requires a Microformats parser to be able to do a few things. Copy the php-mf2 repository to the extensions folder.

OpenGraphMeta

• https://m.mediawiki.org/wiki/Extension:OpenGraphMeta
• https://m.mediawiki.org/wiki/Extension:Description2

enable extensions

wfLoadExtension('Cite');
wfLoadExtension('ParserFunctions');
wfLoadExtension('Auth_remoteuser');
wfLoadExtension('CategoryTree');

wfLoadExtension('OpenGraphMeta');
wfLoadExtension('Description2');
$wgEnableMetaDescriptionFunctions = true;

require_once('extensions/php-mf2/Mf2/Parser.php');
require_once('extensions/dfn/dfn.php');

require_once('extensions/IndieWeb/raw.php');
require_once('extensions/IndieWeb/notitle.php');
require_once('extensions/IndieWeb/AllowAnchorTags.php');
require_once('extensions/IndieWeb/RelWebmention.php');
require_once('extensions/IndieWeb/Calendar.php');
require_once('extensions/IndieWeb/LassoAuth.php');

extension config

LassoAuth::$auth = 'https://sso.indieweb.org/';
LassoAuth::$wiki = 'https://indieweb.org/';

$wgPingbackEndpoint = 'https://webmention.io/indiewebcamp/xmlrpc';
$wgWebmentionEndpoint = 'https://webmention.io/indiewebcamp/webmention';

editable customizations

See these for custom CSS used on this wiki:

• MediaWiki:Common.css
• MediaWiki:Vector.css

CSS customization documentation

This section contains code documentation for some of our custom CSS. Feel free to add to these docs to help troubleshoot any custom styling behaviors.

image fitting

Note that there is an explicit rule with max-width:100% in the Common.css like this:

.mw-file-description img { max-width:100%; height:auto }

so that wiki images embedded with minimal [[Image:...]] or [[File:...]] wiki markup are automatically constrained to fit within the width of their containing element, typically the width of the content area of a wiki page.

If this functionality is broken (e.g. after a MediaWiki update or Theme update), then View Source on a page with such minimal image embeds such as New York Times to see what class names are in use on the parent element of those images, and update the custom style rule in Common.css accordingly.

configuration

Add these to LocalSettings.php

enable nice urls

The wiki is installed in the wiki folder on the server, but we want the URLs to be indieweb.org/example.

$wgScriptPath = '/wiki';
$wgScriptExtension  = ".php";
$wgArticlePath = '/$1';
$wgUsePathInfo = true;
$wgCapitalLinks = false;

user permissions

$wgGroupPermissions['*']['read'] = true;
$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['*']['createaccount'] = false;
$wgGroupPermissions['*']['autocreateaccount'] = true;
$wgGroupPermissions['user']['move'] = true;
$wgGroupPermissions['user']['movefile'] = true;
$wgGroupPermissions['user']['delete'] = true;
$wgGroupPermissions['user']['undelete'] = true;
$wgGroupPermissions['user']['browsearchive'] = true;
$wgGroupPermissions['user']['rollback'] = true;
$wgDefaultUserOptions ['editsection'] = true;
$wgAllowUserSkin = true;
$wgAllowUserCss = true;
$wgAllowUserJs = true;

copyright

$wgEnableCreativeCommonsRdf = true;
$wgRightsPage = "IndieWebCamp:Copyrights"; # Set to the title of a wiki page that describes your license/copyright
$wgRightsUrl = "http://creativecommons.org/publicdomain/zero/1.0/";
$wgRightsText = "a CC0 public domain dedication";
$wgRightsIcon = "https://i.creativecommons.org/p/zero/1.0/88x31.png";
$wgEnableCreativeCommonsRdf = true;

allow more file uploads

$wgFileExtensions[] = 'pdf';
$wgFileExtensions[] = 'txt';
$wgFileExtensions[] = 'svg';
$wgFileExtensions[] = 'ai';

others

$wgEnableUploads = true;
$wgAllowImageTag = true;
$wgNoFollowLinks = false;
$wgAllowExternalImages = true;
$wgCookieExpiration = 180 * 86400;
$wgSecureLogin = true;
$wgCookieSecure = true;

set up https://www.mediawiki.org/wiki/Manual:$wgRCFeeds to the secret lair of Loqi

skin

We use the default Vector skin for the wiki, with some minor customization to add Microformats markup to pages.

In skins/Vector/VectorTemplate.php, make the changes described on https://aaronparecki.com/2018/01/14/3/

front page

MediaWiki refuses to serve the front page from / and insists on redirecting it to /Main_Page instead. It's possible to rename that page to something like /Home, but even that isn't great. We want the front page to be served at just https://indieweb.org/. To do that, there is a separate index.php file at the root of the server, which essentially proxies the MediaWiki page.

<?php
$opts = array('title' => 'Main_Page');
if(array_key_exists('useskin',$_GET))
  $opts['useskin'] = $_GET['useskin'];
$ch = curl_init('https://indieweb.org/wiki/index.php?'.http_build_query($opts));
// Pass the HTTP_COOKIE header through for auth
if(array_key_exists('HTTP_COOKIE', $_SERVER)) {
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(
		'Cookie: ' . $_SERVER['HTTP_COOKIE']
	));
}

header('Link: <https://webmention.io/indiewebcamp/webmention>; rel="webmention"');

// No-cache if the user is logged in
if(isset($_SERVER['REMOTE_USER'])) {
  header('Cache-Control: no-cache');
}

curl_exec($ch);

FAQ

Why are talk pages disabled

Talk pages are disabled as most of the talk happens in discussion chat channels. The best pieces or synopses are usually then summarized and added the wiki subsequently.

Also, having multiple places for discussion often fragments the discussion between what’s natural and what feels official.

Related XKCD: http://xkcd.com/1665

Brainstorming

Issues

https://github.com/indieweb/wiki/issues

Wiki is unusable on mobile

Our default theme (Vector) is unusable on mobile

• Vector 2022 alternative/update appears to have good mobile presentation
• Workaround: (if you are logged in)
  • Go to Special:Preferences
  • Click the Appearance tab (Special:Preferences#mw-prefsection-rendering)
  • Choose (•) Vector 2022
  • Click the Save button
  • Now when you are logged into the IndieWeb wiki on your mobile device, any IndieWeb wiki pages will be much more usable.
• Proposal: switch not-logged-in and default skin to Vector 2022, and fix regressions (perhaps fixing regressions first)
  • withdrawn by Tantek Çelik, too many regressions to just switch and try to fix while live (which may take months given past experience).
  • 2024/homepage includes proposed home redesign that will make it possible to switch
• Vector 2022 regressions, compared to Vector 2010 (should fix before changing it to be the default for logged in users, and the skin for not-logged-in readers)
  • Previous notes

    gRegor Morrill: it looks like we might have `$wgVectorDefaultSkinVersion = '1';` set in LocalSettings. I see that value in some JSON when I view source. However I don't think we can just flip the switch on vector-2022 due to the homepage.

    For MW 1.36 and 1.37 that was supposed to be set to 2. As of 1.38, which we're on now, it's just `$wgDefaultSkin = 'vector-2022';` https://www.mediawiki.org/wiki/Skin:Vector/2022#Making_Vector_2022_the_default_skin

    Preview homepage with Vector 2022: https://indieweb.org/?useskin=vector-2022

    https://chat.indieweb.org/meta/2022-11-16#t1668577560889100

    • I can't find the chat logs for this, but I noticed the version numbering for Vector 2022 is weird. Wikipedia's Special:Version shows a hash and date after the version number, currently "1.0.0 (22b26ef) 20:21, November 6, 2023". Compare our Special:Version page only shows "1.0.0", so it appears they're not updating the main version number with different releases, only commit hashes? I would recommend we update the installed Vector 2022 skin and make sure the PHP variables quoted above are correct. Fingers crossed that might fix the main issues -- then we can update the custom homepage layout as needed to work with latest Vector 2022. gRegor Morrill 11:16, 9 November 2023 (PST)
    • I noticed this weird version numbering too; the later releases of Vector are quite a bit more refined, and used by default for the English language Wikipedia. Might be worth testing with the revised Vector skin to see what issues remain. As to the homepage, is it possible to make it less customised in terms of layout and navigation? Focus on the content, rather than the design? What’s the best way to prevent the homepage from blocking the release of a more usable site overall? Paul Robert Lloyd 00:25, 21 November 2023 (GMT)

Overlapping home page header text on mobile

Wiki homepage has overlapping text in the header on mobile (similarly on both current Vector 2010 skin, and Vector 2022 skin; a fix should fix it in both)

Improve legibility

…and more closely align design with IndieWeb Events website

Paul Robert Lloyd is using the vector 2022 theme with the following customisations: https://indieweb.org/User:Paulrobertlloyd.com/vector-2022.css. This stylesheet changes:

• the default font stack to use the user’s system font family. This broadly aligns with https://events.indieweb.org, which users a longer list of fonts that approximates using system-ui.
• the heading font family and weight to again match IndieWeb Events but also moves the appearance of the site away from Wikipedia.
• the default body font size from 14px to 16px which makes content appear more legible, readable and approachable.

See Also

• wiki/
• microformats wiki:
  • microformats wiki mediawiki customization - you might find some useful customizations here too.
• https://www.mediawiki.org/wiki/Customization
• Don't use class names for customizations of MediaWiki styling or skin customizations, they will break eventually. Don't use class names that are just inline styles (e.g. Webmention: Difference between revisions fixed one), more maintenance elsewhere = less community sustainable. also either no one bothered to define .floatright or it was lost in a recent MediaWiki update, proving my point