documentation:website:markup – Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Website: Markup ======

This page explains the (stupid) [[https://en.wikipedia.org/wiki/BBCode|BBCode]] inspired markup syntax. It's used throughout the entire website, from the photo books to events and committee pages. It's weird, ugly, inconsistent and now even documented. We'll hopefully replace it with Markdown soon.

===== Simple tags =====

  * ''[h1]'' - ''[h6]'' heading (''[h1]'' is used as page title)
  * ''[i]'' //italics//
  * ''[b]'' **bold**
  * ''[u]'' __underline__
  * ''[s]'' <del>striketrough</del>
  * ''[ol]'' ordered list
  * ''[ul]'' unordered list
  * ''[li]'' list item
  * ''[center]'' centered text
  * ''[hl]'' highlighted text
  * ''[small]'' small text
  * ''[box]'' renders content inside a box

Use any of these like
<code>[b]bold text[/b]</code>

===== Links =====
<code>[url=https://www.svcover.nl]Cover's website[/url]</code>

You can do any url: 
<code>[url=mailto:board@svcover.nl]Mail the board[/url]</code>

Or add some classes to make it a button:
<code>[url.button.is-primary.is-large.is-fullwidth=https://www.svcover.nl]Big button[/url]</code>

It also renders naked links and email addresses properly.

===== Images =====
<code>[img=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]</code>
Or add the ''.company-logo'' css class:
<code>[img.company-logo=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]</code>

===== Videos =====
<code>
[video=https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4]
[video=https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4 thumbnail=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]
</code>

===== YouTube =====
<code>[youtube=dQw4w9WgXcQ]</code>

===== Tables =====
<code>
[table noborder]
|^ table row 0 cell 0 |^ table row 0 cell 1 |^ table row 0 cell 2 ||
|| table row 1 cell 0 || table row 1 cell 1 || table row 1 cell 2 ||
|| table row 2 cell 0 || table row 2 cell 1 || table row 2 cell 2 ||
[/table]
</code>

''^'' changes a normal cell into a heading.

''noborder'' adds a css class that removes the border.

===== Mailinglist =====
<code>[mailinglist=14]</code>
Includes a subscribe button for a mailinglist by ID.

===== Members only content =====
<code>[membersonly]Secret text that only members can see.[/membersonly]</code>
or
<code>[membersonly=Log in to see the secret content!]Secret text that [b]only[/b] members can see.[/membersonly]</code>
Will hide content for non-members and show a link to the login page instead. Supports an optional call to action to label the hidden content more clearly.

The hidden content can contain any other markup.

If you need more control over the call to action, you can use the ''[publiconly]'' tag to render it instead. Note ''[/publiconly]'' and ''[membersonly]'' are on the same line to prevent extraneous white space.

<code>
[publiconly]
Log in to see the [b]secret[/b] content!
[/publiconly][membersonly]
Ooh! So secret!
[url.button.is-primary.is-large.is-fullwidth=https://svcover.nl]Click me[/url]
[/membersonly]
</code>
===== Public only content =====
<code>[publiconly]Secret text that only members can see.[/publiconly]</code>

The hidden content can contain any other markup.

===== Summary =====
<code>[samenvatting]This is a summary of the page[/samenvatting]</code>
This is used on committee pages (and some other pages) to provide a summary.

===== Member Block =====

We have implemented this block specifically for the board page, so that board members can also present themselves individually with a short text, but it can be used in multiple instances.

This is the syntax:
<code>
[member name="<name>" position="<position" image="<image url>"]
<description>
[/member]
</code>

The //name// parameter is required, while //position// and //image// are optional. If //position// is left out, the text will just not appear. If //image// is left out, it will be replaced by a dark blue-grey placeholder.

If multiple instances of this block are present on a page, then they are automatically alternating between left image, right description and left description, right image.

===== FontAwesome (icons) =====
To insert icons anywhere on the website (specifically fontawesome icons), you can use this shortcode:
<code>
[fontawesome icon="fa-envelope" label="Email"]
</code>

The //label// parameter is optional, but recommended for SEO and accessibility reasons. The //icon// parameter value can be taken from the fontawesome cheatsheet, which can be found here: https://fontawesome.com/v4/cheatsheet/. Please note that not all of these icons will work, since we are using a slightly older version of the font than the one in the v4 cheatsheet.
==== Weird stuff ====
  * ''<nowiki>[[ committee(AC/DCee) ]]</nowiki>'' renders link to committee
  * ''[quote=Martijn]Hello![/quote]'' renders a quote (badly), name optional
  * ''[code]hello_world()[/code]'' renders code (badly)
  * ''[prive]this is a comment[/prive]'' does not render contents (for commments)