Documentation

Guides and quickstarts for integrating your company products.

Welcome to your new documentation!

Thanks for trying out Scale's Custom Documentation Example! Here you'll find a quick setup guide to integrate your Readme documentation content with this example.

When you've finnished all of these steps remember to change the content of this page since it will be your home. You can do this in ./components/docs/IndexPage.

Connect with Readme

Go to Readme and create an account.

In the Readme dashboard go get your API KEY in the Configuration > API KEY tab.

After you've copied the API KEY go to the root folder and create an .env file and type README_AUTH_TOKEN=your-auth-token where your-auth-token is your API KEY.

If you already have created categories and pages under the categories in localhost:3000/docs you should be able to see the navigation populate with your categories and pages.

If you haven't done this then you won't get any navigation or pages so get to Readme and create those!

Where's my code at?

You'll be able to find all the functions used to retrieve the content and the search function from Readme in the ./lib/content/docs.js file.

On ./pages/api/content/docs.js you'll find where we store search results from the Algolia integration Readme has. You can find more information about API Routes in the Next.js API Routes documentation.

On the ./pages/docs folder you'll be able to find the home for docs and the [slug].js file which will be rendering any page under the category you've created it.

Last but not least in the ./components folder you'll find all the components we used to create this example. Feel free to customize anything you want!

How to style?

In the ./tailwind.config.js file you'll be able to see all the customizations we did for the Tailwind theme. There you'll be able to change fonts, colors, spacings, etc. More information about the Tailwind Theme on the Tailwind Theme documentation.

We also used CSS Modules for the custom CSS we wanted to add to the example, you can find this CSS in any .module.css file.

Good luck, have fun :)