Designing Tomorrow: Exploring Radical Architectural Solutions with Sanity
In the rapidly evolving domain of content management systems (CMS), the Nightjar engineering team have crafted bespoke enhancements for Sanity that redefine the platform's flexibility.
In the rapidly evolving domain of content management systems (CMS), the Nightjar engineering team have crafted bespoke enhancements for Sanity that redefine the platform's flexibility. This gives us the benefit of tailor-made solutions that meet the very different requirements of our diverse client base - who could be online retailers, or enterprise level service-based businesses with several dozen practices on the one CMS instance.
In this breakdown, we'll explore these customisations, including hierarchical multi-site architecture, override capabilities for global pages, sophisticated referencing systems, a custom slice picker component, a versatile theming system with tailored input components, and additional user-friendly features.
1. Hierarchical Multi-Site Architecture
A core requirement of one of our recent builds, National Dental Care (NDC), was an advanced hierarchical multi-site architecture. There are primary sites for the companies “National Dental Care” and “DB Dental”, then there are child sites for each practice that sits under these brand banners. There are also “co-branded” and “non-branded” practice sites, which are more standalone with more bespoke branding (as they are practices the NDC master company acquires), and they can either sit on their parent’s domain as a slug or have their own domain. The Sanity structure is not hard coded either, as the site groups and parent referencing is all handled within Sanity.
We then handled this on the frontend using Vercel’s edge middleware to reroute the paths internally in the next.js application. This approach was really powerful as it allows content editors to work inside a single CMS to edit over a hundred sites and their respective pages quickly and easily, share assets between them, and reference global elements and pages.
2. Global Pages and Override Capabilities
Something that became quickly apparent with over a hundred sites, all with similar pages, was that content management was going to be a mammoth task. We ended up developing a global page system that allows for pages to be global, but also overwritten on a per-site basis for the best of both worlds. This becomes even more powerful when leveraging our more automatic modules. Pages such as the dental treatments listing page were built using this method, as it automatically pulls in the available treatments depending on the site. This approach was also used for the individual treatments pages themselves.
3. Global Menus, Footers, and Advanced Referencing
Due to the inherent complexities of the multi-site setup we wanted to modularise similar elements across all the sites as much as possible to reduce content overhead. We used document types and references in Sanity for things like menus, footers, notification banners, campaigns, etc. This sped up the content entry enormously, as for example the complex mega menus are shared across over one hundred child sites. We also leveraged this approach for smaller details at each practice, such as languages spoken, job titles of team members, practice accessibility features, etc to ensure consistency and streamline updates across hundreds of pages.
Another advanced requirement of NDC was that the available treatments for each practice are inferred automatically based on its practitioners. A site/practice has an array of references to “practitioner” documents, and practitioners have an array of references to treatment pages. These references are then joined and collated using GROQ queries. Treatments are also global pages with content that can be overwritten on a per-site basis. This allows for content editors to simply add a practitioner to a practice and the site automatically adapts, without also having to maintain a huge list of available treatments.
4. Custom Slice Picker Component
Since our sites are built entirely of modules we call “slices”, the UI for this in Sanity can quickly get out of hand, and especially confusing for content authors who aren’t familiar with each slice’s name. To solve this we developed a custom slice picker component that presents a grid of screenshots of the available slices. It has an auto-selected search box too so you can just start typing if you know what you’re looking for. We also have a variant feature that allows us to create multiple versions of the same slice in different configurations with different initial data, which makes it more clear what options are available. This is all powered by and controlled within Sanity itself as well, so developers aren’t needed for updates.
5. Tailored Theming System with Custom Input Components
Another requirement on the NDC project was that some child sites would have their own branding and colour schemes. To achieve this, Nightjar’s design team established a colour palette system and designed all the pages and components around this system. On the dev side we created fields for logos, favicons, and the colour schemes in Sanity. Then we bring this into the front end using global CSS variables which trickle down to every component on the page. The colour scheme system is hierarchical so child sites will fallback to their parent site’s colour scheme if left undefined. In the Sanity Studio we also created a custom field and input component that would automatically resolve the theme for the current page’s theme and display those colour values, allowing content authors to easily visualise how it’ll look on the front end.
6. Custom Form Builder
We developed a custom form builder inside Sanity that allows content authors to easily create any kind of form they need without having to rely on third party tools and embeds. This also allows us to get a fully cohesive design for the form on the front end (something that’s a challenge with other solutions) as we can leverage our existing components. The form is powered by Vercel serverless functions on the backend.
7. Additional User-Friendly Features
In addition to our core customisations, we've introduced several user-friendly enhancements to the content authoring experience in Sanity.
Since our sites are entirely built out of slices, we frequently find ourselves wanting to copy slices from one page to another, so we developed this general purpose copy and paste plugin that works with any array field, by simply enabling it as an option in the field schema.
We also developed a custom preview component for our “colour changer” slice, which controls the colour blocking of the slices on the front-end. By adding a horizontal rule and more subdued typography, it breaks up the visual overstimulation of the list and groups the slices in a way that is more similar to the actual frontend.
As the NDC build leverages extensive referencing techniques as mentioned above, we needed a way to see what other documents were referencing the current page we were editing. We extended this community plugin to make it more suitable for our needs.
Conclusion
At Nightjar we care deeply about the user experience of the CMS, and we believe design and UX does not stop at the frontend of the website. Sanity’s combination of a flexible and robust core featureset, and extensive customisability with React, allows us to create tailor made CMS setups that delight our clients and blow away the competition. This is why Sanity continues to prove itself to be our go-to content management solution.