Notebag is a note-taking app that has a razor-sharp focus on keeping you focused making navigation as seamless as possible. It was developed between March and May 2020.
Project structure
Notebag is split into two main parts. One is the Electron app responsible for handling window management and OS-related things, the other is a Vue app handling the entire UI.
Electron
The Electron part is relatively small and the file structure is split up into the various components that make up the app: the main window, the preferences window, the app menu, the tray functionality and some helpers to deal with global keyboard shortcuts.
Vue
The Vue app is built on vuex and vue-router. Anyone familiar with the Vue ecosystem
should find those parts reasonably easy to understand. The main editor component is based
on tiptap, which in turn is based on ProseMirror. The various available formattings are
stored under plugins and extensions respectively.
Under components you can find all the parts that make up the main app interface.
Under store you will find everything related to storing notes and the vuex store
Under import, directives, scanners and utilities you will find many helpers for
various functionalities of the app. scanners specifically contains functionality related
to finding backlinks and categories inside a note.
CSS
The CSS is handwritten with some augmentations by the Tachyons CSS library. It's very messy.
Developing the app
Everything you need to get started is available here. To run a development environment
you need only do the following (assuming you have node and npm installed):
$ npm install
$ npm run app
This will start the development build of Notebag which will hot reload for any changes you make to the Vue app. Should you make any changes to the Electron app, you have to restart the process.
Building the app
To build a standalone version of Notebag you can run one of the following:
$ npm run dist:all -- (Builds for all platforms)
$ npm run dist:w -- Windows
$ npm run dist:m -- Mac
$ npm run dist:l -- Linux
Code-signing and notarizing the app
If you have a valid Windows Code Signing Certificate in p12 format, you can specify the path and
password to access it under electron-builder.env - Mine was usually located in the build directory
and named windows_cert.p12
On Mac, if you have a valid developer certificate, it will be automatically used on building the app.
To notarize it on Apple's servers, be sure to replace the credentials in .env.example and rename it to
.env. Then edit package.json and remove the DISABLED_ prefix for build.afterSign.
There are no special code-signing mechanisms in place for Linux.
Questions
If you are interested in further developing Notebag and have questions about specific implementation details or other intricacies of the app, please don't hesitate to contact me under [email protected]