|
|
|
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.
|
==Section Heading 1== ===Section Heading 2===A horizontal line:
----Bulleted lists:
* bullet 1 * bullet 2 ** sub bullet 1 ** sub bullet 2 * bullet 3The 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 :prTo center text do:
+center some text to center -centerTo wrap text in a div do:
+div ... -divSet the background color or image with:
+div color="color" ... -div +div image=image_reference ... -div +div style="css style" ... -divWhere image_reference is either:
+div image=::name_of_attachment -div +div image=this ... -div +div image=other_entry_id ... -divTo add attributes to the div do:
+div style="max-height:100px;overflow-y:auto;" ... -divTo create a button do:
:button /url Some label :button-green /url Some label :button-blue /url Some labelWill produce: Some label
Some wiki text <nowiki> This is text that does not get formatted </nowiki> more wiki textFor example, if you want to include javascript in your text do:
<nowiki> <script type="text/JavaScript" > ... </script> </nowiki>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 -macroTo 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-olivineNote: 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. 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:
You can specify the toggle label title with:<block> any content here </block>
<block title="Click here to open">
any content here
</block>
<block open="false">
any content here
</block>
You can also use the block tag to define a variable or macro that is used later.<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>
<block var="var_name">
any content here
</block>
${var_name}
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 -noteYou can change the background color with:
:blurb-green Some green background :note-rose Rose colored backgroundExamples at https://ramadda.org/repository/alias/wikiexamples. To make page sections use the +section/-section tags.
+section section content -sectionIf you append a "#" then the row number is kept track of and an even/odd color scheme is applied.
+section # ... -section +section # ... -sectionIf you append a "----" then a top border is shown:
+section ... -section +section ---- ... -sectionIf 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" ... -sectionUsing the {
+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" ... -sectionYou can also add a CSS style descriptor
+section style="background: #888; border: 1px red solid;" ... -sectionThe +inset tag supports margins.
+inset ... -insetThis 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" ... -insetFrame your content like this:
+frame content -frameYou can change the background of the inner part of the frame with:
+frame background=white content -frameYou can change the size and the color of the frame with:
+frame frameSize=5 frameColor=red content -frameAdd a shadow effect with
+frame background=#fff frameSize=0 shadow content -frameYou 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)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 = {}
```
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"}
}
}
```
To make a gridded box layout like this use the +gridboxes/+gridbox tags.
+gridboxes-<number of columns> +gridbox Header 1 contents -gridbox +gridbox Header 2 contents -gridbox -gridboxesFor example:
+gridboxes-3 +gridbox Header 1 Hello thereScrollable 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.
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
+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 ... -tableThe attributes of the +table tag are all optional.
+table height=100 :tr "heading 1" "heading 2" +tr :td column 1 :td column 2 -trow ... -tableThere 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 -rowWhich results in:
You can set the widths of different columns:
+row +col-2 Left column contents -col +col-10 Right column contents -col -rowWhich results in:
+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 -tabsTabs 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 -tabsUse a minimal style:
+tabs min +tab Tab 1 title +tabs -tabsUse a minimal style with arrows:
+tabs minarrow +tab Tab 1 title +tabs -tabsCenter the tabs:
+tabs center +tab Tab 1 title +tabs -tabsYou 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 -accordionIf decorate=false then no border or background is shown for the headers.