MediaWiki Web Development Notes

From Whonix
< Dev
Jump to navigation Jump to search

MediaWiki Setup[edit]

  • We use a MediaWiki standard, stable installation, which is help up-to-date.
  • We use the MediaWiki Extension:CSS, but a fork which we wrote ourselves.
    • The extension in general has 3 options: One to write page specific CSS in the MediaWiki page itself. The second option allows to link external CSS files. The third option allows to link internal pages raw as files
    • The fork allows us to link internal pages without Sanitizer:checkCSS. To minimize risks this is limited only to given namespaces, in our case "MediaWiki:" which is secured for super admins only
  • We use the MediaWiki Extension:HeadScript to circumvent to usual code inclusion into the <head> area. This is only used where MediaWiki doesn't offer a realistic option to realize a solution otherwise
  • Layout
    • We MediaWiki's default Vector skin as a base.
    • We avoid custom MediaWiki skins as these break every now and then which then would force us to stick with MediaWiki oldstable or LTS, unable to update to MediaWiki stable. [1]
    • We create Template:Footer and a Template:Header which is manually included at the top (header) or bottom (footer) in all relevant content pages such as Documentation, Download, FAQ and so forth.
      • The header template completely replaces the navigation of the Vector skin and has its own style and JS functionality.
      • The footer template also has its own style and JS functionality.
    • The Header template injects CSS styles from internal MediaWiki:CSS files via our Extension:CSS fork.
      • Example: {{#css:Mediawiki:Header.css}}
      • So only on pages where the header is present these CSS files will apply.
      • This means that for example on Special:SpecialPages the unchanged Vector style will be shown.
      • This solution gives us the opportunity to have an appearance like a new skin while also having the fallback to a clean Vector skin.
    • For no-JS users we have a special file Nojs.css whose styles are only applied if the user has JS deactivated
  • JS Elements
    • The site is generally no-JS compatible. However for JS users we offer some JS features to make the visit more comfortable.
    • The JS enhanced elements work without JS, but with JS they have full functionality.
    • We also use the Bootstrap MediaWiki extension and use some of its components, for example .modal.
  • https://www.whonix.org/libs/Font-Awesome/
  • https://www.whonix.org/libs/Roboto/
  • Footer
    • BodyScript2 MediaWiki Extension
      • <div class="our-special-own-footer"></div>

Details[edit]

  • RandomNews in the footer shows random whonix News which are fed from Template:RandomNews
    • The Template is not directly imported into the footer widget, because widgets can take Templates as parameters.
    • The RandomNews template is included in the Template:Footer and made display:none via CSS. If Javascript is present then the RandomNews will be moved to the footer and replace the standard text which is in the RandomNews box in the footer. This happens via MediaWiki:Footer.js
  • <pre> and <div class="pre"> are two ways to show preformatted code. Both look very similar. The difference is: In pre tags mediawiki does not parse newlines, variables etc, in div.pre it does. So according to usage scenario either pre or div.pre are preferrable
  • references and footer. The footer is structually (html) positioned in the main content area. The vector skin footer is made invisible so there is not overlap. If references are auto-generated by mediawiki then they are below the footer structure and so they are overlapped, this is not desirable. Therefore it is common practice to always write the "references" keyword in the page so the references headline is generated above the footer structure
  • Tables with oversize: Tables are sometimes too long for viewing on mobile devices. This makes the whole content scrollable to the right. To prevent this editors can wrap the whole table in <div class="scroll-table"><table>...</table></div> . This makes only the table scrollable, but not the whole document.

FontAwesome[edit]

  • FontAwesome is used as a local webfont to make the site more beautiful.
  • We use our own implementation via mediawiki extension HeadScript. (See next chapter.)
  • Therefore it is available on all pages.

CSS JavaScript and Skin Documentation[edit]

CodeSprint 2021-12 to 2022-01

  • HeadScript MediaWiki Extension
    • <noscript><link rel="stylesheet" href="/w/index.php?title=MediaWiki:Nojs.css&action=raw&ctype=text/css"></noscript>
    • <link href="/libs/Font-Awesome/css/all.css" rel="stylesheet">
    • <meta name="viewport" content="width=device-width, initial-scale=1">
    • MediaWiki:Nojs.css‎‎
  • BodyScript2 MediaWiki Extension
    • <div class="our-special-own-footer"></div>

ReplaceText[edit]

Special:ReplaceText

space removal in template invocations[edit]

4[edit]

regex:

\{\{(\w+)\s(\w+)\s(\w+)\s(\w+)\}\}

replace:

{{$1_$2_$3_$4}}

(\s means "white space".)

3[edit]

\{\{(\w+)\s(\w+)\s(\w+)\}\}
{{$1_$2_$3}}

2[edit]

\{\{(\w+)\s(\w+)\}\}
{{$1_$2}}

template rename[edit]

(?i)workstation.product.name.short
(?i)\{\{project.name\}\}

Donation Banner Sitenotice[edit]

donate

Production[edit]

Testing[edit]

Mediawiki Replacement Discussion[edit]

Locations to Edit[edit]

CSS and JavaScript[edit]

strapping[edit]

No longer using mediawiki skin strapping.

sd-start[edit]

Footer Links[edit]

Check if scripts are loaded[edit]

Using a desktop browser with mobile skin these scripts get loaded (the bold one contains the mobile.js):

* https://www.whonix.org/w/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=minerva&version=obJk0fES
* https://www.whonix.org/w/load.php?debug=false&lang=en&modules=jquery.accessKeyLabel%2Cclient%7Cmediawiki.RegExp%2Cnotify%2Ctemplate%2Cutil%7Cmediawiki.page.startup%7Cmediawiki.template.hogan%7Cmobile.browser%2CmainMenu%2Cmodules%2Coo%2Cview%7Cmobile.loggingSchemas.mobileWebMainMenuClickTracking%7Coojs%7Cskins.minerva.scripts.top&skin=minerva&version=2bcd7ee968a7
* '''https://www.whonix.org/w/load.php?debug=false&lang=en&modules=jquery.cookie%2Cthrottle-debounce%7Cmediawiki.api%2Ccldr%2Ccookie%2Cexperiments%2CjqueryMsg%2Clanguage%2Cstorage%2Ctoc%2Cuser%2Cviewport%7Cmediawiki.api.user%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.ui.input%7Cmobile.ajax%2Cbetaoptin%2Ccontext%2Cdrawers%2Cissues%2CmodifiedBar%2Coverlays%2Cpagelist%2Creferences%2Csearch%2Csettings%2Csite%2Cstartup%2Ctoast%2Ctoggle%2Cuser%2Cwatchstar%7Cmobile.editor.api%7Cmobile.issues.images%7Cmobile.loggingSchemas.edit%2CmobileWebLanguageSwitcher%2CmobileWebSearch%7Cmobile.overlay.images%7Cmobile.pagelist.scripts%2Cstyles%7Cmobile.pagesummary.styles%7Cmobile.references.gateway%2Cimages%7Cmobile.toggle.images%7Cskins.minerva.editor%2Cscripts%2Ctoggling%2Cwatchstar%7Cskins.minerva.icons.images.scripts%7Cuser.defaults&skin=minerva&version=4409fb4608cb'''
* https://www.whonix.org/w/load.php?debug=false&lang=en&modules=mobile.toc%7Cmobile.toc.images%7Cskins.minerva.tablet.scripts&skin=minerva&version=6b1c9eeeb881
* https://www.whonix.org/w/load.php?debug=false&lang=en&modules=startup&only=scripts&skin=minerva&target=mobile

But using the emulated mobile device with the same skin only these get loaded:


search for

sdShowDetailed

the error only occurs when a mobile device is used and the mobile theme is active

Caching[edit]

Cookies[edit]

curl --cookie test=yes https://www.whonix.org/wiki/Tor_Controller

Fixing[edit]

Sometimes this helps.

https://www.whonix.org/wiki/Tor_Controller?action=purge

https://www.whonix.org/wiki/Tor_Controller?useformat=mobile?action=purge

Test[edit]

curl https://www.whonix.org/wiki/Tor_Controller?useformat=mobile > 1
curl --user-agent "android.mobile" https://www.whonix.org/wiki/Tor_Controller?useformat=mobile > 2
curl https://www.whonix.org/wiki/Tor_Controller?useformat=mobile > 3
curl --user-agent "android.mobile" https://www.whonix.org/wiki/Tor_Controller > 4
curl --user-agent "android.mobile" https://www.whonix.org/wiki/Tor_Controller?useformat=mobile > 5
curl https://www.whonix.org/wiki/Tor_Controller?useformat=mobile?useformat=mobile > 6
meld 1 2

mediawiki Mobile Frontend[edit]

There is no Table of Contents (TOC) when using MobileFrontend with javascript disabled.

misc notes[edit]

Links[edit]

pagespeed[edit]

No longer in use.

load.php caching[edit]

load.php debug mode[edit]

?pagespeed has no effect on css or js loads

https://github.com/jthingelstad/foreground/issues/370

  • debug=true

49 js 12 css

  • debug=false

26 js 1 css

instead of

  • load.php?[...]modulename.namespace.tool,tool2,tool3|differentmodule.tool,tool2

we have

  • load.php?[...]modulename.namespace.tool
  • load.php?[...]modulename.namespace.tool2
  • load.php?[...]modulename.namespace.tool3
  • load.php?[...]differentmodule.tool

Links[edit]

Dev/wiki#Links

Forum discussion[edit]

https://forums.whonix.org/t/short-and-detailed-buttons-in-the-wiki-html-help-wanted

Redirect[edit]

Widgets[edit]

Why wrap widgets into template? Why are wiki widgets encapsulated in wiki templates?

requirements[edit]

General[edit]

  • no external libraries hosted on third party servers
  • locally running Open Source code: yes
  • external libraries preferred from packages.debian.org bullseye
  • non-javascirpt fallbacks required for any new developments
  • Whonix vs Kicksecure website should look different
  • improve from now ~30% design to ~80% design if the remaining ~20% would take \80% of the time
  • keep Dev/CSS in mind
  • screenshot before / after major changes (will be used for public reports)
  • later added:
    • svg is nice as base format but incompatible with Tor Browser maximum security slider setting
    • keep relative link support

Image Optimizations[edit]

sudo apt update

sudo apt install mat2 optipng jpegoptim

All images:

mat2 --inplace image-file-name

caution: svg's

png's:

optipng -quiet -o7 -zm9 -zc9 -zm9 -zs3 -f5 --strip all -preserve image-file-name

jpg and jpeg's:

jpegoptim --quiet -o --strip-all image-file-name

svg's:

scour --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none -i input-file-name -o output-file-name

See Also[edit]