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:
run npm run build to build the solution. Then copy the contents
of \dist to whereever.
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.
/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.
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/bookmark.Html.js renders 1 bookmark: feel free to adjust this to how you want to render one bookmark on your own site.
/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.
/plugins/subcategory.Title.js renders the subcategory title (a block of bookmarks)
/plugins/category.Title.js renders the category title (a title above a set of blocks of bookmarks)
renders favicons from Google so that you do not have to supply icons yourself for the bookmarks. (then disable Favicon plugin).
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).
/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.
/plugins/property.Wikipedia.js generates a property linking to the corresponding Wikipedia site of the bookmark based on the domain of the bookmark.
/plugins/property.Twitter.js renders the twitter account of the bookmark based on the domain of the bookmark.
/plugins/property.Reddit.js renders the reddit forum of the bookmark based on
the domain
/plugins/property.Playstore.js renders the playstore link if the property playstore
has been added to the bookmark data.
/plugins/property.NYSE.js renders the NYSE symbol if the property nyse has
been set for a bookmark in the data
/plugins/property.Nasaq.js renders the Nasdaq symbol if the nasdaq property has been
set in the bookmark data
/plugins/property.Google.js renders the Google Search link based on the title.
/plugins/property.Facebook.js renders the Facebook link for a bookmark
/plugins/property.Api.js renders the API for a bookmark
/plugins/property.Achievements.js renders the achievements site for a game bookmark
- 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
- shortlinks
- using both local icons and google favicons