📓

Code Docs

Code Docs

Cluster is ideal for for code documentation, below is a bunch of placeholder content that gives an idea of how you might use it.

Overview

Cluster is the best way to make your Notion documentation beautiful. It's simple and straight-forward to setup and updating content is a breeze.

Prerequisites

To install Cluster you will need the following:

  • A computer
  • An internet connection
  • A Notion account
  • A Super account

Install Cluster

In your terminal, cd into any directory and run the install command:

open https://flurly.com/p/cluster

Once the command has been run you’ll be able to purchase Cluster and start building your new site straight away on http://super.so ✹

đŸ€˜đŸ» You're on the right track, keep it up.

Getting Started

To use Cluster, all you need to do is copy and paste the following code into your Super site settings.

<!-- Meta Descriptions -->
<meta name="description" content="SEO DESCRIPTION HERE">
<meta property="og:description" content="SEO DESCRIPTION HERE">
<!--- Theme stylesheet - Do edit or remove -->
<link rel="stylesheet" href="https://joshmillgate.github.io/cluster/style.css"/>
<!-- Insert any additional styles below -->

Customising Cluster's colours

To use add your own brand colour to Cluster, all you need to do is copy and paste the following code into your Super site CSS settings.

:root {
	--color-primary: #HEXCODEHERE !important;
}

⚠ Please note: this is only an example notice

Embed Codepens

Environment Variables

Cluster has built-in support for loading environment variables into the browser and Functions. Loading environment variables into Node.js requires a small code snippet.

In development, Cluster will load environment variables from a file named .env.development. For builds, it will load from .env.production.

A .env file could look like:

CLUSTER=https://dev.example.com/apiAPI_KEY=927349872349798

To load these into Node.js, add the following code snippet to the top of your cluster-config.js file:

require("dotenv").config({  path: `.env.${process.env.NODE_ENV}`,})

This loads process.env.CLUSTER_API_URL and process.env.API_KEY for use in cluster-*.js files and functions.

For example, when configuring a plugin in cluster-config.js:

require("dotenv").config({  
	path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {  
	plugins: [    
		{      
			resolve: `cluster`,      
			options: {        
				apiKey: process.env.API_KEY,      
			},    
		},  
	],
}

Accessing Environment Variables in the browser.

By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.

To expose a variable in the browser, you must preface its name with CLUSTER_. So CLUSTER_API_URL will be available in browser code but API_KEY will not.

Variables are set when JavaScript is compiled so when the development server is started or you build your site.

import React, { useState, useEffect } from "react"
function App() {
  const [data, setData] = useState()
  useEffect(async () => {
    const result = await fetch(
      `${process.env.CLUSTER_API_URL}/users`
    ).then(res => res.json())
    setData(result.data)
  })
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>
          <a href={user.url}>{user.name}</a>
        </li>
      ))}
    </ul>
  )
}
export default App

Add .env* files to .gitignore

Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add .env.* to your .gitignore file and setup the environment variables manually locally.

⚡
Alright, what's next đŸ„ł Check out our design system example Let's go →