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

# Plugins (custom)

markdown-it-checkbox
Example
```
[ ] unchecked
[x] checked
```
unchecked
checked

markdown-it-imsize

Example

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

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

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

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.

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

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.