# 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

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)

# Plugins (custom)

  • markdown-it-imsize

    Example

    ![AsTeRICS Logo](/img/asterics-logo.svg =200x200)
    ![AsTeRICS Logo](/img/asterics-logo.svg =400x400)
    

    AsTeRICS Logo
    AsTeRICS Logo

  • markdown-it-kbd

    Example

    [[x]]
    [[Ctrl]]+[[Alt]]+[[Del]]
    

    x
    Ctrl+Alt+Del

  • markdown-it-attrs

    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

    Example

    Hello World! :fa-flag:
    Google :fab-google:
    GitHub :fab-github:
    

    Hello World!
    Google
    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

WARNING

This is a dangerous warning

DETAILS

This is a details block, which does not work in IE / Edge

For more information, see Custom Containers.

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)

Single Switch Model

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

  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 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.

  • Type: string
  • Default: #

Hyperlink to link to.

# media

  • Type: string
  • Default: null

Media (image, video) to display.

Note

Currently, only 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.

Note

Currently, only 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.

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 (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.