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
This is just an example of content for this page, you do not need to follow these instructions.
In your terminal, cd into any directory and run the install command:
npm i --nothing
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=927349872349798To 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 AppAdd .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.
Python test
# Python program to swap two variables
x = 5
y = 10
# To take inputs from the user
#x = input('Enter value of x: ')
#y = input('Enter value of y: ')
# create a temporary variable and swap the values
temp = x
x = y
y = temp
print('The value of x after swapping: {}'.format(x))
print('The value of y after swapping: {}'.format(y))