boostio / boostnote-app Goto Github PK

We're going to use Remark. https://github.com/remarkjs
But, it still doesn't have a proper definition yet.

So we have two options:

1. Make type definitions for remark.js
2. Rewrite in typescript https://github.com/Rokt33r/typed-remark/

The first option should be done quite soon. But, we might lose the power of typescript.
The second is a very hard way. I'd tried it and I found it is worth to do it. If we do, we could extend the library dependably. (Sadly, the original author should want to keep using pure Javascript.)

Until this issue is resolved, we're going to use marked(or any other library which has own type definitions)

We're going to use cypress.

How?

$$ -> $
$$$ -> $$

Why?

$\alpha$ is default on Latex and only few parsers support$$ as a inline.

Check the below link also.
https://github.com/cben/mathdown/wiki/math-in-markdown

Hi There, I know there was a ticket for this already (#24), but just thought I would suggest using Simperium. Its what Simplenote uses, and works very well cross-platform.

Thanks!

-Josh-

I need some ideas for logo of this app.

This is a common feature request for Boost. Instead of a list of notes, users want to categorize them using folder structure (tree view). Something like this:

Support target

• macOS
  • Homebrew
• Windows
  • Scoop
  • Chocolatey
• Linux(Ubuntu, Arch and Fedora ...suggest me if you want more)
  • Snap.io

About auto updater

I won't release the build with built-in auto-updater until the official version is ready.

I'm going to make a new markdown editor which renders lively, but keep user to feel using common code editor.

How to archive?

• Every component is rendered as a React component
• If user selects a block, it will switch edit mode while other blocks still be rendered.

https://github.com/matthaywardwebdesign/node-security
We could use this module

Current theme doesn't seem to fit the app coloring.
I'll going to make custom theme.

• For Default theme
• For Dark theme

While developing this app we must keep a central API so that we can share it with the plugin developers. For example, when a developer develops a plugin that shows a message dialog he could call something like:

import Boost from 'boost';

Boost.window.showMessageDialog('Hello', 'from plugin', Boost.MessageDialogType.INFO);

I think we should plan out how the API should looks like a write a doc about it.

Specs
https://github.com/Sarah-Seo/Inpad/blob/master/docs/key-bindings.md

Main

• main:new-note
• main:new-folder
• main:focus-search
• main:find
• main:hide-window
• main:quit
• main:delete
• main:refresh
• main:preferences
• main:print

TitleBar

• title:new-note
• title:focus-search

Nav(Left Navigator)

• nav:new-note
• nav:new-folder
• nav:focus-list
• nav:up
• nav:down
• nav:delete

List

• list:focus-editor
• list:focus-nav
• list:up
• list:down
• list:delete

Detail

• detail:focus-editor
• detail:focus-tag-select
• detail:find
• detail:print

We need a custom test runner for compiled code by webpack on electron.

Currently, I wrote the codes from scratch. It uses webpack HMR so runs test very fast.
But, the test runner has lack of functionality. It should be improved more.

Anyway, I'm going to mimic the api of Jest. If you have any good idea, please tell me. We should discuss more.

Sarah-seo confirmed that she can transfer ownership of this project to me.
I'm going to take over the refactoring from May. It would takes a week. So, this project will be revive again.

Hope we could see soon the new polished version of Inpad! :)

TBD

If you have other ideas which isn't listed here yet, please create a new issue for it. 👍

General

• Open in new window
• Quick note assistant

Managing notes

• Nested folder
• Smart folder(Wiki/Predefined filter)
• Tag
• Trash can

Markdown

• GFM
• Latex
• Diagram(Sequence / Flowchart)
• Abstract Syntax Tree Editor(render as a block)

Cloud support

• Replication
• Original cloud service

Security

• Encrypt content(Just like Notes does)

Scrap / Import

• Web article(blog post, news article... whatever)
  • Medium
  • Stackoverflow
  • Slack post
  • Github wiki
• Evernote
• macOS Notes
• Google Keep
• Markdown file
• Gist

Export

• Gist
• Slack Post
• Facebook Post
• Medium
• Evernote
• Markdown file
• PDF file
• HTML file

UI

• Original codemirror theme

We're going to use https://github.com/electron-userland/electron-builder

Support OSs:

• macOS
• Windows
• Debian Linux
• Fedora Linux

In v0.7.0, due to the replacement of the text editor module, pop-up of convert candidates provided by Japanese IME (both of OS X El Capitan original IME and Google Japanese IME) overlays original input texts, so that we can not see an appropriate cursor position.

Image will be stored as an attachment to PouchDB.
WebSQL also supports Blob data type.

To consider web app, attachments shouldn't be replicated to browser db because of the size limit. But, it could be loaded from the couchDB server directly.

Like Notes app, double clicking to open in new window would be great.

@amlcodes asks me to support another note format, code snippets, like Boostnote.

I'd used Boostnote quite ago. Although I thought that feature would be useful, I used Snippet notes quite rarely.

For now, I think the code fence of GFM would be enough.

This doesn't mean I won't give any chance. It would be useful in some cases.
But, the way of Boostnote does not work for me. Also, I think there are many other people like me.

Please comment here if you have better idea. 😁

Deleted notes should be put in trashcan so users can restore them. This feature should be implemented in db/Client.

Dispatch method and database api should be called each data modification.
So, the current code is just like below.

  confirmCreating () {
    const { storageName, storageData } = this.props
    const { store } = this.context

    let count = 0
    let originalName = filenamify(this.state.newName, {replacement: '_'})
    let newName = originalName
    while (storageData.hasIn(['folders', newName])) {
      newName = `${originalName} (${++count})`
    }

    StorageManager
      .upsertFolder(storageName, newName)
      .then((res) => {
        store.dispatch({
          type: 'UPDATE_FOLDER',
          payload: {
            storageName,
            folderPath: newName
          }
        })
      })

    this.setState({
      isCreatingFolder: false
    }, () => {
      this.storageButton.focus()
    })
  }

https://github.com/CarbonStack/Inpad/blob/master/src/main/Nav/StorageSection.js#L101-L129

If we use redux-saga, we just dispatch an action without calling Database API from component.

  confirmCreating () {
    const { storageName, storageData } = this.props
    const { store } = this.context

    let count = 0
    let originalName = filenamify(this.state.newName, {replacement: '_'})
    let newName = originalName
    while (storageData.hasIn(['folders', newName])) {
      newName = `${originalName} (${++count})`
    }

    store.dispatch({
      type: 'ASYNC_UPDATE_FOLDER',
      payload: {
        storageName,
        folderPath: newName
      }
    })

    this.setState({
      isCreatingFolder: false
    }, () => {
      this.storageButton.focus()
    })
  }

It might be included in v1.0. (Not sure)

I noticed the current markdown parser has its linter, remark-lint. I think it would be great to show the warning from the linter. By this, user can learn proper syntax of markdown.

It would be nice if we have something like vsnote so vscode users don't have to switching the app.
https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes

The following is a dead link:

Follow the JavaScript coding style defined in docs

Which can be found here.
Boost/CONTRIBUTING.md

I couldn't locate the folder.

When switching folders, items in SideNav is rendered inefficiently because of path checking occurs in each list item.

It should be done when mapping list items. So, list items can know it doesn't have to be re-rendered.

Parse is Shutting Down. Now What?

After the great services. Parse, the most renowned mBaas is shutting down. it is the end of an era. It is highly recommended to migrate from Parse to prevent the mobile app from going down.

Best alternative of Parse: http://cloud.systematixinfotech.com/migrate-parse-to-cloud/

We need contextmenu for web browser like https://github.com/vkbansal/react-contextmenu

Unfortunately, it doesn't have any type definitions. So we need to rewrite this for our app.

It has type definitions. We can use it for now.

Inpad uses pouchDB. It is compatible with CouchDB and levelDB. It means it has tons of options for database.

First of all, I'm going to give an option to synchronize CouchDB.

Hello,

Is it possible to backup or move notes to other computer?
Could share information where notes are stored?

Best regards

I'm going to use https://icon.now.sh
It looks perfect!

We should store meta data of db for safe syncing.

key: meta
value:

interface ClientMetaData {
  app: string // `boost`?
  version: string // Semver? 
}

By this we could have 2 benifits:

1. Coerce users to use compatible db only.(To prevent syncing with db used by other apps)
2. Implement migration

We're going to make everything pluggable.

• Make something like apm, atom package manager.
• Make a server for the package manager.

We're going to work after releasing a prototype version.

Preview the Markdown while keeping focus in the editor, something like this.

We should extract db/Client module from this repository to implement #44 and #43. Other good reason is we could manage changes in db api with semver.

Size of node_modules is quite big.

• Compile React stuffs and pouchDB via webpack and move them to devDependencies
• Uglify compiled scripts
• Discard from dep
  • react-desktop
• Use minified script
  • lodash
  • moment
  • react-dom
  • pouchdb-browser
  • katex
  • immutable

Size list

8.0K	node_modules/bluebird-lst-c
8.0K	node_modules/strip-outer
 12K	node_modules/abbrev
 12K	node_modules/ansi-regex
 12K	node_modules/ansi-styles
 12K	node_modules/bindings
 12K	node_modules/brace-expansion
 12K	node_modules/buffer-shims
 12K	node_modules/character-entities-legacy
 12K	node_modules/character-reference-invalid
 12K	node_modules/decamelize
 12K	node_modules/detab
 12K	node_modules/emoji-regex
 12K	node_modules/escape-string-regexp
 12K	node_modules/filename-reserved-regex
 12K	node_modules/filenamify
 12K	node_modules/has-ansi
 12K	node_modules/has-flag
 12K	node_modules/has-unicode
 12K	node_modules/inflight
 12K	node_modules/irregular-plurals
 12K	node_modules/is-alphanumeric
 12K	node_modules/is-stream
 12K	node_modules/js-tokens
 12K	node_modules/mdast-comment-marker
 12K	node_modules/mdast-util-definitions
 12K	node_modules/mdast-util-heading-style
 12K	node_modules/normalize-uri
 12K	node_modules/npm-prefix
 12K	node_modules/object-assign
 12K	node_modules/once
 12K	node_modules/os-homedir
 12K	node_modules/os-tmpdir
 12K	node_modules/path-is-absolute
 12K	node_modules/pinkie-promise
 12K	node_modules/remark
 12K	node_modules/remark-html
 12K	node_modules/remark-slug
 12K	node_modules/repeat-string
 12K	node_modules/replace-ext
 12K	node_modules/shellsubstitute
 12K	node_modules/simple-get
 12K	node_modules/space-separated-tokens
 12K	node_modules/string.prototype.codepointat
 12K	node_modules/strip-ansi
 12K	node_modules/strip-markdown
 12K	node_modules/trim-lines
 12K	node_modules/trim-repeated
 12K	node_modules/trim-trailing-lines
 12K	node_modules/unherit
 12K	node_modules/unist-builder
 12K	node_modules/unist-util-generated
 12K	node_modules/unist-util-modify-children
 12K	node_modules/unist-util-position
 12K	node_modules/unist-util-stringify-position
 12K	node_modules/unist-util-visit
 12K	node_modules/untildify
 12K	node_modules/unzip-response
 12K	node_modules/vfile-location
 12K	node_modules/wrappy
 16K	node_modules/after
 16K	node_modules/argsarray
 16K	node_modules/bail
 16K	node_modules/balanced-match
 16K	node_modules/ccount
 16K	node_modules/character-entities-html4
 16K	node_modules/collapse-white-space
 16K	node_modules/color-name
 16K	node_modules/color-string
 16K	node_modules/comma-separated-tokens
 16K	node_modules/concat-map
 16K	node_modules/end-stream
 16K	node_modules/es6-promise-pool
 16K	node_modules/expand-template
 16K	node_modules/github-from-package
 16K	node_modules/graceful-readlink
 16K	node_modules/hast-util-is-element
 16K	node_modules/hast-util-whitespace
 16K	node_modules/hyphenate-style-name
 16K	node_modules/ieee754
 16K	node_modules/inherits
 16K	node_modules/ini
 16K	node_modules/is-alphabetical
 16K	node_modules/is-alphanumerical
 16K	node_modules/is-buffer
 16K	node_modules/is-decimal
 16K	node_modules/is-hexadecimal
 16K	node_modules/is-typedarray
 16K	node_modules/is-whitespace-character
 16K	node_modules/is-word-character
 16K	node_modules/jsonfile
 16K	node_modules/kebab-case
 16K	node_modules/level-write-stream
 16K	node_modules/longest-streak
 16K	node_modules/markdown-escapes
 16K	node_modules/mdast-util-compact
 16K	node_modules/mdast-util-to-string
 16K	node_modules/mime-types
 16K	node_modules/npmlog
 16K	node_modules/pinkie
 16K	node_modules/process-nextick-args
 16K	node_modules/remark-message-control
 16K	node_modules/scope-eval
 16K	node_modules/sliced
 16K	node_modules/state-toggle
 16K	node_modules/stringify-entities
 16K	node_modules/strip-json-comments
 16K	node_modules/supports-color
 16K	node_modules/trough
 16K	node_modules/unist-util-is
 16K	node_modules/util-extend
 16K	node_modules/vfile-sort
 16K	node_modules/x-is-string
 20K	node_modules/array-iterate
 20K	node_modules/assert-plus
 20K	node_modules/block-stream
 20K	node_modules/execspawn
 20K	node_modules/generate-function
 20K	node_modules/generate-object-property
 20K	node_modules/html-void-elements
 20K	node_modules/invariant
 20K	node_modules/json-stringify-safe
 20K	node_modules/jsonpointer
 20K	node_modules/ltgt
 20K	node_modules/markdown-table
 20K	node_modules/minimist
 20K	node_modules/ms
 20K	node_modules/oauth-sign
 20K	node_modules/osenv
 20K	node_modules/path-array
 20K	node_modules/prr
 20K	node_modules/pump
 20K	node_modules/simple-mime
 20K	node_modules/string_decoder
 20K	node_modules/stringstream
 20K	node_modules/unist-util-remove-position
 20K	node_modules/util-deprecate
 20K	node_modules/vfile
 24K	node_modules/aws-sign2
 24K	node_modules/caseless
 24K	node_modules/cryptiles
 24K	node_modules/deep-extend
 24K	node_modules/forever-agent
 24K	node_modules/fs.realpath
 24K	node_modules/github-markdown-css
 24K	node_modules/hoist-non-react-statics
 24K	node_modules/is-property
 24K	node_modules/isarray
 24K	node_modules/isstream
 24K	node_modules/lodash.pad
 24K	node_modules/lodash.padend
 24K	node_modules/lodash.padstart
 24K	node_modules/property-information
 24K	node_modules/punycode
 24K	node_modules/remark-emoji
 24K	node_modules/tar-fs
 24K	node_modules/tunnel-agent
 24K	node_modules/whatwg-fetch
 24K	node_modules/which
 28K	node_modules/bcrypt-pbkdf
 28K	node_modules/delegates
 28K	node_modules/electron-positioner
 28K	node_modules/encoding
 28K	node_modules/fast-future
 28K	node_modules/function-bind
 28K	node_modules/ghrepos
 28K	node_modules/ghutils
 28K	node_modules/has
 28K	node_modules/isexe
 28K	node_modules/isomorphic-fetch
 28K	node_modules/klaw
 28K	node_modules/match-at
 28K	node_modules/trim
 28K	node_modules/unified
 28K	node_modules/xtend
 32K	node_modules/aws4
 32K	node_modules/combined-stream
 32K	node_modules/d
 32K	node_modules/delayed-stream
 32K	node_modules/extend
 32K	node_modules/hast-util-sanitize
 32K	node_modules/immediate
 32K	node_modules/jsprim
 32K	node_modules/level-codec
 32K	node_modules/loose-envify
 32K	node_modules/mkdirp
 32K	node_modules/noop-logger
 32K	node_modules/parse-entities
 36K	node_modules/ansi
 36K	node_modules/double-ended-queue
 36K	node_modules/form-data
 36K	node_modules/graceful-fs
 36K	node_modules/load-plugin
 36K	node_modules/minimatch
 36K	node_modules/nopt
 36K	node_modules/symbol-observable
 40K	node_modules/asap
 40K	node_modules/chalk
 40K	node_modules/clone
 40K	node_modules/core-util-is
 40K	node_modules/gauge
 40K	node_modules/react-immutable-proptypes
 40K	node_modules/sntp
 40K	node_modules/spark-md5
 44K	node_modules/is-my-json-valid
 44K	node_modules/vuvuzela
 48K	node_modules/end-of-stream
 48K	node_modules/verror
 52K	node_modules/character-entities
 52K	node_modules/debug
 52K	node_modules/es6-symbol
 52K	node_modules/extsprintf
 52K	node_modules/getpass
 52K	node_modules/wrapped
 56K	node_modules/commander
 56K	node_modules/ecc-jsbn
 56K	node_modules/ghreleases
 60K	node_modules/es6-iterator
 60K	node_modules/node-fetch
 60K	node_modules/semver
 64K	node_modules/boom
 64K	node_modules/jsbn
 64K	node_modules/node-uuid
 68K	node_modules/errno
 68K	node_modules/level-iterator-stream
 68K	node_modules/rc
 72K	node_modules/color
 72K	node_modules/github-slugger
 76K	node_modules/bowser
 76K	node_modules/sprintf-js
 80K	node_modules/lie
 80K	node_modules/qs
 84K	node_modules/asynckit
 84K	node_modules/http-signature
 84K	node_modules/url-template
 88K	node_modules/asn1
 88K	node_modules/rimraf
 92K	node_modules/dashdash
 92K	node_modules/tar
 96K	node_modules/hast-util-to-html
 96K	node_modules/hoek
 96K	node_modules/readable-stream
100K	node_modules/fstream
100K	node_modules/jodid25519
100K	node_modules/ua-parser-js
108K	node_modules/har-validator
116K	node_modules/array-index
116K	node_modules/buffer
144K	node_modules/mdast-util-to-hast
152K	node_modules/react-redux
156K	node_modules/levelup
164K	node_modules/tweetnacl
168K	node_modules/mime-db
168K	node_modules/node-emoji
176K	node_modules/abstract-leveldown
184K	node_modules/argparse
196K	node_modules/hawk
196K	node_modules/promise
200K	node_modules/hyperquest
204K	node_modules/redux
204K	node_modules/write-stream
208K	node_modules/deferred-leveldown
208K	node_modules/remark-stringify
216K	node_modules/es6-promise
216K	node_modules/through2
220K	node_modules/bl
224K	node_modules/esprima
224K	node_modules/tough-cookie
232K	node_modules/json-schema
236K	node_modules/tar-stream
244K	node_modules/are-we-there-yet
248K	node_modules/jsonist
256K	node_modules/sshpk
268K	node_modules/sander
276K	node_modules/prebuild
276K	node_modules/remark-parse
320K	node_modules/remark-lint
360K	node_modules/js-yaml
396K	node_modules/iconv-lite
400K	node_modules/electron-auto-updater
404K	node_modules/nan
452K	node_modules/immutable
652K	node_modules/async
696K	node_modules/react
704K	node_modules/bluebird
864K	node_modules/source-map-support
964K	node_modules/fbjs
984K	node_modules/octicons
1.5M	node_modules/glamor
1.8M	node_modules/es5-ext
1.8M	node_modules/styled-components
1.9M	node_modules/node-gyp
2.0M	node_modules/node-ninja
2.4M	node_modules/react-dom
2.6M	node_modules/katex
2.6M	node_modules/lodash-es
2.8M	node_modules/moment
3.1M	node_modules/codemirror
4.0M	node_modules/pouchdb
4.2M	node_modules/core-js
4.8M	node_modules/lodash
7.5M	node_modules/leveldown

It will be built on React-Native. I don't think this would be hard.

Most libraries, like CodeMirror and pouchDB, already support the mobile.
I think this will be done about the next fall(the October of 2017).

I can't find electron and electron builder in package.json

I think using prettier will help improve the code quality and make them easier to review. Here is prettier: https://prettier.io/

Quiver like block editor should be nice to have. But, I don't think this is essential features.

Anyway, there is another try form others. We use it as the reference.
https://github.com/seokju-na/geeks-diary

Key binding

• Cmd + N / Ctrl + N to create note
• Cmd + Shift + N / Ctrl + Shift + N to create folder
• Cmd + Alt + F / Ctrl + Alt + F to focus serch input

TitleBar

• Create a note button
• Delete button
  • Delete folder when nav is focused
  • Delete note when list is focused
• Searching Notes

Nav

• Storage context menu
  • New folder
• Folder context menu
  • Rename folder()
  • Delete folder
  • New folder
• Keybinding
  • Up/Down to navigate
  • Enter to focus NoteList
  • ⌫ / Delete to delete folder

NoteList

• Context menu
  • Delete a note
• Draggable note(move note to other folder)
• Keybinding
  • Up/Down to navigate
  • Esc to focus Nav
  • Enter to focus Detail
  • ⌫ / Delete to delete note

Detail

• Tag Select
• Esc to focus List

Editor

• Render on Blur / Edit on Focus(like Boostnote does)
• 2-pane live edit(like most common markdown note app does)

Database API

• Create a note
• Update a note
• Delete a note
• Create a folder
• Rename a folder
• Delete a folder(Include deleting notes)

Preferences window

• Dark theme
• Markdown stylesheet
  • Font size
  • Font family
• Editor configuration
  • Font family
  • Font size
  • Indent size
  • Indent type(Spaces/Tabs)

Deployment

• App Icon

• Router
• Data Store
• Configuration Store

RouterStore

We're going to use https://github.com/alisd23/mobx-react-router now.
But it looks quite new. So, if it is not dependable, we might fork this project.

DataStore

This store will grab all data from PouchDB and map the data on MobX. PouchDB also has mapping and reducing features, but we have to store mappers and reducers to PouchDB. It makes hard to update those mappers and reducers.

ConfigurationStore

WIP...

Folder name is restricted by filenamify.
It means / character is reserved.

I'm going to implement nested folder with /

If you want to put nested folder to the default folder, Notes, it can be done by renaming Notes/nested.

I noticed websql will become deprecated.
I'm going to migrate current db in WebSQL to IndexedDB.

Markdown editor consist of CodeMirror and Iframe components. When scroll event occur from one component, it will tell another component.

Clicking checkbox in preview
-> update value of codemirror
-> reset scroll position
-> scroll event is fired from codemirror
-> preview(Iframe) adjust its scroll position to the reset one.

The fix will be shipped to v0.2.

I'm going to support English, Korean and Japanese.
If you can speak other language, please help me to add it!

Also, I'm still designing how to apply i18n support. If you have an idea, please suggest me!

Current markdown preview will try to render again every time contents changed. This would be critical if users write a huge document.

Solution

1. Make a queue rendering(Dispatch 500ms later)
2. Render via web worker
3. Terminate the worker if the content changed while rendering and make another queue again

Todo

• Show status of task list from NoteList
• Clickable checkbox
• Codemirror support

Show status of task list from NoteList

Like tags count, showing tasklist octicon and the status 1/3 would be good.
I'll upload the design later.

Clickable checkbox

By clicking rendered checkbox, user can set it done/undone without editing content.

Codemirror support

If user press Enter when writing task list, append an empty task and move the cursor.
If user press Enter again without editing the created task, escape the task list and let user write the plain body.

This issue is just a todo list to show the progress of renewal app.

If you want to have some idea, please create a new issue.

• Implement storage routing
• Extract storage form
• Implement folder routing
• Implement note list
• Create Note
• Update note
• Implement NotePage
• Get title from contents
• Destroy notes
• Filter notes by routing
  • Implement folderNoteMap to data store
  • Implement tagNoteMap to data store
• Validate storage name(Client)
• Implement codemirror
• Implement default previewer
• Finalize SideNav
  • Context menu
  • Context menu separator
  • Separate Remove Folder and New Folder menu items
  • Implement Rename Folder menu item to context menu
  • Prompt dialog
  • MessageBox dialog #65
  • Show dialog when removing a folder #65
    • Don't show dialog if the folder is empty (Postponed)
  • Implement Context for storage
    • New Folder
    • Rename Storage (Postponed)
    • Remove Storage
  • Make storage and folder nav item distinguishable
  • Show Folder name rather than full path
  • Implement Context menu for side nav
    • Add a storage
  • Implement Hover style for Nav items
  • Keyboard navigation (Postponed)
• Finalize NoteList
  • Implement SearchForm
  • Style New Note button
  • Style note list item
• Finalize NoteDetail
  • Style Editor
  • Optional Codemirror
  • Optional Preview
• Storage page
  • Present a roadmap about data syncing