Documentation for Kicksecure ™ Wiki Editors

From Kicksecure
< Dev(Redirected from Dev/Wiki)
Jump to navigation Jump to search

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

Header should come first on every page

WikiSEO newline

https://github.com/octfx/wiki-seo/issues/30archive.org

Save Buttons[edit]

JavaScript (JS) version:

  • Save Continue 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 changesSubmitechangesbutton.png

A bit of potential confusion:
The button Submit changes is renamed to Save Changes when JS is enabled.

Pen Symbol - Syntax Highlighting[edit]

Pen Symbol

Enabling/Disabling syntax highlighting which is useful for editors.

With:

Pensymbole.png

Without

Pensymbole2.png

Symbol:

Pensymbole3.png

This is thanks to extension CodeMirrorarchive.org.

Syntax Highlighting vs Link Suggestions[edit]

When enabling syntax highlighting using the Pen Symbol, link suggestions (by extension LinkSuggestarchive.org) will be broken. This is an upstream bug. Extension:CodeMirror incompatibility with, breaks Extension:LinkSuggestarchive.org

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

Floppy Disc Save Button

This feature requires JavaScript (JS).

Every time you press one of the following buttons:

  • Save Continue Savecontinuebutton.png
  • Save Changes

it will store the page edits in your browser local storage. To restore it press the Floppy Disk Restore Savebutton2.png button again.

Figure: Floppy Disc Restore Button Screenshot

Savebutton.png

Super Menu[edit]

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

Supermenu.png

Figure: Super Menu When Logged In Screenshot

Supermenuloggedin.png

CodeSelect[edit]

Syntax: 

{{CodeSelect|code=
text
}}

Example: 

{{CodeSelect|code=
example text
}}

Result:

example text

CodeSelect Syntax Highlight[edit]

  • Simple example
    • echo 'Hello World'
  • Simple example inline
    • This can also be inline echo 'Hello World' like this.
  • Simple example with html

<div class="html-example"> Hello World </div>

  • Html example no highlight
    • <div class="html-example"> Hello World </div>
  • Html example force Bash (makes no sense, just for demonstration)
    • <div class="html-example"> Hello World </div>
  • Html insert mode 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
    • echo "Hello World"
  • Button image example with source
    • echo "Hello World"
  • Target example text only

This is
example 1
  • Target example with image

This is
example 2
  • Target example with html, but default lang bash

<html>
  <body class="active-body">
    This is our HTML example!
  </body>
</html>
  • Target example with html

<html>
  <body class="active-body">
    This is our HTML example!
  </body>
</html>
  • Target example with html, but lang none

<html>
  <body class="active-body">
    This is our HTML example!
  </body>
</html>

Table of Contents Level Switcher[edit]

Change the orientation of the table of contents. Choose which one suits you.

Table of Contents Level Switcher wiki button

Figure: Table of Contents Level Switcher

TOCswitcher1.png

Back to the Top Button[edit]

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.

Illustrative, cropped screenshot of the back to the top scrolling button

Figure: Back to the Top Button

BackToTheTopButton1.png

Full Screen Button[edit]

full screen button in wiki editor

When editing a wiki page the full screen symbol will fill the entire page.

Figure: Full Screen Button

Fullscreenbutton.png

LinkSuggest vs CodeMirror[edit]

Unfortunately, Extension:CodeMirrorarchive.org breaks Extension:LinkSuggestarchive.org.

Workaround: CodeMirror can be disabled by pressing the Codemirror-icon.pngarchive.org.

upstream bug reports:

Links[edit]

  • Default MediaWiki Link Creation
    • clearnet → automatically adding link to web archive
    • onion → no extraneous onion archive link
      • Syntax: 
        [http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion Kicksecure Homepage]
      • Example: Kicksecure Homepageonion
    • link to web archive → no extraneous archive link
      • Syntax: 
        [https://web.archive.org/web/https://www.kicksecure.com this link]
      • Example: this linkarchive.org
  • Technical Background:
    • This is not based on any wiki template.
    • This is thanks to link-to-archivearchive.org 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: Kicksecure Homepage The Web Archive Onion Version
  • clearnet + archive (No Onion)
    • Syntax: 
      {{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage}}
    • Example: Kicksecure Homepage The Web Archive
    • 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: Kicksecure Homepage (Archived) The Web Archive
  • No Archive - In case archived link would be too long, inappropriate. 
    • {{Archive_link|url=https://www.kicksecure.com|text=Kicksecure Homepage|archive=none}}
    • Example: Kicksecure Homepage
  • 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)
  • Kicksecure website link - (similar an example above, just easier to use than writing Kicksecure onion by hand)
  • 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: was debunked by Moxie Marlinspikearchive.org (Nitterarchive.org)

Special:SpecialPages[edit]

Specialpages.png

Expand Button[edit]

<div class="toccolours mw-collapsible mw-collapsed">
For {{project_name_long}} VirtualBox import instructions, please press on expand on the right.
<div class="mw-collapsible-content">
Hidden Text Here
</div>
</div>

CodeSelect with pipes[edit]

Use 

{{!}}

rather than 

|

Or simply have a look at the mediawiki markup for the following example.

Exec=cat file | grep something

related: CodeSelect implementation source code documentation

pre tag with white spaces[edit]

Try making the opening tag 

<pre style="white-space: pre-wrap;">
...

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 other wrapping/whitespace optionsarchive.org if that doesn't work for what you need.

pre tags with variables[edit]

Syntax: 

<div class="pre">

</div>

Syntax example: 

<div class="pre">{{project name long}} <code>{{VersionNew}}</code></div>

Live example:

Kicksecure ™ 16.0.9.8

Scrollable Tables[edit]

To make tables scrollable on mobile, the table needs to be wrapped into: 

<div class="scroll-table">

</div>

Examples:

JavaScript vs no-JavaScript[edit]

Syntax example: 

<div class="show-for-nojs-only">
NoScript version: Text is only show when JavaScript is not active
</div>

<div class="show-for-js-only">
JavaScript version: Text is only show when JavaScript is active
</div>

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

Example syntax: 

<div class="mininav">
* [[Documentation]]
* [[FAQ]]
* [[Support]]
* [[Advanced Documentation]]
</div>

Live example:

Live Wiki Pages Examples:

Thumbnails[edit]

  • thunbnail including link but without thubnail enlarge button.
    • example:
      • <div class="thumb-hide-enlarge">[[File:Download-vbox.jpg|thumb|link=VirtualBox/XFCE|250px|class=hide-enlarge]] </div>

External Redirects Documentation[edit]

Setting up External Redirects[edit]

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.
    • #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[edit]

NOTE: Replace OpenPGP with the actual wiki page name.

Wiki Editors Terminology for Wiki Migration[edit]

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

Social Media Link Preview Tests[edit]

strict-list-columns[edit]

Example: Mobile_Phone_Security#Data_Harvesting_by_Most_Phones 

<div class="use-2-columns strict-list-columns mw-collapsible-content">

Example: Documentation 

<div class="use-3-columns mw-collapsible-content">

MultiWiki[edit]

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: 

<noinclude>
[[Category:MultiWiki]]
</noinclude>

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

/*
[[Category:MultiWiki]]
*/

Examples wiki pages that have been added to Category MultiWiki:

Examples wiki templates that have been added to Category MultiWiki:

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

For web developer to start mirroring, run:

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 Testpage was modified in the destination wikiarchive.org by looking at its content or Testpage historyarchive.org.

Gadgets[edit]

Under Special:SpecialPages look for:

Gadgets

See:

Reference Tooltips[edit]

An interesting gadget to have would be Reference Tooltipsarchive.org.

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 Extension:Popupsarchive.org. However, quote Extension:WikiSEO known issuesarchive.org:

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/T300587archive.org

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

Find Widgets in Wiki[edit]

#widget:widget_name

Example:

ReplaceText[edit]

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

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

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

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

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

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

space removal in template invocations[edit]

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

(?i)workstation.product.name.short

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

image remove absolute links[edit]

wiki old example: 

|image=Kicksecure-twitter-post.jpg

wiki new example: 

|image=Kicksecure-twitter-post.jpg

regex search: 

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

regex replace: 

|image=$1.jpg

image remove px[edit]

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

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

Diaspora[edit]

Widget:Footer 

      <a class="expand-button-50" href="https://diasp.org/u/<!--{$projectNameShortLowerCase}-->" target="_blank" title="<!--{$projectName}--> on Diaspora">
        <img src="/w/images/thumb/b/be/Diaspora-logo.png/180px-Diaspora-logo.png" />
      </a>

Custom CSS JavaScript Debugging[edit]

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:

https://www.kicksecure.com/wiki/Dev/wikitest

3. See syntax.

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

  • general mediawiki debug mode: ?debug=true
  • do not load some custom JS: ?dontload=js
  • do not load some custom CSS: ?dontload=css
  • do not load some custom JS / CSS: ?dontload=jscss

4. Append an extra query parameter to the URL.

Examples:

  • do not load some custom JS: https://www.kicksecure.com/wiki/Dev/wikitest?dontload=js
  • do not load some custom CSS:https://www.kicksecure.com/wiki/Dev/wikitest?dontload=css
  • do not load some custom JS / CSS: 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.): 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: https://www.kicksecure.com/wiki/Dev/wikitest
      • In case of A), the CodeSelect copy button should be visible.
    • B) URL with dontload=jscss query parameter: https://www.kicksecure.com/wiki/Testpage?dontload=jscss
      • In case of B), the CodeSelect copy button should not be visible.
  • Special: pages example:
    • A) Normal URL: https://www.kicksecure.com/wiki/Special:RecentChanges
      • In case of A), ...
    • B) URL with dontload=jscss query parameter: 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: 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: 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[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.
Retrieved from "https://www.kicksecure.com/w/index.php?title=Dev/wiki&oldid=68445"