ptweb - web interface

[clach04]

Notes, requirements, and ideas.

Requirements

See PyTombo WebGrep

• search
  • Text Fragment support in results, i.e. #:~:text=..... Example https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
  • grep - regex and simple
  • Full text search (plain text, also encrypted which would require encrypted index files)
    • https://github.com/clach04/puren_tonbo/issues/127
    • https://github.com/clach04/puren_tonbo/pull/128
  • suggestion auto complete
  • also see html5/js below
• view (plain and formatted - markdown and non-markdown). Also see #125
  • is based in client browser
  • external binary for speed, e.g https://github.com/hoedown/hoedown, github's, etc.
  • (fast) markdown rendering see https://markdown-it-py.readthedocs.io/en/latest/performance.html
  • themes /styling
    • Consider https://github.com/sindresorhus/github-markdown-css
    • PyTombo white and blue theme
    • support for themes generated by base16 and https://github.com/mbadolato/iTerm2-Color-Schemes
• edit (plain and formatted)
  • outline (table of contents TOC) view for Markdown headers
  • svg diagrams like
    • https://github.com/mbarkhau/markdown-svgbob also online https://github.com/ivanceras/svgbob
    • mermaid
    • AA figure (see PyPi)
    • , etc.
  • support drag and drop of a file to get content
    • support images, https://github.com/summernote/summernote had copy/paste support
  • https://github.com/xjh22222228/awesome-web-editor options to consider
    • CodeMirror
    • Monaco
  • StackEdit wrapper https://github.com/benweet/stackedit.js live preview with synced scroll lock
  • https://github.com/Ionaru/easy-markdown-editor plain text, with preview. Also has autosave support to local storage, might be useful in case of server errors to avoid data loss?
  • https://github.com/nhn/tui.editor toast
  • https://github.com/sparksuite/simplemde-markdown-editor also has autosave support
  • easy GitHub style / syntax todo lists - [ ]
  • auto bullet list continuation (see todo lists syntax above)
  • For example, offer limited (e.g. only show bold, italics, and bullet points with no font options) TinyMCE https://github.com/tinymce/tinymce and then convert the html to markdown when saving
  • Dual format editors
    • https://github.com/nhn/tui.editor
• browse directory tree - https://github.com/clach04/puren_tonbo/blob/a885da9b8b90bab3562d5ef932fd0546eada8e80/puren_tonbo/__init__.py#L863 (ptig ls needs this too)
  • https://github.com/mar10/wunderbaum (successor to https://github.com/mar10/fancytree)
  • see what vscode like tools use such as :
    • https://github.com/hakanu/pervane/blob/master/pervane/templates/sidebar.html
    • https://github.com/icecoder/ICEcoder
    • https://github.com/Atheos/Atheos (previous https://github.com/Codiad/Codiad)
• html5/js search and highlighting - allow navigation through search hits for a note in web browser for easy "next" search (primary use case mobile). WxTombo may have had this.
  • https://github.com/julmot/mark.js/
    • has a search bar and jump sample in pure js - https://jsfiddle.net/julmot/973gdh8g/
  • https://dev.to/kokaneka/highlight-searched-text-on-a-page-with-just-javascript-17b3 highlight only, no navigation
  • https://www.the-art-of-web.com/javascript/search-highlight/
  • https://github.com/julmot/mark.js
  • Scroll to Text Fragment - https://wicg.github.io/scroll-to-text-fragment/
  • https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript
  • https://stackoverflow.com/questions/17520307/how-to-search-text-from-page-with-next-and-previous-functionality-in-jquery
  • https://observablehq.com/@daformat/highlighting-html-text
• Note filename/title search/filtering
• LRU support, https://github.com/clach04/puren_tonbo/issues/58
• TTS text to speech transcription https://github.com/pazguille/voix
• All of the above in mobile and desktop browser
• see if passwordless options can be used, see https://github.com/duo-labs/duo-blog-going-passwordless-with-py-webauthn (possible storage issue, as this is less about auth than secrets.....)

Web APIs

Client side UI

• Tree
  • https://github.com/chniter/bstreeview
  • (Archived) Searchable bootstrap tree view https://jonmiles.github.io/bootstrap-treeview/
  • https://github.com/jonmiles/bootstrap-treeview
  • https://mdbootstrap.com/docs/b4/jquery/plugins/treeview/

REST

• https://github.com/owncloud/notes/wiki/API-0.2 uses integer id for notes (maybe flat directory)
• https://github.com/nextcloud/notes/blob/main/docs/api/README.md
  • https://github.com/nextcloud/notes/blob/main/docs/api/v1.md

Themes https://bootswatch.com/

Browser based editors

• https://github.com/Vanessa219/vditor/blob/master/README_en_US.md

Existing static site generators

• https://github.com/compiiile/compiiile
• https://squidfunk.github.io/mkdocs-material/
• https://gohugo.io

PyTombo

Old screenshots

[clach04]

Simple viewer and directory browser implement in https://github.com/clach04/puren_tonbo/blob/main/puren_tonbo/tools/ptwebcp.py - needs more features implemented (and testing).