Difference between revisions of "Meta:Guidelines"

From TSG Doc
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
For more general wiki conventions and formatting help , visit the [http://www.mediawiki.org/wiki/Help:Formatting MediaWiki Formatting Guide].
 
For more general wiki conventions and formatting help , visit the [http://www.mediawiki.org/wiki/Help:Formatting MediaWiki Formatting Guide].
  
 +
==Page Names==
 +
Page names should be descriptive and unique. Use singular nouns instead of plurals when possible (e.g. "Keyboard" instead of "Keyboards"). This makes linking from singular words easier, as you can just use:<br/>
 +
<code><nowiki>One [[Keyboard]], Two [[Keyboard]]s.</nowiki></code><br/>
 +
One [[Keyboard]], Two [[Keyboard]]s.<br/>
 +
instead of<br/>
 +
<code><nowiki>One [[Keyboards|Keyboard]], Two [[Keyboards]].</nowiki></code>
  
 
==Categories==
 
==Categories==
Line 9: Line 15:
  
 
You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple '''bold text'''.
 
You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple '''bold text'''.
 +
 +
 +
==Download/External Links==
 +
Links should be '''descriptive'''. Don't waste space by pasting the entire url or writing something like "Click [[Meta:Guidelines|here]] to download the documentation". Examples:
 +
*[[:File:Obs_tut_videoSet.png|Uploaded file with version control]]
 +
*[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]] (zip)
  
 
==Images==
 
==Images==
Line 37: Line 49:
 
! width="200px" | Item 3
 
! width="200px" | Item 3
 
|-
 
|-
! Category
+
| Regular Info || Info 1 || Info 2 || Info 3
 +
|-
 +
! Comparison
 
! colspan="3" |  
 
! colspan="3" |  
 
|-
 
|-
| Colors
+
| Template || <center><code><nowiki>{{Yes}}</nowiki></code></center> || <center><code><nowiki>{{No}}</nowiki></code></center> || <center><code><nowiki>{{Some}}</nowiki></code></center>
| style="background-color:#9F9;" | Yes
+
|-
| style="background-color:#F99;" | No
+
| Result || {{Yes}} || {{No}} || {{Some}}
| style="background-color:#FFB;" | Wildcard
+
|-
 +
! colspan="4" |
 +
|-
 +
| Custom name || <center><code><nowiki>{{Yes|Yeah!}}</nowiki></code></center>  || <center><code><nowiki>{{No|Nuh-uh}}</nowiki></code></center>  || <center><code><nowiki>{{Some|Maybe?}}</nowiki></code></center>
 +
|-
 +
| Result || {{Yes|Yeah!}} || {{No|Nuh-uh}} || {{Some|Maybe?}}
 +
|-
 +
! colspan="4" |  
 
|-
 
|-
| CSS Code || #9F9|| #F99|| #FFB
+
| Manual colors
 +
| style="background-color:#9F9;" | #9F9
 +
| style="background-color:#F99;" | #F99
 +
| style="background-color:#FFD;" | #FFD
 
|-
 
|-
 
|}
 
|}
 
  
 
==Code==
 
==Code==
Line 72: Line 95:
 
I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page.
 
I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page.
  
<!-- Commence Bacon Ipsum -->
+
<!-- Start Pirate Ipsum-->
Bacon ipsum dolor amet eiusmod in ribeye, flank duis swine drumstick shank kielbasa lorem pariatur shoulder in. Flank capicola dolore, tri-tip boudin fatback turkey.  
+
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
Ut esse in voluptate porchetta duis reprehenderit irure ullamco mollit tri-tip bresaola. Anim beef bresaola meatball t-bone spare ribs consequat ullamco.
+
Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
Shoulder sirloin fatback veniam dolore. Adipisicing sed tempor shank lorem, pariatur tri-tip et pork loin tail chuck meatloaf.
+
Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
 
+
<!-- End Pirate Ipsum-->
Exercitation beef ribs short loin veniam pig, incididunt spare ribs. In ipsum biltong ex enim, boudin chuck andouille velit duis cow prosciutto elit.
 
Duis tongue laborum veniam do meatloaf porchetta boudin minim aute in meatball ex turkey occaecat. Dolor kevin officia shoulder corned beef.
 
 
 
Pork irure non, et nulla qui prosciutto boudin. Pancetta in turducken magna doner do dolor anim ad meatball prosciutto. Officia excepteur drumstick kielbasa ullamco,
 
velit qui capicola aliquip. Cillum commodo nulla elit drumstick kevin turducken ut consectetur. Frankfurter in in boudin jerky. Do in anim ut sunt voluptate bresaola sed.
 
Est leberkas nulla, incididunt biltong bacon boudin rump dolore dolore kielbasa proident kevin aliqua.
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Line 90: Line 107:
 
You could also use the <nowiki><tt> <pre> and nowiki </nowiki> tags if better suited for your needs, whatever works best to present the code as clear and readable as possible.
 
You could also use the <nowiki><tt> <pre> and nowiki </nowiki> tags if better suited for your needs, whatever works best to present the code as clear and readable as possible.
  
==Downloads==
+
==Emoji==
Download links are presented as list items and are '''descriptive'''. This means you don't waste space by pasting the entire url or writing something like "Click [[Main_Page|here]] to download the documentation". Examples:
+
It is encouraged to use [https://unicode.org/emoji/charts/full-emoji-list.html unicode emojis] (which you can just copy-paste as text) in places where they can draw extra attention, help illustrate your point, or break up the monotony of a long text.
*[[:File:riv2 quickstart.pdf|Uploaded file with version control]]
+
 
*[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]] (zip)
+
Be aware that emojis may be rendered differently in different browsers or operating systems, so try to pick ones that are common and unambiguous, and also recognizable at the scale they get reduced to when placed in-line on our Wiki. Also, Windows doesn't natively support flag emojis like 🇳🇱, for some reason.
 +
 
 +
Lastly, don't overdo the emojis, as that could make it seem like our wiki was written by AI.
 +
 
 +
====Examples====
 +
ℹ️ This is a piece of (extra) information.
 +
 
 +
⚠️ This is a warning!
 +
 
 +
❌ This is a no-go!
 +
 
 +
✅ This is good.
 +
 
 +
✨ This is something new!
 +
 
 +
🚧 This is under construction.
 +
 
 +
🐽 Oink.
 +
 
 +
These are just examples; feel free to come up with your own conventions so we can later compare and discuss what works best.
 +
 
 +
==Shields and Badges==
 +
Github-style shields or badges are useful for providing software details like programming language and licensing at a glance. There's a case to be made for our Wiki and Gitlab READMEs to use similar layouts and features for more uniformity in our documentation, and so badges could help with that too. Unfortunately, it is currently a bit of a faff to implement badges on our wiki, as hotlinking or injecting dynamic content from external sources is disabled for security reasons.
 +
 
 +
The workaround:
 +
# Generate a badge at https://shields.io
 +
# Create a new CSS rule in [[MediaWiki:Common.css]] (see examples at bottom)
 +
# On the page you want to edit, add a custom span with class="shield" and the id as named in the CSS, e.g.: <code><nowiki><span class="shield" id="shield-python310")></span></nowiki></code>
 +
# Add to the list of shields below.
 +
 
 +
===Available Shields===
 +
:<span class="shield" id="shield-python310")></span> <code><nowiki><span class="shield" id="shield-python310")></span></nowiki></code>
 +
 
 +
==Banners==
 +
If a page is, or needs to be, significantly changed, you can put a banner on top to warn/inform visitors.
 +
<pre>{{Notice|Did you know you could add banners?}}</pre>
 +
{{Notice|Did you know you could add banners?}}
 +
<pre>{{Warn|'''Look Out!'''}}</pre>
 +
{{Warn|'''Look Out!'''}}
 +
<pre>{{Outdated}}</pre>
 +
{{Outdated}}
  
 
==References==
 
==References==
 
<references />
 
<references />

Latest revision as of 16:00, 16 April 2026

This is a sample page for the tsgdoc Wiki and can be used as reference for creating new pages. Note that this introduction is conventionally placed above the Table Of Contents (TOC), so visitors can immediately see what this page is about, instead of having to scroll passed the TOC.

For more general wiki conventions and formatting help , visit the MediaWiki Formatting Guide.

Page Names

Page names should be descriptive and unique. Use singular nouns instead of plurals when possible (e.g. "Keyboard" instead of "Keyboards"). This makes linking from singular words easier, as you can just use:
One [[Keyboard]], Two [[Keyboard]]s.
One Keyboard, Two Keyboards.
instead of
One [[Keyboards|Keyboard]], Two [[Keyboards]].

Categories

Always try to group and categorize your information in a logical and user-friendly way. Prevent redundancies: only create subcategories if there are more of them at the same level (levels are indicated by number of = signs before and after the header), otherwise just collapse to the parent.

You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple bold text.


Download/External Links

Links should be descriptive. Don't waste space by pasting the entire url or writing something like "Click here to download the documentation". Examples:

Images

Right-floating image thumbnail with description.

To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 300px is the preferred thumbnail size. Adding a description underneath the image is appreciated. For more image formatting guidelines, visit the MediaWiki Images Guide.

Inline Images

Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable. The exact size is up to you, but the width should not exceed 720px.[1]

Caption

You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it.

Tables

For tables, use the Wikitable markup. It is more readable and easy on the eye than the default one. There are multiple ways to create rows and columns, some used in the example below, but for more information, consult the MediaWiki Table Formatting Guide.

By default, table columns will scale to fit the contents of the cell, but this usually results in a messy-looking table. Set fixed column-widths to keep the table nice and tight.

For binary entries (e.g. Yes/No), a background color can be used to make it easier to recognize.

Item 1 Item 2 Item 3
Regular Info Info 1 Info 2 Info 3
Comparison
Template
{{Yes}}
{{No}}
{{Some}}
Result Yes No Some
Custom name
{{Yes|Yeah!}}
{{No|Nuh-uh}}
{{Some|Maybe?}}
Result Yeah! Nuh-uh Maybe?
Manual colors #9F9 #F99 #FFD

Code

If you want to add code, the syntax might interfere with the Mediawiki syntax. To prevent this from happening, place your code in one of the following preferred ways:

Fixed format text for short, single-line code.

Long code, spans entire width of the page.
Supports syntax highlighting of certain languages, like Python and HTML.
Change the lang="" attribute to the correct language, e.g. lang="python" or lang="html5"
Use lang="text" for non-supported languages.


 1You can also add line numbering.
 2
 3If your code is longer than, say, 50 lines, you can add a style attribute to introduce a scrollbar, as sampled here. For a 50-line cutoff, use style="height:50em; overflow:auto;".
 4Note that this method will cause the print version of the page to cut off the code at the line limit mark and not print the rest of the code.
 5I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page.
 6
 7<!-- Start Pirate Ipsum-->
 8Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 9Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
10Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
11<!-- End Pirate Ipsum-->

For command-line code, you can also style it like this for clarity: ping 127.0.0.1 -n 50 -l 1024

You could also use the <tt> <pre> and nowiki tags if better suited for your needs, whatever works best to present the code as clear and readable as possible.

Emoji

It is encouraged to use unicode emojis (which you can just copy-paste as text) in places where they can draw extra attention, help illustrate your point, or break up the monotony of a long text.

Be aware that emojis may be rendered differently in different browsers or operating systems, so try to pick ones that are common and unambiguous, and also recognizable at the scale they get reduced to when placed in-line on our Wiki. Also, Windows doesn't natively support flag emojis like 🇳🇱, for some reason.

Lastly, don't overdo the emojis, as that could make it seem like our wiki was written by AI.

Examples

ℹ️ This is a piece of (extra) information.

⚠️ This is a warning!

❌ This is a no-go!

✅ This is good.

✨ This is something new!

🚧 This is under construction.

🐽 Oink.

These are just examples; feel free to come up with your own conventions so we can later compare and discuss what works best.

Shields and Badges

Github-style shields or badges are useful for providing software details like programming language and licensing at a glance. There's a case to be made for our Wiki and Gitlab READMEs to use similar layouts and features for more uniformity in our documentation, and so badges could help with that too. Unfortunately, it is currently a bit of a faff to implement badges on our wiki, as hotlinking or injecting dynamic content from external sources is disabled for security reasons.

The workaround:

  1. Generate a badge at https://shields.io
  2. Create a new CSS rule in MediaWiki:Common.css (see examples at bottom)
  3. On the page you want to edit, add a custom span with class="shield" and the id as named in the CSS, e.g.: <span class="shield" id="shield-python310")></span>
  4. Add to the list of shields below.

Available Shields

<span class="shield" id="shield-python310")></span>

Banners

If a page is, or needs to be, significantly changed, you can put a banner on top to warn/inform visitors.

{{Notice|Did you know you could add banners?}}
{{Warn|'''Look Out!'''}}
{{Outdated}}

References

  1. Thumbnails 720px wide still fit comfortably within a browser window on half a 1920px desktop monitor.