Northern Productions is a 30-year-old custom display and event marketing company. They use creativity and ingenuity to provide memorable experiences for their clients.

We were asked to design and execute a complete redesign of their website. They also needed a custom CMS solution to manage their content.

We focused on a clean, elegant, and bold style to convey professionalism as well as communicate Northern Productions' established presence in the industry. We wanted visitors to be encouraged to click around and learn more about the company through the inspiration of animations, transitions, and engaging content.

SEO and user experience were the two most important elements for this project. We decided on a React + NextJS stack because of the benefit of server-side rendering, and the opportunity to build a scalable and memorable experience efficiently. NextJS sits on top of Netlify CMS to provide an easy way for the Northern Productions team to update their content, add new case studies, and ultimately take control over all of their website experience without developer intervention.

An elegant and modern website redesign with custom headless CMS

Northern Productions Website Redesign

We use Next.js. to power many of our digital experiences and custom web applications every single day. Learn more about how we use Next to build scalable, memorable, and performant web apps.

See how we helped CFIB serve millions of page views using Next.js

From Legacy Monolith to Modern Web App

Next.js

We're pleased to announce the beta launch of our 

open-source JavaScript Discord Bot boilerplate and CLI tool

! We're looking for feedback and contributions and would love to hear from you on the 

Our team creates custom Discord bots for many of our internal and client processes. Building custom integrations in Discord gives us the flexibility to quickly access data around our day-to-day processes, as well as create powerful tooling to enhance our developer experience. Some examples of this include real-time status updates on articles that our team collaborates on, code reviews, and even team raffles and giveaways. Since we create so many, we wanted a way to quickly launch new bots and cut down on our development time.

After a few iterations, we simplified the setup process as much as we could:

1) We click the "use this template" button on the 

 to kick off the CLI tool and set our project up

The CLI tool has some powerful functionality built-in:

We can install the bot on our Discord server

We can generate a slash command with all of the supported 

, and even pre-define options that are available to the user

We can generate event listeners for all of the supported 

We can deploy all of our commands to Discord, and run our bot

This boilerplate is still in beta, but we plan on releasing modal builders, button and interaction builders, a TypeScript boilerplate, and much more.

If you're curious about how Discord bots work and want to learn more, please feel free to 

Quickly create slash commands with a CLI tool

JavaScript Discord Bot Boilerplate and CLI

Discord is a VoIP and instant messaging social platform and has a tremendous developer ecosystem. It is an excellent platform for custom integrations.

Discord

Home Page Configuration

 is the first real-time chatbot built for Discord. We wanted to create a solution that let our team interact with our web visitors right from our team's Discord server. We also wanted to share this project with the community, which is why 

 is a completely free product for you to use today!

The first challenge was to create a clean yet functional chat experience. Many chatbots are bloated and a nuisance for visitors. We wanted 

 to be a simple yet effective means of communication for our web visitors.

We built the widget with React.js, and it is quickly integrated into your website with a single line of code. All of the content and web socket connections are managed through our bot application server.

We wanted a simple way for users to signup for 

 using their existing Discord accounts. The signup flow looks like this:

1. A user signs up with their Discord account

There is no email or password necessary. A new or returning customer can quickly sign into the dashboard using their existing Discord account.

2. A user chooses the Discord server they want to add the bot to

A user will see a list of the guilds that they can add the 

 bot to based on their account's permissions. After 

 is connected, they will receive a message in their Discord server from the bot saying that the integration was successful!

3. A user can get the widget script tag from the dashboard

The last step to getting the bot live on your website is adding the widget script tag to your existing website. This can be copied and pasted into the 

 element on the page(s) you want the widget to appear.

Now the widget is live on your website! When a visitor sends a chat through the widget, the bot will kick off a new thread on our Discord server. Here's an example of what a new chat interaction looks like in real time:

 to build our custom bot integrations. Discord's robust API allows us to interact directly with users on Discord, and even integrate other custom services like our web chat widget.

When a user visits your website after the widget is integrated, our bot server renders the React widget on your web page. It also opens up a socket connection that connects the visitor directly to your chatbot. The chatbot acts as a "middleman" and receives messages from either the web user, or from your team on Discord. It handles all of the message delivery. Multiple team members on your Discord server can even interact with the same visitor through the same socket connection!

The bot also provides details to you about where the visitor is located and their timezone, as well as other useful metadata. This is helpful if you need to change your communication or messaging for different visitor locations.

We have also created several "slash commands" that you can use to manage your bot directly from Discord such as turning the widget on and off, adding team members to your 

. We will be adding many new features in the future, and would love your feedback. We have created a feature request forum on the dashboard where you can ask for new features, comment and upvote other feature requests, and interact with the community. You can 

Using web sockets, we can create real-time communication and seamless experiences as we have with 

. The possibilities for custom integrations are endless, and Discord is an extremely powerful communication tool that is quickly picking up steam. Are you looking to build a custom Discord integration or chatbot? Our team of experts would love to learn more and help you build an incredible and cutting-edge digital experience. Please 

Powering live chat with Discord

How We Built Discord's First Web Chatbot

Director IT

Automatically generate social share images using Sanity webhooks, and your Next.js API!

Note: Redis is necessary because we need a caching layer to prevent an infinite update loop in Sanity's webhooks when the library updates your social image. Also, we need to use a Redis service to solve this because Vercel's serverless functions are stateless, so we can not manage caching locally.

Whenever an article is updated in your Sanity studio, we want Sanity to notify our Next.js app, and send along the data we need to generate the social share image.

Select your project, and click on the "API" tab

Set up a webhook with the following options:

: The URL your webhook will hit to trigger the image generation (if you're deployed to vercel, it might look something like: 

https://your-app.vercel.app/api/generate-preview-image

Note: If you want to test this functionality in your local dev environment, you will need to use an

URL to point to your localhost. More information on this can be found

: Depending on your Sanity schemas, you can define different types of documents you'd like to generate social share images for. For example, if you wanted to add a social share image to your articles or topic pages, you would use:

: Please follow the same data structure as below. These are the pieces of data that the social image generator needs to properly generate your image:

: The text field you want to display on your social image. In the above example, it's our "title" field in our Sanity schema


: The background image that you want to display on your social image. In the above example, it's our "image" field in our Sanity schema

Click the "Save" button at the bottom of the page.

If your Next.js application does not currently have a Read / Write token in Sanity

In the API tab, scroll down to the bottom of the page and click on "Add API Token"

Add a name, like "Social Share Image Generation"

Copy your token and save it in your Next.js environment variables. You will need this later!

In your Sanity project, add a new field to the document schema that you will be generating social share images for.

{ name : 'shareImage', title : 'Social Media Image', description: 'This is automatically generated by Next.js and can not be modified.', type : 'image', readOnly : true },

In your Next.js application, run the following command to install this package:

yarn add sanity-next-social-image-generator

npm install sanity-next-social-image-generator --save

This is used to receive Sanity's webhook requests.

Create a new file in your API folder called: 

6) Update your Next.js page(s)' meta tags

In your Next.js page where you are using your article data, make sure you add your new image to your 

 tags so that is shows up when your share your article!

Your app is now set up to receive Sanity webhooks and automatically generate your social share images!

The client is used to authenticate with Sanity and upload your social share images. It takes the following arguments:

: The Sanity dataset you want to update (e.g. production)


: The full URL of your Redis instance. We recommend using 

: Your Sanity Editor token (used for updating your article data with the social share image)

There are many options available to you that you can use to control how your social share image will look.

 The ID of the document you are adding a social share image to


 The URL for the main image on your social share image. This can be any image, but typically you will use an image you define in Sanity (see 

 The text that will be displayed on your card


 How the image should be resized to fit the dimensions. Can be one of 

: The size of your font. Note: You might need to modify this if you change the default width and height of the social share image


 The name of the font you want to use (font family)


 Darken your background image (# from 1-100)


 Brighten up your background image (each number is a multiplier)


 Where you would like to place your logo on the image. Can be one of 

 Add a filter color overlay over the background image. Must be a hex code, or a valid css color type.

If you want to test this functionality locally, your Sanity webhook will have to point to an NGROK URL. Ngrok tunnels your local environment, and creates a public URL.

Run the following command in your terminal to expose your Next.js application: 

Copy the https URL that NGROK provides, and update your Sanity webhook URL to use this instead

If you followed the above steps, the Sanity webhook should now start hitting your localhost API. You can also configure a production and a dev webhook to use two different URLs if you wish.

Node 16.x may cause issues on M1 Macbooks due to the 

 being used to process images.
If you run into an error in your Next.js application when using this library that says 

Module parse failed: Unexpected character '?'

, try updating your local Node version to 17.x.

Pull requests are welcomed! Husky is set up to lint and format your code. Please also update the README.md file with any modifications you make.
There is a sample tool set up in 

 to generate and save image files locally. You can run 

 to run this code while you are testing. The output file will be saved in 

 if you face any bugs, or would like to request new features.

Sanity Nextjs Social Image Generator

As proud members of the open-source community, we believe that building software in a decentralized and collaborative way benefits everyone.

Open Source

This mini utility is used to help mock your CLI tools when writing tests in frameworks like Mocha or Jest. It will spawn your CLI tool, and synchronously execute an array of predefined commands you provide like arrow/enter keys, text inputs, etc.

Commands run synchronously, so the order of the commands that you use matters. Currently, this library supports the following inputs:

You can pass any string argument to your cli. For example, filling in an input prompt with "hello, world!".

Pull requests and feature requests are welcomed!

Husky is set up to run linting and formatting before commits.

This mini utility is used to help mock your CLI tools when writing tests in frameworks like Mocha or Jest

CLI Mocker

This boilerplate is for single-tenant Discord bots (ie. installing on a single server). It also ships with a CLI tool to help you start writing your bot quickly!


, and features may change quickly before the stable release. Please check back here regularly for updates. Contributions are also welcome!

A Discord account, and the Discord application installed on your computer

This boilerplate was created to help you start writing Discord bots quickly! After you run the setup below, you can either use the CLI tool to help you generate slash commands and event listeners, or you can manually create them on your own. This boilerplate uses Discord.js to help you write slash commands and event listeners. You can learn more about how it works 

.
The folder structure in this boilerplate is opinionated and will help you automatically deploy your slash commands, and mount your event listeners:

This is where your slash commands will live. You can either create files directly in this folder, or you can create folders in here to organize your code. When you run your project in dev or production mode, it will look for all JavaScript files under this directory, and it will deploy them to Discord so that they are available to your bot. You can either manually create files in here, OR you can use the 

 to help generate files and boilerplate code that will be saved to this directory. To learn more about how Slash commands work with Discord.js, you can read about it 

 will live. In this directory, you will see a list of folders that correspond to all of the events supported in Discord.js version 14. You can either manually create JavaScript files in these directories, OR you can use the 

 to help generate files and boilerplate code that will be saved into the event listener that you choose. JavaScript files that live in each of the event folders will receive the corresponding event from Discord. If you have multiple files in these directories, they will all receive the event. For example, all .js files that live under the 

 folder will trigger whenever a message is created, deleted, or updated in Discord. You can learn more about these events and the data your .js files will receive 

Click the "Use This Template" button to clone this repo.

Using the arrow keys, select the "Set up your bot" option, and press enter. Proceed through the wizard to set up your bot's environment variables. If you have any difficulty finding keys and secrets, please check out the 

 section. If you'd like to set this up without using the CLI tool, you can reference the 

If you didn't install your bot in the previous step, run 

 and select the "Install the bot on your Discord Server" option. Open the link in your browser, and follow the steps, and your bot will be added to your server!

 section below to start writing commands and event handlers.

Currently defaulted to 10. If you wish to override this, please update this in your 

 file. For more information about supported API versions, you can check the 

, you can find your App ID in the "General Information" tab:

Navigate to the "Bot" tab. If you haven't set up your application as a bot yet, click the "Add Bot" button:

Click the "Reset Token" button, to generate a new bot token. This is what you will use for the environment variable. Also, make sure that "Presence Intent" is toggled on at the bottom of the page:

In the Discord app, make sure that "Developer Mode" is turned on in your settings:

Next, right click on the server that you want to deploy your bot to. Click on the "Copy ID" button. Use this as your environment variable.

When you create slash commands and event listeners with the CLI, you'll notice that a 

 is imported into your file. You can use this to handle everything from fetching guild details, fetching a list of users and channels, responding to the user's input, sending a user a private direct message, and much more. For common usecases, see the 

This is the wizard that will set up your project's .env files. The environment variables are used to help your bot communicate with your Discord server, listen for commands, and receive events!

If you need to run the install step again, you can use this to add your bot to your Discord server.

You can use this to start your bot. This will deploy your commands, and listen for events. As long as your bot is installed on your server and your bot is running, you will receive events from your Discord server! You can also run dev mode without the CLI tool by running 

Slash commands let you define "actions" that users can interact with. An example of a slash command might be something like:

In the CLI tool, the "Create a slash command" option will walk you through a series of steps to create your own. It will ask you to name your command, give it a description, and optionally, add some arguments such as a string, a user, a channel, a role, etc. Once you have followed the steps in the wizard, the CLI will generate a skeleton command in 

. You will then be able to modify this file to add the functionality you want! To learn more about what you can do in slash commands, check out the 

Event handlers let you execute code when a specific event happens. For example, when a user sends a message, adds an emoji reaction, changes their name, etc. You can reference the 

 below, and when you can expect them to trigger.

In the CLI tool, the "Create an event handler" option will let you select from a list of supported events. You will be asked to give it a name, and a file will be automatically created with some boilerplate code inside of 

. You can now modify this code to add the functionality that you want! For a full list of supported methods and data structures, you can reference the 

events in the official Discord.js documentation

Triggers when a message is created, deleted, deleted in bulk, or updated.

Triggers when a role is created, deleted, or updated.

Triggers when a channel is created, deleted, or updated.

Triggers when an emoji reaction(s) is added or removed from a message.

Triggers when a user joins or leaves your server.

Triggers when a thread is created, deleted, or updated.

Triggers when a guild member updates. This can happen for a number of different reasons such as:

A role added / removed from the guild member

This boilerplate is for single-tenant Discord bots (ie. installing on a single server)

Discord Bot Boilerplate BETA

The previous part of this article series (

Building Custom Components in Sanity CMS (Part I)

) looked at using custom (React) components to visually represent complex data structures in 

, enabling users to add and update such data. While this offers a lot of functionality, different projects will be comprised of different technologies. Due to various possible reasons, it is  possible that 

 holds only a portion of a project's data, and interaction between Sanity and other database management systems is required. So far, all of the data and interactions that we have been working with are limited to the scope of what is handled within Content Lake, but this doesn't need to be a limitation.

 within custom components in Studio, we can establish interconnections between Content Lake and another database through APIs exposed from a back-end application. We may leverage these APIs in our custom components (just like in any React component), centralizing all of the project's data manipulation inside Studio as if it was an embedded Single-Page Application.

Consider an example where a school teacher may want to create a homework assignment in Studio, modelled by the schema:

 field to be represented by a custom component. Similar to the previous sports tournament custom component example, we create the component and define functions that handle data mutation. 

Suppose that student assignment submissions were held in a separate database, managed by its corresponding back-end application. By implementing and exposing APIs from the back-end application - for example, APIs that deal with marking/scoring a store submission's correctness, a possible functionality we can implement may be automatically scoring submission entries by comparing to the answers in the schema. A dashboard could also be created to view such submissions:

The result is as if we have embedded our own custom dashboard into Studio, centralizing all necessary functionality of the application in a single place.

Centralizing work flow through connecting your tech stack

Building Custom Components in Sanity v3 (Part II)

A scalable, open-source CMS that can deliver content to any digital experience from a proof-of-concept to a production-ready web application.

Learn more about how we deliver meaningful and blazing-fast digital experiences built with Sanity.io

How We Power Stackfive.io with Sanity.io

Sanity.io

This article was written as of Sanity Studio v2. To see the equivalent for Sanity Studio v3, please see 

Building Custom Components in Sanity CMS v3 (Part I)

This article assumes prior experience to using 

, and a basic working knowledge on the usage of 

For web applications where a CMS is a requirement, Sanity's Content Lake and Studio offers a quick way to incorporate a customizable flow for non-technical users to update content.

While Studio has out-of-the-box components to represent simple data structures such as those that make up a simple blog, more complex data types may require more specific methods of representation. For instance, a sports tournament bracket represented by an object nested several-levels deep - with team and seeding data - could be visually represented as:

, which essentially enables us to represent our data structure through React components. All that is required is to implement the React component and to declare it inside the field of the document.

The above is the aforementioned bracket, named `entries`, declared inside an example document schema. `CustomBracket` is a React component, and we can look towards Sanity's documentation on how to start 

, enabling us to retrieve the document `_id`. Using this, we can perform operations to mutate the document:

Note the ternary operation to check for the existence of `_id`; the `useDocumentOperation` hook requires an `_id` be supplied, so a placeholder is given to avoid edge case errors.

Another thing to note: as of the time that this article was written, mutations to a nested property of a field requires replacing the whole field (e.g. in the earlier schema, `entries` is to be replaced even if only a nested property of `entries` is changed). Therefore, the data structure parsing and mutation is left for the developer to implement:

The above shows a full high-level overview of the custom component's flow; a function to handle changes in the `entries` field is used whenever a change to the data needs to be made. The function makes a copy of the data, parses and mutates it, and executes the patch to update the document.

The resulting flow that a user in Studio is left with matches the out-of-the-box flow for non-custom components. Such usage of custom components with more complex data structures makes Sanity extremely versatile. For one, this allows developers to incorporate schemas with more complex data types while maintaining the ability to allow users (such as content creators) to add and update data. There are endless possibilities, and we will explore more ways to leverage this customizability in the upcoming parts of this article series.

Representing complex data types in Sanity

We build scalable custom integrations for the Discord ecosystem

Open-source tools to make the web a better place.

How We Built Discord's First Web Chatbot

Case Studies

Northern Productions Website Redesign

Northern Productions Website Redesign

JavaScript Discord Bot Boilerplate and CLI

JavaScript Discord Bot Boilerplate and CLI

Tutorials

How To Fix Styled Components Page Flicker in Next.js 12+

Building Custom Components in Sanity v3 (Part II)

Building Custom Components in Sanity CMS (Part I)

Topics

Opinions

Building Custom Components in Sanity v3 (Part II)

Building Custom Components in Sanity v3 (Part II)

Building Custom Components in Sanity CMS (Part I)

Building Custom Components in Sanity CMS (Part I)

Open Source

Sanity Nextjs Social Image Generator

Sanity Nextjs Social Image Generator

CLI Mocker

CLI Mocker