@asterics-docs/vuepress-theme-docs

---

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

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

  
   :::

• 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 Example

  Hello 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)

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

• title
• lang
• description
• layout
• permalink
• metaTitle
• meta

Predefined Variables Powered by Default Theme

• navbar
• sidebar
• prev
• next
• search
• tags

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.