# Backend & Editor

A powerful documentation system that puts you in control. Edit your content locally or remotely with plain text and Markdown, while seeing your changes instantly.

📝 Local-First Editing

All content is stored locally in plain text and Markdown format. Edit with your favorite tools, no vendor lock-in.

👁️ Live Preview

See your changes instantly with built-in preview. No need to save or publish - everything updates in real-time.

📱 Multi-Environment

Work seamlessly across desktop and mobile environments. Your workflow, your choice.

🔧 Full Customization

Access and modify any part of the system. Your site, your rules, your customizations.

## Desktop Environment Upon first build, bnkops Change Maker V3 comes bundled with the current theme, documentation, and front-page. All can be updated within the app in plain text and notes are written using [Markdown](Simple Markdown Guide.md). ![backend.png](https://changemaker.bnkops.com/backend.png) ### Live Preview Click the double headed arrow to open and close live preview panel. The live preview panel shows your site updates inside the editor live. All changes to .md files are automatically pushed to site; no need to save or manage publication details. V4 will ship with state management (publish, draft, etc.) however if you want to work with drafts we suggest that users write files in [obsidian](obsidian.md) and then copy/paste content to site. ![alt text](image-11.png) ### Files You will have a files section, which allows you to create, delete, and organize your websites structure. !!! note "Hidden Content" Folders that start with a period (.example) are hidden from navigation in cmeditor and public site. If using [obsidian](obsidian.md) as content management system, this allows for folders to contain files, images, gifs, and website organization essentials without making them public. V4 will come with more fine grain control of what files are served to public and cmeditor. ![](files2.png) ### Editor The editor is where you can write and edit your content. The editor is a plain text editor that supports markdown. [Markdown](Simple Markdown Guide.md) is a simple way to format text that is easy to read and write. ![alt text](image.png) ### Backlinks The backlinks panel on the right hand side is where your you can monitor your internal linking. See where all your files are being referenced and if internal linking is working properly. ![Backlinks](backlinks.png) ### Settings Along the top bar are the settings. The double arrows opens/closes the live preview. The cog icon opens the `mkdocs.yml` which is how you set your sites features, plugins, and layout. The table icon opens the `home.html` in which you can edit your websites home page. ![alt text](image-1.png) ### mkdocs.yml ![alt text](image-2.png) The mkdocs.yml is accessed by clicking the cog icon or by opening the mkdocs.yml file inside your top level /Change Maker V3 folder. This is a plain text file. Edits made to this file, upon save, reload site and update universally. If preview shows site down, it is because syntax for your .yml file is incorrect. To fix, you can check the guides, or you can ask any capable LLM for assistance. See [Customize Your Landing Page](Customize%20Your%20Landing%20Page.md) for prompting manual. Change Maker ships with several dozen features pre-installed and a navigation tree. Features, plugins, and references can be found on the [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/setup/) site. Many future features will ship as features that are enabled through this plain text system. [Check out Material for MkDocs Documentation](https://squidfunk.github.io/mkdocs-material/setup/){ .md-button } #### Change Maker mkdocs.yml ??? "mkdocs.yml Configuration" ```yaml site_name: Change Maker # The name of the site site_description: A powerful documentation system combining simplicity with professional features. # A brief description of the site site_url: https://changemaker.bnkops.com/ # The URL where the site is hosted site_author: Bunker Ops # The author or organization responsible for the site site_dir: docs # The directory where the documentation files are stored theme: logo: logo.svg # The logo file for the site name: material # The theme name, in this case, 'material' custom_dir: docs/overrides # Directory for custom theme overrides palette: scheme: slate # The color scheme for the theme primary: amber # The primary color for the theme accent: deep purple # The accent color for the theme features: - navigation.sections # Enable navigation sections - navigation.instant # Enable instant navigation - navigation.instant.progress # Show progress in instant navigation - navigation.instant.preview # Enable instant preview in navigation - navigation.tracking # Enable navigation tracking - navigation.indexes # Enable navigation indexes - toc.integrate # Integrate table of contents - content.code.copy # Enable copy button for code blocks - navigation.path # Show navigation path - navigation.top # Enable top navigation - navigation.footer # Enable footer navigation markdown_extensions: - pymdownx.highlight: anchor_linenums: true # Enable line numbers in code blocks line_spans: __span # Add spans to lines in code blocks pygments_lang_class: true # Use Pygments language class for code blocks - pymdownx.inlinehilite # Enable inline highlighting - pymdownx.snippets # Enable snippets - pymdownx.superfences # Enable superfences for code blocks - admonition # Enable admonitions - pymdownx.details # Enable details extension - attr_list # Enable attribute lists extra_css: - stylesheets/extra.css # Additional CSS file for custom styles copyright: Copyright © 2024 The Bunker Operations # Copyright information extra: generator: false # Disable generator meta tag social: - icon: material/web # Icon for the social link link: https://repo.bnkops.com/Home.html # URL for the social link plugins: - social # Enable social plugin - search # Enable search plugin nav: - Welcome to Bnkops Change Maker: index.md # Navigation link to the welcome page - Why Change Maker: Why Change Maker.md # Navigation link to the 'Why Change Maker' page - Bnkops Deploy: bnkops Deploy.md # Navigation link to the 'Bnkops Deploy' page - Manuals: # Navigation section for manuals - Getting Started: manuals/index.md # Link to the 'Getting Started' manual - Prerequisites: manuals/prerequisites.md # Link to the 'Prerequisites' manual - Installation: manuals/Installation.md # Link to the 'Installation' manual - Backend & Editor: manuals/Backend & Editor.md # Link to the 'Backend & Editor' manual - Simple Markdown Guide: manuals/Simple Markdown Guide.md # Link to the 'Simple Markdown Guide' manual - Use Obsidian as Site Editor: manuals/obsidian.md # Link to the 'Use Obsidian as Site Editor' manual - Customize Your Landing Page: manuals/Customize Your Landing Page.md # Link to the 'Customize Your Landing Page' manual - Example Political Apps: manuals/Examples.md # Link to the 'Example Political Apps' manual - Get Online: manuals/Get Site Online.md # Link to the 'Get Online' manual - Visit repo.bnkops.com for more!: https://repo.bnkops.com/Home.html # External link to the repository - Admin Log: Admin Log.md # Navigation link to the 'Admin Log' page ``` ### Navigation Site wide navigation can be set purposefully by declaring it inside the .yml file or can be left to automatic alphabetical rendering. To switch to alphabetical approach, delete nav section in .yml file. Hybrid approaches are possible for things like blogs; see [Material for MkDocs ](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=navigation)for more. ![alt text](image-3.png) ### QR Code Maker Qr code maker is a feature that allows you to generate QR codes for your site. This is useful for sharing your site with others. You can access the feature by clicking on the icon above the editor or by typing [[qr]] in the editor. ![alt text](image-5.png) ![alt text](image-6.png) ### Landing Page HTML Panel Click on the table icon to open the landing page HTML panel. See [Customize Your Landing Page](Customize%20Your%20Landing%20Page.md) for more instruction for updating this section. ![alt text](image-4.png) ## Mobile Environment The mobile development currently deploys folded on load. This can be intimidating on first glance; trust us it is okay. To get to editor smoothly: 1. Select a file and collapse the file menu 2. Close the preview menu by clicking the double header arrow icon 3. Collapse the backlinks section #### Editing on Mobile Browser ![MobileScreen2](MobileScreen2.png) ## Diving Further The entire site is built locally, which means all your files are available for updates locally. You can use any editor, such as VSCode, Obsidian, Texteditor, or your preferred platform to do site wide updates. As there are no blackbox code sections, you can access and modify any part of the system. ![alt text](image-13.png) ### extra.css Want to spruce up your site even further? Access the extra.css file `docs/stylesheets/extra.css` and add in any site wide css styling you would like to add. Shipped by default are code block improvements. ![alt text](image-12.png) ### Again, Learn More At Mkdocs-Material The system uses [mkdocs-material](https://squidfunk.github.io/mkdocs-material/) as the backend that builds your site. Material for Mkdocs is also a open-source project that has a massive community behind it. They have extensive documentation to setup a vast array of [features and customization](https://squidfunk.github.io/mkdocs-material/setup/). Exciting to us, and coming to you all soon, is support for site creation in over [60 languages.](https://squidfunk.github.io/mkdocs-material/setup/changing-the-language/?h=languag) and built in features like [data privacy](https://squidfunk.github.io/mkdocs-material/setup/ensuring-data-privacy/). [Check out Material for MkDocs Documentation](https://squidfunk.github.io/mkdocs-material/setup/){ .md-button } ![](thumbsup.gif)