mBookmark

What is mBookmark

mBookmark is short for mobile-like bookmark. This is only an exercising project for fun. The purpose of this project is to simulate a mobile-like GUI in web environment. Use it to manage user's bookmark. Create a powerful search feature for users to efficiently access saved sites. A mobile-like GUI will help user to remeber their bookmark position/location more easily than traditional browser bookmark. And mainwhile, I bring a concept of "application" into this project. The role of application is the equivilant application in your phone, just web version replacements. Using this portal, I will be able to integrate with all my past works and even many stunning open source web apps like "QR scanner" into this place. A real all-in-one web app.

Screenshots

INtroduction

Demo

You can play with this simplified version here: demo (TODO)

Livesite

The live version is here: live

Fork/Clone this app

You can even fork/clone this app and build your own version using your github page, or any server providers.

Features

• Fully github based app
  • Using my github page as renderring server
  • Using gist as database
• Privacy and security:
  • Even though your data is saved on gist which is visible to public, all data is AES encrypted with your own secret.
  • Your secret is MD5 encrypted and stored in your browser. You can safely remove them by signing out. A secret is just another name of password.
  • Since it is based on Gist, you will be able to rollback/manage your data using gist features powered by github.
• Powerfull search feature:
  • Supporting multiple keywords search, eg: word1,word2,word3
• Web Application integration. A web app can be:
  • An iframe
  • A plugin like code written in src/components/Application and registered in src/components/ApplicationManager
• Builtin QR code scanner, powerred by: qr-code-scanner
  • Support webcam scanning
  • Image scanning
• Mobile-like GUI/UX
• Live wallpaper, and you can change it to any static/live wallpaper you like online.
• Fullscreen support
• Mobile device support

Start to use

• Create your own personal github access token by following github official document.

  • You will only need gist read&write permission.
  • Please set your token to be perminent (no expiration date).

• Use your token and your own secret/password to login and enjoy it!

• The very first login will automatically create a gist ticket under your account. Please don't delete it unless you decide to stop using it.

• Shortcut and gastures

  • slide left/right to change between screens
  • slide down to call out search screen
    • Supporting multiple keywords search, eg: word1,word2,word3
  • right click on Bookmark to edit/remove it.

• In Bookmark Add screen, there are 2 buttons for you to simplify the process of creation. Click on helper script button to copy a piece of code. Then paste and run it in any website console to generate JSON version of site info. Then copy the JSON string into your clipboard, and then click on the import button to quickly import site info.

• In all popout screens, click on the background area will bring you back to main screen.

• Edit folder name by opening a folder and clicking on its name/title.

• -1 screen is supported. By default, I use juejin.com as my feed provider. You can change it with any websites which allow:

  • iframe
  • CORS policy

Dependencies

• Vite
• SolidJS
• CryptoJS
• qr-code-scanner
• Materialize

TODOs

• Mobile like homepage design

• add/edit/remove bookmark

• app screen layer manager

• entry group

• screen layer history stack

• page screen layer switch animation

• app group

• data structure design

• normal homepage drag & drop based modification features

• materialize UI integration

• boxEdge, detect dragging and hold event to change pages

• fix dropdown menu

• edit group-popover/group title

• searchPopover

• Live wallpaper

• reading page

• bottom Dock

  • fullscreen (icon only)
  • Readme/intro doc (icon only)
  • barcode scanner (icon only)
  • setting (icon only)

• App entry, Application structure

• App screenLayer

• App manager

• [-] APPs

  • fullscreen
  • Readme/intro doc
  • qrcode scanner
  • settings

• input validations

• login page

• gist based DB

• localstorage based DB

• coachmark

• make it into browser extension

  • * add bookmark based on user current viewing website.

• mobile touch events support

• Vite config

• comments and documentation in code

• sample site

• add custom encrypt secret, like password. In case user lose old github token. Now user can use any github token with proper r/w authority to login this app. Data will be encrypted with secret

• service worker

• web wroker

• PWA