sidebar: auto
Editor Guide
This guide includes information for editors of https://www.asterics.eu.
The following sections describe markdown syntax supported by the theme of this website:
- Markdown: supported markdown syntax.
- Frontmatter: supported frontmatter properties.
- Layouts: available (custom) layouts.
- Global Components: available (custom) vue components.
Markdown
All markdown files are compiled with markdown-it and a selection of default and custom plugins. To experiment with the supported syntax visit markdown-it demo.
Plugins (default)
- markdown-it-sub
- markdown-it-sup
- markdown-it-footnote
- markdown-it-deflist
- markdown-it-abbr
- markdown-it-emoji
Plugins (custom)
-
markdown-it-checkbox
::: tip Example[ ] unchecked [x] checked
[ ] unchecked
[x] checked :::
-
markdown-it-imsize
::: tip Example 

 ::: -
markdown-it-kbd
::: tip Example[[x]] [[Ctrl]]+[[Alt]]+[[Del]]
[[x]]
[[Ctrl]]+[[Alt]]+[[Del]] ::: -
markdown-it-attrs
::: tip Example# header {.style-me} paragraph *style me*{.red} more text
<h1 class="style-me">header</h1>
<p>paragraph <em class="red">style me</em> more text</p>
:::
-
markdown-it-fontawesome
::: tip ExampleHello World! :fa-flag: Google :fab-google: GitHub :fab-github:
Hello World! :fa-flag:
Google :fab-google:
GitHub :fab-github: :::
VuePress Markdown Extensions
The vuepress theme provides the markdown extensions described above, see markdown extensions.
For example you can create custom containers
rendered as green info, yellow warning or red warning. You can also define custom titles for the boxes.
Input
::: tip
This is a tip
:::
::: warning
This is a warning
:::
::: danger
This is a dangerous warning
:::
::: details
This is a details block, which does not work in IE / Edge
:::
Output
::: tip This is a tip :::
::: warning This is a warning :::
::: danger This is a dangerous warning :::
::: details This is a details block, which does not work in IE / Edge :::
For more information, see Custom Containers.
Model Links
When describing a text related to a certain model file, it is good practice to directly link to that file in the AsTeRICS github repository. This can be done using the online webacs application and the openFile
query parameter.
[Single Switch Model](http://webacs.asterics.eu/?areBaseURI=https://127.0.0.1:8083&openFile=https://raw.githubusercontent.com/asterics/AsTeRICS/master/bin/ARE/models/useCaseDemos/mouseControl/crosshairCursorControl_1key.acs)
The value of openFile
must be replaced by the raw link of the model file on github.
To get the link, navigate to the model file in the github repository browser
- Open the file by clicking on it
- Click on the
Raw
button. - Copy the URL in the browser address bar. It should start with:
https://raw.githubusercontent.com/asterics/AsTeRICS/....
Frontmatter
VuePress processes markdown files containing YAML frontmatter blocks and supports a various properties out of the box (see VuePress Frontmatter). Here is a short example, for further details please refer to the provided links.
You can activate an automatic sidebar or turn it off completely for single pages using frontmatter properties:
---
sidebar: auto # Auto generated sidebar based on page content
sidebar: false # Turn off sidebar
---
# Hello World
...
Predefined Variables
Predefined Variables Powered by Default Theme
Predefined Variables Powered by AsTeRICS Docs Theme
No additional global frontmatter variables defined.
Layouts
Home
Layout Home
is used for building the start page of https://www.asterics.eu.
---
layout: Home
title: Home
---
It uses Markdown Slots for the jumbotron. Some of the content is exposed to markdown and can be changed in the file directly.
::: slot jumbotron
<Header>AsTeRICS</Header>
<Subtitle>Create Customized Low-Cost Assistive Technologies for People with Disabilities.</Subtitle>
<ActionGroup>
<Label>Are you looking for special solutions to use a computer, control your environment or play games?</Label>
<Actions>
<Action path="/solutions/">Discover Solutions</Action>
<Action path="/get-started/" dark>Get Started</Action>
</Actions>
</ActionGroup>
:::
Global Compontents
VuePress allows using vue components in markdown files. This theme provides some (globally available) vue components, which can be used throughout the documentation.
Use Cases
Use cases displayed on the start page are created using component UseCases
and UseCase
.
<UseCases>
<UseCase
title="Accessible Computer Control"
media="/assets/img/harry-shutterstock_213119035.jpg">Control your computer by switches, head movements or eyetracking, depending on your capabilities.</UseCase>
<UseCase
...
>...</UseCase>
<UseCase
title="Accessible Music"
media="https://www.youtube.com/watch?v=3_8TifCj0aU">Generate sounds or play adapted music instruments.</UseCase>
</UseCases>
A slideshow for several use cases is created by wrapping UseCase
components in a UseCases
component.
link
- Type:
string
- Default:
#
Hyperlink to link to.
media
- Type:
string
- Default:
null
Media (image, video) to display.
::: warning Note Currently, only YouTube :fab-youtube: videos are supported. :::
title
- Type:
string
- Default:
""
Title of use case.
stop
- Type:
boolean
- Default:
false
Stop running videos on slide change (only for slideshows).
Solutions
Solutions displayed on the solutions page are created using component Solutions
and Solution
.
<Solutions>
<Solution
title="Camera Mouse"
category="Computer Control"
os="Windows,Linux,macOS"
badges="Webcam"
media="/assets/img/face-shutterstock_717365779.jpg"
model="https://www.asterics.eu/webapps/asterics-camerainput-cameramouse/models/XFaceTrackerMouse(WLM).acs"
webapp="https://www.asterics.eu/webapps/asterics-camerainput-cameramouse/"
docs="/solutions/Camera-Mouse.html">Mouse control according to your head movements with configurable settings.</Solution>
<Solution
...
>...</Solution>
</Solutions>
A slideshow for several solutions is created by warpping Solution
components in a Solutions
component.
category
- Type:
string
- Default:
""
The category of the solution.
title
- Type:
string
- Default:
""
The title of the solution.
os
- Type:
string
- Default:
""
Operating systems the solution is running on (comma separated).
badges
- Type:
string
- Default:
null
Badges to display for the solution.
media
- Type:
string
- Default:
null
Media (image, video) to display.
::: warning Note Currently, only YouTube :fab-youtube: videos are supported. :::
model
- Type:
string
- Default:
null
Link to AsTeRICS model file to start for the solution.
grid
- Type:
string
- Default:
null
AsTeRICS Grid to open for the solution.
::: warning Note
Property model
has precedence over grid
.
Don't specify model
for grid solutions.
:::
webapp
- Type:
string
- Default:
null
Link to a web application provided for a solution.
docs
- Type:
string
- Default:
null
Link to documentation of used plugin in a solution.
Plugins Search
The plugin search display on the plugin overview page is created using component PluginsSearch
.
<ClientOnly>
<PluginsSearch/>
</ClientOnly>
There are no properties available for this component.
However, PluginSearch
uses frontmatter properties which can be specified in the plugin documentation.
---
title: AndroidPhoneControl
subcategory: Phone Interface
image: /plugins/actuators/android.svg
---
subcategory
- Type:
string
- Default:
null
Sub category of the plugin.
featured
- Type:
boolean
- Default:
false
Diplay plugin in featured selection.
image
- Type:
string
- Default:
null
Image in search overview for the plugin.
::: tip Note
If no image
or FontAwesome icon (fa-icon
, fas-icon
, far-icon
, fab-icon
) is specified, the AsTeRICS logo is displayed instead.
:::
fa-icon
- Type:
string
- Default:
null
FontAwesome (solid) icon.
fas-icon
- Type:
string
- Default:
null
FontAwesome (solid) icon.
far-icon
- Type:
string
- Default:
null
FontAwesome (regular) icon.
fab-icon
FontAwesome (brand) icon.