AutonotionR

AutonotionR simplifies website management by seamlessly integrating with Notion workspaces. This open-source project enables users to effortlessly update their websites simply by making changes in Notion.

Enjoy the convenience of automatic content updates, ensuring your website stays current across all your devices. AutonotionR streamlines the process, making web management a breeze without unnecessary complexities.

Discover a straightforward and efficient way to keep your website content up-to-date with AutonotionR.

Preview

Documentation

Table of Contents

• Documentation
  • Table of Contents
  • Introduction
  • Project Initialization / Forking the Repository
    • Installing Dependencies
    • Connecting the Database
    • Running the Project
  • Database Setup
    • Database Template
    • Filling in Database Key and IDs
  • Code Structure
    • Data Fetching in index.js
    • App Structure in App.jsx
    • Customizing Logo
  • Notion Database Cautions
  • Common Errors and Solutions
    • "Cannot find 'properties'" Error

Introduction

AutonotionR is an open-source project that enables users to create automated websites seamlessly integrated with Notion workspaces. This documentation provides a step-by-step guide to set up and customize AutonotionR for your needs.

Project Initialization / Forking the Repository

To initialize the project, begin by forking the AutonotionR repository to your account. Please fork the repository by clicking on the Fork button at the top of this repository home, and clone the fork of your repository (<repo-name>) with git clone https://github.com/<your-username>/<repo-name>.git.

Installing Dependencies

Run npm install in two directories; <repo-name>/frontend and <repo-name>/server to install the required dependencies for both of the sub sirectories.

Connecting the Database

Follow the instructions in the Database Setup section to connect AutonotionR to your Notion workspace.

Running the Project

Execute nodemon index.js in the <repo-name>/server directory to start the server for the backend. Execute npm start in the <repo-name>/frontend directory to start the server for the frontend.

Database Setup

Database Template

To get started, use the provided Database Template 📄 to structure your Notion workspace. This template includes essential fields required for integration.

Filling in Database Key and IDs

In your project, create a .env file inside the AutonotionR/server directory with your Notion integration credentials and database key IDs. Refer to the Build your first integration page by Notion for detailed instructions. For your reference, the API key in the project is named REACT_APP_NOTION_API_KEY, and the database IDs are named REACT_APP_<database name>_DATABASE_ID.

Code Structure

Data Fetching in index.js

Examine the data fetching structure in the index.js file to understand how AutonotionR retrieves and updates content from your Notion workspace.

// Fetching data from Notion using the Notion Client SDK
const notion = new Client({
    // your API KEY from Notion
    auth: process.env.REACT_APP_NOTION_API_KEY,
});

// ...

// Fetching PROJECT data
app.get('/project-data', async (req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
    try {
        const response = await notion.databases.query({
            // Your DATABASE ID goes here
            database_id: process.env.REACT_APP_PROJECTS_DATABASE_ID,
            // This SORTS the way your data is retrieved 
            sorts: [
                {
                    property: 'Date',
                    direction: 'descending',
                },
            ],
        });
        res.json(response);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

For more information on sorting the data, please read this page from the Notion Developers Doc.

App Structure in App.jsx

Explore the <repo-name>/frontend/src/App.jsx file to comprehend the overall structure of your AutonotionR application. Customize it according to your design preferences.

This is the general structure:

// imports
function App() {
    // scroll settings 
    ...
    // light/dark mode management 
    ...

    // Fetch data here from the server of this link
    // Later, change this to your own vercel server link.
    // const APILink = process.env.REACT_APP_VERCEL_SERVER_LINK;
    const APILink = "http://localhost:4000";

    // Data fetching from the backend server (Project data is getting fetched here)
    const [projectData, setProjectData] = useState([]);
    const [projectLoading, setProjectLoading] = useState(true);
    useEffect(() => {
        const fetchData = async () => { ... };
        fetchData();
    }, []);

    // Fetching other data
    ...
    // checking for loading completion on console 
    ...

    return (
        <>
            {(!projectLoading) && (
                <div> 
                    {/* Router configuration */}
                </div>
            )}
        </>
    );
}

export default App;

Customizing Logo

Modify logoUtils.jsx in the components folder and add your desired logos to the logos folder to personalize the appearance of your AutonotionR website.

logoUtils.jsx structure:

import { ReactComponent as TailwindLight } from "../logos/tailwind-light.svg";
import { ReactComponent as TailwindDark } from "../logos/tailwind-dark.svg";
...

function strToLogo(str, isLight) {
    if (isLight) {
        switch (str) {
            case "TailwindCSS":
                return <TailwindLight className={"w-[26px] h-[26px]"} />
            ...
            default:
                return <></>
        }
    } else {
        switch (str) {
            case "TailwindCSS":
                return <TailwindDark className={"w-[26px] h-[26px]"} />
            ...
            default:
                return <></>
        }
    }
}

export default strToLogo;

Notion Database Cautions

Be cautious when modifying your Notion database. Ensure that all necessary fields are populated to prevent errors in data retrieval.

Common Errors and Solutions

"Cannot find 'properties'" Error

If you encounter the Cannot find 'properties' error, check your Notion database to ensure that all cells have been filled with data. This error typically occurs when required properties are missing.