Wiki Code Cookbook: Difference between revisions

From Portland NET Wiki
← Older edit
VisualWikitext
mNo edit summary
 
(64 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This cookbook is a repository of tips, tricks, and standards for the NETwiki. The intention is to make article writers better at formatting, and to create standards in the NETwiki that users will recognize to help guide them through the content and make it east to read.
=== See also ===
This article only goes over some more obscure/advanced stuff or things we want to call special attention to. There are '''''many''''' MediaWiki articles out there that will help with the basics of formatting in "source mode". A few favorites are:
* [[mediawikiwiki:Manual:FAQ#Basic_usage|Basics]] on page creation and editing in MediaWiki (MediaWiki powers NETwiki).
* [[mediawikiwiki:Cheatsheet|MediaWiki Cheatsheet]]: very basic text formats in markup.
* [[mediawikiwiki:Help:Formatting|Help Formatting]]: covers a lot of text basics and more.
* [https://www.vertex42.com/ExcelTips/unicode-symbols.html Unicode Library]: in case you need unusual symbols in your text.
* [https://www.scribbr.com/citation/generator/apa/ APA citation generator]: PBEM doesn't really care what format you publish citations in, but this is a quick and helpful APA citation generator.
* [[wikipedia:Web_colors|Web colors]]: The most exhaustive article I can find on web colors, including helpful color tables.
* [[wikibooks:Editing_Wikitext/Tables|Editing Wikitext/Tables]]: Great article on formatting tables in markup. You can find a similar article on tables [[wikipedia:Help:Table|HERE]].
* [[wikipedia:Template:Vertical_header/doc|Vertical headers]]: NETwiki is capable of publishing vertical headers in tables; the article will show you how.
* [https://www.portland.gov/officeofequity/equity-resources/inclusive-writing-guide City of Portland Inclusive Writing Guide]: The Inclusive Writing Guide is designed to help communicate in a way that serves the entire community. The importance of language is critical when navigating topics of race, ethnicity, disability, gender, gender identity, and sexual orientation.
<br>
__TOC__
__TOC__
</br>
<br>
 
== Basic Font Stuff ==
== Basic Font Stuff ==
It's much easier to change a font's style, such as into '''bold''' or ''italic'', using the [[wikipedia:WYSIWYG|WYSIWYG]] interface. But we do have a few NETwiki standards for these font styles to help keep our wiki readable.
It's much easier to change a font's style, such as into '''bold''' or ''italic'', using the [[wikipedia:WYSIWYG|WYSIWYG]] interface. But we do have a few NETwiki standards for these font styles to help keep our wiki readable.
Line 7: Line 22:
'''Bold:''' Used to bring emphasis to text, but be careful not to abuse it. Most effective when used sparingly.  
'''Bold:''' Used to bring emphasis to text, but be careful not to abuse it. Most effective when used sparingly.  


''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names or in some source citations. Otherwise, its use will usually be rejected by editors.
''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names, page referrals, or in some source citations. Otherwise, its use will usually be rejected by editors.


'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.  
'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.  
Line 43: Line 58:
<mark>'''NETwiki standard:'''</mark>
<mark>'''NETwiki standard:'''</mark>


* "Essential" should be a single line table in "firebrick" red, spanning 25% of the page, white bold text.  
* "Essential" should be a single line table in "firebrick" red, spanning 25% of the page, white bold text.
* "Supplemental" should be a single line table in "gold", spanning 25% of the page, white bold text.
* "Supplemental" should be a single line table in "gold", spanning 25% of the page, white bold text.


{|class="wikitable" style="width: 25%; "
{| class="wikitable" style="width: 25%; "
|+
|+
| style="background: firebrick; color: white" |'''Section Importance: Essential'''
| style="background: firebrick; color: white" |'''Section Importance: Essential'''
Line 58: Line 73:
</pre>
</pre>


{| class="wikitable" style="width: 25%;  
{| class="wikitable" style="width: 25%; "
|+
|+
|style="background: gold; color: black"|'''Section Importance: Supplemental'''
| style="background: gold; color: black" |'''Section Importance: Supplemental'''
|}
|}


Line 71: Line 86:


=== Simple yellow highlight on text ===
=== Simple yellow highlight on text ===
Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside the code you see below.
Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside <nowiki><mark> and </mark></nowiki>.
Example:  
Example:  
<mark>The quick brown fox</mark> jumps over the lazy dog.
<mark>The quick brown fox</mark> jumps over the lazy dog.
Line 94: Line 109:


In that example, I also made the text white. But naturally, you can <span style="background:purple; color:red">change the color</span><span style="background:orange; color:green"> of the text and background</span><span style="background:pink; color:grey"> to create all manner of page design monstrosity.</span>
In that example, I also made the text white. But naturally, you can <span style="background:purple; color:red">change the color</span><span style="background:orange; color:green"> of the text and background</span><span style="background:pink; color:grey"> to create all manner of page design monstrosity.</span>
<br>
<br>
== Table Adjustments ==
=== Setting table width ===
If you use a table but do not set a width, it can take up all the horizontal space available to it. That's not ''bad'' exactly, but it might look bad and/or defeat the purpose of having a table in the first place. You can control a table's width by assigning it a percentage of the screen's horizontal space, or by pixels.
==== Setting table width by percentage ====
Let's say you do not want a table to extend beyond 25% of the screen's width. You would mark that up as:
<pre>
{| class="wikitable" style="width: 25%;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}
</pre>
This gets you:
{| class="wikitable" style="width: 25%;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}
Note that the width of the individual columns will adjust spacing to fill 25% of the horizontal space. In this example, if all the content was the same size, all the columns would space evenly.
==== Setting table width by pixel ====
Same as the above, except you notate the percentage as the number of pixels instead. In this case, we'll set to 500 pixels.
<pre>
{| class="wikitable" style="width: 500;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}
</pre>
This gets you:
{| class="wikitable" style="width: 500;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}


== Media Embeds ==
== Media Embeds ==
Line 103: Line 186:
[[File:Video Embed Code.png]]
[[File:Video Embed Code.png]]


{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
Let's go over each part of this phrase in Wiki syntax; each part is '''''required''''' for the code to post successfully and each part must be segregated by the "|" symbol. The numbers in magenta correspond to the list below:
Let's go over each part of this phrase in Wiki syntax; each part is '''''required''''' for the code to post successfully and each part must be segregated by the "|" symbol. The numbers in magenta correspond to the list below:


Line 109: Line 193:
# '''youtube'''  this part should be completed according to which video service is going into the embed. In this example, it is YouTube, but it could be Vimeo if the embed is coming from Vimeo.
# '''youtube'''  this part should be completed according to which video service is going into the embed. In this example, it is YouTube, but it could be Vimeo if the embed is coming from Vimeo.
# '''1S2nuZsBz8g'''  this is the most important part of the embed. It is the unique identifier for the video you plan to use.
# '''1S2nuZsBz8g'''  this is the most important part of the embed. It is the unique identifier for the video you plan to use.
# '''430'''  this indicates the width of the video.  
# '''430'''  this indicates the width of the video.
# '''Right'''  this indicates where on the page the video will be aligned on the page. It can be right, left, or centered.  
# '''Right'''  this indicates where on the page the video will be aligned on the page. It can be right, left, or centered.
# This part of the phrase is the caption of the video that anyone viewing the page will see. It will not change a video's header title from Vimeo or YouTube.
# This part of the phrase is the caption of the video that anyone viewing the page will see. It will not change a video's header title from Vimeo or YouTube.
# '''Frame'''  I don't know what this actually means, just don't leave it out.  
# '''Frame'''  I don't know what this actually means, just don't leave it out.
# '''<nowiki>}}</nowiki>'''  closing braces.
# '''<nowiki>}}</nowiki>'''  closing braces.
<pre>
{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
</pre>
You can see the result to the right side of this page.


In English, this phrase of code is saying (imagine in your best wiseguy voice): "Hey NETwiki. I got a video embed job for ya. I want you to go to YouTube, see? And look up a mook named 1S2nuZsBz8g. You bring him back here, tell him he gotta lay off the cannoli because he has to fit into a frame 430 pixels wide. Put him in a chair on the right side of the screen. And then we're gonna address him as 'Exegesis addressing Kierkegaard's views on the meaning of life', because that's his name now, see? Now get goin."
<mark>'''NETwiki standard:'''</mark> We recommend (but do not require) right-aligned videos. Left aligned videos interfere with wrapping text and often don't look good. A video caption should always appear in bold text and begin as "'''Video: (title)'''". Width should consistently appear as 430 pixels. Obviously, no video should be posted that includes adult content (e.g. nothing the video would be slapped with [[wikipedia:Motion_Picture_Association_film_rating_system#Rating_components|an "R" rating]] for).
 
=== Google Calendar ===
 
# On the Google Calendar website, click on the <code>...</code> icon next to the calendar you want to share and click <code>Settings</code>
# In the "Integrate calendar" section, copy the text labeled "Public URL to this calendar". Example:  <code><nowiki>https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</nowiki></code>
# Remove the text up to and including the question mark. Example: <code>src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</code>
# Add <code>&mode=AGENDA</code> to the end.
# On the team page, add the wikitext <code>Special:IframePage/GoogleCalendar|path=</code> followed by your calendar code, surrounded by double curly-braces <code><nowiki>{{</nowiki></code> <code><nowiki>}}</nowiki></code>
 
Example: <code><nowiki>{{Special:IframePage/GoogleCalendar|path=src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles&mode=AGENDA}}</nowiki></code>
 
== Miscellaneous Tricks ==
 
=== Referring to a main article ===
NETwiki follows the standard found in Wikipedia: offset in italic with a link to the main article. For example:
:''Main article: [[Background Checks|Criminal Background Checks]]''
The markup to do something like that looks like this (note particularly the colon at the start of the line, which adds an indent):
<pre>
:''Main article: [[Background Checks|Criminal Background Checks]]''
</pre>
 
=== Reference Sections ===
Any page that includes references in the form of citations should have a reference section (specifically, a "Notes and References" section). To set that up, you need to do two things:set up a "Notes and References" section at the very bottom of a page, and then create reference citations by using the appropriate tag at the end of a sentence. Since doing these things shapes how a page is formatted, here is a sub-page that will act as a demonstration page for references:
:'''↳''' ''[[Wiki Code Cookbook/References Demonstration Page|References Demonstration Page]]''
For a quick reference here on the markup you need:
<pre>
<pre>
{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
== Notes and References ==
<references />
</pre>
That much is fairly simple. But say you want to cite the same footnote more than once. To do that, you have to assign a name to the reference. Click on the demonstration page above to see the code for it.
 
=== Horizontal lines ===
If you want to create a horizontal line to set off sections of text for any reason, the code is simple.
<pre>
<hr>
</pre>
</pre>
And here is the result:
...gets you the following horizontal line stretched across the page:
{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
<hr>
 
=== Color boxes ===
A color box is a widget that is, well, a colored box. Like so: {{color box|Green}}
 
Sometimes color boxes can be used to note specific sections and different meanings. There are a lot of tricks to creating color boxes; best is to visit: https://en.wikipedia.org/wiki/Template:Color_box
 
=== VSF Position Description Template ===
<nowiki>The Wiki includes a template for VSF position descriptions which can be activated by typing "{{VSF Position"</nowiki>
 
=== Link Templates ===
For example:
{| class="wikitable"
!Template
!Displays as
|-
|<nowiki>{{EmailLink|net@portlandoregon.gov}}</nowiki>
|{{EmailLink|addr=net@portlandoregon.gov}}
|-
|<nowiki>{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}</nowiki>
|{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}
|-
|<nowiki>{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}</nowiki>
|{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}
|}
Click on each template in the list below to understand how to use it:
 
* [[Template:EmailLink]]
* [[Template:GoogleDocLink]]
* [[Template:FacebookLink]]
* [[Template:GroupsLink]]
* [[Template:InstagramLink]]
* [[Template:SignalLink]]
 
== NET Team Pages ==
 
=== What Goes On A Team Page? ===
Your team page could be the single link your team hands out at block parties or when new neighbors move in.
 
Please consider it a "landing page" that describes aspects of emergency preparedness that are '''unique to your neighborhood'''. For example,
 
* For potential volunteers:
** provide ways to engage with the local team (e.g. team point of contact, public discussion forums)
** describe unique considerations (e.g. "we work closely with this school," "we meet at this location", "90% of Oregon's fuel supply passes through our neighborhood")
** team accomplishments (e.g. "we've deployed at warming shelters", "we provided first aid at this parade")
* For existing team members:
** recognize team positions (e.g. Team Leader, Amateur Radio Operators)
** contain important links (e.g. to a shared team folder, or to the Operations Plan)
 
Some content belongs elsewhere:
 
* News: this content often goes stale, and is better shared in team discussion forums.
* Orientation to the NET program: this is best centralized at PBEM, rather than re-written by individual teams.
* Tips for personal preparedness: this is best centralized at PublicAlerts.org, rather than re-written by individual teams.
 
=== Can other NET members edit my team's page? ===
Yes, and these contributions should be welcomed.
 
# Watch your team's page so you receive notifications when it's changed.
# If someone else's change needs improvement, improve it.
# If there is a disagreement that can't be resolved, send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for help.
=== Team Page Editing Checklist ===
 
# ✅ Review the [[NETwiki Content Creators and Editors]] page.
# <nowiki>✅ Update the names (e.g. Team Leader) and contact information in the {{</nowiki>[[Template:Team|Team]]<nowiki>}} template.</nowiki>
# ✅ Update your team's Earthquake Plan (née Operations Plan) by uploading it to the wiki with the name "Team Earthquake Plan - ''<team name>''.pdf". (''<team name>'' means the name visible at the top of your team's page, e.g. "TaborVilla", not the list of neighborhood names in the team page's URL.)
# <nowiki>✅ Add/update neighborhood populations in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://www.portland.gov/civic/myneighborhood/neighborhood-profile-maps Neighborhood Demographic Profiles] page.)
# <nowiki>✅ Add/update BEECN and fire station sites in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://pdx.maps.arcgis.com/apps/webappviewer/index.html?id=d3eaa87bf97148a78a5f358207259d72 BEECNs and Fire Stations] map.)
# <nowiki>✅ Add/update schools in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates.</nowiki>
# ✅ Use [[EditingTeamPages#Link Templates|#Link Templates]] for pretty little icons.
 
=== Can I Upload Photos Or Team Documents? ===
For most files, please upload them separately and link to them from your team pages.
 
Where to host different types of files:
{| class="wikitable"
!file type
!where to host it
|-
|small inline images (e.g. team members in action)
|NET wiki
|-
|small inline neighborhood map
|NET wiki
|-
|Operations plans
|NET wiki
|-
|Photo albums (e.g. team exercises)
|send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for an upload link for PBEM's Lightroom account, or
use 3rd-party hosting (e.g. Google Photos, Flickr)
|-
|Meeting minutes
|use 3rd-party file hosting (e.g. Google Drive)
|-
|Internal team documents (e.g. spreadsheets, planning documents)
|use 3rd-party file hosting (e.g. Google Drive)
|-
|Outreach materials
|use 3rd-party file hosting (e.g. Google Drive)
|}
Retrieved from "https://volunteerpdx.net/index.php/Wiki_Code_Cookbook"