Custom homepage for use locally in browser

Last update: Dec 25, 2022

Overview

Homepage

Customization

Customize Bookmarks

Bookmarks are now held in the bookmarks.js file for easy updating. bookmarks is an array of objects with a title and links property. The title defines what the header of the "bookmark section" box will be. link is an array of link objects each with a name and a url to link to.

The way the site is currently styled bookmarks should always have a length of 4 if you want to have more sections you need to change the width property of the css class bookmark-set

Customize Search Engine

You can change the search engine used by the search overlay by updating the url value stored in the searchUrl var in index.html to the correct string for your engine.

Examples:

DuckDuckGo: https://duckduckgo.com/?q=
Bing: https://www.bing.com/search?q=

Customize Styling

Styles are handled through CSS variables. To update the colors you just need to change the variable definitions defined in :root.

Variable	default	description
`--bg`	`#5f4b8b`	Defines the body background color
`--fg`	`#ffffff`	Defines the primary foreground (text) color for clock, weather, and titles
`--secondaryFg`	`#b3b3b3`	Defines the foreground (text) color for links
`--containerBg`	`#272727`	Defines the background color of the boxes
`--searchBg`	`--containerBg`	Defines the background color of the search overlay
`--scrollbarColor`	`#3f3f3f`	Defines the color of the custom scrollbars
`--fontFamily`	`"Roboto Mono", monospace`	Defines the font used. To change to a custom font you will also have to import that font from whatever source is available

Comments

How to change the used objects given by the innerHTML code?

Hey buddy,

thanks for this beautiful homepage. I am trying to change the openweather API to the darksky one.

Somehow I am not able to change the strings which are given to the innerHTML stuff from the JSON output.

The output of the JSON is:

{ "latitude": 51.11919, "longitude": 6.951266, "timezone": "Europe/Berlin", "currently": { "time": 1549020317, "summary": "Mostly Cloudy", "icon": "partly-cloudy-day", "precipIntensity": 0, "precipProbability": 0, "temperature": 3.62, "apparentTemperature": 0.06, "dewPoint": 1.04, "humidity": 0.83, "pressure": 990.58, "windSpeed": 4.18, "windGust": 6.4, "windBearing": 146, "cloudCover": 0.78, "uvIndex": 1, "visibility": 11.1, "ozone": 354.99 }, "offset": 1 }

what I do now is:

document.getElementById("temp").innerHTML = json.currently.temperature;//.toFixed(0) + " C";

But somehow it is blank on the homepage. Can you give me please a hint where I have to look?

opened by dirsigler 3
Add a software license

Can you please add a software license to this project?

It might be a bit over the top for such a tiny repo, but I want to fork and use this in one of my projects and don't want to run afoul of licensing.

opened by nduja 2
How To change the Weather

was using your project for my apache server i have made it to work but i cant figure out how to change the weather to my location.. do you know what to do?.. and it would be good if you could include that in documentation

opened by ghost 2
Start searching as you type (feature request)

Now you need to press the space bar to trigger the search, as you rapidly open a tab pressing the space bar breaks you rapidity.

If you like it I can submit a PR about this. Nice project by the way!

opened by nabladev 2
implemented dynamic weather based on current location (IP)

added dynamic weather based on current location (IP) added sunrise and sunset time of current location added hint for user to press spacebar for searching replaced font by ubuntu

opened by kaykouo 1
Added pastel color randomization

Pretty much what the title says, randomizes background color on each tab open. You can also comment it out, if you'd like, think it would just be a nice thing to have there.

opened by Rushilwiz 1

Search function starts the search term with a space and the cursor is not centered

Since the search bar is made visible with the keydown event, it registers the space character. This adds a whitespace before the actual search term and also causes the cursor to be not perfectly centered but off by 1.

Easy fix: Change "keydown" to "keyup" in this code segment

document.addEventListener("keydown", event => {
    if (event.keyCode == 32) {          // Spacebar code to open search
        document.getElementById('search').style.display = 'flex';
        document.getElementById('search-field').focus();
    } else if (event.keyCode == 27) {   // Esc to close search
        document.getElementById('search-field').value = '';
        document.getElementById('search-field').blur();
        document.getElementById('search').style.display = 'none';
    }
});

opened by mehmetmalli 1

Search broken due to const name

https://github.com/Jaredk3nt/homepage/blob/411c0db410234b8503aa308db55f1023cdc51fac/index.html#L35 https://github.com/Jaredk3nt/homepage/blob/411c0db410234b8503aa308db55f1023cdc51fac/index.html#L40

Uncaught ReferenceError: searchurl is not defined search homepage-master/index.html:40 onkeypress homepage-master/index.html:1

Should be an easy fix to "searchUrl".

opened by levesduzw 0

Owner

Jared Jones

Professional JavaScript Wrangler

GitHub

Homepage For browser, google search suggestions

Browser Homepage ?? & Search ?? Suggestions Lightweight ⚡ and Very Fast ⚡ Set this link as your browser's homepage https://codeAbinash.github.io/homep

13 Dec 20, 2022

A beautiful vue.js homepage template, very useful

Vue Nice HomePage DEMO is here About particles-bg-vue library This project uses the react particle background component library https://github.com/lin

38 Dec 24, 2022

A shop homepage Bootstrap HTML template created by Start Bootstrap

Start Bootstrap - Shop Homepage Shop Homepage is a basic HTML online store homepage template for Bootstrap created by Start Bootstrap. Preview View Li

390 Jan 1, 2023

A Bootstrap HTML business homepage template created by Start Bootstrap

Start Bootstrap - Business Frontpage Business Frontpage is a basic business website template for Bootstrap created by Start Bootstrap. Preview View Li

181 Nov 28, 2022

A Bootstrap HTML homepage template with feature boxes - created by Start Bootstrap

Start Bootstrap - Heroic Features Heroic Features is a multipurpose HTML template for Bootstrap created by Start Bootstrap. Preview View Live Preview

160 Nov 27, 2022

:sparkles: the homepage of @yourfirstpr

Configuring and running locally If you're interested in running Your First PR locally, please note that this project uses Jekyll. Jekyll is a blog-awa

536 Dec 8, 2022

Homepage for docstring.ai

Inferlang for Developers Auto-detect the programming language of any code API Endpoint Use the Inferlang API to programmatically build language detect

4 Feb 11, 2022

Rimuru will take care of all your anilist custom css needs.

Rimuru will take care of all your anilist custom css needs. Whats the point in using this? Why not use automail? Rimuru is lightweight and fast, Rimur

8 Dec 27, 2022

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

5.3k Jan 1, 2023

Apply CSS based on your browser's text rendering engine

Type Rendering Mix Type Rendering Mix website Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user ag

496 Dec 6, 2022

A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

22.7k Jan 3, 2023

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

react-with-styles Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or Reac

1.7k Dec 8, 2022

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

38k Dec 31, 2022

📱 Free to use static generated website template for your mobile app

Mobile App Landing Page Template ?? Free to use static generated landing page template for your mobile app ?? Features Mobile App Landing Page Templat

467 Dec 30, 2022

An easy-to-use linux app that lets you create Desktop Shortcuts hassle-free

DeskCut An easy to use app that lets you create Desktop Shortcuts (.desktop files) on Linux without requiring to mess with .desktop files! How to use

96 Dec 30, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

Octoprint-Detector2 is a detection plugin that runs in locally your browser and emails you if it detects some spaghetti, stringing or blobs on your print

Octoprint-Detector2 is a detection plugin that runs in locally your browser and emails you if it detects some spaghetti, stringing or blobs on your print. All you need is an email account and a PC.

24 Jan 2, 2023

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

2 Jun 21, 2022