Source Medium Knowledge Base
Source Medium Knowledge Base
šŸ““

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 ā†’