Voice User Interface Guide

Source code of vui.guide – a living style guide or pattern library for voice user interfaces. vui.guide is an open source application created with gatsby.js to help designers design their own voice user interface. No matter your level of language, development or design expertise, there are ways to help contribute to the Voice User Interface Guide.

🚀 Get started

1. Clone vui.guide

   Clone or download the official “vui.guide”-Repository from https://github.com/larsmaeder/vui.guide.git

   git clone https://github.com/larsmaeder/vui.guide.git

2. Install dependencies

   Navigate into site’s directory and start it up.

   cd vui.guide
   npm install

3. Start developing

   Navigate into site’s directory and start it up.

   npm start

4. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   _Note: You'll also see a second link: http://localhost:8000/___graphql.

⌨️ Contribute as a writer

/docs: The full documentation is written in Markdown and can be edited through the .mdx files inside the top-level docs folder.

Following frontmatter queries are defined inside a .mdx file:

---
title: Behaviour of speak
navDocTitle: Behaviour of speak
path: /docs/behaviour/behaviour-of-speak/
category: behaviour
sort: 2
toc: true
---

1. title: Output as <title> tag and for the breadcrumb component.

2. navDocTitle: Output as <H1> and navigation label.

3. path: Output as URL slug as following https://www.vui.guide{path}

4. category: Defines the page category. Is used for navigation assignment and page's location relation.

5. sort: Used to sort navigation labels inside a category

6. toc: Boolean enables/disables the table of content component

🤖 Local build

1. Start a local build

   Navigate into site’s directory, start a build and serve the local build for local environment testing.

   npm run build
   npm run serve

   Gatsby serve running at: http://localhost:9000/

🔍 What's inside?

A quick look at the relevant top-level files and directories.

.
├── .github
├── docs
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── CNAME
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
└── package.json

1. /docs: this directory contains all content related files that are used inside the documentation itself.

2. /src: this directory contains all code related files that are used on the overall vui.guide.

📜 License

MIT

larsmaeder/vui.guide is licensed under the MIT License.

CC BY-SA 4.0

All graphics and assets are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.