Featured
Telemetry System - Taman Sunggala Hartamas (Si Rusa/Port Dickson)Mardi Serdang - Sistem Pengairan dan Fertigasi bersepadu IOTDurian Orchard - BentongCategory
Services
Booster Pump Panel Replacement© FLOW SOLUTION 2023
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.
- 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.
<!-- 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" />
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! 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.
On this page
- Welcome to Cluster 🥳
- Getting Started
- Adding Analytics
- SEO
- 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
- Enabling page icons in the sidebar
- My navbar is broken after the update and I want to restore it!
- Setting table text to left align
- Reset inline code styles
- Change the max-width of the center content column
- Re-enable the default Notion title and cover
- Feedback, issues and support
- Want your own custom Super theme?