Have ideas to improve npm?Join in the discussion! »

    @asterics-docs/vuepress-theme-docs

    0.0.1-beta.51 • Public • Published

    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

    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
      ::: tip Example

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

      ![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

    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.

    Keywords

    none

    Install

    npm i @asterics-docs/vuepress-theme-docs

    DownloadsWeekly Downloads

    82

    Version

    0.0.1-beta.51

    License

    GPL-3.0

    Unpacked Size

    134 kB

    Total Files

    83

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar