Main Article Title

Headers

Header 2

Header 3

Header 4

Components

1. Number Widget

Use for number-heavy paragraphs - such as stats. Keep numbers in one line, and text aligned. Ideally, there should be 1 number widget per article, but definitely not more than 2.

2. Info Block

Use to highlight important things or notes. Try to keep content short (around 2-3 sentences). We can have up to 5 info blocks per article.

3. Pink Text

Use to differentiate Terminology, SDKs, competitors or competitor products. Choose one concept per article. Do not use it for all 4.

For example, while writing an article on deep-learning and voice assistants, you can pink artificial intelligence and deep learning or Alexa and Siri, but not all.

4. Multi-Link Boxes:

Similar to docs, use them to link multiple but similar pages. Ideally, max 2 per article, definitely not more than 3.

5. Code Snippet

Use it to put code in a light blue box and separate it from the rest of the article.

import pvcobra

handle = pvcobra.create(access_key)

6. Separator

Use to differentiate sections within articles.

8. Tables

Tables are not very mobile-friendly, do not use them if you do not really need them. Tables must be hard coded via HTML.

9. Blue CTA Button

Use it when you want to make sure people visit the other page, i.e. take an action. Don’t use it more than once per article.

10. Utterances

Do not style them, use them with an indent. No blue info block line but indented like that + Quotation marks.

While the same command would look like this by using SiriKit:

11. Code Widget

Use it to link SDKs for animals. Create the widget in /templates/blog.js and pass it down to MdxProvider to be used in an article. Only 1 per article, and they should come at the end of the article - as it’s the last widget on the list. :)

o = pvporcupine.create(
  access_key=access_key,
  keyword_paths=keyword_paths)

while True:
  keyword_index =
    o.process(audio_frame())
  if keyword_index >= 0:
    // Detection callback
Build with Python

12. Math

Use $ to wrap inline math expressions, and $$ to wrap block expressions. Write math using TeX syntax

Inline example:

Block example:

Visuals

• Within articles, visuals have to be SVGs. If not possible, make sure you have an explanation.
• For high-res images, you can use Unsplash, Pexels, Pixabay, Canva or a platform of your choice. - please check licenses and make sure we do not take copyright risks.

General

• Use blue (#377DFF), black and shades of gray - do not introduce new colors without first talking to Ali or Dilek.
• Use TLDR with no punctuation (no semicolon)
• Use asterisk * with no brackets
• Try to avoid long paragraphs if your articles are text-intensive.
• Make sure you use animal name-only (Porcupine) or full product name (Porcupine Wake Word) and it’s linked to the product page. - or the docs intro page if it’s more relevant.
• Re-read the article for internal linking. If you cannot find anything - at least add a section to the bottom to link relevant articles: For example, link speech-to-text with Python to STT with Node.JS and JS or wake word detection with Python. "More from Picovoice" only covers the newest articles, if there are certain articles related, let’s not miss them. If you still think there is nothing to link, ping Dilek.
• Include URL, META Title & Description and Blog Tags - ask Dilek to help with keywords or meta title and description