DOCSEARCHbyAlgolia
Submit Docs

Citizen MediaWiki Skin

website·Indexed 30 days ago

https://mwcitizen.skin

A modern skin for MediaWiki featuring a keyboard-driven command palette, progressive web app (PWA) support, and a performance mode. Documentation covers installation, configuration, theming, and JavaScript hooks for extending functionality via gadgets and extensions.

Tokens
16.8K
Snippets
88
Records
123
Agent score
61%

What's inside Citizen

  1. Overview of Citizen preferences panel

    The Citizen preferences panel allows readers to personalize the skin (e.g., theme, font size, page width). It is lazy-loaded to optimize initial page load. Configuration can be extended using on-wiki JSON (managed by admins) or a JavaScript API (for gadgets and user scripts). Changes to configuration take effect the next time the panel is opened without requiring a cache purge.

  2. Overview of the Citizen MediaWiki skin

    Citizen is an open-source, responsive MediaWiki skin designed to provide a modern interface where extensions are integrated into a cohesive user experience. Originally developed for the Star Citizen Wiki, it is designed to be flexible and compatible with various MediaWiki configurations.

  3. Prevent wide elements from pushing the page sideways with overflow handling

    Citizen prevents wide elements (such as tables and code blocks) from forcing the entire page to scroll horizontally. Instead, it confines the sideways scrolling to the element itself. This is enhanced with navigation buttons for mouse/trackpad users and soft-fade scroll indicators at the edges of the content.

  4. Use the Command Palette for wiki navigation

    The command palette is a keyboard-driven launcher used to jump to pages, run actions, and search the wiki. Press / to see all available entries or start typing to search. The palette consists of two entry types: Modes, which change the search context (indicated by a specific icon and placeholder), and Commands, which execute an action immediately upon selection.

  5. Use Semantic MediaWiki structured queries in the command palette

    When Semantic MediaWiki is installed, Citizen automatically adds an Ask query mode to the command palette. Users can type /smw: to build structured queries with autocomplete support for properties, categories, and values.

  6. Understand Citizen Performance mode behavior

    Performance mode is a skin-level toggle designed to make the wiki feel fast on any device. When enabled, it performs the following actions:

    • Disables all site-wide transitions and animations (including those from custom styles).
    • Disables smooth scrolling.
    • Removes frosted-glass effects, such as the mobile header overlay.

    By default, Citizen detects WebGL support on the first page load to determine if the device is capable of full visuals. This result is cached in the browser, but users can manually override this setting in their preferences.

  7. Use ShortDescription for page titles and search results

    The ShortDescription extension displays a brief description under the page title and within command palette results. If both ShortDescription and TextExtracts are installed, ShortDescription takes priority.

  8. Manage search tags in the command palette

    Certain modes convert query parts into tags (e.g., Talk: becomes a namespace tag).

    • Select tag: Press Backspace on an empty input to highlight the last tag.
    • Edit tag: Press Backspace a second time to convert the tag back into editable text to fix typos without retyping the entire query.

  9. Migrate Command Palette registrations to the new API

    Key changes include:

    • Hook renamed from skins.citizen.commandPalette.registerCommand to citizen.commandPalette.register.
    • Callback method changed from registerCommand to register.
    • Property onCommandSelect renamed to onResultSelect.
    • The type property should now be set on individual result items rather than the command object.
    // BEFORE (Deprecated)
mw.hook( 'skins.citizen.commandPalette.registerCommand' ).add( function ( data ) {
    data.registerCommand( myCommand );
} );

// AFTER (Current)
mw.hook( 'citizen.commandPalette.register' ).add( function ( data ) {
    data.register( myCommand );
} );

  10. Prevent first-paint jank with the animations-ready class

    Citizen prevents transitions from firing during initial page load to avoid elements sliding around. The .citizen-animations-ready class is added to the <html> element once deferred startup is complete. Gate your custom transitions under this class to ensure a smooth initial render.
    .citizen-animations-ready .my-element {
  transition: opacity var( --transition-duration-medium );
}

  11. Register preferences using JavaScript

    Use the citizen.preferences.register hook to programmatically add sections and preference entries to the preferences panel. The register function accepts a configuration object containing sections and preferences. Because mw.hook replays data to late subscribers, the registration will work regardless of when the script loads. The panel is reactive and updates in place without requiring a page reload.
    mw.hook( 'citizen.preferences.register' ).add( function ( register ) {
    register( {
        sections: {
            gadgets: { label: 'Gadgets' }
        },
        preferences: {
            'gadget-enhanced-rc': {
                section: 'gadgets',
                type: 'switch',
                options: [ '0', '1' ],
                label: 'Enhanced recent changes',
                description: 'Use the enhanced recent changes interface'
            }
        }
    } );
} );