Featured

📓Telemetry System - Taman Sunggala Hartamas (Si Rusa/Port Dickson)Mardi Serdang - Sistem Pengairan dan Fertigasi bersepadu IOT Durian Orchard - Bentong

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>

Next, in your site settings head to Theme and enable the ‘Super Navbar’. Here you can add a logo and a call to action button (Please note: any links you add here will not be visible on mobile because Cluster uses a custom script to show the sidebar on mobile view instead)
That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

Adding Analytics

Adding analytics to your site is an incredible way to get more insight about your users and your brand. Google analytics is often cited as being an unfriendly option and so I would recommend using Fathom instead, they are a great company that do not compromise privacy for data.

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" />

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

⚠️

Since the v1.5 update, Cluster no longer uses a synced block for the navbar. You can add a custom navbar yourself in your site settings > Theme > Navbar.

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!~~ Notion added functionality for this now, just type /columns.

Enabling page icons in the sidebar

If you want the icons to appear next to a page title in the sidebar use this snippet in your code > css.

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

My navbar is broken after the update and I want to restore it!

I recently made an update to the code which makes Cluster more suited to Super’s new navbar and footer features, if you want to keep the old navbar and undo the changes you can simply use these new code snippets:

First in your site settings > Code page, in the ‘Head’ tab, replace the stylesheet code with the following:

<link href="https://joshmillgate.github.io/cluster/style-v1.css" rel="stylesheet" />

Next, in the ‘Body’ tab replace the script code with the following:

<script src="https://joshmillgate.github.io/cluster/script-v1.js"></script>

That’s it! If you have any further issues please get in touch.

Setting table text to left align

By default table text is aligned centrally. If you want to change this to left align, please paste the following snippet into the Code page > CSS tab

td, th {
  text-align: left !important;
}

Reset inline code styles

To reset the inline code styles to Notion default, use this snippet at the very bottom of the HEAD tab.

<style>

.notion-semantic-string .code::before {
 content: "" !important;
}
.notion-semantic-string .code::after {
 content: "" !important;
}

.notion-semantic-string .code {
 border-radius: 5px!important;
background-color: var(--color-ui-hover-bg)!important;
color: #ff4081!important;
font-size: 0.9em!important;
padding: 2px 4px!important;
word-break: break-word!important;
}
</style>

Change the max-width of the center content column

By default the center content column has a max-width of 750px. If you want to change this, please paste the following snippet into the Code page > CSS tab and adjust the values accordingly.

.notion-root > .notion-column-list > .notion-column:nth-child(2){
	max-width: 750px !important;
}

You can also modify the padding of this column using the snippet below.

.notion-root > .notion-column-list > .notion-column:nth-child(2){
		padding-left: 40px !important;
    padding-right: 40px !important;
}

Re-enable the default Notion title and cover

By default the default Notion heder is hiden. If you want to enable it, please paste the following snippet into the Code page > CSS tab.

.notion-header{
	display: block!important;
	border-bottom: 1px solid var(--color-border-default)!important;
  margin-bottom: 0px!important;
  padding-bottom: 20px!important;
}

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.