Product Documentation Made Easy

Building documentation isn't fun. Well, not usually.

We're here to help. You can now make beautiful documentation by simply pushing to a Git branch.

View Example Product's Docs

Getting Started

Create a new branch, sb-documentation, and check it out locally using the -b flag:

git checkout -b sb-documentation

Your First Markdown File

Markdown is an easy way to write HTML. Create a new file test.md in the new branch. (.md stands for Markdown)

Now open your file and add this content:

# My Document Title

This is a markdown document!

Here is a bulleted list:

* Item 1
* Item 2

## A Second-Level Heading

This is another heading!

![Heres an Image](https://squarebit.io/images/page/home/squarebot-blue.png)

Here is a [link](https://squarebit.io).

You did it! Now commit and push your code, then visit your product page.

You should see something like this:

documentation page result

You can also use basic HTML if you prefer it.

Setting Document Metadata

Let's take a look at something called YAML - "YAML Ain't Markup Language." It's an easy way to set metadata for the document you created.

Here's a look at setting some options:

---
title: API Request Cheat Sheet
permalink: a-different-permalink
categories:
    - Getting Started
---

# My Document Title

This is a markdown document!

All YAML blocks are denoted by the three dashes at the head of your document ---. Let's see some options available for metadata:

title If not set, the title is generated from your file name (test.md in our example.)

It's recommended you set the title yourself for readability.
permalink If not set, the permalink is generated from your file name.

Set this to make a shorter URL, which is handy for when you have long titles.
categories Optionally set categories, which will group your docs together in the same category. You can set multiple with more dashes if you'd like!

Accessing the category page in this example, you would go to: my-product/documentation/getting-started

Note that using categories will change the URL to your article. In this example, our new URL is now: my-product/documentation/getting-started/a-different-permalink

Widgets

SquareBit.io documentation supports the concept of widgets. Currently we only have one, but are open to ideas on more!

Code Dialog

Do you have a large bit of code that is making your docs messy? Show a button instead that opens it in a pretty dialog!

documentation page result

Here's how it's done:

<CodeDialog
    buttonText="See Response"
    title="Your Title Here!">
    This is where your code goes.
</CodeDialog>
buttonText The text that is displayed on the button which opens the dialog.
title The dialog title.

And that's it! Have suggestions? Drop us a line: Contact Page