Mount Bookmark 🗻
Mount Bookmark is a self-hosted, highly customizable bookmark board that allows you to view any YouTube stream/video in the background. I made it first as a simple project for myself, however after seeing that I wasn't the only one interested in such a tool, I decided to make it into my first open-source project.
Installation 🌋
First clone the sourcecode:
git clone https://github.com/LinoIten/mount-bookmark.gitTo run the react project:
npm startIf you want to run it in the background you can use PM2.
npm install pm2@latest -g
pm2 start --name mount-bookmark npm -- startFor having it as a "New Tab" page you could use the New Tab Redirect Extension for Chrome.
Customization📜
Under /src/config you'll find two json files.
colorPalette.json
{
"backroundBox": "rgba(37,42,51,0.98)",
"icon": "rgba(252,252,252,1.0)",
"accent1": "rgba(242,183,86,1.0)",
"text": {
"primary": "#FCFCFC",
"secondary": "rgba(242,183,86,0.5)"
}
}As the name suggests here you can define all the colors in the app. You can use both HEX and rgba().
settings.json
{
"bookmarkCategories": [
{
"name": "media",
"bookmarks": [
{
"name": "youtube",
"link": "youtube.com",
"svgPath": "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"
},
]
},
{
"name": "various",
"bookmarks": [
{
"name": "mail",
"link": "mail.startmail.com",
"svgPath": "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
},
{
"name": "digitec",
"link": "digitec.ch",
"svgPath": "M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"
},
]
}
],
"videoSettings": {
"videoId": "QOjmvL3e7Lc",
"autoplay": true,
"mute": 1,
"offSet": {
"top": "0px",
"right": "0px",
"bottom": "0px",
"left": "0px"
}
},
"searchEngine": "https://www.ecosia.org/search?q="
}Note: Currently the only way to use Icons is to use the svg-path
The names of each attribute should be fairly self-explanatory!