batnoter / batnoter

An open source, markdown-based, self-hosted note taking webapp.

Create and store notes to your git repository!
https://batnoter.com

BatNoter

BatNoter is a web application that allows users to store notes in their git repository. This is a frontend project built using mainly react (typescript), redux-toolkit & mui components. BatNoter API is the backend implementation of REST APIs which are used by this react app.

Features

• Login with GitHub.
• Create, edit, delete, organize & explore notes easily with a nice & clean user interface.
• Markdown format supported allowing users to add hyperlink, table, headings, code blocks, blockquote... etc inside notes.
• Editor allows preview of markdown.
• Quickly copy code from the code section using copy to clipboard button.
• Store notes directly at the root or use folders to organize them (nesting supported).
• Explore all the notes from a specific directory with single click.
• All the notes are stored inside user's github repository.
• Notes are cached to avoid additional API calls.
• URLs can be bookmarked.
• Dark/Light mode supported.

Local Development Setup

Prerequisites

• Node.js version 18 or above

Start the server

npm install
npm start

This will start the react app in the development mode. Open http://localhost:3000 to view it in the browser.

Run tests

npm test

This will execute all the tests and also prints the code coverage percentage.

Contribution Guidelines

Every Contribution Makes a Difference

Read the Contribution Guidelines before you contribute.

Contributors

Thanks goes to these wonderful people 🎉

batnoter's Issues

Show icons for creating a new notes on each dir from sidebar tree on hover

Show a loading indicator when api is in progress

The UI should show a loading indicator(something like spinner etc) on a view which has incomplete API call.

Add a feature to auto setup the repository on new user login

For new user logins, The ui should present an option for automatically setting up the notes repository. Also allow him to select existing notes repository manually if he wishes to.

The auto setup option should create a new repository in user's github account and store it as default notes repo for user.

This should enhance the user experience since otherwise new users would select irrelevant existing repository for storing notes or they would have to go to github account and create a new one and then come back to application and select it.

Show warning if user has selected public repository instead private for storing notes

There is no restriction on using a public repository for storing notes. But user should be prompted with a warning saying the repository is public and their notes could be accessible publicly when they choose to use a public repo for storing notes.

This is is requires only frontend changes.

The sidebar tree should show icons for note and directory

On settings view, show email if the user's name field is empty

The settings component shows the user details including user's name, location etc but the user's name field can be empty for some user's

In such case we should show the email which is always available.

Refer below file for the changes
https://github.com/vivekweb2013/gitnoter/blob/main/frontend/src/components/Settings.tsx

Navigate to home page on clicking gitnoter title in header

User should be navigated to the home page when clicked on gitnoter title on the top left side of nav bar.

Drag and drop option to move the page from 1 folder to other

Is your feature request related to a problem? Please describe.
changing of path is tedious when organising your notes

Describe the solution you'd like
easily moving the note from one folder to other by drag and drop

Markdown editor, should take up full width and height

Current UI

Proposed UI

Why?

Since, the sole purpose of application is to take notes (usually few pages long), the 'Proposed UI' provides a better view to user when editing and previewing those changes.

Notes

I've excludes other UI components in 'Proposed UI' like 'Path', 'Note Name' and 'Cancel/Save' button, they should obviously be there.

something went wrong. contact support

I am trying to use the site, and I used the auto repository creator. I go to make a very simple note, and I get "something went wrong. contact support."

Note title: HelloWorld
Note Content:

How are you! This is cool.

Create a deployment workflow to deploy the application to k8s cluster

Create a deployment workflow to deploy app to k8s cluster on push events to main branch.
The deployment workflow should use the helm charts for deployment.

Create a github environment Production and run the deployment job in context of this environment.
The kubernetes secrets should be stored as environment secrets under Production environment.
The deployment workflow should be dependent on build job otherwise new docker images will not be available to the deploy job.

Design a path autocomplete input component using mui components

Since the repo file tree is fetched every time the main page is loaded, It is possible to design the autocomplete input which will help users select a path quickly while creating a new note.

The component should -

• filter the tree at current path and prompt user about next dirs available
• user should able to delete the dirs in path using backspace
• user should be able to type a manual path
• path should be validated on save, in case of error a relevant msg appear below the component

Fix markdown editor/viewer styling to match with the dark theme

Describe the bug
The markdown editor/editor is not a mui component so the dark mode is not applied to the markdown views

Launch GitNoter from PiBox, unable to login to GitHub.

Installed GitNoter from the main KubeSail channel
Launched GitNoter from KubeSail management
Click Login with GitHub

Page stays blank.

Fix the error message. Ask user to create an issue instead of asking them to contact support

The error shown in case of internal server error is like below

something went wrong. contact support

This is an open source project & We have no support team :)

So instead of this error message simply ask user to create an issue in this repository.

Implement copy button on code section of markdown preview

react-markdown does not show any copy button on the code section.
But it does provide the option to override code component.

Implement a custom code component which shows a copy button at the top right of code section which should copy the containing code on click

Support other language like Chinese would be better

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

the folder and file name which contains chinese cant show in the web note.

create-react-app proxy does not work with document type requests

I've configured the react application to proxy backend api requests using following configuration in package.json file

"proxy": "http://localhost:8080",

but it seems that only ajax calls are proxied. Since the application has oAuth sign in flow some of the non ajax calls also need to proxied.

The solution is to manually configure the proxy with http-proxy-middleware as suggested by https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Design a ui component to show the full note

This view should be launched on click of card
There should be no inputs/edit functionality. Its just shows the note

Add support for keyboard shortcuts for actions like save, copy etc

Create a GIF to showcase the project features

GIF is very useful in demoing the project feature.

https://github.blog/2018-06-29-gif-that-keeps-on-gifing/

Create one for gitnoter

[Feature] Gitea and other private repos

Add in the ability to setup gitnoter with 3rd party git services, such as Gitea. Batnoter should be able to work without an internet connection when setup to use a 3rd party git service.

Note editor should show preview of the markdown

The editor should allow users to preview the markdown. Similar to how github/stackoverflow has a preview tab which renders the markdown.

Check if there is any lightweight library for react that can be used to build this functionality.

Provide option to search note by title in the sidebar

since we have the tree in sidebar it is possible to filter the tree on title(filename)
provide a search input on top and filter the tree with the search result

Create helm chart

Text input elements from editor are not visible in dark mode

Describe the bug
Dark theme is giving a problem. add the option to change back to light

Screenshots

Please provide browser information:
chrome

Create a login view and redirect unauthenticated users to it

The login view should provide a button to allow login with github provider.

It would be better to right align the login button view and use most of the screen at left side to show user a GIF animation of app features.

[feature request] Dark mode

Hello!

It would be great if we could have an option for dark mode, preferably a permanent option/setting rather than a toggle (but that part is my own preference).

Thanks!

Helm upgrade does not recreate pod with latest image even if imagePullPolicy is set to Always

It seems that helm upgrade will roll out changes to kubernetes objects only if there are changes to roll out. i.e when the object is changed in the helm chart files. It will not recreate the pods just because the image is update. To be able to recreate the pod you will need to update the chart and specify some tag to the image in the chart which refers to the latest image and the tag should be new every time.

While this can be done there is one maintenance headache with this approach. We will need to update our charts every time the new image is created.

There is an alternative though. We can provide a dynamic label to the pod deployment metadata (something like timestamp) which will be new every time and will cause helm to recreate the pod because the pod object is different than previous.

Reference: https://stackoverflow.com/a/71016950/814548

UI fails to load on safari due to regex error

The error is

SyntaxError: Invalid regular expression: invalid group specifier name

It seems that safari does not support lookbehinds like (?<= ) or (?<! ) since the support for lookbehinds is recently finalised for javascript under ECMA-262(ECMAScript 11) specification. See this.

https://caniuse.com/js-regexp-lookbehind

But on the other hand support for lookaheads like (?= ) or (?! ) was there already. So safari also supports lookaheads.

To resolve the issue just find an alternative to lookbehinds that your regex is using. Don't worry about lookaheads.

Implement the functionality to edit an existing note

The card should show an edit button on click of which the editor should launch with the form pre-filled with existing note.
The note should be updated on save.

PDF?

Can gitnoter work with PDF files? One thing I use a lot with Evernote are PDFs.
I would love to get away from their monthly fees just to house my PDF files. Also really nice that I can search within PDF files for references when searching notes.

Setup github workflow

Remove empty parent directories from tree view on deleting a note

Lets say the note tree is as below

root
|-- dir1
|    |-- dir2
|    |    |-- dir3
|    |         |-- note1
|    |-- dir4
|         |-- note2
|-- dir5
    |-- note3

When the user deletes note1 then dir3 and dir2 should also be removed. Since they will be empty otherwise and has no use. Even git also removes the empty directories. So it is better to delete the empty parents on deleting a note.

The algorithm for deleting tree node should handle this scenario.

Show confirmation dialog on delete

UI tests failing after adding react-markdown

Tests failing with below error

    Details:

    /home/runner/work/gitnoter/gitnoter/frontend/node_modules/react-markdown/index.js:6
    export {uriTransformer} from './lib/uri-transformer.js'
    ^^^^^^

    SyntaxError: Unexpected token 'export'

This is happening because react-markdown is using ESM which is not supported by jest.
remarkjs/react-markdown#635

The easy solution would be to create the mocks for react markdown

Non github user

Can you add support to use our own custom git server. I use gitea (will be migrating to gitlab) and would love to be able to use my own server for the notes and auth.

Create & add an icon, favicon to gitnoter project

UI should present any errors occurred during any user action

Option to expand the textbox to full screen

Is your feature request related to a problem? Please describe.
I'm finding it difficult note down data in small text box

Describe the solution you'd like
like to expand the markdown box to full page and give the option for expanding

document how to self-host using docker(-compose)

It would be great if there was a document describing how to self-host gitnoter using docker. All I could find are the heroku docs, but I would like to avoid using yet another 3rd party service. One can probably piece things together from the heroku docs, yet it would be nice to have a document how to self-host w/o heroku.

UI design proposal for showing note revisions

Since we store notes inside git repository. So we can build a functionality to show revisions of the note by fetching historical commits data and allow user to revert to a specific revision. This would be a great addition to GitNoter

This issue is just about proposing the ui, i.e. we use this issue to share ideas/mockups/wireframes that shows revisions of a specific note and allow selecting the revision which will show the note version specific to that revision.

Running out of icons. Find an icon library

Wanted to use an icon for branch but there is no related icon in mui icons library.

MUI suggests using mdi-material-ui library for additional icons. It has 2000+ icons.

So add this library in the project.

It has the icon for branch. Enjoy :)

GitHub Flavoured UI

The Application will look more impactful if the UI elements follow GitHub's Styling.

Create react frontend

Scrollbar is automatically disappearing on macos when not scrolling

It seems that this is an os specific behaviour. The appearance of scrollbar can be controlled setting system preference on macos (System Preferences > General > Show scroll bars) to Always

But with this it will only affect the single user's machine. Also this will reserve the scrollbar space making ui look much ugly.

The workaround is to use WebKit's -webkit-scrollbar pseudo-elements to create the custom scroll bar that is always visible and looks similar to default scrollbar on macos. The downside is that windows user's will now see a macos like scrollbar.

Reference below
https://stackoverflow.com/questions/7855590/preventing-scroll-bars-from-being-hidden-for-macos-trackpad-users-in-webkit-blin

Inconsistent results with javascript regex test

The following piece of code sometimes returns true and sometimes returns false if invoked again

const VALID_FILENAME_REGEX = /^([a-zA-Z0-9-]|[^\S\r\n])+(\.md)$/gm;
...

func validate(){
    return VALID_FILENAME_REGEX.test("sample.md")
}

The issue seems to be the global(g) flag which matches the next occurrence on every execution causing the inconsistent result.
The solution is to remove the global flag. If removing global flag is not feasible then simply use the constructor to build the new regex every time

  const VALID_FILENAME_REGEX = `^([a-zA-Z0-9-]|[^S\r\n])+(.md)$`
...

func validate(){
    return new RegExp(VALID_FILENAME_REGEX, 'gi').test("sample.md")
}

Or the other simple technique that I prefer is to do the reverse match. i.e. use String.match(Regex)

const VALID_FILENAME_REGEX = /^([a-zA-Z0-9-]|[^\S\r\n])+(\.md)$/gm;
...

func validate(){
    return "sample.md".match(VALID_FILENAME_REGEX)
}

References:
https://stackoverflow.com/questions/1520800/why-does-a-regexp-with-global-flag-give-wrong-results
https://stackoverflow.com/questions/2630418/javascript-regex-returning-true-then-false-then-true-etc

Design a 404 page not found view inside react frontend

If the user visits a link for which there is no route defined, then we should show a 404 page not found view.

As a part of this task

• Create a new 404 component
• Add a 404 route at the end of all routes which matches all the paths. This route should render the 404 view.

Application is stuck on the login page. Unable to login to the application

Describe the bug
After successfully logging in to GitHub, nothing happens. I am just returned to the introduction page.

the URL is https://gitnoter.com/login?success=true but the page is the same as https://gitnoter.com/login

Expected behavior
gitnoter asks which respository i want to use

Please provide browser information:

• Browsers firefox, safari
  latest versions

Make routes protected with react

If the user is not currently logged the protected views should not be visible