{{Header}} {{title|title= Documentation for {{project_name_long}} Wiki Editors }} {{#seo: |description=Syntax Highlighting vs Link Suggestions, Links with Web Archive, Onions, CodeSelect, Wiki Editor Save Buttons, Floppy Disc Restore Button, Super Menu, Table of Contents Level Switcher, Back to the Top Button, Full Screen Button, Expand Button, Mini Navigation, External Redirects Documentation, MultiWiki, mass search and replace - ReplaceText, and more. }} {{devwiki}} {{intro| Syntax Highlighting vs Link Suggestions, Links with Web Archive, Onions, CodeSelect, Wiki Editor Save Buttons, Floppy Disc Restore Button, Super Menu, Table of Contents Level Switcher, Back to the Top Button, Full Screen Button, Expand Button, Mini Navigation, External Redirects Documentation, MultiWiki, mass search and replace - ReplaceText, and more. }} = Header versus Extraneous Newline at the Top = Header should come first on every page WikiSEO newline https://github.com/octfx/wiki-seo/issues/30 = Save Buttons = JavaScript (JS) version: * Save Continue [[File:Savecontinuebutton.png]] - easy * Save Changes [Missing Screenshot] - advanced editors If you are not sure which button to use, the Save Changes is a good choice. Feel free to experiment with the Save Changes button and use it if it seems useful for you. no-JavaScript (noJS) version: * Submit changes[[File:Submitechangesbutton.png]] A bit of potential confusion:
The button Submit changes is renamed to Save Changes when JS is enabled. = Pen Symbol - Syntax Highlighting = [[File:Pensymbole3.png|thumb|Pen Symbol]] Enabling/Disabling syntax highlighting which is useful for editors. With: {{ContentImage| [[File:Pensymbole.png|470px]] }} Without {{ContentImage| [[File:Pensymbole2.png|470px]] }} Symbol: {{ContentImage| [[File:Pensymbole3.png|90px]] }} This is thanks to [https://www.mediawiki.org/wiki/Extension:CodeMirror extension CodeMirror]. = Syntax Highlighting vs Link Suggestions = When enabling syntax highlighting using the Pen Symbol, link suggestions (by [https://www.mediawiki.org/wiki/Extension:LinkSuggest extension LinkSuggest]) will be broken. This is an upstream bug. [https://phabricator.wikimedia.org/T300618 Extension:CodeMirror incompatibility with, breaks Extension:LinkSuggest] So if the editor wishes to receive link suggestions, (temporarily) disable syntax highlighting using the Pen Symbol. When the editing task requires no link suggestions, enabling syntax highlighting might be useful. It is easy to switch from one mode to another. = Floppy Disc Restore Button = [[File:Savebutton2.png|thumb|90px|Floppy Disc Save Button]] This feature requires JavaScript (JS). Every time you press one of the following buttons: * Save Continue [[File:Savecontinuebutton.png]] * Save Changes it will store the page edits in your browser local storage. To restore it press the Floppy Disk Restore [[File:Savebutton2.png|30px]] button again. '''Figure:''' ''Floppy Disc Restore Button Screenshot'' {{ContentImage| [[File:Savebutton.png|border|470px]] }} = Super Menu = [[File:Supermenu3.png|thumb|Super Menu]] This is the Super Menu. Not much to explain about it. Just mentioned here to define what is meant by Super Menu. '''Figure:''' '''Super Menu Screenshot''' {{ContentImage| [[File:Supermenu.png|470px]] }} '''Figure:''' '''Super Menu When Logged In Screenshot''' {{ContentImage| [[File:Supermenuloggedin.png|470px]] }} = CodeSelect = Syntax: 
{{CodeSelect|code=
text
}}
Example: 
{{CodeSelect|code=
example text
}}
Result: {{CodeSelect|code= example text }} = CodeSelect Syntax Highlight = * Simple example ** {{CodeSelect|code= echo 'Hello World' }} * Simple example inline ** This can also be inline {{CodeSelect|inline=true|code= echo 'Hello World' }} like this. * Simple example with html ** {{CodeSelect|lang=html|code=
Hello World
}} * Html example no highlight ** {{CodeSelect|lang=none|code=
Hello World
}} * Html example force Bash (makes no sense, just for demonstration) ** {{CodeSelect|lang=bash|code=
Hello World
}} * Html insert mode [[Shell#Hidden_Text_Attacks|hidden text attack]] example
sudo apt install malware1 sudo apt install malware2 sudo apt update
* Html insert mode styling example ** More Info here * Button image example without source ** {{CodeSelect|code=echo "Hello World"|buttonImage=}} * Button image example with source ** {{CodeSelect|code=echo "Hello World"|buttonImage=/w/images/8/8c/Supermenu3.png}} * Target example text only {{CodeSelect|target=#my-codeselect-target-example1}} 
This is
example 1
* Target example with image {{CodeSelect|target=#my-codeselect-target-example2|buttonImage=/w/images/8/8c/Supermenu3.png}} 
This is
example 2
* Target example with html, but default lang bash {{CodeSelect|target=#my-codeselect-target-example3|buttonImage=}} 

  
    This is our HTML example!
* Target example with html {{CodeSelect|lang=html|target=#my-codeselect-target-example4|buttonImage=}} 

  
    This is our HTML example!
* Target example with html, but lang none {{CodeSelect|lang=none|target=#my-codeselect-target-example5|buttonImage=}} 

  
    This is our HTML example!
= Table of Contents Level Switcher = Change the orientation of the table of contents. Choose which one suits you. [[File:TOCswitcher2.png|90px|border|thumb|Table of Contents Level Switcher wiki button]] '''Figure:''' ''Table of Contents Level Switcher'' {{ContentImage| [[File:TOCswitcher1.png|470px|border]] }} = Back to the Top Button = It is the arrow down button allow user to press on it and send the scrolling to top of the page immediately instead of scrolling up. [[File:BackToTheTopButton2.png|thumb|Illustrative, cropped screenshot of the back to the top scrolling button]] '''Figure:''' ''Back to the Top Button'' {{ContentImage| [[File:BackToTheTopButton1.png|470px]] }} = Full Screen Button = [[File:fullscreenbutton2.png|thumb|200px|full screen button in wiki editor]] When editing a wiki page the full screen symbol will fill the entire page. '''Figure:''' ''Full Screen Button'' {{ContentImage| [[File:fullscreenbutton.png|470px|border]] }} = LinkSuggest vs CodeMirror = Unfortunately, [https://www.mediawiki.org/wiki/Extension:CodeMirror Extension:CodeMirror] breaks [https://www.mediawiki.org/wiki/Extension:LinkSuggest Extension:LinkSuggest]. Workaround: CodeMirror can be disabled by pressing the [https://www.mediawiki.org/wiki/File:Codemirror-icon.png Codemirror-icon.png]. upstream bug reports: * https://phabricator.wikimedia.org/T95100#7666796 * https://phabricator.wikimedia.org/T300618 = Links = * Default MediaWiki Link Creation ** clearnet → automatically adding link to web archive *** Syntax: 
[https://www.kicksecure.com Kicksecure Homepage]
*** Example: [https://www.kicksecure.com Kicksecure Homepage] ** onion → no extraneous onion archive link *** Syntax: 
[http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion Kicksecure Homepage]
*** Example: [http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion Kicksecure Homepage] ** link to web archive → no extraneous archive link *** Syntax: 
[https://web.archive.org/web/https://www.kicksecure.com this link]
*** Example: [https://web.archive.org/web/https://www.kicksecure.com this link] * Technical Background: ** This is not based on any wiki template. ** This is thanks to [https://github.com/adrelanos/mediawiki-link-to-archive link-to-archive] MediaWiki Extension. ** The simple way for wiki editors to write most links. * clearnet + archive + onion ** Syntax: 
{{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage|onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion}}
** Example: {{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage|onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion}} * clearnet + archive (No Onion) ** Syntax: 
{{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage}}
** Example: {{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage}} ** Same as Default MediaWiki Link Creation. ** In this case, Default MediaWiki Link Creation might be simpler. * Archived Only - In case live version is permanently unavailable. ** 
{{Archive_link|url=https://web.archive.org/web/https://www.kicksecure.com|archive=copy|text=Kicksecure Homepage (Archived)}}
** Example: {{Archive_link|url=https://web.archive.org/web/https://www.kicksecure.com|archive=copy|text=Kicksecure Homepage (Archived)}} * No Archive - In case archived link would be too long, inappropriate. ** 
{{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage|archive=none}}
** Example: {{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage|archive=none}} * Technical Background: ** This is not based on wiki template archive_link. (Source code documentation under [[Dev/mediawiki]].) ** No MediaWiki extension is involved. ** This is for special links, i.e. links which might be archived only (no more clearnet version available), onion only (no clearnet version available) or for links which should not automatically add a link to the web archive in special places (header, footer) for stylistic reasons. * Kicksecure wiki link - (similar an example above, just easier to use than writing Kicksecure onion by hand) ** Syntax: 
{{Kicksecure_wiki|wikipage=Test|text=Test new security features}}
** Example: {{Kicksecure_wiki |wikipage=Test |text=Test new security features }} * Kicksecure website link - (similar an example above, just easier to use than writing Kicksecure onion by hand) ** Syntax: 
{{Kicksecure_link|wiki/Test|{{Kicksecure}}}}
** Example: {{Kicksecure_link |wiki/Test |{{Kicksecure}} }} * Archive_link Common Usage Mistakes: ** Protocol handler http or https is required. ** wrong: |onion={{QubesOS_onion}} ** correct: |onion=http://{{QubesOS_onion}} * Twitter link ** Syntax: 
{{Twitter_link|link-without-domain-name|description}}
** Preformatted Example: 
{{Twitter_link|moxie/status/1337434126186553345|was debunked by Moxie Marlinspike}}
** Live Example: {{Twitter_link|moxie/status/1337434126186553345|was debunked by Moxie Marlinspike}} = Special:SpecialPages = {{ContentImage| [[File:Specialpages.png|500px]] }} = Expand Button = 

For {{project_name_short}} VirtualBox import instructions, please press on expand on the right.


Hidden Text Here
= CodeSelect with pipes = Use 
{{!}}
rather than 
|
Or simply have a look at the mediawiki markup for the following example. {{CodeSelect|code= Exec=cat file {{!}} grep something }} related: [[Dev/mediawiki#New_Vector_Skin_and_Skin_Preferences|CodeSelect implementation source code documentation]] = pre tag with white spaces = Try making the opening tag 
...



instead of normal pre>.

Example with pre-wrap:


   leading white space example



Example without pre-wrap:


   leading white space example



Seems currently not required with the mediawiki skin used at time of writing.

There are a number of [https://www.w3schools.com/cssref/pr_text_white-space.asp other wrapping/whitespace options] if that doesn't work for what you need.

= pre tags with variables =
Syntax:









Syntax example:


{{project_name_short}} {{VersionNew}}




Live example:


{{project_name_short}} {{VersionNew}}


= JavaScript vs no-JavaScript =
Syntax example:



NoScript version: Text is only show when JavaScript is not active





JavaScript version: Text is only show when JavaScript is active





Live test:



NoScript version: Text is only show when JavaScript is not active





JavaScript version: Text is only show when JavaScript is active



= Mini Navigation =
Example syntax:



* [[Documentation]]
* [[FAQ]]
* [[Support]]
* [[Advanced Documentation]]





Live example:



* [[Documentation]]
* [[FAQ]]
* [[Support]]
* [[Advanced Documentation]]



Live Wiki Pages Examples:

* [[Documentation]]
* [[Template:Support Choice]]
* [[Template:Legal documents]]

= Thumbnails =
* thunbnail including link but without thubnail enlarge button.
** example:
*** 
[[File:Download-vbox.jpg|thumb|link=VirtualBox|250px|class=hide-enlarge]]



= Homepage Edits =
The root page {{project_clearnet}} (without anything after the slash (/) is being refereed to as homepage.

[[Contribute#Documentation|Editing the wiki is simple.]] Please consider doing some (minor) wiki edits first to learn that process generally.

Editing the homepage is unfortunately not that simple.

The edit button on the homepage is functional but the wiki source is not obvious how that works. Homepage is raw HTML based on a wiki widget, [[Widget:Page_Homepage]] but that cannot be edited by non-admins for security reasons. The MediaWiki Widget extension lacks the capability to 

The homepage widget source code however can be viewed in a copy/paste friendly format.

'''1.''' View [[Widget:Page_Homepage]] wiki source and copy it as-is to [[Dev/Page_Homepage]] to update that page as updates to that page are currently manual.

'''2.''' Edit [[Dev/Page_Homepage]].

'''3.''' Testing.

Testing is difficult. Setting up a replication of the wiki is a rather complicated, time consumption process. Short of that, please just check that the modified HTML is valid (at least has not more issues than the original) using some HTML validator.

'''4.''' Notify in the forums that an edit was suggested.

'''5.''' It will then be reviewed by admins 

'''6.''' Discuss this process in the forums in case of issues (such as two people working at the same time on it, unlikely for now).

= External Redirects Documentation =
== Setting up External Redirects ==
For example, https://www.whonix.org/wiki/Software was moved to https://www.kicksecure.com/wiki/Software

Note: Using Software as an example here.

'''1)''' Go to migrated page from Whonix wiki:

* Go to https://www.whonix.org/wiki/Software

'''2)''' Create the redirect to the Moved: namespace.

* '''A)''' Edit the page.
* '''B)''' Delete all of its contents.
* '''C)''' Replace it will the following contents. Paste.
** Note: Textual string Software needs to be replaced.
** {{CodeSelect|code=
#REDIRECT [[Moved:Software]]
}}
* '''D)''' Save.

'''3)''' Go to the new Software stub page in the Moved: namespace.

The link which is now visible due to step 2 should now be visible.

'''4)''' Create the external redirect.

* On https://www.whonix.org/wiki/Moved:Software
* Paste.

{{#externalredirect: https://www.kicksecure.com/wiki/Software}}


* Save.

'''5)''' Test the redirect.

For example, https://www.whonix.org/wiki/Software should now be re-directing to https://www.kicksecure.com/wiki/Software.

'''6)''' Done.

Redirection setup complete.

== Editing Existing External Redirects ==
NOTE: Replace OpenPGP with the actual wiki page name.

* https://www.whonix.org/w/index.php?title=OpenPGP&redirect=no
* https://www.whonix.org/wiki/Moved:OpenPGP

= Wiki Editors Terminology for Wiki Migration =
* copy (duplicate from Whonix wiki to Kicksecure wiki and remove Whonix specific parts from Kicksecure wiki)
* migrate from Whonix to Kicksecure
* sort it out

= Social Media Posting =
== Social Media Link Preview Tests ==
* https://cards-dev.twitter.com/validator
* telegram @WebpageBot / https://t.me/WebpageBot

== strict-list-columns ==
Example: [[Mobile_Phone_Security#Data_Harvesting_by_Most_Phones]]






Example: [[Documentation]]






= MultiWiki =
Category MultiWiki is used as a tag. Wiki pages with this tag are every now and then (currently only started by administators) mirrored from the Kicksecure wiki to the Whonix wiki with the assistance of automated scripting.

To add a wiki page to Category MultiWiki, the following text needs to be added to that wiki page. By convention, it should be in the footnotes or section or very bottom the footer of the wiki page.

'''A)''' If it is a wiki page, add:


[[Category:MultiWiki]]



'''B)''' If it is a wiki template or a widget, add:



[[Category:MultiWiki]]




'''C)''' If it is a CSS page or JS page, add:


/*
[[Category:MultiWiki]]
*/



Examples wiki pages that have been added to Category MultiWiki:

* [[Contact#Footnotes|Contact, chapter Footnotes]]

Examples wiki templates that have been added to Category MultiWiki:

* [[Template:Gpg_key]]

The full list of wiki pages currently in Category MultiWiki can be found on the category page:

* [[:Category:MultiWiki]]

For web developer to start mirroring, run:

{{CodeSelect|code=
mw-multi-wiki
}}

Notes:

* Pages that have not been changed in the source wiki will not result in a recorded change (null edit) in the destination wiki.

How to test:

'''1.''' Modify a page that is already in [[:Category:MultiWiki]] such as [[Testpage]] in the source wiki.

'''2.''' Then run mw-multi-wiki.

'''3.''' Check for example if [https://www.whonix.org/wiki/Testpage Testpage was modified in the destination wiki] by looking at its content or [https://www.whonix.org/w/index.php?title=Testpage&action=history Testpage history].

= Gadgets =
Under [[Special:SpecialPages]] look for:

{{CodeSelect|code=
Gadgets
}}

See:

* [[Special:Gadgets]]
* [[Special:Preferences#mw-prefsection-gadgets]]

= Reference Tooltips =
An interesting [[#Gadgets|gadget]] to have would be [https://www.mediawiki.org/wiki/Reference_Tooltips Reference Tooltips].

In the past, the MediaWiki Reference Tooltips gadget has lead to wgCanonicalNamespace error in browser console. After disabling the Reference Tooltips JavaScript file, the browser console error was gone.

An alternative could be [https://www.mediawiki.org/wiki/Extension:Popups Extension:Popups]. However, quote [https://www.mediawiki.org/wiki/Extension:WikiSEO#Known_issues Extension:WikiSEO known issues]:


Extension:PageImages will add an og:image tag if an image is found on the page. If another image was set using WikiSEO, both og:image will be added to the page.


https://phabricator.wikimedia.org/T300587

https://github.com/octfx/wiki-seo/issues/32

= Find Widgets in Wiki =
{{CodeSelect|code=
#widget:widget_name
}}

Example:

* {{CodeSelect|code=
#widget:Icon_Bullet_List
}}
** https://www.kicksecure.com/w/index.php?search=%23widget%3AIcon_Bullet_List

= ReplaceText =
'''1.''' Go to [[Special:ReplaceText]].

'''2.''' If:

* A) regex is not required: No special action required.
* B) regex is required: To use regex, check box Use regular expressions is required. For regex examples, see below.

== ReplaceText regex Examples ==

\(\[http\:\/\/www\.webcitation\.org\/\S{9} w\]\)




\(\[http\:\/\/www\.webcitation\.org\/\S{9} \(w\)\]\)




\[http\:\/\/www\.webcitation\.org\/\S{9} \(w\)\]




\\s*http\:\/\/www\.webcitation\.org\/\S{9}\s*\<\/ref\>




http\:\/\/www\.webcitation\.org\/\S{9}



== space removal in template invocations ==

'''4'''

regex:


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



replace:


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



(\s means "white space".)

'''3'''


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




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



'''2'''


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




{{$1_$2}}



== template rename ==

(?i)workstation.product.name.short




(?i)\{\{project.name\}\}



== image remove absolute links ==
wiki old example:


|image=https://www.kicksecure.com/w/images/thumb/5/5c/Logo-usb-500x500.png/200px-Logo-usb-500x500.png



wiki new example:


|image=200px-Logo-usb-500x500.png



regex search:


\|image\=https\:\/\/www\.\S+\/([A-Za-z0-9_-]+)\.jpg(?!\/)



regex replace:


|image=$1.jpg



== image remove px ==
existing wiki:


|image=98px-Kicksecure-basic-logo.png



wanted wiki (new):


|image=Kicksecure-basic-logo.png



regex search:


\|image\=\d{2,4}px\-([A-Za-z0-9_-]+)\.jpg



regex replace:


|image=$1.jpg



= Hiding Broken Links From Indexes =

If there is a broken link which has no online replacement or even archived is better to just make it unclickable link:

Use the <nowiki> tag.

In other words, surround the link with the <nowiki> </nowiki> tag.


Example:


broken link: <nowiki>https://example.com</nowiki>



Should look similar to this:

broken link: https://example.com

= Footer =
== Diaspora ==
[[Widget:Footer]]


      
        
      



= Custom CSS JavaScript Debugging =

'''1.''' Go to some wiki page you like to test. For example: [[Dev/wikitest]]

'''2.''' You will end up on the usual URL such as:

{{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest
}}

'''3.''' See syntax.

Just have a look. Here are some choices. Choices:

* general mediawiki debug mode: {{CodeSelect|code=
?debug=true
}}
* do not load some custom JS: {{CodeSelect|code=
?dontload=js
}}
* do not load some custom CSS: {{CodeSelect|code=
?dontload=css
}}
* do not load some custom JS / CSS: {{CodeSelect|code=
?dontload=jscss
}}

'''4.''' Append an extra query parameter to the URL.

Examples:

* do not load some custom JS: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest?dontload=js
}}
* do not load some custom CSS:{{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest?dontload=css
}}
* do not load some custom JS / CSS: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest?dontload=jscss
}}
* enable debug mode and do not load some custom JS / CSS (The first symbol to start the query parameter is an ?, the separator to add another query parameter is an & The following example is most likely correct.): {{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest?debug=true&dontload=jscss
}}

'''5.''' Load the website.

Press enter to reload the website with the new query parameters enabled.

'''6.''' How to see the difference?

For example:

* '''Normal /wiki/ page example:'''
** '''A)''' Normal URL: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Dev/wikitest
}}
*** In case of A), the [[#CodeSelect|CodeSelect]] copy button should be visible.
** '''B)''' URL with dontload=jscss query parameter: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Testpage?dontload=jscss
}}
*** In case of B), the [[#CodeSelect|CodeSelect]] copy button should not be visible.
* '''Special: pages example:'''
** '''A)''' Normal URL: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Special:RecentChanges
}}
*** In case of A), ...
** '''B)''' URL with dontload=jscss query parameter: {{CodeSelect|code=
https://www.kicksecure.com/wiki/Special:RecentChanges?dontload=jscss
}}
*** In case of B), no visible difference at time of writing.
* '''index.php edit wiki page example:'''
** '''A)''' Normal URL: {{CodeSelect|code=
https://www.kicksecure.com/w/index.php?title=Dev/wikitest&action=edit
}}
*** In case of A), the the Save Continue and Save changes buttons should be visible.
** '''B)''' URL with dontload=jscss query parameter: {{CodeSelect|code=
https://www.kicksecure.com/w/index.php?title=Dev/wikitest&action=edit&dontload=jscss
}}
*** In case of B), only the Submit changes button should be visible.

= See Also =
* [[Dev/Documentation Guidelines]]
* [[Dev/Documentation Markup Format Converters]]

{{reflist|close=1}}

[[Category:Development]]

{{Footer}}