Differences

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

--- documentation:website:markup [2020/09/23 23:49] – [Website: Markup] Martijn Luinstra
+++ documentation:website:markup [2025/02/19 15:46] (current) – [Mailinglist] Marcus Persson
@@ Line 14: / Line 14: @@
   * ''[li]'' list item
   * ''[center]'' centered text
-  * ''[hl]'' highlighted text (doesn't work)
+  * ''[hl]'' highlighted text
   * ''[small]'' small text
+  * ''[box]'' renders content inside a box
 Use any of these like
@@ Line 25: / Line 26: @@
 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.
@@ Line 30: / Line 34: @@
 ===== Images =====
 <code>[img=https://sd.svcover.nl/Logos/Cover/cover_logo.jpg]</code>
-Or add the ''.company'' css class:
+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]</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 =====
@@ Line 42: / Line 49: @@
 <code>
 [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 2 cell 0 || table row 2 cell 1 || table row 2 cell 2 ||
@@ Line 48: / Line 55: @@
 </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 =====
-<code>[mailinglist]14[/mailinglist]</code>
+<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 =====
@@ Line 59: / Line 90: @@
 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>[[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
   * ''[code]hello_world()[/code]'' renders code (badly)
   * ''[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.