alarivan/blocknote-gatsby

Gatsby's default starter

Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the default starter.

   # create a new Gatsby site using the default starter
   gatsby new my-default-starter https://github.com/alarivan/gatsby-basic-typescript-starter

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-default-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. LICENSE: Gatsby is licensed under the MIT license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. README.md: A text file containing useful reference information about your project.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

blocknote-gatsby's Issues

Remove footer from layout

Delete button

Description

As a user I would like to delete my notes

Acceptance criteria

• Note should be deleted when clicking on Delete button

Create Listing Component

Listing component

Component file:

src/components/Listing.tsx

Test file:

src/components/__tests__/listing.spec.tsx

props:

• notes: TNote[]

Description:

Component displays a list of notes

Replace GlobalStyles with modern-normalize

https://github.com/sindresorhus/modern-normalize

Icon - add new functionality

Descriptio

Need to add fuctionality to following icons:

1. icon - new note
2. icon - list
3. icon - import
4. icon - settings
5. icon - keyboard

Acceptance criteria

1. A note should be created after clicking on icon (create note)
2. Should be open list of existing notes
3. Should be open funtional export\import
4. Should be open options colors settings
5. Should be open settings of keyboard

Create Note View page

Description

As a user I would like to view contents of the note on a separate page.

Acceptance criteria

• Note View url {app}/view/:id where :id is note's id
• Clicking View button should result in redirect to a Note View page
• Note View page should contain contents of the note, Edit, Delete and Copy buttons
• Note View page should have links to New Note and List pages

Switch to material-ui

Notes Filter

Description

As a user I want to be able to filter my notes.

Acceptance criteria

• Add search input to note listing page
• When user types in search input, notes should be filtered by their content (use https://fusejs.io/ library)

Add consistent styles to note content

Description

As a user I would like to see that my note looks the same when I edit it and when I view it.

Note

Editor styles should be used as base styles.

Acceptance criteria

• Note content looks the same when editing and viewing on Listing and View pages

Display Tags for Notes

Description

As a user I would like to see Tags that I add to my notes.
Tags should be rendered before note contents.

Acceptance criteria

• Display tags on note listing page
• Display tags on note view page

Create ActionPanel component

ActionPanel component

Component file:

src/components/Note/ActionPanel.tsx

Test file:

src/components/Note/__tests__/action-panel.spec.tsx

props:

• note: TNote

Description:

Component renders 4 buttons: View, Copy, Edit, Delete

View, Copy, Delete should have placeholder methods for onClick event.

Edit should redirect to edit page for the note.

Buttons should use Rebass Button component: https://rebassjs.org/button

Add DELETE action to notes reducer

Add DELETE_NOTE type in src/reducers/notes/types.ts

Add deleteNoteAction function in src/reducers/notes/actions.ts

Handle DELETE_NOTE in src/reducers/notes/reducer.ts

Add test for deleteNoteAction in src/reducers/notes/__tests__/reducer.spec.ts

Move Components to app directory

Move src/cpomponents/Listing.tsx to src/cpomponents/app/Listing.tsx

Move src/cpomponents/__tests__ to src/cpomponents/app/__tests__

Move src/cpomponents/Listing to src/cpomponents/app/Listing

Move src/cpomponents/Note to src/cpomponents/app/Note

Add Copy Block Option To Editor

Description

As a user I would like to be able to create a note where only part of the note is copied when I click on a Copy button.

Acceptance criteria

• Add new option to Editor panel that will wrap selected text in a Copy Block
• Only Copy Block should be copied when clicking on Copy button
• Whole note should be copied when there is no Copy Block
• Copy block should work with Inline and block formats (Example: Header 1 is a block)
• Only one copy block should be allowed in a note. Copy Block should be replaced if already present when Copyblock option is clicked
• Copy button should work on Listing and View pages

Create Tags reducer

Tags reducer

Description:

Tags reducer is similar to Notes reducer.
Use it as reference: src/reducers/notes/*

Map from immutable library should be used for TTagsState

Files:

src/reducers/tags/actions.ts
src/reducers/tags/reducer.ts
src/reducers/tags/types.ts

Test file:

src/reducers/tags/__tests__/reducer.spec.ts

Actions:

SET_TAGS
SAVE_TAG
DELETE_TAG

Tag type:

type TTag = {
    id: string; 
    color: string;
}

Tags state type:

type TTagsState = Map<string, TTag>

Fix notes reducer test

blocknote-gatsby/src/reducers/notes/__tests__/reducer.spec.ts

Line 32 in 22bcaa6

const state = notesReducer(Map(), action)

Initial state passed to notesReducer should be Map([[note.id, note]])
If initial state is empty it will not test delete action since there is nothing to delete.

TagInput enhancements

Description

Improve TagInput component

Acceptance criteria

• Pressing Tab when input is focused should fill input value with first tag suggestion.
• When tag input is empty show first 5 tags in suggestions.

Create Listing Note Component

Listing Note component

Component file:

src/components/Listing/Note.tsx

Test file:

src/components/Listing/__tests__/note.spec.tsx

props:

• note: TNote

Description:

Component displays note body html

Add link to app page

Create a link to app page from index page

Tag input component

Description

As a user I would like to add tags to my note when creating and editing it.

Acceptance criteria

• Add tag input component to Editor
• When enter is pressed new tag is created with the contents of the input and added to a note
• Added tags should be displayed above tag Input
• When typing existing tags should be displayed below the input
• User should be able to click on a suggested tag to add it to a note
• User should be able to click on added tag to remove it from a note
• No designs needed. Tags can be mui buttons for now.

Add copy functionality

Description

As a user I would like to easily copy contents of the note by clicking Copy button.

Acceptance criteria

• Clicking Copy button should result in content of the note being copied to clipboard.
• Button should show change text to ✅ using zoom animation

Create menu bar

Create menu bar according to designs. https://app.moqups.com/eAotEMEVAh/edit/page/ab7a08c7d

It should have links to:

1. Create a new note
2. Archive
3. Export / Import
4. Settings
5. Keyboard shortcuts

Additional Notes:
Links don't need to route to new pages for now.

Remove snapshot test from index page

Update main route

1. Add ActionPanel to Note component
2. Add Note to Listing component
3. Replace map in src/app/routes/main.tsx with Listing

Make sure that all components display correctly on /app page.
Test that edit button redirects to /app/edit page

Add Rebass library

Create feature issue template

Create feature issue template as shown below

Description

Feature description/story

Acceptance criteria

• Acceptance criteria list
• Should be used in pull requests