AsTeRICS

# Website Markdown Guide

This guide describes the supported markdown syntax provided by the theme (opens new window) of the https://www.asterics.eu (opens new window):

All markdown files are compiled with markdown-it (opens new window) and a selection of default and custom plugins. To experiment with the supported syntax visit markdown-it demo (opens new window).

# Plugins (default)

# Plugins (custom)

# VuePress Markdown Extensions

The vuepress theme provides the markdown extensions described above, see markdown extensions (opens new window).

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 (opens new window).

When describing a text related to a certain AsTeRICS 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 which must contain the URL of the model file that should be opened within the WebACS application. See example below:

[Single Switch Model](http://webacs.asterics.eu/?areBaseURI=http://127.0.0.1:8081&openFile=https://raw.githubusercontent.com/asterics/AsTeRICS/master/bin/ARE/models/useCaseDemos/mouseControl/crosshairCursorControl_1key.acs)

This will be rendered as a normal link opening the model file in the WebACS application:

Single Switch Model (opens new window)

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 and

  1. Open the file by clicking on it
  2. Click on the Raw button.
  3. 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 (opens new window) frontmatter blocks and supports a various properties out of the box (see VuePress Frontmatter (opens new window)). 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 (opens new window).

---
layout: Home
title: Home
---

It uses Markdown Slots (opens new window) 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 (opens new window) 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.

  • Type: string
  • Default: #

Hyperlink to link to.

# media

  • Type: string
  • Default: null

Media (image, video) to display.

Note

Currently, only YouTube (opens new window) 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.

Note

Currently, only YouTube (opens new window) 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.

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.

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.

  • Type: boolean
  • Default: false

Diplay plugin in featured selection.

# image

  • Type: string
  • Default: null

Image in search overview for the plugin.

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 (opens new window) (solid (opens new window)) icon.

# fas-icon

  • Type: string
  • Default: null

FontAwesome (solid (opens new window)) icon.

# far-icon

  • Type: string
  • Default: null

FontAwesome (regular (opens new window)) icon.

# fab-icon

FontAwesome (brand (opens new window)) icon.