bookmark
Have a static page for displaying your bookmarks (an example is on https://ed.je).
- Assets/Data : contains your json files containing your bookmarks. You can generate these json files with any additional tooling or edit them manually. It's pretty straightforward to generate these files from e.g. exporting them from your browser or generating them from a directory of .url or .md files.
Then build:
build
run npm run build to build the solution. Then copy the contents
of \dist to whereever.
bookmarks
Bookmarks are placed in json files in /assets/data , either
edit these json files manually or generate them from e.g.
.url files or a browser export.
Templates
/app/*.js contains 2 templates. One for the bookmarks and one for the favorites that appear once a user has clicked enough bookmarks. The templates can be seen as blocks that appear on the screen. So you can add more templates here or change the existing ones.
properties
In the current templates I use properties:
Each url can have properties such as the reddit forum, the twitter
account, the stock symbol etc. Each property is a plugin inside
plugins/property.*.js you add your own properties there or
edit existing ones. They render as popovers by default.
Plugins
plugin: bookmark Html
/plugins/bookmark.Html.js renders 1 bookmark: feel free to adjust this to how you want to render one bookmark on your own site.
plugin: bookmark Title
/plugins/bookmark.Title.js renders the title of the bookmark or if it has not title
the url, feel free to adjust this to how you want to render titles of bookmarks on your site.
plugin: subcategory Title
/plugins/subcategory.Title.js renders the subcategory title (a block of bookmarks)
plugin: category Title
/plugins/category.Title.js renders the category title (a title above a set of blocks of bookmarks)
plugin: GoogleFavicon
renders favicons from Google so that you do not have to supply icons yourself for the bookmarks. (then disable Favicon plugin).
plugin: Favicon
Run npm run icons to download the favicons for all urls
in all data files in the /assets/data folder if you want to serve each icon statically.
(then disable GoogleFavicon plugin).
plugin: Youtube
/plugins/property.Youtube.js generates a property linking to a YouTube site following https://www.youtube.com/results?search_query=${properties.youtube} based on the title of the bookmark.
plugin: Wikipedia
/plugins/property.Wikipedia.js generates a property linking to the corresponding Wikipedia site of the bookmark based on the domain of the bookmark.
plugin: Twitter
/plugins/property.Twitter.js renders the twitter account of the bookmark based on the domain of the bookmark.
plugin: Reddit
/plugins/property.Reddit.js renders the reddit forum of the bookmark based on
the domain
plugin: PlayStore
/plugins/property.Playstore.js renders the playstore link if the property playstore
has been added to the bookmark data.
plugin: NYSE
/plugins/property.NYSE.js renders the NYSE symbol if the property nyse has
been set for a bookmark in the data
plugin: Nasdaq
/plugins/property.Nasaq.js renders the Nasdaq symbol if the nasdaq property has been
set in the bookmark data
plugin: Google
/plugins/property.Google.js renders the Google Search link based on the title.
plugin: Facebook
/plugins/property.Facebook.js renders the Facebook link for a bookmark
plugin: Api
/plugins/property.Api.js renders the API for a bookmark
plugin: Achievements
/plugins/property.Achievements.js renders the achievements site for a game bookmark
using
- https://github.com/WordPress/gutenberg : for the hooks and plugins
- https://github.com/desandro/jquery-bridget : for the masonry in default site
- https://github.com/atomiks/tippyjs: for the popovers
todo
- shortlinks
- using both local icons and google favicons