Refactor documentation

parent a0f10f33
Pipeline #40736402 passed with stage
in 1 minute and 55 seconds
......@@ -24,7 +24,7 @@ pages:
- bundle exec jekyll build -d public
environment:
name: Production
url: https://docs.tripetto.community/
url: https://docs.tripetto.com/
artifacts:
paths:
- public
......
[![pipeline status](https://gitlab.com/tripetto/docs/badges/master/pipeline.svg)](https://gitlab.com/tripetto/docs/commits/master)
Tripetto technical documentation website published at [docs.tripetto.community](https://docs.tripetto.community). Generated using [Jekyll](https://jekyllrb.com/).
Tripetto technical documentation website published at [docs.tripetto.com](https://docs.tripetto.com). Generated using [Jekyll](https://jekyllrb.com/).
## Prerequisites
Make sure [Ruby](https://www.ruby-lang.org/en/) is installed. Run the following command to install the required gems.
......
......@@ -2,7 +2,7 @@ source: src
destination: public
email: [email protected]
description: "Documentation for Tripetto"
url: "https://docs.tripetto.community"
url: "https://docs.tripetto.com"
repository: "https://gitlab.com/tripetto/docs/blob/master/src/"
permalink: pretty
......@@ -26,37 +26,6 @@ collections:
- guide_editor
- guide_collector
- guide_blocks
- api_class_await
- api_class_callback
- api_editor_editor
- api_editor_forms_button
- api_editor_forms_checkbox
- api_editor_forms_datetime
- api_editor_forms_dropdown
- api_editor_forms_email
- api_editor_forms_html
- api_editor_forms_notification
- api_editor_forms_numeric
- api_editor_forms_radiobutton
- api_editor_forms_spacer
- api_editor_forms_static
- api_editor_forms_text
- api_editor_forms_upload
- api_editor_templates
- api_editor_templates_collection
- api_editor_templates_label
- api_functions
- api_l10n
- api_module_num
- api_module_str
- api_module_slots_boolean
- api_module_slots_date
- api_module_slots_number
- api_module_slots_numeric
- api_module_slots_slot
- api_module_slots_slots
- api_module_slots_string
- api_module_slots_text
- examples
plugins:
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="118.90002"
height="55.999996"
viewBox="0 0 31.458965 14.816666"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="code.svg">
<defs
id="defs2">
<clipPath
id="clipPath28">
<path
id="path4544"
d="M 0,612 H 792 V 0 H 0 Z"
inkscape:connector-curvature="0" />
</clipPath>
<style
id="style6202">.cls-1{fill:#fc6d26;}.cls-2{fill:#e24329;}.cls-3{fill:#fca326;}</style>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="70.326159"
inkscape:cy="38.405819"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-bottom="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="6"
units="px"
inkscape:window-width="1948"
inkscape:window-height="1249"
inkscape:window-x="901"
inkscape:window-y="61"
inkscape:window-maximized="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Laag 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-282.18335)">
<rect
style="fill:#2c3e50;fill-opacity:1;stroke:none;stroke-width:4.44654131;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4540"
width="29.871464"
height="14.816667"
x="0"
y="282.18335"
rx="2.1166668"
ry="2.1166668" />
<g
aria-label="LIVE DEMO"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:4.23333359px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:'Roboto, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335"
id="text4674">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:3.17500019px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:'Roboto, Light';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:0.94117647;stroke:none;stroke-width:0.07000434"
x="15.279688"
y="288.34827"
id="text6929"><tspan
sodipodi:role="line"
id="tspan6927"
x="15.279688"
y="288.34827"
style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:3.17500019px;font-family:Roboto;-inkscape-font-specification:'Roboto, Light';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:0.94117647;stroke-width:0.07000434">get the</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:9.37757778px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.23443945"
x="15.244344"
y="293.2084"
id="text6933"><tspan
sodipodi:role="line"
id="tspan6931"
x="15.244344"
y="293.2084"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:4.21991014px;font-family:Roboto;-inkscape-font-specification:'Roboto, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke-width:0.23443945">CODE</tspan></text>
</g>
<g
id="g6246"
transform="matrix(0.02351309,0,0,0.02351309,1.017793,283.42431)">
<g
id="g44">
<path
d="M 461.17,301.83 442.26,243.71 404.84,128.43 a 6.47,6.47 0 0 0 -12.27,0 L 355.15,243.64 H 230.82 L 193.4,128.43 a 6.46,6.46 0 0 0 -12.26,0 l -37.36,115.21 -18.91,58.19 a 12.88,12.88 0 0 0 4.66,14.39 L 293,435 456.44,316.22 a 12.9,12.9 0 0 0 4.73,-14.39"
class="cls-1"
id="path46"
inkscape:connector-curvature="0"
style="fill:#fc6d26" />
</g>
<g
id="g48">
<path
d="m 293,434.91 v 0 L 355.16,243.63 H 230.87 Z"
class="cls-2"
id="path50"
inkscape:connector-curvature="0"
style="fill:#e24329" />
</g>
<g
id="g56">
<path
d="M 293,434.91 230.82,243.63 h -87 z"
class="cls-1"
id="path58"
inkscape:connector-curvature="0"
style="fill:#fc6d26" />
</g>
<g
id="g64">
<path
d="m 143.75,243.69 v 0 l -18.91,58.12 a 12.88,12.88 0 0 0 4.66,14.39 L 293,435 Z"
class="cls-3"
id="path66"
inkscape:connector-curvature="0"
style="fill:#fca326" />
</g>
<g
id="g72">
<path
d="m 143.78,243.69 h 87.11 L 193.4,128.49 a 6.47,6.47 0 0 0 -12.27,0 z"
class="cls-2"
id="path74"
inkscape:connector-curvature="0"
style="fill:#e24329" />
</g>
<g
id="g76">
<path
d="M 293,434.91 355.16,243.63 H 442.3 Z"
class="cls-1"
id="path78"
inkscape:connector-curvature="0"
style="fill:#fc6d26" />
</g>
<g
id="g80">
<path
d="m 442.24,243.69 v 0 l 18.91,58.12 a 12.85,12.85 0 0 1 -4.66,14.39 L 293,434.91 442.2,243.69 Z"
class="cls-3"
id="path82"
inkscape:connector-curvature="0"
style="fill:#fca326" />
</g>
<g
id="g84">
<path
d="m 442.28,243.69 h -87.1 l 37.42,-115.2 a 6.46,6.46 0 0 1 12.26,0 z"
class="cls-2"
id="path86"
inkscape:connector-curvature="0"
style="fill:#e24329" />
</g>
</g>
</g>
</svg>
......@@ -14,9 +14,6 @@
<li>
<a href="{{ page.base }}guide/"{% if activeMenu == "guide" %} class="active"{% endif %}>Guide</a>
</li>
<li>
<a href="{{ page.base }}api/"{% if activeMenu == "api" %} class="active"{% endif %}>API</a>
</li>
<li>
<a href="{{ page.base }}examples/"{% if activeMenu == "examples" %} class="active"{% endif %}>Examples</a>
</li>
......
<!-- Examples -->
<li>
<a href="{{ page.base }}examples/">Examples</a>
<ul>
{% assign navigation_sections = site.collections | where: "label", "examples" | first %}
{% include navigation-sections.html %}
</ul>
{% if navLevel0 == "examples" %}
<ul>
{% assign navigation_sections = site.collections | where: "label", "examples" | first %}
{% include navigation-sections.html %}
</ul>
{% endif %}
</li>
......@@ -104,6 +104,7 @@ nav {
> a {
display: inline-block;
font-size: 18px;
font-weight: bold;
}
}
......
<svg width="118.9" height="56" version="1.1" viewBox="0 0 31.459 14.817" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fc6d26;}.cls-2{fill:#e24329;}.cls-3{fill:#fca326;}</style></defs><g transform="translate(0 -282.18)"><rect y="282.18" width="29.871" height="14.817" rx="2.1167" ry="2.1167" fill="#2c3e50"/><g fill="#ffffff" letter-spacing="0px" word-spacing="0px" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" aria-label="LIVE DEMO"><text x="15.279688" y="288.34827" fill-opacity=".94118" font-family="Roboto" font-size="3.175px" font-weight="300" stroke-width=".070004" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve"><tspan x="15.279688" y="288.34827" fill="#ffffff" fill-opacity=".94118" font-family="Roboto" font-size="3.175px" font-weight="300" stroke-width=".070004" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">get the</tspan></text><text x="15.244344" y="293.2084" font-family="sans-serif" font-size="9.3776px" stroke-width=".23444" style="line-height:1.25" xml:space="preserve"><tspan x="15.244344" y="293.2084" fill="#ffffff" font-family="Roboto" font-size="4.2199px" font-weight="500" stroke-width=".23444" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">CODE</tspan></text></g><g transform="matrix(.023513 0 0 .023513 1.0178 283.42)"><path class="cls-1" d="m461.17 301.83-18.91-58.12-37.42-115.28a6.47 6.47 0 0 0-12.27 0l-37.42 115.21h-124.33l-37.42-115.21a6.46 6.46 0 0 0-12.26 0l-37.36 115.21-18.91 58.19a12.88 12.88 0 0 0 4.66 14.39l163.47 118.78 163.44-118.78a12.9 12.9 0 0 0 4.73-14.39" fill="#fc6d26"/><path class="cls-2" d="m293 434.91 62.16-191.28h-124.29z" fill="#e24329"/><path class="cls-1" d="m293 434.91-62.18-191.28h-87z" fill="#fc6d26"/><path class="cls-3" d="m143.75 243.69-18.91 58.12a12.88 12.88 0 0 0 4.66 14.39l163.5 118.8z" fill="#fca326"/><path class="cls-2" d="m143.78 243.69h87.11l-37.49-115.2a6.47 6.47 0 0 0-12.27 0z" fill="#e24329"/><path class="cls-1" d="m293 434.91 62.16-191.28h87.14z" fill="#fc6d26"/><path class="cls-3" d="m442.24 243.69 18.91 58.12a12.85 12.85 0 0 1-4.66 14.39l-163.49 118.71 149.2-191.22z" fill="#fca326"/><path class="cls-2" d="m442.28 243.69h-87.1l37.42-115.2a6.46 6.46 0 0 1 12.26 0z" fill="#e24329"/></g></g></svg>
......@@ -6,4 +6,22 @@ title: Guide - Tripetto Documentation
heading: Guide
---
Lorem ipsum.
Want to integrate the editor into your own project? Create a collector for response collection? Or create your own building block? Here you will find all the information you need.
### Editor
Use the graphical editor to create and edit smart forms with logic and conditional flows in 2D on a self-organizing drawing board.
[Start with the editor](/guide/editor/)
{: .start }
### Collector
Use the collector library to handily deploy smart forms in websites and applications.
[Start with the collector](/guide/collector/)
{: .start }
### Blocks
Use the blocks API to create your own form building blocks (e.g. question types).
[Start with blocks](/guide/blocks/)
{: .start }
---
base: ../
permalink: /support/
source: pages/guide/support.md
source: pages/support/index.md
title: Support - Tripetto Documentation
heading: Need help?
---
......
......@@ -3,4 +3,5 @@ source: sections/_examples/00-introduction.md
title: Examples
---
Intro Examples
Have a look at our examples. They're all open source and published under the [MIT](https://opensource.org/licenses/MIT){:target="_blank"} license. Have a blast!
---
source: sections/_examples/01-collector.md
title: Collector examples
bookmark: collector
---
#### React collector example
Uses the [React](https://reactjs.org/){:target="_blank"} library to implement a collector as a reusable component using [Bootstrap](https://getbootstrap.com/) for the UI.
[![Try the demo](../images/demo.svg)](https://example-react-bootstrap.tripetto.com/){:target="_blank"}
[![Get the code](../images/code.svg)](https://gitlab.com/{{ site.accounts.gitlab }}/examples/react){:target="_blank"}
---
#### React collector with Material-UI example
Uses the [React](https://reactjs.org/) library to implement a collector as a reusable component using [Material-UI](https://material-ui-next.com/) for the UI.
[![Try the demo](../images/demo.svg)](https://example-react-material-ui.tripetto.com/){:target="_blank"}
[![Get the code](../images/code.svg)](https://gitlab.com/{{ site.accounts.gitlab }}/examples/react-material-ui){:target="_blank"}
---
#### Conversational example (with React)
Shows how you can use Tripetto to create a stunning conversational look and feel using [React](https://reactjs.org/){:target="_blank"} and [Bootstrap](https://getbootstrap.com/).
[![Try the demo](../images/demo.svg)](https://example-react-conversational.tripetto.com/){:target="_blank"}
[![Get the code](../images/code.svg)](https://gitlab.com/{{ site.accounts.gitlab }}/examples/react-conversational){:target="_blank"}
---
#### Angular collector example
Uses the [Angular](https://angular.io/){:target="_blank"} framework to implement a reusable component using [Bootstrap](https://getbootstrap.com/) for the UI.
[![Try the demo](../images/demo.svg)](https://example-angular-bootstrap.tripetto.com/){:target="_blank"}
[![Get the code](../images/code.svg)](https://gitlab.com/{{ site.accounts.gitlab }}/examples/angular){:target="_blank"}
---
#### Angular Material collector example
Uses the [Angular](https://angular.io/){:target="_blank"} framework with [Angular Material](https://material.angular.io/){:target="_blank"} to implement a reusable component.
[![Try the demo](../images/demo.svg)](https://example-angular-material.tripetto.com/){:target="_blank"}
[![Get the code](../images/code.svg)](https://gitlab.com/{{ site.accounts.gitlab }}/examples/angular-material){:target="_blank"}
---
source: sections/_examples/01-example.md
title: Example 01
---
Example 01
---
source: sections/_examples/02-blocks.md
title: Blocks examples
bookmark: blocks
---
#### Block boilerplate for creating new blocks
[gitlab.com/{{ site.accounts.gitlab }}/blocks/boilerplate](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/boilerplate){:target="_blank"}
{: .example }
---
#### Checkbox
Standard checkbox block.
[gitlab.com/{{ site.accounts.gitlab }}/blocks/checkbox](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/checkbox){:target="_blank"}
{: .hyperlink }
---
#### Checkboxes
List of checkboxes.
[gitlab.com/{{ site.accounts.gitlab }}/blocks/checkboxes](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/checkboxes){:target="_blank"}
{: .hyperlink }
---
#### Dropdown
Standard dropdown block.
[gitlab.com/{{ site.accounts.gitlab }}/blocks/dropdown](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/dropdown){:target="_blank"}
{: .hyperlink }
---
#### E-mail
Standard e-mail block.
[gitlab.com/{{ site.accounts.gitlab }}/blocks/email](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/email){:target="_blank"}
{: .hyperlink }
---
#### Number
Standard number block
[gitlab.com/{{ site.accounts.gitlab }}/blocks/number](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/number){:target="_blank"}
{: .hyperlink }
---
#### Password
Standard password block
[gitlab.com/{{ site.accounts.gitlab }}/blocks/password](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/password){:target="_blank"}
{: .hyperlink }
---
#### Radiobuttons
Standard radiobutton block
[gitlab.com/{{ site.accounts.gitlab }}/blocks/radiobuttons](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/radiobuttons){:target="_blank"}
{: .hyperlink }
---