This monorepo is separated into 3 directories:
discord: Representing Magnus, the discord bot that grabs images from Midjourney and publish them to Notionpackages: Representing shared packages (i.e: the notion helper)web: Representing the blog itself
Before you start the project, you must have installed certain pieces of software.
- NodeJS (Download the latest available version 20.x)
- Pnpm — You can make it work with
yarnornpmbut I highly suggest usingpnpm
First, clone the .env.example to .env.local. This file will store all the environment variables required to run the project.
Warning Never share this file or its content to anyone
Create a new Notion API Integration.
Copy the Internal Integration Secret, found by clicking in your newly created integration, under the Secrets tab.
Save this variable to your .env.local like:
NOTION_TOKEN="<Internal Integration Secret>"Next, you should create a new page on notion and add 2 inline databases to it. You can also do it in many other ways, as long as their schema is the same as the followings:
Images Database Schema
| Property Name | Type |
|---|---|
| Name | Title |
| Image | Files & medias |
| Prompt | Text |
| PromptShare | Checkbox |
| Collections | Relation |
| CreatedAt | Created time |
Collections Database Schema
| Property Name | Type |
|---|---|
| Name | Title |
| Images | ↗︎Relation1 |
| UpdatedAt | Rollup > Images > CreatedAt > Latest date |
Once you have created these databases, you need to get their unique ID and add them into your .env.local.
To do so, click on the "..." next to the New button on the database an then click Copy link to view.
Here is what the link should look like:
https://www.notion.so/john-doe/<DATABASE_ID>?v=...
NOTION_IMAGES_DATABASE="<Image Database Id>"
NOTION_COLLECTIONS_DATABASE="<Collections Database Id>"Create a new Discord Application (the bot).
Once you created your application, you will need the following variables:
Application ID: Can be found in the General Information tabToken: Bot > Token (Reset if needed)
Warning These should always remain private! Never share them with anyone
Add these variables to the .env.local file that you previously created by copying the .env.example at the root of your project directory.
...
DISCORD_TOKEN="<Token>"
DISCORD_APPLICATION_ID="<Application ID>"Some routes of the API (i.e: the image OpenGraph route) are protected with an encryption key to prevent malicious usage.
This encryption key can be anything, see it as a sort of "password".
ENCRYPT_KEY="<Your Encryption Key>"Note If you are one macOS or Linux, and have OpenSSL installed, run the following command:
openssl rand -base64 16 | pbcopyIt will generate a 16 character base64 key that you can use as your encryption key
First, install all the dependencies
pnpm installFinally, start the development server:
pnpm devNote Both, the Blog and Magnus will start with the same command. They also both react to changes on their source files, so you do not have to restart them to see the changes
Warning As of today, I do not recommend to use Magnus in production yet, as well as the Blog — It's subject to a lot of change, and unless you know what you are doing, follow the development on my X (ex-Twitter)
The blog can easily be deployed on Vercel, everything is pretty much explained there, only thing that you have to take in consideration is the environment variables that you MUST add to your Vercel project, otherwise nothing will work.
Magnus can be deployed on the cloud (Netlify, fly.io, ...) or on a private server (VPS, Dedicated, Bare-metal). I personally opted for the private server solution, as I have few of those that are unused/lightly-used. It does not require a lot of resources to run so you pretty much don't feel any impact on the performances of your server
Footnotes
-
This relation should be automatically created when you create the Collections relation in the Images Database Schema ↩