Difference between pages "The Gentoo.org Redesign, Part 1" and "Help:Funtoo Editing Guidelines"

From Funtoo
(Difference between pages)
Jump to navigation Jump to search
(Created page with "{{Article |Subtitle=A site reborn |Summary=Have you ever woken up one morning and suddenly realized that your cute little personal development Web site isn't really that great...")
 
 
Line 1: Line 1:
{{Article
'''Thanks for your interest in contributing to the the Funtoo wiki!'''
|Subtitle=A site reborn
__NOTOC__
|Summary=Have you ever woken up one morning and suddenly realized that your cute little personal development Web site isn't really that great? If so, you're in good company. In this series, Daniel Robbins shares his experiences as he redesigns the www.gentoo.org Web site using technologies like XML, XSLT, and Python. Along the way, you may find some excellent approaches to use for your next Web site redesign. In this article, Daniel creates a user-centric action plan and introduces pytext, an embedded Python interpreter.
=== Types of Edits ===
|Author=Drobbins
}}
== An unruly horde ==


Fellow software developer, may I ask you a question? Why is it that although many of us are intimately familiar with Web technologies such as HTML, CGI, Perl, Python, Java technology, and XML, our very own Web sites -- the ones devoted to our precious development projects -- look like they were thrown together by an unruly horde of hyperactive 12-year-olds? Why, oh why, is this so?
Before we get started, let's review what changes are okay to make, and what changes are not okay:


Could it be because most of the time, we've left our Web site out to rot while we squander our precious time hacking away on our free software projects? The answer, at least in my case, is a most definite "Yes."
{{TableStart}}
<tr class="active"><th>Type of Change</th><th>Okay?</th></tr>
<tr><td>Grammar/spelling fixes</td><td>Yes</td></tr>
<tr><td>New wiki content</td><td>Yes</td></tr>
<tr><td>New package information</td><td>Yes</td></tr>
<tr><td>Adding to existing article</td><td>Maybe -- see below</td></tr>
<tr><td>Adding missing/incomplete information</td><td>Yes</td></tr>
<tr><td>Making corrections</td><td>Yes</td></tr>
<tr class="danger"><td>Adding work-arounds to problems experienced</td><td>No - open bug first on [http://bugs.funtoo.org bug tracker].</td></tr>
{{TableEnd}}


When I'm not writing articles for IBM developerWorks or being a new dad, I'm feverishly working on the next release of Gentoo Linux, along with my skilled team of volunteers. And, yes, Gentoo Linux has its own Web site (see Resources). As of right now (March 2001), our Web site isn't that special; that's because we don't spend much time working on it because we're generally engrossed in improving Gentoo Linux itself. Sure, our site does have several admittedly cute logos that I whipped up using Xara X (see Resources), but when you look past the eye candy, our site leaves a lot to be desired. Maybe yours does too. If so, I have one thing to say to you -- welcome to the club.
{{important|Note that if you experience some problem with Funtoo Linux, during installation or otherwise, the proper course of action is to not add a work-around to our documentation, but to ''open a bug on our bug tracker.'' This is important because the problem you experienced may be a legitimate bug and the solution may be to fix the bug rather than add a work-around to our documentation. We may end up fixing a bug, making a documentation fix, or possibly both.}}


== www.gentoo.org ==
=== Basics ===


In our case, our Web site dilemma exists because our project has been growing, and our Web site hasn't. Now that Gentoo Linux is approaching the 1.0 release (when it'll be officially ready for non-developers) and is growing in popularity, we need to start seriously looking at how our Web site can better serve its users. Here's a snapshot of www.gentoo.org:
Here is a list of basic wiki information that you will need to know to get started:


<div style="margin: 10px;">[[File:L-redesign-01.gif|frame|class=img-responsive|The current (March 2001) state of affairs at www.gentoo.org]]</div>
* First, to perform edits on the wiki, you must {{CreateAccount}} and log in.
* You can create a new page by navigating to http://www.funtoo.org/New_Page_Name. Underscores are the equivalent of spaces. Then select "Create" under the "Actions" menu.
* Whether creating a new page or editing an existing page by clicking "Edit", you will be presented with Web-based text editor that allows you to modify the ''wikitext'' of the page. The wikitext is rendered to produce the document you see when you view the page normally.
* Another fun thing you can do is click on your name under the "Account" menu once you have logged in. This will bring you to your "User" page. Then click "Create with Form" unde the "Actions" menu and enter your geographic and other information. This will allow you to be displayed on our [[Usermap]] and will also allow your full name to be displayed on [[:Category:Ebuilds|Ebuild pages]] for which you are an author. It's generally a good idea to do this.


As you can see, we have all the bare essentials -- a description of Gentoo Linux, a features list, a daily Changelog (automatically updated thanks to Python), and a bunch of important links (to the download sites, to our mailing list sign-up pages, and to cvsWeb). We also have links to three documentation resources -- the Gentoo Linux Install Guide and Development Guides, and Christian Zander's NVIDIA Troubleshooting Guide.
{{tip|The following sections document how to use wikitext and Funtoo templates on the Funtoo wiki.}}


However, while the site seems O.K., we're missing a lot of things. The most obvious is documentation -- our installation and development guides need a lot of work. And then we need to add an FAQ, new links, new user information...the list is endless.
=== Paragraphs ===


== Content vs. display ==
To create a new paragraph, insert a blank line between two lines of text. If a blank line doesn't exist between two lines of wikitext, they will be combined into a single flowing paragraph.


And now we come to our second problem. Right now, all of our work is done in raw HTML; I hack away at the index.html file until it looks O.K. Even worse, our Web documentation is written in raw HTML. This isn't a good thing from a development perspective because our raw content (consisting of paragraphs, sections, chapters) is garbled together with a bunch of display-related HTML tags. This, of course, makes it difficult to change both the content and the look of our site. While this approach has worked so far, it is bound to cause problems as our site continues to grow.
If you leave leading whitespace at the beginning of a line, MediaWiki will render it as pre-formatted text. Beware of this. Here's an example:


Clearly, we need to be using better technologies behind the scenes. Instead of using HTML directly, we need to start using things like XML, XSLT, and Python. The goal is to automate as much as possible so that we can add and expand our site with ease. If we do our job well, even major future changes to our site should be relatively painless.
foobar


== A strategy! ==
This can rear its ugly head when specifying template parameters, so you will get this:


It was clear that we had a lot of work ahead of us. In fact, there was so much to be done that I didn't know where to begin. Just as I was trying to sort out everything in my head, I came across Laura Wonnacott's "Site Savvy" InfoWorld column (see Resources). In it, she explained the concept of "user-centric" design -- how to improve a Web site while keeping the needs of your target audience (in this case, Gentoo Linux users and developers) in focus. Reading the article and taking a look at the "Handbook of User-Centered Design" link from the article helped me to formulate a strategy -- an action plan -- for the redesign:
{{note| ugh!}}


# First, clearly define the official goal of the Web site -- in writing. What's it there for, and what's it supposed to do?
...instead of this:
#  Identify the different categories of users who will be using your site -- your target audience. Rank them in order of priority: Which ones are most important to you?
# Set up a system for getting feedback from your target audience, so they can let you know what you're doing right and wrong.
# Evaluate the feedback, and use it to determine what parts of the site need to be improved or redesigned. Tackle high-priority sections first.
# Once you've selected the part of the site to improve, get to work! During your implementation, make sure that the content and design of the new section caters specifically to the needs of your target audience and fixes all known deficiencies.
# When the section redesign is complete, add it to your live site, even if it has a look that's markedly different from your current site. This way, your users can begin benefitting from the newly redesigned section immediately. If there's a problem with the redesign, you'll get user feedback more quickly. Finally, making incremental improvements to your site (rather than revamping the whole site and then rolling it out all at once -- surprise!) will help prevent your users from feeling alienated by your (possibly dramatic) site changes.
#  After completing step 6, jump to step 4 and repeat.


== The mission statement ==
{{note|This looks much better!}}


I was happy to discover that we already had step 3 in place. We had received several e-mail suggestions from visitors to the site, and our developer mailing list also served as a way of exchanging suggestions and comments. However, I had never really completed steps 1 or 2. While the answers may seem obvious, I did find it helpful to actually sit down and write out our mission statement:
=== Page and Section Capitalization ===


www.gentoo.org exists to assist those who use and develop for Gentoo Linux by providing relevant, up-to-date information about Gentoo Linux and Linux in general, focusing on topics related to Gentoo Linux installation, use, administration, and development. As the central hub for all things Gentoo, the site should also feature important news relevant to Gentoo Linux users and developers. In addition to catering to Gentoo Linux users and developers, www.gentoo.org has the secondary purpose of meeting the needs of potential Gentoo Linux users, providing the information they need to decide whether Gentoo Linux is right for them.
In general, capitalize all words in page names and section heading except:
* Articles: a, an, the
* Coordinating Conjunctions: and, but, or, for, nor, etc.
* Prepositions (fewer than five letters): on, at, to, from, by, etc.


== The target audience ==
=== Document Hierarchy ===


So far, so good. Now for step 2 -- defining our target audience:
Use section headings to create a document hierarchy for your page. These will define the table of contents that appears at the top of the wiki page. Create chapters, sections and sub-sections as follows:


www.gentoo.org has three target audiences -- Gentoo Linux developers, users, and potential users. While no one group is absolutely a higher priority than another, right now the needs of Gentoo Linux developers are our highest priority, followed by Gentoo Linux users, and then potential users. This is because Gentoo Linux is currently in a prerelease state. When Gentoo Linux reaches version 1.0, Gentoo Linux users and potential users will also become a priority.
<pre>= Page Title =


== Comments and suggestions ==
== Chapter Title ==


O.K., now it's time to evaluate the suggestions and comments we've collected:
=== Section Title ===


Over the past few months, we've received a number of suggestions from Web site visitors. Overwhelmingly, people are requesting better documentation -- for both developers and users. Several developers have asked if we could create a mailing list that would be devoted exclusively to describing CVS commits.
==== SubSection Title ====


Interestingly, we've also received a couple of e-mails asking whether Gentoo Linux is a commercial or free product. I'm guessing that because our main logo is inscribed with the name "Gentoo Technologies, Inc." (our legal corporation name), people assume that we have a commercial focus. Modifying our logo so that it reads "Gentoo Linux" and adding small opening paragraph to the main page explaining that we are a free software project should help.
</pre>


== The improvement list ==
{{Note|By default, Table of Contents is disabled on the Funtoo wiki. If you would like to enable the TOC, you can place a <code><nowiki>__TOC__</nowiki></code> on a blank line where you'd like the Table of Contents to appear, or place <code><nowiki>__FORCETOC__</nowiki></code> on a blank line anywhere in the wikitext to force the TOC to appear at the top of the page.}}


O.K., now let's turn these suggestions into a list of possible improvements:
In general, when creating new documents, it's best to use level-3 (three "="'s) Section Titles to break up content. Level-2 Section Titles are best used for major sections of larger documents. Use them infrequently. Level-1 Section Titles generally do not need to be used.


* Revamp main page
=== Links ===
** Implementation: update logo and add free software blurb
** Goal: to clearly state that we are a free software project
** Target group: potential users
**  Difficulty: medium
* Improve basic user documentation
**  Implementation: new XML/XSLT system, verbose documentation
** Goal: to make it easier for users to install Gentoo Linux
** Target group: new users
** Difficulty: medium
*Improve/create developer documentation
** Implementation: new XML/XSLT system, CVS guide, dev guide, Portage guide
**  Goal: to help our developers to do a great job
** Target group: developers
** Difficulty: hard
*Add a CVS mailing list
** Implementation: use our existing mailman mailing list manager
** Goal: to better inform our developers
** Target group: developers
** Difficulty: easy


== A selection! ==
Internal links to other wiki pages can be specified as <tt><nowiki>[[pagename]]</nowiki></tt>. To specify an alternate name for the link, use <tt><nowiki>[[pagename|my link name]]</nowiki></tt>.


Two things leap out from the list, for different reasons. The first is the CVS mailing list -- this one is a no-brainer because it's so easy to implement. Often, it makes sense to implement the easiest changes first so that users can benefit from them right away.
For external links, use <tt><nowiki>[http://funtoo.org my link]</nowiki></tt> to specify a URL. If you want the URL to appear in the wikitext, you can specify it without brackets: http://forums.funtoo.org.


The second big thing that leaps out from the list is the need for developer documentation. This is a longer-term project that will require much more work. From my conversations with the other developers, we all appear to be in agreement that some kind of XML/XSL approach is the right solution.
=== Lists ===


== The XML/XSL prototype ==
MediaWiki supports a number of list formats:


To help start the process, I developed a prototype XML syntax to be used for all our online documentation. By using this XML syntax (called "guide"), our documentation will be clearly organized into paragraphs, sections, and chapters (using XML tags like <section>, <chapter>, etc.) while remaining free of any display-related tags. To create the HTML for display on our site, I created a prototype set of XSL transforms. By using an XSLT processor such as Sablotron, our guide XML files can be converted into HTML as follows:
* Unordered List
* Unordered Item 2
** Unordered sub-item


devguide.xml + guide.xsl ---XSLT processor---> devguide.html
# Ordered List
# Ordered Item 2
## Ordered sub-item


The great thing about this XML/XSLT approach is that it separates our raw content (XML) from the display-related information contained in the guide.xsl (XSLT) file. If we ever need to update the look of our Web pages, we simply modify the guide.xsl file and run all our XML through the XSLT processor (Sablotron), creating updated HTML pages. Or, if we need to add a few chapters to the development guide, we can modify devguide.xml. Once we're done, we then run the XML through Sablotron, which then spits out a fully-formatted devguide.html file with several added chapters. Think of XML as the content and XSLT as the display-related formatting macros.
;Term: This is called a "definition list". It is used when defining various terms.


While our entire team is convinced that XML/XSLT is the way to go, we haven't yet agreed upon an official XML syntax. Achim, our development lead, suggested that we use docbook instead of rolling our own XML syntax. However, the prototype guide XML format has helped to start the decision-making process. Because we developers are going to be the ones using the XML/XSL on a daily basis, it's important to choose a solution that we're comfortable with and meets all of our needs. By my next article, I should have a working XML/XSL doc system to show off to you.
If you need to quote a portion of text from another site, use <tt><nowiki><blockquote></nowiki></tt> as follows:


== Technology demo: pytext ==
<blockquote>
Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access, free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google, the largest with 1.2 billion unique visitors."[10]
</blockquote>


For the most part, our current Web site isn't using any new or super-cool technologies that are worth mentioning. However, there's one notable exception -- our tiny pytext embedded Python interpreter.
=== Literal Text and HTML Symbols ===


Like many of you, I'm a huge Python fan and much prefer it over other scripting languages, so when it came time to add some dynamic content to our Web site, I naturally wanted to use Python. And, as you probably know, when coding dynamic HTML content, it's usually much more convenient to embed the language commands inside the HTML, rather than the other way around. Thus, the need for an embedded Python interpreter that can take a document like this:
Here is wikitext for the section above, which I am displaying by placing the literal wikitext between a &#60;pre&#62; and &#60;/pre&#62; tag. If you want to disable wikitext processing for an inline span of text, use &#60;nowiki&#62; and &#60;/nowiki&#62;. If you want to print out a tag literally, use &amp;#60; and &amp;#62; (In the wikitext, I used &amp;amp;#60; and &amp;amp;#62 to display these!)


<pre>
<pre>
<p>
* Unordered List
Yeah, sure; I got some questions:<br>
* Unordered Item 2
<!--code
** Unordered sub-item
names=["bob","jimmy","ralph"]
 
items=["socks","lunch","accordion"]
# Ordered List
for x in items:
# Ordered Item 2
for y in names:
## Ordered sub-item
print "Anyone seen",y+"'s",x+"?<br>"
 
-->
;Term: This is called a "definition list". It is used when defining various terms.
See, told you so.
 
If you need to quote a portion of text from another site, use <tt><nowiki><blockquote></nowiki></tt> as follows:
 
<blockquote>
Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access,
free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers
worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the
English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet
comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York
Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views
and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google,  
the largest with 1.2 billion unique visitors."[10]
</blockquote>
</pre>
</pre>


....and transform it into this:
=== Linking to Packages ===
 
To link to a package page, use the <code>Package</code> template:
 
<pre><nowiki>
{{Package|sys-apps/portage}}
</nowiki></pre>
 
This template will create a link to the official wiki page for sys-apps/portage, and render using the official "English" page name, as follows:
 
{{Package|sys-apps/portage}}
 
If you specify a yet-to-be-documented ebuild, it will render like this (which is okay -- it will encourage people to document it):
 
{{Package|sys-foo/undocumented-ebuild}}
 
=== Tables ===
 
Instead of using traditional MediaWiki table wikitext, use the following format:


<pre>
<pre>
<p>
{{TableStart}}
Yeah, sure; I got some questions:<br>
<tr class="info"><th>Header 1</th><th>Header 2</th></tr>
Anyone seen bob's socks?<br>
<tr><td>Value 1</td><td>Value 2</td></tr>
Anyone seen jimmy's socks?<br>
<tr><td>Value 3</td><td>Value 4</td></tr>
Anyone seen ralph's socks?<br>
{{TableEnd}}
Anyone seen bob's lunch?<br>
Anyone seen jimmy's lunch?<br>
Anyone seen ralph's lunch?<br>
Anyone seen bob's accordion?<br>
Anyone seen jimmy's accordion?<br>
Anyone seen ralph's accordion?<br>
See, told you so.
</pre>
</pre>


Here's the source code for pytext:
This wil render as follows:
 
{{TableStart}}
<tr class="info"><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Value 1</td><td>Value 2</td></tr>
<tr><td>Value 3</td><td>Value 4</td></tr>
{{TableEnd}}
 
{{tip|This table syntax has an added benefit of creating a responsive table that renders properly on mobile devices.}}
 
It is possible to use the following CSS classes with <code>tr</code> (rows) and <code>td/th</code> elements to color them as desired:


Code Listing 2.4:
{{TableStart}}
{{file|name=pytext|lang=python|desc=The pytext embedded Python interpreter|body=
<tr class="active"><td>Class Name</td></tr>
#!/usr/bin/env python2
<tr class="success"><td>success</td></tr>
<tr class="info"><td>info</td></tr>
<tr class="warning"><td>warning</td></tr>
<tr class="active"><td>active</td></tr>
<tr class="danger"><td>danger</td></tr>
{{TableEnd}}


# pytext 2.1
=== Displaying Source Code ===
# Copyright 1999-2001 Daniel Robbins
# Distributed under the GPL


import sys
To display source code, use can use the file template, specifying a <tt>lang=</tt> parameter:
 
<pre>
{{file|name=foobar|lang=python|desc=foobarosity|body=
import system
}}
</pre>


def runfile(myarg):
This will produce:
  "interprets a text file with embedded elements"
  mylocals={}
  try:
      a=open(myarg,'r')
  except IOError:
      sys.stderr.write("!!! Error opening "+myarg+"!\n")
      return
  mylines=a.readlines()
  a.close()
  pos=0
  while pos<len(mylines):
      if mylines[pos][0:8]=="<!--code":
  mycode=""
  pos=pos+1
  while (pos<len(mylines)) and (mylines[pos][0:3]!="-->"):
      mycode=mycode+mylines[pos]
      pos=pos+1
  exec(mycode,globals(),mylocals)
      else:
  sys.stdout.write(mylines[pos])
      pos=pos+1


if len(sys.argv)>1:
{{file|name=foobar|lang=python|desc=foobarosity|body=
  for x in sys.argv[1:]:
import system
      runfile(x)
  sys.exit(0)
else:
  sys.stderr.write
    ("pytext 2.1 -- Copyright 1999-2001 Daniel Robbins. ")
  sys.stderr.write
    ("Distributed under the\nGNU Public License\n\n")
  sys.stderr.write
    ("Usage: "+sys.argv[0]+" file0 [file1]...\n")
  sys.exit(1)
}}
}}


== How pytext works ==
The parameters {{c|name}} (filename), {{c|lang}} (language for syntax highlighting) and {{c|desc}} (Description, appearing as a caption) are optional. For a list of supported languages, see [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi#Supported_languages this list].
 
 
{{important|If you need to display the pipe ("{{!}}") character within the body of a file template, replace each "{{!}}" with <nowiki>{{!}}</nowiki> -- otherwise your file contents will not display properly. This is necessary because <nowiki>{{file}}</nowiki> is a template and the "{{!}}" character is used as a delimiter for arguments to the template.}}


Here's how it works. It scans each input line, and most of the time, each input line is simply echoed to stdout. However, if pytext encounters a line beginning with <!--code, then the contents of every line up to the first line beginning with --> are appended to a string called mycode. Pytext then executes the mycode string using the built-in exec() function, effectively creating an embedded Python interpreter.
=== Displaying Text File Contents ===


There's something really beautiful about this particular implementation -- we call exec() in such a way that all modifications to the global and local namespaces are saved. This makes it possible to import a module or define a variable in one embedded block, and then access this previously-created object in a later block, as this example clearly demonstrates:
For displaying the contents of non-programming language text files (like config files), you have two options. You can enclose your lines within <tt>&#60;pre&#62;</tt> tags, or use the new [[Template:File|file template]]. The file template is used like so:


<pre>
<pre>
<!--code
{{file|name=/etc/foo.conf|desc=My foo.conf file|body=
import os
# /etc/host.conf:
foo=23
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29
-->
}}
</pre>
 
This will produce:
 
{{file|name=/etc/foo.conf|desc=My foo.conf file|body=
# /etc/host.conf:
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29
}}


Hello
=== Console ===
To display console output, use the <tt>&#60;console&#62;</tt> tag:


<!--code
For a root console:
print foo
<pre>
if os.path.exists("/tmp/mytmpfile"):
<console>
print "it exists"
###i## run a command as root
else:
</console>
print "I don't see it"
-->
</pre>
</pre>
Produces:
<console>
###i## run a command as root
</console>


Handy, eh? pytext serves is an excellent demonstration of the power of Python, and is an extremely useful tool for Python fans. For our current site, we call pytext from a cron job, using it to periodically generate the HTML code for our main page Changelog:
For a non-root console:
<pre>
<console>
$ ##i##run a command as user
</console>
</pre>
Produces:
<console>
$ ##i##run a command as user
</console>
 
{{important|1=
Note that we use a <tt>#</tt> prompt for <tt>root</tt> and a <tt>$</tt> prompt to denote a non-root user.}}
 
{{important|The <tt>##i##</tt> text tags the rest of the line as being ''user input'' ("i" is for "input"). It is then highlighted in a noticeable color so it stands out from text that is not typed in by the user.}}
 
If you need to end highlighting of user input prior to the end of a line, use <code>##!i##</code> to mark the end of the highlighted area.
 
The following special character sequences are also available:
* <code>##g##</code> - Green
* <code>##y##</code> - Yellow
* <code>##bl##</code> - Blue
* <code>##r##</code> - Red
* <code>##b##</code> - Bold
 
Please use the above coloring options sparingly. It is sometimes nice to use them to get wiki console output to match the colors that are displayed on a Linux console. Also note that for every color above, there is a matching <code>##!(colorcode)##</code> option to turn color off prior to end of line.


<console>
Here is an example of its use:<console>
$ ##i##pytext index.ehtml > index.html
# ##i##bluetoothctl
[##g##NEW##!g##] Controller 00:02:72:C9:62:65 antec [default]
##bl##[bluetooth]##!bl###power on
Changing power on succeeded
##bl##[bluetooth]##!bl### ##i##agent on
Agent registered
##bl##[bluetooth]##!bl### ##i##scan on
Discovery started
##bl##[bluetooth]##!bl### ##i##devices
Device 00:1F:20:3D:1E:75 Logitech K760
##bl##[bluetooth]##!bl### ##i##pair 00:1F:20:3D:1E:75
Attempting to pair with 00:1F:20:3D:1E:75
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
##r##[agent]##!r## Passkey: 454358
##r##[agent]##!r## Passkey: ##i##4##!i##54358
##r##[agent]##!r## Passkey: ##i##45##!i##4358
##r##[agent]##!r## Passkey: ##i##454##!i##358
##r##[agent]##!r## Passkey: ##i##4543##!i##58
##r##[agent]##!r## Passkey: ##i##45435##!i##8
##r##[agent]##!r## Passkey: ##i##454358##!i##
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: no
##bl##[bluetooth]##!bl### ##i##connect 00:1F:20:3D:1E:75
Attempting to connect to 00:1F:20:3D:1E:75
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
Connection successful
##bl##[bluetooth]##!bl### ##i##quit
[##r##DEL##!r##] Controller 00:02:72:C9:62:65 antec [default]
#
</console>
</console>


That's it for now; I'll see you next time when we'll take a look at the first stage of the www.gentoo.org redesign!
=== Informational Messages ===
{{ArticleFooter}}
Notes, warnings, tips, and important templates can be used for informational messages that need to be offset from the regular text flow:
 
<pre>{{note|this is a note}}</pre>
{{note|this is a note}}
 
<pre>{{important|this is important}}</pre>
{{important|this is important}}
 
<pre>{{warning|this is a warning}}</pre>
{{warning|this is a warning}}
 
<pre>{{tip|this is a tip}}</pre>
{{tip|this is a tip}}
 
Note that these templates used to be called <code>fancynote</code>, <code>fancytip</code>, etc. The "fancy" names have been deprecated but will still be supported for the forseeable future.
 
=== Kernelop ===
To display kernel configuration options, we encourage you to use the <tt>kernelop</tt> template. To use the <tt>kernelop</tt> template, create an entry similar to the following example:
<pre>
{{kernelop|title=foo,bar|desc=
kernel options pasted from "make menuconfig"
}}
</pre>
 
{{note|Kernelop is colored blue to slightly resemble the blueish background from <tt>make menuconfig</tt>.}}
 
Adding this entry will give you the following output:
{{kernelop|title=foo,bar|desc=
kernel options
}}
 
Here's a more concrete example:
{{kernelop|title=File systems|desc=
<M> Second extended fs support         
[ ]  Ext2 extended attributes         
[ ]  Ext2 execute in place support   
<M> Ext3 journalling file system support
}}
 
Examples of usage:
* [[Package:AMD Catalyst Video Drivers]]
* [[Package:ACPI Daemon]]
* [[Microcode]]
 
=== Discussion Pages ===
 
In MediaWiki, every "regular" wiki page has a corresponding "Talk" or "Discussion" page which has a page name prefixed by "Talk:" -- you can get to this page by going to the "Action" menu, and then choosing the "Discussion" menu item. These talk pages are typically used to discuss the edits that are going on in the "main" wiki page. The problem with talk pages is that they are kind of a pain to use. However, we have a way to fix that. If you want to enable a DISQUS-based mini-forum on a talk page, insert the following wikitext on the Talk page:
 
<pre>
{{DISQUS}}
</pre>
 
...and presto! You will now have DISQUS-powered mini-forums to discuss whatever you want about your wiki page.
 
== Marking Pages as Needing Updates ==
 
If you find outdated wiki content, but you don't have the time or ability to update it, add one of the following templates to the wikitext of the page. This will add the page to the [[:Category:Needs Updates|Needs Updates Category]] so we can identify pages that need updating:
 
<pre>
{{PageNeedsUpdates}}
{{SectionNeedsUpdates}}
</pre>
 
 
Examples of usage:
* [[UEFI Install Guide]]
* [[Package:MediaWiki]]
* [[Clang]]
 
=== Inline Code ===
 
To emphasize commands, and other technical jargon when they appear inline in a paragraph, use the <nowiki>{{c}}</nowiki> template. When referencing files, use the <nowiki>{{f}}</nowiki> template.
 
<pre>
The {{f|/etc/fstab}} file is an important one. Another important file is {{f|/boot/grub/grub.cfg}}. The {{c|emerge}} command is really nifty.
</pre>
 
This example produces the following output:
 
The {{f|/etc/fstab}} file is an important one. Another important file is {{f|/boot/grub/grub.cfg}}. The {{c|emerge}} command is really nifty.
 
{{important|1=
The &#60;tt&#62; tag has been deprecated for the purpose of tagging inline code, to conform with HTML5, and the previous use of the &#60;code&#62; tag is discouraged. It is more maintainable to use the <nowiki>{{c}}</nowiki> template. }}
 
=== Slideshow ===
 
Any page has the capability of displaying a slideshow. Adding a slideshow to a page involves three steps:
 
# Upload Images
# Define Slides
# Add Slideshow to page
 
==== Upload Images ====
 
To upload images, head to [[Special:Upload]] and upload a file. It is highly recommended to upload JPEG format images in high resolution -- MediaWiki will handle scaling JPEG automatically, saving bandwidth, but does not do this for PNG. Make sure that all images you upload have the same dimensions. When you upload, make note of the '''Destination Filename''' field -- this is the name that the upload will use when you reference it in your slide. It is recommended that you choose a simple descriptive name ending in ".jpg" for the '''Destination Filename'''.
 
==== Define Slides ====
 
Once images have been uploaded, you must define slides. To define slides on a page, you enter special semantic information about the slide on the page that it will be displayed, in the following format:
 
<pre><nowiki>
{{#subobject:|slideIndex=0|slideCaption=
== Wikitext Here ==
This is a fantastic slide!
|slideImage=File:Fruit.jpg|slideLink=PageName}}
</nowiki></pre>
 
Here are some important instructions regarding defining slides:
 
* <code>slideIndex</code> must be 0 for the first slide, 1 for the second slide, etc. Numbers must be unique and incrementing from zero, and not doing this will result in slideshow display errors (but can be easily fixed by correcting the wikitext.)
* <code>slideCaption=</code> can contain wikitext, such as headings and links. The best way to enter <code>slideCaption</code> is as above -- type a literal <code>slideCaption=</code>, followed by enter, then specify your wikitext, and terminate the caption by a single pipe character on the following line. Pipe characters are used to separate arguments from each other.
* Specify your image name in the <code>slideImage</code> field. Your slideImage will have a name of <code>File:myname.jpg</code>, where <code>myname.jpg</code> is the '''Destination Filename''' you used when uploading the image.
* An optional parameter called <code>slideLink=</code> can be provided to allow the image to be clickable and link to another wiki page. If it is omitted, then the image will not be clickable.
 
==== Add Slideshow to Page ====
 
Once the slides have been added to the page, you can add the following text to your page at the point you'd like the slideshow to appear:
<pre>
{{Slideshow}}
</pre>
 
=== YouTube Videos (Screencasts, etc.) ===
 
Screencasting is an easy method to explain complex tasks. Take for instance <code>youtu.be/5KDei5mBfSg</code> and chop off the id and insert it into the following syntax to produce a video example.
 
<pre>{{#widget:YouTube16x9|id=5KDei5mBfSg}}</pre>
{{#widget:YouTube16x9|id=5KDei5mBfSg}}
 
{{tip|The sample video above explains how to create your own screencasts under Funtoo Linux.}}
 
Most YouTube videos are in 16x9 format and should use the <code>YouTube16x9</code> widget. There is also a <code>YouTube4x3</code> widget for videos with a 4x3 aspect ratio.
{{note|These YouTube widgets have been updated to be mobile-friendly.}}
 
[[Category:Wiki Development]]

Revision as of 07:38, January 4, 2015

Thanks for your interest in contributing to the the Funtoo wiki!

Types of Edits

Before we get started, let's review what changes are okay to make, and what changes are not okay:

Type of ChangeOkay?
Grammar/spelling fixesYes
New wiki contentYes
New package informationYes
Adding to existing articleMaybe -- see below
Adding missing/incomplete informationYes
Making correctionsYes
Adding work-arounds to problems experiencedNo - open bug first on bug tracker.
   Important

Note that if you experience some problem with Funtoo Linux, during installation or otherwise, the proper course of action is to not add a work-around to our documentation, but to open a bug on our bug tracker. This is important because the problem you experienced may be a legitimate bug and the solution may be to fix the bug rather than add a work-around to our documentation. We may end up fixing a bug, making a documentation fix, or possibly both.

Basics

Here is a list of basic wiki information that you will need to know to get started:

  • First, to perform edits on the wiki, you must Create a Funtoo account and log in.
  • You can create a new page by navigating to http://www.funtoo.org/New_Page_Name. Underscores are the equivalent of spaces. Then select "Create" under the "Actions" menu.
  • Whether creating a new page or editing an existing page by clicking "Edit", you will be presented with Web-based text editor that allows you to modify the wikitext of the page. The wikitext is rendered to produce the document you see when you view the page normally.
  • Another fun thing you can do is click on your name under the "Account" menu once you have logged in. This will bring you to your "User" page. Then click "Create with Form" unde the "Actions" menu and enter your geographic and other information. This will allow you to be displayed on our Usermap and will also allow your full name to be displayed on Ebuild pages for which you are an author. It's generally a good idea to do this.
   Tip

The following sections document how to use wikitext and Funtoo templates on the Funtoo wiki.

Paragraphs

To create a new paragraph, insert a blank line between two lines of text. If a blank line doesn't exist between two lines of wikitext, they will be combined into a single flowing paragraph.

If you leave leading whitespace at the beginning of a line, MediaWiki will render it as pre-formatted text. Beware of this. Here's an example:

foobar

This can rear its ugly head when specifying template parameters, so you will get this:

   Note
ugh!

...instead of this:

   Note

This looks much better!

Page and Section Capitalization

In general, capitalize all words in page names and section heading except:

  • Articles: a, an, the
  • Coordinating Conjunctions: and, but, or, for, nor, etc.
  • Prepositions (fewer than five letters): on, at, to, from, by, etc.

Document Hierarchy

Use section headings to create a document hierarchy for your page. These will define the table of contents that appears at the top of the wiki page. Create chapters, sections and sub-sections as follows:

= Page Title =

== Chapter Title ==

=== Section Title ===

==== SubSection Title ====

   Note

By default, Table of Contents is disabled on the Funtoo wiki. If you would like to enable the TOC, you can place a __TOC__ on a blank line where you'd like the Table of Contents to appear, or place __FORCETOC__ on a blank line anywhere in the wikitext to force the TOC to appear at the top of the page.

In general, when creating new documents, it's best to use level-3 (three "="'s) Section Titles to break up content. Level-2 Section Titles are best used for major sections of larger documents. Use them infrequently. Level-1 Section Titles generally do not need to be used.

Links

Internal links to other wiki pages can be specified as [[pagename]]. To specify an alternate name for the link, use [[pagename|my link name]].

For external links, use [http://funtoo.org my link] to specify a URL. If you want the URL to appear in the wikitext, you can specify it without brackets: http://forums.funtoo.org.

Lists

MediaWiki supports a number of list formats:

  • Unordered List
  • Unordered Item 2
    • Unordered sub-item
  1. Ordered List
  2. Ordered Item 2
    1. Ordered sub-item
Term
This is called a "definition list". It is used when defining various terms.

If you need to quote a portion of text from another site, use <blockquote> as follows:

Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access, free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google, the largest with 1.2 billion unique visitors."[10]

Literal Text and HTML Symbols

Here is wikitext for the section above, which I am displaying by placing the literal wikitext between a <pre> and </pre> tag. If you want to disable wikitext processing for an inline span of text, use <nowiki> and </nowiki>. If you want to print out a tag literally, use &#60; and &#62; (In the wikitext, I used &amp;#60; and &amp;#62 to display these!)

* Unordered List
* Unordered Item 2
** Unordered sub-item

# Ordered List
# Ordered Item 2
## Ordered sub-item

;Term: This is called a "definition list". It is used when defining various terms.

If you need to quote a portion of text from another site, use <tt><blockquote></tt> as follows:

<blockquote>
Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access, 
free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers
worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the 
English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet 
comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York 
Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views 
and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google, 
the largest with 1.2 billion unique visitors."[10]
</blockquote>

Linking to Packages

To link to a package page, use the Package template:

{{Package|sys-apps/portage}}

This template will create a link to the official wiki page for sys-apps/portage, and render using the official "English" page name, as follows:

sys-apps/portage

If you specify a yet-to-be-documented ebuild, it will render like this (which is okay -- it will encourage people to document it):

No results

Tables

Instead of using traditional MediaWiki table wikitext, use the following format:

{{TableStart}}
<tr class="info"><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Value 1</td><td>Value 2</td></tr>
<tr><td>Value 3</td><td>Value 4</td></tr>
{{TableEnd}}

This wil render as follows:

Header 1Header 2
Value 1Value 2
Value 3Value 4
   Tip

This table syntax has an added benefit of creating a responsive table that renders properly on mobile devices.

It is possible to use the following CSS classes with tr (rows) and td/th elements to color them as desired:

Class Name
success
info
warning
active
danger

Displaying Source Code

To display source code, use can use the file template, specifying a lang= parameter:

{{file|name=foobar|lang=python|desc=foobarosity|body=
import system
}}

This will produce:

   foobar (python source code) - foobarosity
import system

The parameters name (filename), lang (language for syntax highlighting) and desc (Description, appearing as a caption) are optional. For a list of supported languages, see this list.


   Important

If you need to display the pipe ("|") character within the body of a file template, replace each "|" with {{!}} -- otherwise your file contents will not display properly. This is necessary because {{file}} is a template and the "|" character is used as a delimiter for arguments to the template.

Displaying Text File Contents

For displaying the contents of non-programming language text files (like config files), you have two options. You can enclose your lines within <pre> tags, or use the new file template. The file template is used like so:

{{file|name=/etc/foo.conf|desc=My foo.conf file|body=
# /etc/host.conf:
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29
}}

This will produce:

   /etc/foo.conf - My foo.conf file
# /etc/host.conf:
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29

Console

To display console output, use the <console> tag:

For a root console:

<console>
###i## run a command as root
</console>

Produces:

root # run a command as root

For a non-root console:

<console>
$ ##i##run a command as user
</console>

Produces:

user $ run a command as user
   Important

Note that we use a # prompt for root and a $ prompt to denote a non-root user.

   Important

The ##i## text tags the rest of the line as being user input ("i" is for "input"). It is then highlighted in a noticeable color so it stands out from text that is not typed in by the user.

If you need to end highlighting of user input prior to the end of a line, use ##!i## to mark the end of the highlighted area.

The following special character sequences are also available:

  • ##g## - Green
  • ##y## - Yellow
  • ##bl## - Blue
  • ##r## - Red
  • ##b## - Bold

Please use the above coloring options sparingly. It is sometimes nice to use them to get wiki console output to match the colors that are displayed on a Linux console. Also note that for every color above, there is a matching ##!(colorcode)## option to turn color off prior to end of line.

Here is an example of its use:

root # bluetoothctl 
[NEW] Controller 00:02:72:C9:62:65 antec [default]
root ##bl##[bluetooth]##!bl###power on
Changing power on succeeded
root ##bl##[bluetooth]##!bl### agent on
Agent registered
root ##bl##[bluetooth]##!bl### scan on
Discovery started
root ##bl##[bluetooth]##!bl### devices
Device 00:1F:20:3D:1E:75 Logitech K760
root ##bl##[bluetooth]##!bl### pair 00:1F:20:3D:1E:75
Attempting to pair with 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
[CHG] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[CHG] Device 00:1F:20:3D:1E:75 Connected: no
root ##bl##[bluetooth]##!bl### connect 00:1F:20:3D:1E:75
Attempting to connect to 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
Connection successful
root ##bl##[bluetooth]##!bl### quit
[DEL] Controller 00:02:72:C9:62:65 antec [default]
root #

Informational Messages

Notes, warnings, tips, and important templates can be used for informational messages that need to be offset from the regular text flow:

{{note|this is a note}}
   Note

this is a note

{{important|this is important}}
   Important

this is important

{{warning|this is a warning}}
   Warning

this is a warning

{{tip|this is a tip}}
   Tip

this is a tip

Note that these templates used to be called fancynote, fancytip, etc. The "fancy" names have been deprecated but will still be supported for the forseeable future.

Kernelop

To display kernel configuration options, we encourage you to use the kernelop template. To use the kernelop template, create an entry similar to the following example:

{{kernelop|title=foo,bar|desc=
kernel options pasted from "make menuconfig"
}} 
   Note

Kernelop is colored blue to slightly resemble the blueish background from make menuconfig.

Adding this entry will give you the following output: Under foo-->bar:

kernel options

Here's a more concrete example: Under File systems:

<M> Second extended fs support          
[ ]   Ext2 extended attributes          
[ ]   Ext2 execute in place support     
<M> Ext3 journalling file system support

Examples of usage:

Discussion Pages

In MediaWiki, every "regular" wiki page has a corresponding "Talk" or "Discussion" page which has a page name prefixed by "Talk:" -- you can get to this page by going to the "Action" menu, and then choosing the "Discussion" menu item. These talk pages are typically used to discuss the edits that are going on in the "main" wiki page. The problem with talk pages is that they are kind of a pain to use. However, we have a way to fix that. If you want to enable a DISQUS-based mini-forum on a talk page, insert the following wikitext on the Talk page:

{{DISQUS}}

...and presto! You will now have DISQUS-powered mini-forums to discuss whatever you want about your wiki page.

Marking Pages as Needing Updates

If you find outdated wiki content, but you don't have the time or ability to update it, add one of the following templates to the wikitext of the page. This will add the page to the Needs Updates Category so we can identify pages that need updating:

{{PageNeedsUpdates}}
{{SectionNeedsUpdates}}


Examples of usage:

Inline Code

To emphasize commands, and other technical jargon when they appear inline in a paragraph, use the {{c}} template. When referencing files, use the {{f}} template.

The {{f|/etc/fstab}} file is an important one. Another important file is {{f|/boot/grub/grub.cfg}}. The {{c|emerge}} command is really nifty.

This example produces the following output:

The /etc/fstab file is an important one. Another important file is /boot/grub/grub.cfg. The emerge command is really nifty.

   Important

The <tt> tag has been deprecated for the purpose of tagging inline code, to conform with HTML5, and the previous use of the <code> tag is discouraged. It is more maintainable to use the {{c}} template.

Slideshow

Any page has the capability of displaying a slideshow. Adding a slideshow to a page involves three steps:

  1. Upload Images
  2. Define Slides
  3. Add Slideshow to page

Upload Images

To upload images, head to Special:Upload and upload a file. It is highly recommended to upload JPEG format images in high resolution -- MediaWiki will handle scaling JPEG automatically, saving bandwidth, but does not do this for PNG. Make sure that all images you upload have the same dimensions. When you upload, make note of the Destination Filename field -- this is the name that the upload will use when you reference it in your slide. It is recommended that you choose a simple descriptive name ending in ".jpg" for the Destination Filename.

Define Slides

Once images have been uploaded, you must define slides. To define slides on a page, you enter special semantic information about the slide on the page that it will be displayed, in the following format:

{{#subobject:|slideIndex=0|slideCaption=
== Wikitext Here ==
This is a fantastic slide!
|slideImage=File:Fruit.jpg|slideLink=PageName}}

Here are some important instructions regarding defining slides:

  • slideIndex must be 0 for the first slide, 1 for the second slide, etc. Numbers must be unique and incrementing from zero, and not doing this will result in slideshow display errors (but can be easily fixed by correcting the wikitext.)
  • slideCaption= can contain wikitext, such as headings and links. The best way to enter slideCaption is as above -- type a literal slideCaption=, followed by enter, then specify your wikitext, and terminate the caption by a single pipe character on the following line. Pipe characters are used to separate arguments from each other.
  • Specify your image name in the slideImage field. Your slideImage will have a name of File:myname.jpg, where myname.jpg is the Destination Filename you used when uploading the image.
  • An optional parameter called slideLink= can be provided to allow the image to be clickable and link to another wiki page. If it is omitted, then the image will not be clickable.

Add Slideshow to Page

Once the slides have been added to the page, you can add the following text to your page at the point you'd like the slideshow to appear:

{{Slideshow}}

YouTube Videos (Screencasts, etc.)

Screencasting is an easy method to explain complex tasks. Take for instance youtu.be/5KDei5mBfSg and chop off the id and insert it into the following syntax to produce a video example.

{{#widget:YouTube16x9|id=5KDei5mBfSg}}

   Tip

The sample video above explains how to create your own screencasts under Funtoo Linux.

Most YouTube videos are in 16x9 format and should use the YouTube16x9 widget. There is also a YouTube4x3 widget for videos with a 4x3 aspect ratio.

   Note

These YouTube widgets have been updated to be mobile-friendly.