Features
BlocksColour ThemesTypographyExample Usage
Code DocsDesign SystemBlogMore Info
What is Notion?What is Super?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.
- Then, in the 'Body' tab, copy and paste the code below into the code box.
- That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.
<!-- 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" />
<!-- 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>
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" />
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
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.
- Replace βcolor-green with any of the options below:
- Save your changes and reload your site.
:root {
--color-primary: var(--color-green) !important;
}`
--color-gray
--color-brown
--color-orange
--color-yellow
--color-green
--color-blue
--color-purple
--color-pink
--color-red
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
- Adding Analytics
- 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?