{"id":13622161,"url":"https://github.com/dan-smith-tech/shelf","last_synced_at":"2025-04-15T05:33:52.137Z","repository":{"id":50576531,"uuid":"500167801","full_name":"dan-smith-tech/shelf","owner":"dan-smith-tech","description":"A fully customisable, open-source browser startpage.","archived":false,"fork":false,"pushed_at":"2022-08-30T16:50:30.000Z","size":5683,"stargazers_count":30,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-01T21:51:42.071Z","etag":null,"topics":["browser-startpage","css","customisable","html","javascript","open-source"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dan-smith-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-05T17:38:56.000Z","updated_at":"2024-08-01T21:51:42.072Z","dependencies_parsed_at":"2022-08-12T21:40:59.261Z","dependency_job_id":null,"html_url":"https://github.com/dan-smith-tech/shelf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-smith-tech%2Fshelf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-smith-tech%2Fshelf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-smith-tech%2Fshelf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-smith-tech%2Fshelf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dan-smith-tech","download_url":"https://codeload.github.com/dan-smith-tech/shelf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223661390,"owners_count":17181662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-startpage","css","customisable","html","javascript","open-source"],"created_at":"2024-08-01T21:01:15.009Z","updated_at":"2024-11-08T09:31:01.164Z","avatar_url":"https://github.com/dan-smith-tech.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Logo\" src=\"favicon.svg\" width=\"100\"/\u003e\n\u003c/div\u003e\n\u003ch1 align=\"center\"\u003e\u003cstrong\u003eShelf\u003c/strong\u003e\u003c/h1\u003e\n\u003cp align=\"center\"\u003e A fully customisable, open-source browser startpage, built with vanilla HTML.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Content\n\n-  [Motivation](#motivation)\n-  [Getting Started](#getting-started)\n-  [Documentation](#documentation)\n   -  [Colour](#colour)\n   -  [Clock](#clock)\n   -  [Searchbar](#searchbar)\n      -  [Change Search Engine](#change-search-engine)\n      -  [Change Layout](#change-layout)\n      -  [Delete](#delete)\n   -  [Layout](#layout)\n      -  [Change Height of Links](#change-height-of-links)\n      -  [Change Links to be the Same Height](#change-links-to-be-the-same-height)\n   -  [Content](#content)\n      -  [Links](#links)\n      -  [Headings](#headings)\n-  [Contributing](#contributing)\n-  [Forking Guidelines \u0026 License Notice](#forking-guidelines--license-notice)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Motivation\n\nI created Shelf because I wanted a locally-accessible browser startpage that enabled me to organise my bookmarks by relative size - to represent importance and to increase ease-of-access to the places I visit the most (also, I just wanted to experiment with some cool gradient designs). Additionally, I wanted my searchbar to be focused when the browser loads, to start searching as soon as it opens (without having to click on any input fields, because after all, if you're not clicking on a bookmark, you're probably opening your browser to search something up).\n\nI like to use Shelf by keeping my most visited and important bookmarks as the largest link elements, whilst having the clock and searchbar right above them, for quick access.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Getting Started\n\nIn order to customise _Shelf_ for your own browser, you will need to fork this repo so you can add your own content and change the layout. You can refer to [GitHub's forking documentation](https://docs.github.com/en/get-started/quickstart/fork-a-repo) if you need.\n\nOnce you have _Shelf_ downloaded locally on your machine, you will need to set it as your homepage for new windows in your browser. In order to accomplish this, you will need to head to your browser settings and set the startpage for new windows and tabs to be the location of the 'index.html' file in the _Shelf_ folder (e.g., if you are on Windows this may be 'file:///C:/Users/[your-name]/projects/shelf/index.html'). Below is a list of how to accomplish this on some of the most popular browsers.\n\n-  [Setting your homepage in Chrome](https://www.hellotech.com/guide/for/how-to-change-homepage-on-chrome)\n-  [Setting your homepage in Firefox](https://support.mozilla.org/en-US/kb/how-to-set-the-home-page)\n-  [Setting your homepage in Safari](https://support.apple.com/en-gb/guide/safari/ibrw1020/mac)\n-  [Setting your homepage in Opera](https://browserhow.com/how-to-change-homepage-url-on-opera-browser/)\n-  [Setting your homepage in Brave](https://browserpulse.com/how-to-change-brave-browser-default-homepage/)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Documentation\n\nThe following sections detail how you can customise every part of _Shelf_ to create your very own browser startpage. However, if you are familiar with HTML, CSS, and JavaScript, you should of course experiment with more complicated customisations.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Colour\n\nBy default, _Shelf_ uses its colour scheme of purples and reds.\n\nIf you want to use your own colours within _Shelf_, you simply need to change the values of the following variables (found at the top of the 'main.css' file). You can use [this](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) colour picker tool to find the colour codes, and [this](https://cssgradient.io/) tool to create your own gradients.\n\n```css\n:root {\n\t--color-text: white;\n\t--color-primary: #a81759; /* Used for highlights */\n\t--color-secondary: #171633; /* Used for backdrops of elements */\n\t--color-tertiary: #111025; /* Used for the backdrop of the entire page */\n\t--gradient-primary: linear-gradient(\n\t\t45deg,\n\t\tvar(--color-primary) 0%,\n\t\t#a81796 35%,\n\t\t#6c17a8 65%,\n\t\t#3917a8 100%\n\t); /* Used for highlights */\n\t--gradient-secondary: linear-gradient(\n\t\t45deg,\n\t\tvar(--color-secondary) 0%,\n\t\t#251633 35%,\n\t\t#2c1633 65%,\n\t\t#421531 100%\n\t); /* Used for backdrops of elements */\n}\n```\n\nYou can also change the color of icons, by using [this](https://codepen.io/sosuke/pen/Pjoqqp) tool to convert a colour from HEX to a CSS filter property, which you can copy and replace in the following CSS class (found in the 'main.css' file).\n\n```css\n.grid-element svg {\n\tfilter: invert(100%) sepia(0%) saturate(2%) hue-rotate(128deg) brightness(\n\t\t\t103%\n\t\t) contrast(101%);\n}\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Clock\n\nBy default, _Shelf_ has a clock at the top of the page.\n\nIf you want to remove the clock, you can delete the following HTML (found towards the top of the 'index.html' file).\n\n```html\n\u003csection\u003e\n\t\u003cdiv id=\"time\"\u003e12:00\u003c/div\u003e\n\u003c/section\u003e\n```\n\nYou will also need to remove the following JavaScript (found at the bottom of the 'main.js' file).\n\n```javascript\nconst timeElement = document.querySelector(\"#time\");\nfunction updateTime() {\n\tconst date = new Date();\n\tvar hour = date.getHours().toString();\n\tif (hour.length === 1) hour = \"0\" + hour;\n\tvar minute = date.getMinutes().toString();\n\tif (minute.length === 1) minute = \"0\" + minute;\n\tconst seconds = date.getSeconds();\n\n\ttimeElement.textContent = hour + \":\" + minute;\n\tsetTimeout(updateTime, 1 - seconds);\n}\nupdateTime();\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Searchbar\n\nBy default, _Shelf_ has a searchbar at the top of the page, that searches with Google.\n\n\u003cbr\u003e\n\n### Change Search Engine\n\nIf you want to change the search engine used, then you will need to change the value of the following JavaScript variable (found at the top of the 'main.js' file), to the query link of your desired search engine. For example, if you wanted to use DuckDuckGo, it would be 'https://duckduckgo.com/?q='.\n\n```javascript\nconst searchEngine = \"https://google.com/search?q=\";\n```\n\nIf you change the search engine, then you will also want to change the placeholder text in the search bar to reflect your choice. You can do this by replacing the 'placeholder' property in the following HTML (found towards the top of the 'index.html' file).\n\n```html\n\u003cinput class=\"grid-element\" type=\"search\" placeholder=\"Search with Google or enter an address...\"\u003e\u003c/input\u003e\n```\n\n\u003cbr\u003e\n\n### Change Layout\n\nIf you want the searchbar to fit with the rest of the grid, then you will need to delete the following CSS properties (found in the 'main.css' file). You may also want to refer to the [Layout](#layout) section, for more information on how elements of arranged in _Shelf_.\n\n```css\n#search {\n\twidth: 65em;\n\tmargin: 0 auto calc(2.85rem + var(--gap)) auto;\n}\n```\n\n\u003cbr\u003e\n\n### Delete\n\nIf you want to remove the searchbar, you can delete the following HTML (found towards the top of the 'index.html' file).\n\n```html\n\u003csection\u003e\n  \u003cform id=\"search\"\u003e\n    \u003cinput class=\"grid-element\" type=\"search\" placeholder=\"Search with Google or enter an address...\"\u003e\u003c/input\u003e\n  \u003c/form\u003e\n\u003c/section\u003e\n```\n\nYou will also need to remove the following JavaScript (found at the top of the 'main.js' file).\n\n```javascript\nconst searchForm = document.querySelector(\"#search\");\nconst searchBar = searchForm[0];\nconst searchEngine = \"https://google.com/search?q=\";\nsearchBar.focus();\nsearchForm.onsubmit = (e) =\u003e {\n\te.preventDefault();\n\tconst query = searchBar.value.replace(/ /g, \"+\");\n\tif (validURL(query)) return (window.location.href = query);\n\telse return (window.location.href = \"\" + searchEngine + query);\n};\nfunction validURL(str) {\n\tvar pattern = new RegExp(\n\t\t\"^(https?:\\\\/\\\\/)?\" +\n\t\t\t\"((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|\" +\n\t\t\t\"((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))\" +\n\t\t\t\"(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*\" +\n\t\t\t\"(\\\\?[;\u0026a-z\\\\d%_.~+=-]*)?\" +\n\t\t\t\"(\\\\#[-a-z\\\\d_]*)?$\",\n\t\t\"i\"\n\t);\n\treturn !!pattern.test(str);\n}\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Layout\n\nElements in _Shelf_ are arranged using CSS Grid.\n\n\u003cbr\u003e\n\n### Change Height of Links\n\nIn order to change the smallest height that link elements can be, change the 'min-height' property in the following CSS class (found in 'main.css').\n\n```css\n.grid-element {\n\tmin-height: 6rem;\n}\n```\n\n\u003cbr\u003e\n\n### Change Links to be the Same Height\n\nIn order to make all of the links have the same height (as opposed to filling the available space), change the 'grid-template-rows' property in the following CSS class (found in the 'main.css' file). Set the value to 'repeat(x, 1fr)', where x is the largest number of links you have (vertically) in any column.\n\n```css\n.grid-rows {\n\tdisplay: grid;\n\tgrid-template-rows: repeat(4, 1fr);\n}\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Content\n\nBy default, _Shelf_ comes with a few demo bookmarks (such as YouTube, Spotify, and Gmail). However, you will of course want to change these in order to document your own links.\n\n\u003cbr\u003e\n\n### Links\n\nA link consists of the following HTML (found in the 'index.html' file).\n\n```html\n\u003ca href=\"[INSERT-LINK-URL]\" class=\"grid-element\"\u003e\n\t\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\u003e\n\t\t[INSERT-LINK-ICON-SVG-PATH]\n\t\u003c/svg\u003e\n\t\u003ch3\u003e[INSERT-LINK-NAME]\u003c/h3\u003e\n\u003c/a\u003e\n```\n\nIn order to create a new link, place one of these HTML elements in any of the 'grid-rows' HTML containers (found in the 'index.html' file), such as the following.\n\n```html\n\u003csection class=\"grid-columns\"\u003e\n\t\u003cdiv class=\"grid-rows\"\u003e\n\t\t\u003ca href=\"https://youtube.com\" class=\"grid-element\"\u003e\n\t\t\t\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\u003e\n\t\t\t\t...\n\t\t\t\u003c/svg\u003e\n\t\t\t\u003ch3\u003eYouTube\u003c/h3\u003e\n\t\t\u003c/a\u003e\n\t\t\u003ca href=\"[INSERT-LINK-URL]\" class=\"grid-element\"\u003e\n\t\t\t\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\u003e\n\t\t\t\t[INSERT-LINK-ICON-SVG-PATH]\n\t\t\t\u003c/svg\u003e\n\t\t\t\u003ch3\u003e[INSERT-LINK-NAME]\u003c/h3\u003e\n\t\t\u003c/a\u003e\n\t\u003c/div\u003e\n\u003c/section\u003e\n```\n\nThen fill in the URL and name fields. In order to find an icon for the link, you can use a range of websites that provide SVG icons. For the demo, I sourced all of the icons from [Boxicons](https://boxicons.com/). In order to do this, select the icon you want in Boxicons, and press the 'SVG CODE' button in the pop-up menu. The SVG will be copied to your clipboard.\n\nWhen you copy an SVG from Boxicons, it looks like the following.\n\n```html\n\u003csvg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\twidth=\"24\"\n\theight=\"24\"\n\tstyle=\"fill: rgba(0, 0, 0, 1);transform: ;msFilter:;\"\n\u003e\n\t\u003cpath\n\t\td=\"m18.73 5.41-1.28 1L12 10.46 6.55 6.37l-1.28-1A2 2 0 0 0 2 7.05v11.59A1.36 1.36 0 0 0 3.36 20h3.19v-7.72L12 16.37l5.45-4.09V20h3.19A1.36 1.36 0 0 0 22 18.64V7.05a2 2 0 0 0-3.27-1.64z\"\n\t\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\nDelete the 'style' attribute, and place it in your link element so that it looks like the following.\n\n```html\n\u003ca href=\"https://youtube.com\" class=\"grid-element\"\u003e\n\t\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\u003e\n\t\t\u003cpath\n\t\t\td=\"m18.73 5.41-1.28 1L12 10.46 6.55 6.37l-1.28-1A2 2 0 0 0 2 7.05v11.59A1.36 1.36 0 0 0 3.36 20h3.19v-7.72L12 16.37l5.45-4.09V20h3.19A1.36 1.36 0 0 0 22 18.64V7.05a2 2 0 0 0-3.27-1.64z\"\n\t\t\u003e\u003c/path\u003e\n\t\u003c/svg\u003e\n\t\u003ch3\u003eYouTube\u003c/h3\u003e\n\u003c/a\u003e\n```\n\nYou can repeat this process as many times as you want, in order to create as many links as you need!\n\n\u003cbr\u003e\n\n### Headings\n\nIf you want to add headings to each of the columns, you can add the following HTML nested as the first element under a 'grid-rows' container (found in the 'index.html' file).\n\n```html\n\u003cdiv class=\"grid-heading\"\u003e\n\t\u003ch2\u003e[INSERT-HEADING-NAME]\u003c/h2\u003e\n\u003c/div\u003e\n```\n\nFor example, a column could look like the following.\n\n```html\n\u003cdiv class=\"grid-rows\"\u003e\n\t\u003cdiv class=\"grid-heading\"\u003e\n\t\t\u003ch2\u003eEntertainment\u003c/h2\u003e\n\t\u003c/div\u003e\n\t\u003ca href=\"https://youtube.com\" class=\"grid-element\"\u003e...\u003c/a\u003e\n\t\u003ca href=\"https://twitch.tv\" class=\"grid-element\"\u003e...\u003c/a\u003e\n\t\u003ca href=\"https://open.spotify.com\" class=\"grid-element\"\u003e...\u003c/a\u003e\n\u003c/div\u003e\n```\n\nIf you make this change, you will also need to update the 'grid-rows' CSS class (found in the 'main.css' file) in order to structure the rows in each column correctly. All you have to do for this to work is add '6.5rem' (or, whatever height you have set your link elements to be - if you changed them) before the value already set for 'grid-template-rows'.\n\nThis means, if you have your link elements set to auto size (this is the default setting), your updated property value should look like the following.\n\n```css\n.grid-rows {\n\tgrid-template-rows: 6.5rem auto;\n}\n```\n\nOr, if you changed your link elements to be the same height (in the [layout](#layout) section), your updated property value should look like the following (just apply the same rules to the 'repeat' function as detailed in the [layout](#layout) section, when setting the link elements to be the same size).\n\n```css\n.grid-rows {\n\tgrid-template-rows: 6.5rem repeat(4, 1fr);\n}\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Contributing\n\nIf you think _Shelf_ is lacking in any way (whether that be the project itself, or the documentation), feel free to open a pull request with your changes or new features.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Forking Guidelines \u0026 License Notice\n\nI encourage everyone to fork this project and modify it to their needs, or to take pieces and incorporate those into their own projects (no credit is required).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-smith-tech%2Fshelf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan-smith-tech%2Fshelf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-smith-tech%2Fshelf/lists"}