Skip to content

Change Maker Codebase Overview

Over 0 lines of code/content and counting
initializing documentation system
checking dependencies...
✓ site built ready to serve
✓ newsletter configured ready
✓ real-time preview active
✓ editor built online
✨ change maker ready!

Welcome to the Change Maker codebase documentation! On this page you will find a highlevel overview of how the system works and how to get started. For more detailed information, check out the rest of the manuals section for in-depth guides on specific topics.

Modular Codebase

Change Maker is built with a modular codebase that separates the frontend, backend, and content components. This modular design allows for easy customization, extensibility, and maintenance of the system.

The system uses Docker for containerization, making it easy to deploy and run on any platform. It is designed to be self-hosted, giving you full control over your data and content.

Installation, from just the startup script, does require a internet connection. This is because the system needs to download the latest versions of the software it uses.

Key Components

The Change Maker codebase consists of the following key components:

Mkdocs-Material Theme: The system uses the Mkdocs-Material theme for building documentation websites. The theme provides a clean, responsive design with support for custom templates and styles. It handles the building of your website. Mkdocs-Material can be installed as a standalone package or used as part of the Change Maker system. Check out the Mkdocs-Material documentation for more information:

Mkdocs-Material Theme

Landing Page System: The landing page is built using a custom template that displays links to apps as installed and a simple user management system for accessing the backend.

NocoDB Integration: The system integrates with NocoDB, an open-source no-code database platform that serves as a modern alternative to Airtable. It provides a powerful backend database solution for storing and managing structured data, with features like automated REST APIs, role-based access control, and a spreadsheet interface. NocoDB can be accessed through the admin interface and is used for managing dynamic content and user data. Check out NocoDB documentation for more information:

NocoDB Documentation

Frontend Editor: The frontend editor is a React-based application that provides a user interface for editing content, managing files, and viewing previews. It supports markdown with Obsidian-style features, real-time previews, and content conversion for markdown files. It is a fully custom built system from bnkops.

Listmonk Integration: The system integrates with Listmonk, an open-source self-hosted newsletter and mailing list manager. Listmonk allows you to collect and manage subscriber information, send newsletters, and track engagement. The integration enables you to collect subscriber information and send updates to users who subscribe to your content. Check out Listmonk documentaiton for more information:

Listmonk Documentation

Architecture Overview

Change Maker is built with a modular architecture consisting of several key components:

Frontend

  • Technologies Used: React, JavaScript
  • Location: frontend/
  • Description: Provides a user interface for editing content, managing files, and viewing previews. The editor supports markdown with Obsidian-style features, real-time previews, and content conversion for markdown files.

Backend

  • Technologies Used: Node.js, Express
  • Location: backend/
  • Description: Handles server-side operations, including file management, content conversion, and serving the frontend application. It manages the interaction between the editor and the underlying file system.

Documentation Content

  • Format: Markdown files
  • Location: docs/
  • Description: Contains the markdown files that make up the content of the website. The files are organized into manuals, guides, and other documentation.

Templates and Overrides

  • Location: docs/overrides/
  • Description: Custom HTML templates and CSS styles used to override and extend the default theme. The home.html template is used for customizing the landing page.

Configuration

  • File: mkdocs.yml
  • Description: Configuration file for MkDocs, specifying site settings, navigation structure, theme customization, and plugins. It controls how the site is built and displayed.

Core Features

  • Simple Markdown Writing: Use Markdown for easy content creation with support for Obsidian-style links and features.

  • Real-time Preview: See changes immediately with live previews of your content.

  • Customizable Templates: Tailor the look and feel of your site using custom HTML templates and CSS overrides.

  • Self-Hosted Platform: Run everything on your own hardware with no external dependencies or cloud services required.

  • Privacy Focused: No external requests, GDPR compliant, and cookie-free by default.

Need Help?

Browse through the detailed guides in the manuals section or reach out to the bnkops team for support. We're here to help you build your digital power!