Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pretzelhands/notebag
A note taking app that does not break your workflow
https://github.com/pretzelhands/notebag
Last synced: 7 days ago
JSON representation
A note taking app that does not break your workflow
- Host: GitHub
- URL: https://github.com/pretzelhands/notebag
- Owner: pretzelhands
- License: mit
- Created: 2020-10-27T18:11:17.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-15T19:41:34.000Z (almost 4 years ago)
- Last Synced: 2024-08-02T05:13:46.904Z (3 months ago)
- Language: JavaScript
- Size: 2.44 MB
- Stars: 164
- Watchers: 11
- Forks: 20
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - pretzelhands/notebag - A note taking app that does not break your workflow (others)
- awesome-tiptap - Notebag note-taking app
- awesome-tiptap - Notebag note-taking app
README
---
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]