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.
- Documentation
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.
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.
Run npm install in two directories; <repo-name>/frontend and <repo-name>/server to install the required dependencies for both of the sub sirectories.
Follow the instructions in the Database Setup section to connect AutonotionR to your Notion workspace.
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.
To get started, use the provided Database Template 📄 to structure your Notion workspace. This template includes essential fields required for integration.
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.
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.
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;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;Be cautious when modifying your Notion database. Ensure that all necessary fields are populated to prevent errors in data retrieval.
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.