MediaWiki Web Development Notes

From Kicksecure
< 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
    • Caution: The first option of this extension for a page specific CSS seems experimental to us, because the CSS text is encoded as a base64 string and imported link so <link rel="stylesheet" href="data:text/css;charset=UTF-8;base64,I3Np...Q7Cn0=">. This is not widely supported in all browsers so this options does not seem reliable and therefore is not recommended for production use!
    • 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
    • upstream:
  • 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/

CSS JavaScript and Skin Documentation[edit]

  • 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‎‎

Details[edit]

Fly-In-Notification[edit]

  • It is a delayed notification to show a user special information after a period of time of staying on a Kicksecure page.
    • Shown for JavaScript enabled browsers: Yes.
    • Shown for NoScript users: No.
      • A dismissable Fly-In-Notification which is also functional for no-JS (NoScript) enabled browsers is too much effort to implement. It would require a MediaWiki extension / PHP.
  • The fly-in-notification is defined in Widget:FlyInNotification, MediaWiki:FlyInNotification.css and MediaWiki:FlyInNotification.js
  • The widget is at the moment wiki wide enabled using Template:Header.
    • If this changes in the future and the devs want to implement it on a page by page basis, it can be implemented by simply adding {{#widget:FlyInNotification}} to any page.
    • In the current implementation the fly-in-notification can be disabled using {{#css:Mediawiki:Hide_flyInNotification.css}} or generally (and usually) by using Template:Hide_all_banners, i.e. by using the usual wiki syntax to include a wiki template: {{hide_all_banners}}
    • It is already disabled on some pages such as Donation related pages and legal related pages.
    • Dev note: If you want to change this behaviour in the future read MediaWiki:Hide_flyInNotification.css to learn how CSS works in tandem with JavaScript to hide the notification
  • The widget is dismissable and sets a cookie named flyInBannerIdDismissed which is documented in our Cookie_Policy#Preferences.
  • The general options of currentCookieId and waitInSeconds and the content are set in the JavaScript file. The widget is currently regarded as globally conform, so there are no page specific options.
    • currentCookieId: The id which is stored in the cookie. The currentCookieId will be compared to the id in the cookie, if it matches widget will not be shown. Suggestion: increment the id in integer steps if you want to show the user the next new notification
    • waitInSeconds: The time to wait until the notification pops up (is shown to the user)
    • content: HTML content which is defined as a structured string in the JS file

Homepage (/wiki/Homepage)[edit]

  • Visitors can view it under https://www.kicksecure.com.
    • https://www.kicksecure.com is the canonical domain name.
    • Implemented using https://www.kicksecure.com/wiki/Homepage.
    • https://www.kicksecure.com/robots.txt uses Disallow: /wiki/Homepage to avoid duplicate search engine indexing.
      • https://www.kicksecure.com can of course be index normally.
    • https://www.kicksecure.com/wiki/Homepage while far from being a secret, a technical implementation detail, should not be shown to users as it would confusing.
    • Editing https://www.kicksecure.com/wiki/Homepage will result in making changes to https://www.kicksecure.com.
  • The Homepage is an improved version of the old Kicksecure ™ plain HTML/CSS based homepage
  • It is realized via Widget:Page_Homepage and Mediawiki:Page_Homepage.css
  • Structure
    • The page is wrapped in div with the class section-wrapper
    • Right below there are the sections which can be CSS references via .section-wrapper > div. They all have classes as names that start with section-, e. g. section-banner, section-download, section-press
    • Inside every section there is a div directly below the parent which has the class inner-wrapper, which wraps the inner content and helps with positioning. It is also a resource for future designers to design the content via CSS
    • Right below the section-wrapper there can also be other elements
    • h2 is the standard tag for headlines
  • There are special classes for sections which can be used give those sections a special look
    • dark-section : a dark section has a dark background. It can be combined with row-3- and row-5-sections. The dark section spans over the whole page, while the inner content is max 960px
    • row-3-section : These sections have 3 elements on wide displays, 2 on medium displays and 1 on small displays. They are used for testimonials, features or other text heavy tasks
    • row-5-section : The sections have 5 elements on wide displays, 3 on medium displays and 2 on small displays. They are used for icons and low information items
  • There is also a special class for images image-contain which is optional. By default images are in the background with background-size: cover; so the image always fills the whole area but because of the some parts might a cut. While with image-contain the image has background-size: contain; so the image will be fully visible but not cover the whole area. See example below

Creating a new section

  • copy the following structure inside of <div class="section-wrapper"></div> and exchange yourSectionName by something of your choice
<div class="section-yourSectionName">
 <div class="inner-wrapper">
 </div>
</div>
  • put all your content inside of the div with inner-wrapper
  • if you want to use one of the special classes, put them behind section-yourSectionName in the class attribute

row-3-section

  • If you used row-3-section the direct children of inner-wrapper need to look like this
<div>
 <i style="background-image:url('/w/images/thumb/path-to-your-image.bmp');" title="Your title"></i>
 <span>
  Your text and possibly links
 </span>
</div>

or

<div>
 <a class="image image-contain" href="/your-link" target="_blank" title="Your title"
    style="background-image:url('/w/images/thumb/path-to-your-image.bmp');"></a>
 <h4>Headline</h4>
 <p>
  Your text and possibly links
 </p>
</div>
  • As you can see: The image can be either realized with an i-tag or an a-tag. But if you use an a-tag it needs to have the class "image"
  • Also note there is an example here for the optional use of image-contain, see the explanation of image-contain from above
  • It is also important to note: You can use h4, p and span elements as content

row-5-section

  • If you used row-5-section the direct children of inner-wrapper need to look like this
<a href="/your-link" target="_blank" rel="noopener">
 <img src="/w/images/thumb/path-to-your-image.bmp" alt="Alt description" />
 <span>Your text</span>
</a>

NoJS-Only classes[edit]

  • We introduced two new classes to show content specifically for NoJs or JS users. These classes are
    • .show-for-nojs-only: show content only if the user has no JS activated
    • .show-for-js-only: show content only if the user has JS activated
  • This is realized via two files Mediawiki:Nojs.css and Mediawiki:SiteSpecific.css
  • Example: <div class="show-for-nojs-only">Text is only show when js is not active</div>

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 #CSS_JavaScript_and_Skin_Documentation)
  • Therefore it is available on all pages.

RandomNews[edit]

  • RandomNews in the footer shows random whonix wews 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">[edit]

<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[edit]

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, ScrollableIndicator[edit]

  • 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.
  • ScrollableIndicator: This tool is realized by Mediawiki:ScrollableIndicator.js. For mobile devices it is sometimes not clear if a table is too long to short and therefore scrollable. If ScrollableIndicator is active (JS needs to be active) then the tables gets a special class "scroll-overflow-indicator" which gives it a style so mobile users know they can scroll. Caution: This only works on div-elements with the class "scroll-table", but there automatically

Mininav: Mini navigation[edit]

Mininav: Mini navigation: Mini navigation is used to have multiple buttons in a row linking to other pages. The outer element must be a <div class="mininav"> the inner element must be a list of links. This will automatically be transformed to the navigation. Example

 <div class="mininav">
 * [[link1]]
 * [[link2]]
 * [[link3]]
 </div>
 

Donation Banner Sitenotice[edit]

  • The sitenotice is used to communicated current infos to the user. Up until now it was used for a donation banner. But in the future it will be used more versatile. Also since the Extension:DismissableSiteNotice is installed the user can dismiss a sitenotice permanently.
  • These are the elements used
  • For testing there is also Widget:Sitenotice Test.
  • Sitenotice is currently dependent on Extension:DismissableSiteNotice.
    • Sitenotice.js (called via Common.js) is used to replace the [dismiss] button from the extension with a more beautiful graphical x icon from FontAwesome. As DismissableSiteNotice uses JS there is no problem in using JS here. For NoJS users the Sitenotice is not dismissable anyways.
    • Caution: We tried to create our own dismissable notice, but stopped, because we ran into one problem: the javascript loaded via Common.js comes very late. The Javasript via Resource Loader (used in the extension) is probably much faster loaded. This means that if we hide the Sitenotice cookie based that there might be 500ms delay before we determined via user JS (loaded via Common.js) that the cookie is set. Otherwise we would need to write our own extension to be able to use PHP and to access the cookies on the server side
  • Sitenotice.css is for styling the sitenotice. There are also some general settings there
    • Note that the Sitenotice is made invisible (see MediaWiki:Vector.css) on pages with the Vector theme as those are for editors anyways.
  • If you want to show the user a new Sitenotice (or an old one AGAIN) simply increment the integer in MediaWiki:Sitenotice_id because DismissableSiteNotice writes a cookie for the user with the current ID, so for a new ID the user will see the current Sitenotice again.

Back To Top Button[edit]

  • Back to Top Button is realized via MediaWiki:BackToTopButton.css and MediaWiki:BackToTopButton.js which are imported in Common.css and Common.js and thereby available for all pages, including Vector styled pages
  • MediaWiki:BackToTopButton.js has one implicit (but not critical) dependency of FontAwesome for its symbol
    • suggestion: If FontAwesome is removed the <i class="fas fa-chevron-up"></i> can be replaced by <span>UP</span>

PayViaPaypal module[edit]

  • PayPal seems at the moment only fully usable with Javascript activated
  • Therefore we opted to make the form fully Javascript, see Mediawiki:PayViaPaypal.js and Mediawiki:PayViaPaypal.css and Mediawiki:Nojs.css
  • To integrate the form simply use <div class="pay-via-paypal-module">[nojs text]</div> and write the text or markup for nojs users in the div
    • This text will be replaced by the form via Javascript if Javascript is activated
  • You can also use "smooth" in the class attribute. This makes the form grow smoothly when it's fully loaded instead of popping into position <div class="pay-via-paypal-module smooth">[nojs text]</div>
  • The form is a fully functional PayPal form which combines subscription payment and one time payment by switching input elements (as defined in PayPal's API) according to the user's selection
  • On any page there can be multiple forms which are each independent of each other

Box and MBox[edit]

  • These are to templates which are used to create special text boxes
  • Template:Box is a container usually for text. Template:MBox uses Box and integrates an image into it
  • Box uses the design class "info box", see #Design_Classes
  • Box has the parameters: |text= and |addToClass
    • Box can also have one anonymous parameter instead of text
{{Box|text=Hello World}}
has the same result as
{{Box|Hello World}}
  • MBox has the parameters like Box plus: |image=

Anchor - manually placed anchors[edit]

  • Template:Anchor is a span element with the class "manually-placed-anchor"
  • It has 1 anonymous parameter which sets the id attribute for the span element
  • CSS: The element has no dimension and is relatively positioned above it's normal position about the amount that the Header is high. That way if the anchor is called the header does not overlap the anchored position. This is especially useful when referencing headlines
  • It is usually used to manually set anchors to make old links work with new headlines
  • Example: creates <span class="manually-placed-anchor" id="my_id"></span>

Style Classes[edit]

Special classes are generic classes that are applicable to various html elements

  • class "width-100" : an element gets the style width:100%
  • class "text-align-center" : an element gets the style text-align:center
  • class "vertical-align-middle" : an element gets the style vertical-align:middle
  • class "margin-left-5" (margin-right/top/bottom-5/10) : adds margin 5 or 10 px in any direction to an element
  • class "pos-1px-up" (pos-1px/2px/3px-up/down) : positions the element relative and moves it up or down 1, 2 or 3 pixels

Design Classes[edit]

Specific reusable design elements

class info-box[edit]

  • used for container elements to give them rounded borders, a white background and a shadow
  • it is used in the Template Box, see: #Box_and_MBox

class hide-enlarge[edit]

  • only images with class .thumb
  • A thumb image will usually have an enlarge Button to show the images in full. This is sometimes not desirable. But thumb is sometimes the only useful image option (see #Images, Files and usage of thumb).
    • Therefore thumb can be augmented with the class hide-enlarge.
    • This hides the Enlarge button (symbol) and centers the caption text if present
    • Example [[File:Swift 128.png|thumb|100px|link=|class=hide-enlarge|SWIFT]]

class use-3-columns[edit]

  • This class can be used on any element, which has display:block or something similar. The content of the element will be automatically grouped in 3 columns, separated by lines between them.
    • Note that under a certain page with the class will produce only 2 columns or 1 column to be responsive for mobile devices
  • additional class "strict-list-columns" : If the parent element with the class "use-3-columns" also gets the class "strict-list-columns" then lists ul/ol will be kept together in 1 column. This can be broken by inserting <div></div> into a list to break it cleanly into two and let those 2 lists be in different columns
  • sub class "keep-together" : This class can only be effectively used under the "use-3-columns" class. Usually the 3 columns will be automatically reorganized to occupy as little vertical space as possible. Thereby it will separate line which is sometimes not desirable. To keep lines together wrap them in a span with class "keep together". Example
<div class="use-3-columns">
<ul>
<li>List element 1</li>
<li><span class="keep-together">List element 2</span></li>
</ul>
</div>

Example 2 in a Template with "strict-list-columns"

<div class="use-3-columns strict-list-columns">
* List element 1
* List element 2
<div></div>
* List element 3
* List element 4
</ul>
</div>

Auto Copy Wiki Pages[edit]

https://github.com/adrelanos/mediawiki-shell

Auto Copy Wiki Pages Setup[edit]

1. Clone the mediawiki-shell repository.

git clone https://github.com/adrelanos/mediawiki-shell.git

2. Change directory into the mediawiki-shell folder.

cd mediawiki-shell

3. Open file credentials with a text editor of your choice.

gedit credentials

4. Paste the following text.

Notes:

  • Replace user with your actual user name.
  • Replace password with your actual password.

[[ -v USERNAME ]] || USERNAME="user" [[ -v USERPASS ]] || USERPASS="password"

5. Save.

Auto Copy Wiki Pages Usage[edit]

./login

./fetch

./edit

cd examples

./copy-wiki-pages

Knowledge and Resources[edit]

Fixed Header Overlap for anchors[edit]

  • We have a fixed header because this is a modern solution which works good for mobile and desktor alike
  • A usual problem with fixed headers however is that the overlap "jump points" / inner page links / anchor links within the page.
    • So you click a link with # and you jump within the current page to the position.
    • However the fixed header appears on top of the element (e.g. a headline) which you therefore can't see
  • We know 3 solutions to this problem
    • The first one is to position and anchor-element (usually <a> but any element with id-attribute works) enough pixels BEFORE the point where you want to jump
      • This is not possible for us, because were using Vector skin and therefore cannot decide the HTML structure
    • The second solution is to use the CSS property scroll-padding-top. This works in most modern browsers but not always reliably when you have a URL with the # jump point already in it
    • The third solution is to give the element a top padding via CSS and counter via the top margin in the other direction (e.g. padding-top: 50px; margin-top: -50px)
  • Because of the structure of mediawiki and vector skin we use solution two: scroll-padding-top and a version of solution three where we give the headline subelement .mw-headline a padding top which does not show up in the content the element is display inline, but most browser jump to the top position

CSS: Chrome anchor bug with special chars[edit]

  • For the fixed header to work we add a padding to the id-element with the class .mw-headline within the headline (h1-h6), so when jumping the header does not overlay on the headline
  • however this is not working with Chrome when there are special characters in the ID at the moment (2022-02-02) and this [bug seems to be known but ignored] by the dev team
  • to be fair, Mediawiki ultimately causes the problem itself by generating anchor IDs with special characters which is forbidden in HTML. Headline: "What is up?" - ID: #what_is_up?
    • Maybe this can be changed by an extension or by a setting in localsettings.php ?

Table of Contents[edit]

  • toc is auto-generated on top of a page or explicitely by markup in the body
  • we modified toc in its looks and appearance (expand/collapse instead of show/hide)
  • we also prevent selection of the toc numbering. This means the text in span.tocnumber will not be selected and copied. This is useful when copying parts of the toc to post somewhere
    • CAUTION: This unfortunately doesn't complete work in Chrome. If you mark a little bit more than one toc bullet point and have a space, newline or a part of the next bullet point then the tocnumber in between will be copied to clipboard by Chrome. This is undesired behaviour but tolerated

BodyScript2 - not in use[edit]

  • We created an extension based on the outdated BodyScript-extension and the still active HeadScript extension BodyScript2
  • With the variable $wgBodyScript2Code in LocalSettings.php we can insert Code at the end of <body> with the help of the hook onSkinAfterContent

menu and supermenu Mobile Imperfections[edit]

  • On mobile: Is it possible to close the menu when pressing the same menu button that opened it? Currently mobile users must click into an empty area to close it.
    • Probably unrealistic in mid term future.
    • Either all users, desktop and mobile have to click to open and to close the menu. This would be a disadvantage for users that currently only need to hover.
    • Or it's implemented by hover as it is currently. That works for mobile and desktop but then mobile users need to click outside the menu area to close it.

supermenu and edit button[edit]

  • The supermenu template Template:Header gets 2 parameters to the widget Widget:Header : $page and $revision
  • By that the edit link is constructed: /w/index.php?title=<!--{$page}-->&action=edit&oldid=<!--{$revision}-->
  • This means that even the current revision has the "oldid" url query parameter which is not necessary, but at the moment (2022-02-02) and for the foreseeable future will not cause any problems.
  • However if there will be a problem in the future simply go to Widget:Header and change the line to /w/index.php?title=<!--{$page}-->&action=edit

Combined New Custom Header with MediaWiki Custom Header[edit]

For demonstrative purposes only: https://web.archive.org/web/20220204103725/https://www.whonix.org/wiki/Documentation

New Vector Skin[edit]

  • Mediawiki states:

Over the next few years, we will be gradually updating the Vector skin. Legacy Vector will allow you to view the old version of Vector (as of December 2019). To learn more about the updates, go to our project page.

  • That's why we use the new vector skin already and developed the Whonix look over the new Vector skin

Images, Files and usage of thumb[edit]

  • Thumbnails have a specific look to them, but sometimes it is unnecessary to have an enlarge button. Therefore we create hide-enlarge, see #Design Classes
  • We first tried to use frame instead of thumb, as in [[File:abc.png|frame|50px]], but the option frame ignores the forced size by design, see https://www.mediawiki.org/wiki/Help:Images#Size_and_frame
  • Next we tried border as in [[File:abc.png|border|50px]]. This might be useful in some cases, because it does not ignore forced size. But to make it look like thumb is very time consuming

Export Images Ideas[edit]

not needed for now

Rejected tasks[edit]

The following tasks have been considered for realization but have been rejected due to the contra arguments.

CodeSelect Show Copy Contents Feature[edit]

  • pro
    • Would it be possible, and make sense to shop a popup what exactly has been copied to clipboard?
    • Maybe useful for the new donation widget?
    • Maybe useful generally, globally?
  • contra
    • In probably 99.9% of cases the user will immediately insert the contents they just copied into another form or programm. Therefore he will see the full copied content immediately afterwards anyways. So this might be superfluous

pay what you can for donate panel[edit]

  • pro
    • elementary.io does it
  • contra
    • Confusing for users which might wonder:
      • Do I get the same version if I choose 0?
      • Seems like this cannot be downloaded for free.

mininav CSS Improvement[edit]

  • pro
    • The style for example on A) USB_Installation "table abuse" looks a bit nicer than mininav for example B) Dev/website.
    • "table abuse" is shows all navigation options in the same line on mobile which is great.
    • "table abuse" has a nicer border?
    • "table abuse" has a nicer background color?
    • mininav splits it into multiple lines below each other which is non-ideal.
  • contra
    • mininav is designed with modern standards and especially mobile devices in mind
    • the bottom border indicated like with tabs where the user is at
    • the tabs can be on one line or multiple lines and are therefore responsive
    • the design is subtle and nice and integrates with the rest of the visual language (gray background for code, but white for functional elements of the website)

Export[edit]

Global files useful to be used for other similar wiki's as well.

There is an export cascade towards Kicksecure regarding both wikis. New design inventions on the Whonix wiki will be moved to the Kicksecure wiki once they are finalized and tested.

In the last main export event (2022-03-19) the following files were exported. To repeat this process

1. copy the following files

2. insert into Special:Export and save the resulting XML-file

3. go to https://www.kicksecure.com/wiki/Special:Import

4. Use the following Interwiki prefix:

en

5. copy the following list and paste into the import list on the Special:Import page

MediaWiki:Common.js MediaWiki:Common.css MediaWiki:BackToTopButton.js MediaWiki:BackToTopButton.css Template:Download Button Widget:Download Button MediaWiki:Download Button.css MediaWiki:Download Button.js Template:CodeSelect Widget:CodeSelect MediaWiki:CodeSelect.js MediaWiki:CodeSelect.css Template:Archive_link Widget:Archive_link MediaWiki:Archive_link.css MediaWiki:Bootstrap Fixes.css Widget:Subdomain link Template:Subdomain link File:Magnifying-glass.png File:Support-premium.png File:Support-plus.png File:Support-free.png File:Mastodon-logo.png File:Twitter-logo.png File:Reddit-logo.png File:Facebook-logo.png File:Donate-banner.png File:Evolution-host.png MediaWiki:SaveAndContinue.css MediaWiki:SaveAndContinue.js File:Chevron.png File:X.png MediaWiki:Vector.css MediaWiki:EditorFullscreen.js MediaWiki:EditorFullscreen.css MediaWiki:SiteSpecific.css MediaWiki:Dev.css MediaWiki:Fonts.css Template:Header Widget:Header MediaWiki:Header.js MediaWiki:Header.css Template:Footer Widget:Footer MediaWiki:Footer.js MediaWiki:Footer.css MediaWiki:ScrollableIndicator.js MediaWiki:Mininav.css MediaWiki:Sitenotice Widget:Sitenotice MediaWiki:Sitenotice_id MediaWiki:Sitenotice.css MediaWiki:Sitenotice.js MediaWiki:Hide siteNotice.css File:Grow-symbol.png File:Qr-logo-v2.png MediaWiki:Donation_Panel.css MediaWiki:Donation_Panel.js Widget:Donation_Panel File:Affiliate 128.png File:CAD 128.png File:CHAPS 128.png File:BACS 128.png File:FasterPay 128.png File:WireTransfer 128.png File:ACH 128.png File:Swift 128.png File:DirectDebit-card-dark 128.png File:Sepa-Last 128.png File:Sepa-card-dark 128.png File:IBAN 128.png File:AUD 128.png File:GBP 128.png File:Discover-card-dark 128.png File:UnionPay-card-dark 128.png File:AmericanExpress-dark 128.png File:Dollar 128.png File:Euro 128.png File:Bank-dark 128.png File:MasterCard-dark 128.png File:Visa-card-dark 128.png MediaWiki:PayViaPaypal.css MediaWiki:PayViaPaypal.js File:Payment-generic-symbol.png File:Crypto-generic-symbol.png File:Credit-card-generic.png File:GiroPay-card-dark-enlarged 128.png Widget:Expand_or_Collapse_All MediaWiki:ExpandAndCollapse.js Widget:FlyInNotification MediaWiki:FlyInNotification.css MediaWiki:FlyInNotification.js MediaWiki:Hide flyInNotification.css Template:Pay bitcoin qr Template:Pay bitcoin qr imgurl Template:Pay monero qr Template:Pay monero qr imgurl Template:Pay ethereum qr Template:Pay ethereum qr imgurl Template:Legal documents Template:Hide all banners Template:Support Choice Donate Template:Payments Donate/Affiliate Link Donate/Bank Wire Donate/Bitcoin Donate/Credit Card Donate/Crypto Donate/EUR Donate/Ethereum Donate/GBP Donate/Monero Donate/PayPal Donate/Tax-Deductible Donate/USD Donate Bitcoin Donate Ethereum Donate Monero Donate by Affiliate Link Template:Donation mininav

Repository[edit]

MediaWiki Replacement Discussion[edit]

MediaWiki Bugs and Feature Requests[edit]

Locations to Edit[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

Example Pages for CSS Enhancements[edit]

CSS Checklist[edit]

These are actually done but written as if they are not done:

  • On for example FAQ the long title Frequently Asked Questions - Whonix ™ FAQ breaks the layout on mobile. Because the title is too long, one has to scroll to the right side on mobile to read the title in full. Does the title miss some attribute such as "autowrap", "break line if too long"?
  • Images for example on Main Page and About are not response rendered smaller on mobile.
  • blockquotes don't really look like a quote. example:

Test

  • beautify breadcrumbs (zB < dev on top of this page)

webp jpeg png[edit]

curl --silent --head 'https://www.whonix.org/w/images/d/dd/Whonix_concept_refined.jpg' | grep content-type:

content-type: image/jpeg

curl --silent -H 'accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8' --head 'https://www.whonix.org/w/images/d/dd/Whonix_concept_refined.jpg' | grep content-type:

content-type: image/webp

gerrit patch compare[edit]

git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CSS mediawiki-extension-css

cd mediawiki-extension-css

git fetch https://gerrit.wikimedia.org/r/mediawiki/extensions/CSS refs/changes/96/759196/1

git checkout -b change-759196 FETCH_HEAD

git remote add adre https://github.com/adrelanos/mediawiki-extensions-CSS.git

git fetch adre

git diff -C adre/all-css

BIMI Images[edit]

Examples how other BIMI images look:

Resources:

Instructions:

1. open logo in inkscape

2. Save as -> optimized SVG

Problem:

Icon logo turns black and white after converting it using this converter:

https://app.easydmarc.com/domain/whonix.org/bimi-logo-converter?svg_url=https%3A%2F%2Fwww.whonix.org%2Fw%2Fimages%2F1%2F1d%2FWhonix_Profile_Light.svg

See Also[edit]



Unfinished: This wiki is a work in progress. Please do not report broken links until this notice is removed, use Search Engines First and contribute improving this wiki.