Back to top

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
documentation:website:markup [2022/04/03 14:00] – external edit 127.0.0.1documentation:website:markup [2025/02/19 15:46] (current) – [Mailinglist] Marcus Persson
Line 14: Line 14:
   * ''[li]'' list item   * ''[li]'' list item
   * ''[center]'' centered text   * ''[center]'' centered text
-  * ''[hl]'' highlighted text (doesn't work)+  * ''[hl]'' highlighted text
   * ''[small]'' small text   * ''[small]'' small text
 +  * ''[box]'' renders content inside a box
  
 Use any of these like Use any of these like
Line 25: Line 26:
 You can do any url:  You can do any url: 
 <code>[url=mailto:board@svcover.nl]Mail the board[/url]</code> <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. It also renders naked links and email addresses properly.
Line 34: Line 38:
  
 ===== Videos ===== ===== Videos =====
-<code>[video=https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4]</code>+<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 ===== ===== YouTube =====
Line 42: Line 49:
 <code> <code>
 [table noborder] [table noborder]
-|table row 0 cell 0 |table row 0 cell 1 |table row 0 cell 2 ||+|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 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 row 2 cell 0 || table row 2 cell 1 || table row 2 cell 2 ||
Line 48: Line 55:
 </code> </code>
  
-(noborder adds a css class that removes the border)+''^'' changes a normal cell into a heading. 
 + 
 +''noborder'' adds a css class that removes the border.
  
 ===== Mailinglist ===== ===== Mailinglist =====
-<code>[mailinglist]14[/mailinglist]</code>+<code>[mailinglist=14]</code>
 Includes a subscribe button for a mailinglist by ID. Includes a subscribe button for a mailinglist by ID.
  
 ===== Members only content ===== ===== Members only content =====
-<code>[membersonly]You cannot see this unless your logged in.[/membersonly]</code>+<code>[membersonly]Secret text that only members can see.[/membersonly]</code>
 or or
-<code>[membersonly=Hidden content title]You [b]cannot[/b] see this unless your logged in.[/membersonly]</code> +<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 title which will always be rendered, to label the hidden content more clearly.+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. The hidden content can contain any other markup.
Line 66: Line 90:
 This is used on committee pages (and some other pages) to provide a summary. 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 ==== ==== Weird stuff ====
-  * ''<nowiki>[[commissie(AC/DCee)]]</nowiki>'' renders link to committee +  * ''<nowiki>[[ committee(AC/DCee) ]]</nowiki>'' renders link to committee
-  * ''<nowiki>[embed]https://some.url/to/whatever[/embed]</nowiki>'' tries to embed content of the url (or does nothing if it can't)+
   * ''[quote=Martijn]Hello![/quote]'' renders a quote (badly), name optional   * ''[quote=Martijn]Hello![/quote]'' renders a quote (badly), name optional
   * ''[code]hello_world()[/code]'' renders code (badly)   * ''[code]hello_world()[/code]'' renders code (badly)
   * ''[prive]this is a comment[/prive]'' does not render contents (for commments)   * ''[prive]this is a comment[/prive]'' does not render contents (for commments)
-  * ''<:|'', '':)'', '':('', '';)'', '';('', '':|'', '':@'', ''8o'', '':d'', '':p'', '':s'', ''x-p'', ''[oops]'', ''[oeps]'', ''[bye]'' and ''[hug]'' (and their counterparts with a ''-'' for a nose) all render some sort of smiley, but please use emoji instead. We're in the 2020's now. 

documentation/website/markup.1648994443.txt.gz · Last modified: 2022/04/03 14:00 by 127.0.0.1