📓

Web3 Builder? Find Your Blockchain

Home Resources About Sign Up

Layer 1 Chains

Layer 2 Chains

Everychain

About Articles / Resources in Development

Welcome to Cluster 🥳

Thank you for choosing Cluster as your new documentation template. Everything you need to get started is included below 👇

Getting Started

Sign up with Super and Notion if you haven't already
Open the Notion template provided in the downloadable PDF and duplicate it to your own Notion workspace.
Create a new site using Super using a public link newly duplicated Notion page (Instructional video)
Open the Settings page for your super site and click into the Code page.
First, in the 'Head' tab, copy and paste the code below into the code box.

<!-- Custom font for code blocks -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap" rel="stylesheet">
<!-- Prism syntax stylesheet -->
<link href="https://joshmillgate.github.io/cluster/prism.css" rel="stylesheet" />
<!-- Cluster stylesheet -->
<link href="https://joshmillgate.github.io/cluster/style.css" rel="stylesheet" />

Then, in the 'Body' tab, copy and paste the code below into the code box.

<!-- Jquery Library -->
<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous"></script>
<!-- Cluster Script -->
<script src="https://joshmillgate.github.io/cluster/script.js"></script>

That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

SEO

If you want to improve and have more control over your SEO data, you can use Super's built in functionality in the website settings (Pages > SEO icon on home page) or simply use this code snippet instead. Make sure to replace all the content values with information relavent to your website. Instead of step 5 above, use this code to paste into the 'Head' tab.

<!-- Primary Meta Tags -->
<title>Cluster</title>
<meta name="title" content="Cluster">
<meta name="description" content="Cluster – making Notion documentation beautiful">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://cluster.joshmillgate.co.uk/">
<meta property="og:title" content="Cluster">
<meta property="og:description" content="Cluster – making Notion documentation beautiful">
<meta property="og:image" content="https://super.so/_next/image?url=https%3A%2F%2Fsuper-static-assets.s3.amazonaws.com%2Fc0b35e48-5774-475b-90c0-f6f50b979687%2Fimages%2F8e5e0bf9-4947-4aa0-8e84-eeff7e33cca4.jpg&w=1680&q=100">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://cluster.joshmillgate.co.uk/">
<meta property="twitter:title" content="Cluster">
<meta property="twitter:description" content="Cluster – making Notion documentation beautiful">
<meta property="twitter:image" content="https://super.so/_next/image?url=https%3A%2F%2Fsuper-static-assets.s3.amazonaws.com%2Fc0b35e48-5774-475b-90c0-f6f50b979687%2Fimages%2F8e5e0bf9-4947-4aa0-8e84-eeff7e33cca4.jpg&w=1680&q=100">

<!-- Custom font for code blocks -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap" rel="stylesheet">
<!-- Prism syntax stylesheet -->
<link href="https://joshmillgate.github.io/cluster/prism.css" rel="stylesheet" />
<!-- Cluster stylesheet -->
<link href="https://joshmillgate.github.io/cluster/style.css" rel="stylesheet" />

Using Super navbar

If you'd like to use Super's navbar instead of Clusters then you can use the snippet below to remove unnecessary padding once you delete the old navbar synced block and add Super's navbar.

.notion-root>.notion-column-list>.notion-column:first-child {
    margin-top: 0px!important;
}
.notion-root>.notion-column-list>.notion-column:nth-child(2) {
    padding-top: 30px!important;
}
/* If you want to add a border to the bottom of the navbar like the original Cluster one */
.super-navbar {
  border-bottom: 1px solid var(--color-border-default)!important;
}

Syntax Highlighting

Cluster uses Prism.js for custom syntax highlighting. The scope of highlighting available through Cluster is limited to Markup, HTML, XML, SVG, MathML, SSML, Atom, RSS, Javascript, Typescript, React/Jsx, CSS, SASS/SCSS, C-Like and GraphQL. For more scope and for further customisability you will need to host and link your own Prism files. Visit this page for more information. You can find a range of colour themes here.

Going Live Checklist

Update all the content on the Notion page to your own needs

Change all links synced blocks

Add pretty links for your pages, projects, and blog posts using Super’s pretty URL settings (Instructional video)

Layout and Synced Blocks

Cluster uses a specific layout structure and synced blocks to maintain good design throughout your site. Check the video out above to learn more.

Adding a new page

Head to the bottom of your Cluster homepage on Notion and open the grey Control Panel 🎛' Toggle block.
Click the 'New Page +' button which will generate a new empty page using the Cluster layout.
Next change the content of the page to your needs.
Then move the page to wherever you need by drag-and-dropping or right click and hit 'move'.

Changing the primary colour

Open the Settings page for your super site and click into the Code page.
On the tabs at the top click 'CSS' and simply copy and paste the code below into the text box.

:root {
  --color-primary: var(--color-green) !important;
}`

Replace —color-green with any of the options below:

--color-gray
--color-brown
--color-orange
--color-yellow
--color-green
--color-blue
--color-purple
--color-pink
--color-red

Save your changes and reload your site.

Adding your own custom colour

In order to add your own brand colour there are a few extra steps.

In order to add your own brand colour to Cluster as well as including the custom colour as your primary colour, you must overwrite one of the existing colours in Notion.
For example, if you want to use a vibrant blue colour like the hex code #7dd17d below, we will now not only assign it to the '—color-primary' variable but we will also assign it to the '—color-blue' variable so we can use it anywhere in our Notion site.
Be sure to overwrite the colour nearest to your brand colour.

:root {
  --color-primary: #7dd1d8 !important;	
	--color-blue: #7dd1d8 !important;
}

Using Cluster's blocks

This video explains how to create the unique blocks in Cluster. As a general guide I recommend duplicating items from the 'Blocks' Page and using them throughout the site.

To create a bordered subheading use '/quote'
To create a button use a '/callout' with a default background colour and a link on a single line of text
To create a 'icon cards block' use '/gallery' with properties > card size > small
To create a 'cards block' use use '/gallery' with properties > card size > medium
To create a 'Call to action text block' use '/callout' with a background colour, a first line of bold text, a second line of standard text and a third line with linked text. Use Shift+Enter/Shift+Return to create a new line.
To create a 'Message block', just add a background colour to the text block.

Changing the font

Open your site in Super and head over to the site settings.
Click into the 'theme' page.
Choose a font
🥳

Showing page icons

If you want to show page icons you can use this snippet

.notion-page__icon {
	display: flex!important;
}

Removing links from tables

If you want to remove links from tables so that individual pages are not clickable then you can add the following code snippet to the CSS tab on the code page. Please note this will affect all tables with the default view.

From Default view tables

.notion-collection-table__cell.title > a {
  pointer-events: none!important;
	cursor: default!important;
}

.notion-collection-table.wrap-cells .notion-collection-table__cell.title .notion-semantic-string > span {
 border-bottom: none!important;
}

From gallery view tables

.notion-collection-card .notion-collection-card__anchor {
  pointer-events: none!important;
}

.notion-collection-card {
   cursor: default!important;
}

Adding columns within columns

If you want to add multiple nested columns in the Cluster template you can use a tool I created here to make it super easy. You can duplicate it for free at the bottom of the description. Watch this video to see how it works!

Feedback, issues and support

If you find any bugs, have suggestions for improvement or need some help with Cluster, please get in touch by emailing me at: hello@joshmillgate.co.uk

Want your own custom Super theme?

I'm taking commissions from anyone that wants their own bespoke template for Super and Notion. Get in touch! You can see more examples of my work on my website and stay in touch by following me on twitter.

On this page

Welcome to Cluster 🥳
Getting Started
SEO
Using Super navbar
Syntax Highlighting
Going Live Checklist
Layout and Synced Blocks
Adding a new page
Changing the primary colour
Adding your own custom colour
Using Cluster's blocks
Changing the font
Showing page icons
Removing links from tables
Adding columns within columns
Feedback, issues and support
Want your own custom Super theme?