A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.
Go to file
2021-03-22 18:24:40 -04:00
.github chore: use conventional commit for CI 2021-01-06 18:51:13 -05:00
bin Force phpcbf to exit with 0 2019-12-30 19:04:02 -05:00
i18n feat: add site stats to drawer 2021-03-22 17:01:08 -04:00
includes ci: lint code to MediaWiki standards 2021-03-22 21:01:56 +00:00
licenses Remove Titillium Web font 2020-08-12 12:59:56 -04:00
resources feat: emphasize wiki wordmark color 2021-03-22 17:07:17 -04:00
screenshots doc: update screenshot 2021-03-05 14:36:40 -05:00
skinStyles feat: add more padding to CookieWarning button 2021-03-22 18:24:40 -04:00
.eslintignore test: ignore inline es6 script from eslint 2021-01-11 13:40:06 -05:00
.eslintrc.json chore: update linter config 2021-01-06 19:28:39 -05:00
.gitignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.phpcs.xml chore: update linter config 2021-01-06 19:28:39 -05:00
.stylelintignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.stylelintrc.json test: turn off font-weight-notation rule because of the use of VF 2021-01-13 13:53:22 -05:00
.svgo.yml Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
citizen.php Make a dinner reservation - MediaWiki CI 2020-06-17 02:56:40 +00:00
CODE_OF_CONDUCT.md Add documentation to the skin 2019-12-21 00:56:15 -05:00
composer.json chore: bump dev dependencies 2021-03-12 20:41:21 -05:00
jsdoc.json Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
LICENSE licensing update 2019-08-16 21:48:16 -04:00
package-lock.json test: add stylelint order to CI 2021-01-11 11:44:29 -05:00
package.json test: add stylelint order to CI 2021-01-11 11:44:29 -05:00
README.md doc: add the site stat config 2021-03-22 17:05:52 -04:00
skin.json build: bump to 1.5.0 2021-03-22 17:08:07 -04:00

Citizen

Citizen is a responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin should be able to run on any Mediawiki installation that is 1.35 or higher. Due to resource constraints, we might not be able to provide full support for setups that are vastly different than us, but please feel free to submit patches or bug report!

Live demo can be seen at the Star Citizen Wiki, more avaliable here.

Notable features

  • Fully responsive skin: Responsive and able to adapt to different screen sizes. 📱💻🖥️
  • Collapsible sections: Collapse and expand article sections Require JS. 📖📕
  • Persistent ToC: Access ToC anywhere in the article. Tracking require JS. 🔍📖
  • Rich search suggestions: More helpful search suggestions with images and descriptions. Require JS. 🔍👀
  • Lazyload images: Improve load time of your wiki and avoid unnecessary image downloads. Require JS. 🚀
  • Light/dark mode support: Switch between light and dark mode. ☀️🌙
  • Webapp manifest: Give a more app-like experience when user add your wiki to their home screen. 📱
  • HTTP security response headers: Enhance the security of your wiki from HTTP response headers. 🔒🔑

Installation

  1. Download place the file(s) in a directory called Citizen in your skins/ folder.
  2. Add the following code at the bottom of your LocalSettings.php:
wfLoadSkin( 'Citizen' );
  1. ✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configurations

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin.

Note that:

  • By default, all security-related features are turned off to ensure maximum compatibility.
  • If you have a lot of users that do not use javascript, it is recommended to turn off lazyloading of images as it requires javascript to display images properly.

Appearance

Name Description Values Default
$wgCitizenThemeDefault The default theme of the skin auto - switch between light and dark according to OS/browser settings; light; dark auto
$wgCitizenEnableCollapsibleSections Enables or disable collapsible sections on content pages true - enable; false - disable true
$wgCitizenShowPageTools The condition of page tools visibility true - always visible; login - visible to logged-in users; permission - visible to users with the right permissions true
$wgCitizenEnableDrawerSiteStats Enables the site statistics in drawer menu true - enable; false - disable true
$wgCitizenEnableDrawerSubSearch Enables the drawer search box for menu entries true - enable; false - disable false
$wgCitizenPortalAttach Label of the portal to attach links to upload and special pages to string first
$wgCitizenThemeColor The color defined in the theme-color meta tag Hex color code #131a21

Search suggestions

Name Description Values Default
$wgCitizenEnableSearch Enable or disable rich search suggestions true - enable; false - disable true
$wgCitizenSearchUseREST Enable or disable the use of REST API search endpoint true - enable; false - disable false
$wgCitizenSearchDescriptionSource Source of description text on search suggestions (only takes effect if $wgCitizenUseREST is false) wikidata - Use description provided by WikibaseLib or ShortDescription; textextracts - Use description provided by TextExtracts; pagedescription - Use description provided by Description2 or any other extension that sets the description page property textextracts
$wgCitizenMaxSearchResults Max number of search suggestions Integer > 0 6

Image lazyload

Name Description Values Default
$wgCitizenEnableLazyload Enable or disable image lazyloading true - enable; false - disable false

Content Security Policy (CSP)

Name Description Values Default
$wgCitizenEnableCSP Enable or disable Content Security Policy, as an alternative to $wgCSPHeader in Mediawiki 1.32+ true - enable; false - disable false
$wgCitizenEnableCSPReportMode Enable or disable CSP report only mode, overrides $wgCitizenEnableCSP true - enable; false - disable false
$wgCitizenCSPDirective The string of yourr CSP directive See the Content Security Policy page

HTTP Strict Transport Security (HSTS)

Name Description Values Default
$wgCitizenEnableHSTS Enable or disable HTTP Strict Transport Security true - enable; false - disable false
$wgCitizenHSTSMaxAge Time in second that the browser should remember that a site is only to be accessed using HTTPS Integer > 0 300
$wgCitizenHSTSIncludeSubdomains Apply HSTS to all of the site's subdomains true - enable; false - disable false
$wgCitizenHSTSPreload Enable or disable HSTS preload true - enable; false - disable false

Other security headers

Name Description Values Default
$wgCitizenEnableDenyXFrameOptions Enable or disable the deny X-Frame-Options header true - enable; false - disable false
$wgCitizenEnableXXSSProtection Enable or disable the X-XSS-Protection header true - enable; false - disable false
$wgCitizenEnableStrictReferrerPolicy Enable or disable strict-origin-when-cross-origin referrer policy header, should be used in conjunction with $wgReferrerPolicy as that only outputs the meta tags true - enable; false - disable false
$wgCitizenEnableFeaturePolicy Enable or disable Feature Policy true - enable; false - disable false
$wgCitizenFeaturePolicyDirective The string of your Feature Policy directive See the Feature Policy page

Webapp manifest

Name Description Values Default
$wgCitizenEnableManifest Enable or disable web app manifest true - enable; false - disable true
$wgCitizenManifestThemeColor Theme color of the web app manifest Hex color code #131a21
$wgCitizenManifestBackgroundColor Background color of the web app manifest Hex color code #131a21

Miscellaneous

Name Description Values Default
$wgCitizenEnablePreconnect Enable or disable preconnect to required origin true - enable; false - disable false
$wgCitizenPreconnectURL The URL for preconnect to required origin URL
$wgCitizenThemeColor The color defined in the theme-color meta tag Hex color code #11151d

Requirements

  • MediaWiki 1.35 or later
  • For the legacy versions, check the other release branches.