MediaWiki customizations
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
andskin-legacy.mustache
- Find the
class="mw-body"
line and addh-entry
class - Add
below that line
- Wrap
{{{html-title-heading}}}
as:{{{html-title-heading}}}
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:
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
- 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)
- Previous notes
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