pzyon / engraved_legacy Goto Github PK

E.g. Trim texts (especially titles). Consider adding a "sanitizeItem" or something function to
https://github.com/PzYon/engraved/blob/master/server/src/db/DbService.ts:

• call it for add and update
• trim title and desc
• maybe do other things
• maybe even consider adding this to shared...?

While we are already at it, we might as well cleanup that class a bit. E.g. updateItem should not return promise of any, etc. There might be some other things, as apparently the typing for mongodb have been improved.

E.g for

• article (View Item Page)
• section
• header
  ...

https://www.w3schools.com/html/html5_semantic_elements.asp

E.g. when creating a new item or when viewing/editing an existing one.

Use keywords, etc.

• Select all content on focus (good for mobile)
• Give focus on initial page load

https://docs.mongodb.com/manual/reference/operator/query/text/

Show some information about the current user, i.e.:

• mail address
• member since
• etc.

• consider setting maxwidth to 1000px (as is done by github, medium, etc. - seems to be a standard)
• consider removing gray background (left/right) and add a fine border - maybe similar to github. Pages could have a border (consider omitting on search page)
• consider adding a edited 11 minutes ago - component that
  • provides the real date on hover
  • provides a link to "edit"

• find a theme that's nicer than the default, i.e. github?

If there is an existing keyword named "TypeScript" and I would like to create a new one named "Script" the "Create keyword xxx" is not display.

Consider adding more item types, for example:

• recipes
• tours (cycle, hiking, running, etc.)
• quotes
• HTML
• ...

Or alternatively consider adding support for custom types, where the user define his own types.

Not sure if this is a good idea.. But we could consider adding either

• a new item of kind HTML in order to be able to do very custom stuff - maybe even with script support?
• or extend the existing Note kind to be able to support markdown and HTML

• client folder structure: too much in "common"
• server: split up controllers, add base?
• config mechanism (client and server)

• move all secrets and co to env. variables or something -> remove from git!
• create (i.e. publish to npm) engraved-shared npm package
• most probably a global package.json is required
• version number in UI?
• ...

• Pages should all have an "x" in the top right, on close redirect to "/"
• Global message
  • Show global message (similiar to ErrorBoundary)
  • Timeout to close after n seconds?
• Buttons:
  • Create form:
    • OnSave: view OR home | message: "Created..." (and link?)
    • OnClose: home
  • Edit form:
    • OnSave: stay OR home | message: "Updated..."
    • OnClose: home OR view
  • View form:
    • OnEdit: edit
    • OnClose: home

Add possibility to sort items.

Sortable props:

• modifiedOn (default)
• title

Render below search box. Maybe as flyout, maybe inline. Maybe with a gear/settings icon.

• double click on items should open item (edit or view?)?
• click on keywords in results add's them to the query (GlobalSearchBox)
• URLs need to be opened directly...
  • either with an icon somewhere
  • or with double-click (see above)
• notifications should disappear after n seconds
• keyboard support for search box (#4)

... more to come

At the moment nothing happens e.g. when mongo server isn't started during development.

https://blog.bitsrc.io/react-16-what-can-it-do-for-you-part-1-e2ee4b9022fb

What boundaries do we need?

• At least one (global)
• Maybe one for form

Open points

• Where to position errors in UI?

• Handle lots of items
  • simple limit
  • or scrolling
• Add an easy way to close dropdown, especially on mobile
• Add clear search action (keywords and/or search text)
• Open dropdown with keyboard combination (ctrl+space for example)

• use google accounts or something
• add "current user"-component with
  • logo
  • logout functionality
• add splash screen
• add users to database, link items to user
• error handling when not authenticated?

• References (links, TOC, images).
• Add some styling to HTML generated from markdown. E.g. the headings are too big, links should look nice, etc.
• Code?
• Dealing with images
• Highlighting for code
• TOC
  • Consider moving TOC to an own, border container
  • Do not show TOC if there is no content
• Improve styling, everything seems a bit cluttered

Next to the common information we need to show some type specific information (or actions) in Item.tsx.

Notes:

• tbd - maybe nothing?

Code:

• language

Url:

• open Url action
• print URL
• favicon?

Refresh token
Token should be refreshed automatically somehow...?

Keep URL on redirect:

The token expires after a certain amount of time. This then redirects the user to the google auth API. Afterwards the user is redirected back to the root URL of our app. This leads to the context being lost.

To prevent this, we should:

• either find a way to send the URL to google and get it back again
• or store it in local storage before heading of to google

Every form has a

• OnClick action (depending on form-mode / create [for new], edit [for view], save [for edit])
• Readonly mode (depending on form-mode)
• Fields (depending on type)

Notes

• Consider reusing/adjusting EditItemForm.tsx
• Consider reusing/adjusting Wrapper (or maybe even better would be to adjust IFieldProps) to be able to deal with read-only or not

• code editor should grow with content (or be resizable [or both]) - anyways, at the moment it's too big: https://ace.c9.io/demo/autoresize.html
• input: shadow only on focus, no hover
• labels: no all caps
• validation
• detect if item is dirty and set buttons/actions accordingly
• consider hiding non-required fields by default and add them onclick

As a user I most probably often perform similar queries, e.g. if I want to see everything related to "work" or "sport". Maybe we could add a functionality (on the user page) where the user can define and name queries, that he/she can then easily call. The queries could be display as tabs somewhere.

For unauthenticated users, e.g. using a unique URL - similar to OneDrive.

...namely German.

• mainly to navigation in box

• list all users

• ViewItemPage and EditItemPage could both be wrapped by a DoWithItemPage or something
• Rename common-folder to reusable, e.g. move Markdown.tsx and CodeEditor.tsx there
• Replace constructors with public readonly state: I..State
• Create ActionButton or something for anchors (reason: to have a unified "action" component, a11y)
• Analyze usages of inline function, especially in for/map (reason: performance)
• Run Audit in Chrome - see if something interesting is printed
• Consider adding react-hooks eslint plugin

• redirect to welcome page?
• also consider hiding welcome screen to prevent flashing if user is already authenticated

• references (links, TOC, images)

Maybe something like this:
facebook/create-react-app#2466

• Navigation
  • Sticky
  • or small top bar
• Top labels instead of left/table
• Nice "view item" screen
  • Title should be bigger
• Use font: https://www.ibm.com/plex/concept/
• Get rid of dialogs and use "pages" or something instead
• Primary/secondary buttons
• Page title
  • engraved
  • engraved | my item title
  • engraved | edit | my item title

• is show when user is not logged in
• nav is not shown
• prints
  • some information about the app
  • login link

Reason: #34

Use same setup everywhere (client, server, shared):

• introduce prettier
• use same tslint-settings

• contains title ("engraved.")
• contains current user component

Add screenshots or a video/gif to the repo showing the UI and demonstrate some use cases. :-)