Notes on Wikimedia

Introduction

In this section we will have a odd collection of notes on how to present things with Wiki markup. A lot of things will be in their own section so it is easy to open just that item

Drawing and graphical content

Emojis are easy

The simplest graphic to use is the emojis as they are just a few bytes long they don't use a lot of storage and download as fast as any text There is a small curated list of them just for this wiki 🍎The Fruit Lab Icon Set.

SVG diagrams

The next set of graphical display is a Diagram. the easiest way to make a diagram is in draw.io and as it is free and easy to make network diagrams or flow charts or any other block or line based drawing no need to look much further. Having made the diagram it would be best to export it as a SVG because are essentially "text-based images". They never get blurry when you zoom in because they are geometry based rather than pixel based like jpeg or png. Another good point is that the file sizes are tiny. Please note When exporting, make sure "Include a copy of my diagram" is checked. This embeds the "editable" Draw.io data inside the image and enables the drawing to be edited later. So if it was a network diagram and a host is added the diagram can be downloaded to a laptop with draw.io and simply add a new host to the diagram then, upload the new modified diagram as if nothing happened.

Upload and display

On the Wiki's sidebar, click Upload file. A screen with dialogues to upload some files is displayed. Upload your fruit-lab-network.svg. Give it a destination filename (e.g., File:Kiwi_Pear_2.5G_Topology.svg). when the file has uploaded with

[[File:Kiwi_Pear_2.5G_Topology.svg|thumb|800px|Current 2.5G Network Layout showing Grape, Kiwi, and Pear.]]

• thumb: Adds a nice border and caption box.
• 800px: Sets the width. Because it’s an SVG, it will look perfectly sharp at any size.

💡 Quick Tip for your Network Drawings

Since we now have a specific color scheme now (Kiwi 🥝, Pear 🍐, Grape 🍇), use those same colors for your connection lines in Draw.io:

• Green lines for the 2.5G FruitNet.
• Grey lines for the 1G Dumb Switch/Internet.
• Dotted lines for the Wi-Fi management backdoor.
• Coloured blocks for the different VLANs look good and give a degree of separation to the VLANs

Table

Every table follows this basic structure:

{| : Start of the table. 
|+ : Caption (optional).
! : Header cell (usually bold and centered). could be a colunm header or a row header 
|- : New Row.
| : Standard cell.
|| : allows two Standard cells on the same line.
|} : End of the table.

Extra features class="wikitable" Automatically adds the grey borders, padding, and subtle shading that makes it look professional.

class="wikitable sortable" Will make the table sortable so you can click the headers to organize by one of the columns

class=wikitable style="text-align: center;" Will apply the style attribute to the table

class="wikitable mw-collapsible" will make a collapsible table

Examples

{| class="wikitable" 
|+ The Big Caption 
! 1st header
! 2nd header
! 3rd header
|- 
| row 1 cell a 
| row 1 cell b 
| row 1 cell c 
|- 
| row 2 cell a || row 2 cell b || row 2 cellc
|- 
| row 3 cell a || row 3 cell b || row 3 cellc
|} 

The Big Caption

1st header	2nd header	3rd header
row 1 cell a	row 1 cell b	row 1 cell c
row 2 cell a	row 2 cell b	row 2 cell
row 3 cell a	row 3 cell b	row 3 cell

A different example with align right and collapsible

{| class="wikitable mw-collapsible" style="text-align: center;" 
|+ Another Big Caption 
! 1st header
! 2nd header
! 3rd header
! 4th header
|- 
! header col row1
| row 1 cell b || row 1 cell c || row 1 cell d 
|- 
! header col row 2
| row 2 cell b || row 2 cell c || row 2 cell d 
|- 
! header col row 3
| row 3 cell b || row 3 cell c || row 3 cell d 
|} 

Another Big Caption that remains after the collapse

1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d

Note the above collapses on the caption. here is the same table without the caption

1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d

Collapsing tables can be sortable

Another Big Caption that remains after the collapse

1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d

The header collapsed into a big long collumn looks ugly but the style="width:100%;"

{| class="wikitable mw-collapsible sortable" style="text-align: center;" style="width:100%;"

Another Big Caption that remains after the collapse this time

1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d

alternate expandable is to have no caption an a colspan=4 in this example we have effectively two header rows one with the expand text and the next with the actual column headers

! colspan="4" | in place of a caption (click to expand)
|-
! 1st header !! 2nd header !! 3rd header !! 4th header

in place of a caption (click to expand)
1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d

Or instaed of a header set at the top colspan have a normal row by replacing the ! with !

| colspan="4" | in place of a caption (click to expand)
|-
! 1st header !! 2nd header !! 3rd header !! 4th header

in place of a caption (click to expand)
1st header	2nd header	3rd header	4th header
header col row1	row 1 cell b	row 1 cell c	row 1 cell d
header col row 2	row 2 cell b	row 2 cell c	row 2 cell d
header col row 2	row 3 cell b	row 3 cell c	row 3 cell d