Wiki Text

The web pages in RAMADDA are created through its wiki facility. The wiki facility supports both regular wiki markup like Wikipedia uses as well as special RAMADDA wiki tags that allow for page payout, displaying maps, lists, charts, etc.

5.1.0 Basic Markup

The RAMADDA Wiki facility generally follows the format that Wikipedia follows. For example:

==Section Heading 1==
===Section Heading 2===

A horizontal line:

----

Bulleted lists:

* bullet 1
* bullet 2
** sub bullet 1
** sub bullet 2
* bullet 3

The RAMADDA wiki text supports a number of other markup methods using +tag/-tag and :tag syntax. The "+/-" syntax is for multi-line and the ":" syntax is for single line. For example, an easy way to add a line break of paragraph (instead of doing <br>, <p>) is:

:br
:pr

To center text do:

+center
some text
to center
-center

To wrap text in a div do:

+div
...
-div

Set the background color or image with:

+div color="color"
...
-div

+div image=image_reference
...
-div

+div style="css style"
...
-div

Where image_reference is either:

+div image=::name_of_attachment
-div
+div image=this
...
-div
+div image=other_entry_id
...
-div

To add attributes to the div do:

+div style="max-height:100px;overflow-y:auto;"
...
-div

To create a button do:

:button /url Some label
:button-green /url Some label
:button-blue /url Some label

Will produce: Some label
Some label
Some label

You can escape your wiki text and include raw, unprocessed text with the <nowiki> tag:

Some wiki text
<nowiki>
This is text that does not get formatted
</nowiki>
more wiki text

For example, if you want to include javascript in your text do:

<nowiki>
<script  type="text/JavaScript"  >
...
</script>
</nowiki>

Macros

Macro values can be defined and used later in the wiki page with the :macro and +macro/-macro tags. To define a macro do:

:macro macro_name macro body
or:
+macro macro_name
macro
body
-macro

To use the macro do:

:macro macro_name Some text
...
any wiki text here ${macro_name} more text

For example, if you have a number of buttons as described above but want to have one color for them do:

:macro buttonColor -green
...
:button${buttonColor} /url1 Button 1 text

:button${buttonColor} /url2 Button 2 text

Repository wide macros can be defined in the server side properties file in the RAMADDA home directory. Add the below properties:

ramadda.wiki.macros=comma separated list of macro names
ramadda.wiki.macro.<macro>=<macro value>
#For example
ramadda.wiki.macros=buttonColor,blockColor
ramadda.wiki.macro.buttonColor-green
ramadda.wiki.macro.blockColor-olivine

Note: the block tag below has a similar feature with the "var" attribute. The difference is that the block tag can be placed at the bottom of the page after the var that it references is used. The macro tags need to be inline before they are used.

Blocks

The <block> tag allows you to easily create a toggle block and/or show or hide content based on the user's device. To show a simple toggle block just do:

<block>
 any content here
</block>

You can specify the toggle label title with:

<block title="Click here to open">
 any content here
</block>

You can specify whether the block is open or closed:

<block open="false">
 any content here
</block>

You can specify whether to show the content or not:

<block show="mobile" decorate="false">
  this will only show for mobile users
</block>
<block show="!mobile" decorate="false">
  this will only show for non-mobile users
</block>

You can also use the block tag to define a variable or macro that is used later.

<block var="var_name">
 any content here
</block>

This will not show the content in place. Rather you can reference and insert the content elsewhere in the page with:

${var_name}

5.1.1 Layout and Display Markup

There are a number of layout tags that make it easy to do page layout and display.

Titles and headings

There are a number of block display elements - title, heading, blurb, note, and block that can be used as:

One line forms:
:title Some title
:heading Some heading
:blurb Some blurb
:note Some note
:block A block

Multi line forms:
+note
Some lengthy text
and more
-note

You can change the background color with:

:blurb-green Some green background
:note-rose Rose colored background

Examples at https://ramadda.org/repository/alias/wikiexamples.

Sections

To make page sections use the +section/-section tags.

+section 
section content
-section

If you append a "#" then the row number is kept track of and an even/odd color scheme is applied.

+section  #
...
-section
+section  #
...
-section

If you append a "----" then a top border is shown:

+section
...
-section
+section  ----
...
-section

If you add title="..." then a title is added. If you add label="..." then a header is added. The normal use is:

+section # title="section 1"
...
-section
+section # label="section 2"
...
-section
+section # label="section 3"
...
-section

Using the {{name}} wiki tag will use the entry name for the title:

+section  title={{name}}
...
-section

You can change the background color/image by specifying sections as below. Full list of styles here.

+section class="ramadda-section-map"
...
-section
+section class="ramadda-section-lightpink"
...
-section
+section class="ramadda-section-lightblue"
...
-section
+section class="ramadda-section-lightgreen"
...
-section

You can also add a CSS style descriptor

+section style="background: #888; border: 1px red solid;"
...
-section

Inset

The +inset tag supports margins.

+inset
...
-inset

This by default gives a 20px left and right margin. To change this you can add any of the attributes, e.g:

+inset top="100" left="50" right="50" bottom="100"
...
-inset

Frames

Frame your content like this:

With the +frame/-frame tags:

+frame
content
-frame

You can change the background of the inner part of the frame with:

+frame background=white
content
-frame

You can change the size and the color of the frame with:

+frame frameSize=5 frameColor=red
content
-frame

Add a shadow effect with

+frame background=#fff frameSize=0 shadow
content
-frame

Embedding Media

You can embed Twitter, YouTube, Vimeo and other media as:

@(https://twitter.com/Interior/status/463440424141459456)

@(https://vimeo.com/515404225k)

@(https://www.youtube.com/watch?v=BGaCjM2hal4)

@(https://www.facebook.com/don.murray.121/posts/10219628323639292)

Set dimensions on videos:

@(https://vimeo.com/515404225 width=300 height=200)

@(https://www.youtube.com/watch?v=BGaCjM2hal4 width=300 height=200)

Add a style to the embed:

 @(https://vimeo.com/515404225 width=300 height=200 link=true label="Click here" style="display:block;background:red;margin:20px;")

Add a link to the embed:

  @(https://www.youtube.com/watch?v=BGaCjM2hal4 width=300 height=200 start=600  link=true label="Click here")

Embed Github checkins with:

@(github user=some_user_name)  

#or a repository
@(github owner=repository_owner repository=repository)

#don't show avatar image
@(github owner=repository_owner repository=repository decorate=false)

Embedding Code

To embed code do the following:

 ```<option language>
 code
 here
```

Currently only javascript is formatted. For example:

```javascript
let l = []; 
for(let i=0;<l.length;i++) {
    console.log(l\[i\]);
}
var x = {}
```

Embedding Vega Charts

You can embed charts defined in the vega-lite schema directly into a wiki page. More information onv vega-list is available here The format is:

```vega-lite
You vega-lite schema here
```

e.g.:

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data. An example vega-lite file.",
  "width": 360,
  "height":200,
  "data": {
    "values": \[
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    \]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

Grid Boxes

To make a gridded box layout like this use the +gridboxes/+gridbox tags.

These take the form of:

+gridboxes-<number of columns>
+gridbox Header 1
contents
-gridbox
+gridbox Header 2
contents
-gridbox
-gridboxes

For example:

+gridboxes-3
+gridbox Header 1
Hello there


How are you
-gridbox
+gridbox
Hello there


How are you
-gridbox
+gridbox Header 3
Hello there


How are you
-gridbox
+gridbox Header 4
Line 1
:br 
Line 2
-gridbox
-gridboxes

Scrollable Tables

Scrollable HTML tables are supported with the +table/-table tags. The form is below. Note: any open tr or td tags will be close with the -table tag.

+table  height=100  stripe=false hover=true searching=false  cellborder=false rowborder=false paging=false ordering=false
+tr
+td 
heading 1
-td
+td 
heading 2
-td
-tr
+tr
+td 
column 1
-td
+td 
column 2
-td
-tr
...
-table

The attributes of the +table tag are all optional.

height=100 - Set the height of the table and enable scrolling
stripe=false - Stripe the rows
hover=true - Highlight the rows on hover
searching=false - Show the search box
cellborder=false - draw borders around the cells
rowborder=false - draw borders around the rows
paging=false - enable paging
ordering=false - enable sorting

There are shortcuts available

+table  height=100  
:tr "heading 1" "heading 2"
+tr
:td column 1
:td column 2
-trow
...
-table

Grid Layout

There is support for the Bootstrap CSS grid system. To do a row layout use the following. The "+col-md-..." correspond to Bootstraps column widths, e.g., col-md-[1]. Basically you can have any number of columns within a row. Each column has a width, the sum of which adds up to 12. Note: you can also use +col-<some number> as a short hand, dropping the "-md"

Here are three equally spaced columns:

+row
+col-4 
Left column contents
-col
+col-4 
Center column contents
-col
+col-4
Right column contents
-col
-row

Which results in:

Left column contents

Center column contents

Right column contents

You can set the widths of different columns:

+row
+col-2 
Left column contents
-col
+col-10
Right column contents
-col
-row

Which results in:

Left column contents

Right column contents

Tabs

You can create a set of tabs with:

+tabs
+tab Tab 1 title
Tab 1 content
-tab
+tab Tab 2 title
Tab 2 content
-tab
...
+tab Tab N title
Tab N content
-tab
-tabs

Tabs can also be nested:

+tabs
+tab Tab 1 title
+tabs
+tab another tab title
...
-tab
-tabs
-tab
+tab Tab 2 title
Tab 2 content
-tab
-tabs

Use a minimal style:

+tabs min
+tab Tab 1 title
+tabs
-tabs

Use a minimal style with arrows:

+tabs minarrow
+tab Tab 1 title
+tabs
-tabs

Center the tabs:

+tabs center
+tab Tab 1 title
+tabs
-tabs

Accordion

You can create an accordion with the accordian tag. The optional arguments allow you to set the properties of the accordion as described in the Jquery docs.

+accordion heightStyle="auto|fill|content" animate="number of milliseconds" collapsible="true|false" activeSegment="segment number of active segment (0 based)" decorate="true|false"
+segment Accordion 1 Title
Accordion 1 content
-segment
+segment Accordion 2 Title 
Accordion 2 content
-segment
-accordion

If decorate=false then no border or background is shown for the headers.