tomershvueli / homepage

A simple, standalone, self-hosted PHP page that is your window to your server and the web.

Homepage

This project is a simple, standalone, self-hosted PHP page that is meant to be your window to your server and the web.

It is your minimalist corner of the internet. The background will update with a gorgeous (and royalty free) image from Unsplash, or a custom source every 20 seconds. With it, a simple menu is available to you with your most frequented links.

All the assets needed are part of the repo so it can run offline (though it won't fetch pretty background images for you).

This project uses:

• Apache
• PHP and PHP cURL
• jQuery
• Bootstrap CSS
• Mousetrap.js
• Font Awesome
• Unsplash

Screenshots

Homepage w/o Menu:

Homepage with Menu Toggled:

To Use

Copy the config.sample.json file and rename to config.json. Be sure to update the fields as you see appropriate. You have the option to use the Unsplash API to fetch background images, or use a custom URL and JSON selector. If you choose to use Unsplash, will need to create a developer profile at Unsplash to use the background image functionality properly.

Configure Homepage

• unlock_pattern => Choose unlock pattern from Mousetrap
• clock_format => Choose pattern format from PHP's date function
• hover_color => The CSS color for menu items when hovered over. Defaults to #999.
• time_to_refresh_bg => Time, in milliseconds, until it will fetch the next background image. Defaults to 20000.
• show_menu_on_page_load => Boolean as to whether the menu should be shown when you first load the page. Defaults to false.
• idle_timer => Set a number of milliseconds here if you'd like to automatically hide the menu after a certain time of inactivity. Leave this attribute out entirely if you don't want an idle timer.
• items => Array of objects for links to be displayed. The menu will be in a grid of 3 icons per row on desktop. Object shape:
  • link => Insert any link you'd like, or {{cur}} for the current URL of the page, i.e. {{cur}}:32400/web/.
  • icon => Icon to be displayed, choose icons from Font Awesome.
  • img => Image to be displayed in place of an icon. Place image in hp_assets/img directory. Image will be displayed in size 80px x 80px.
  • alt => Value for title of anchor tag.
  • new_tab => Optional boolean value for whether link should open in new tab or current tab.

NOTE: PHP cURL is required for fetching external images.

Unsplash Background Images

• unsplash_client_id => Get Unsplash client ID from Unsplash

NOTE: There have been reports that applying for a Normal API upgrading from a demo API will result in Unsplash shutting down your API key entirely. I suggest sticking to the demo API key and setting the time_to_refresh_bg config variable to 90000. This will ensure that you don't surpass the 50 hourly requests that Unsplash provides for demo API keys. Or feel free to use a custom background image (see below).

Custom Background Images

• custom_url => Input a custom URL that will return proper JSON. Supports {{cur}} substitution for current URL.
• custom_url_headers => Add any headers that may be needed to complete a cURL request to the aforementioned URL properly
• custom_url_selector => Input a proper PHP array selector to be used on the JSON received above. For example, if I were to fetch from Github's user API with a 'custom_url' of 'https://api.github.com/users/octocat', the 'custom_url_selector' would simply be ['avatar_url']. [{random}] can be replaced for a random index in an array.

Supporting

If you enjoy homepage and want to support the project, you can buy me a Ko-Fi!

Or, feel free to contribute to homepage by creating a PR to expand on features that you think are missing!

homepage's Issues

Picture sources

What are known picture sources?
I would like to use my google fotos, is that possible?
I dont see anything about json output from there...

responsive website

Hey,

I have had to modify the code to run it on my mobile:

I have changed:

`@media (min-width: 992px) {
#links-wrap {margin-top: 15%; height: auto; font-size: 80px;}

#clock-wrap {font-size: 30px;}
}`

to:

`@media (max-width: 400px) {
#links-wrap {margin-top: 25%; height: auto; font-size: 45px;}

#clock-wrap {font-size: 20px;}
}
`

Change color of highlighted icons

First of all, thanks a lot by this simple yet really nice project of yours.

What brings me here is more of a feature request / personal preference than an issue... I'm a little annoyed by the green when the mouse is hovering over an icon. I'm more inclined to use a light blue or something along those lines.

Could you please explain me how the color is defined and point me to the code on the repository so I can thinker with those settings a bit?

Homepage showing just an empty page

Hi,

I cloned this repo and renamed config.sample.json to config.json.

All I get is an empty page:

Resources are accessible (except one which you can see), Apache&PHP is installed.

Any suggestion?

Update readme

Please add a reference in the readme file, that php5-curl is required.

If php5-curl is not installed, the ajax_get_image.php file throws erros and the wallpaper function doesn't work

Homepage background image not cycling or even loading

To continue the conversation on reddit.
https://dashboard.jamiesinn.ca/
https://dashboard.jamiesinn.ca/hp_assets/lib/ajax_get_image.php

Can't get Random Custom_URL_Selector To Work

Honestly not sure what is wrong here. I've tried iterations of "[{random}]", "['{random}']", [{random}], ['{random}']. Removing the quotes causes some transparent breakage (mostly background sayagata-400px.png has an odd appearance probably caused by the missing quotes throwing errors).

Assuming the use of "[{random}]" from README.md, what I see in my browser console for headers on ajax_get_image.php looks like this:

{"success":1,"url":null}

So the ajax_get_image.php file call is not able to get the url of images for me when using {random}. Changing from {random} to any of the selectors in the file (ex 'bga') will cause that one image to load (interestingly the message remains success:1 with url no longer null but an actual address), but I would like to use the random feature properly and cycle through several images that are listed in my custom_url json file.

I looked at the function from ajax_get_image.php on line 24 but I'll be honest, code reading/writing is not my forte. I have a general idea of what should be happening, but no idea how to debug further.

On a couple of tangents, I also noticed that:

1. Custom_URL doesn't seem to be able to accept {{cur}} variable. Nor does it seem to accept a relational url. If I want Custom_URL to work, I have to enter the entire URL, even if my JSON file is located on the same server / path as the rest of the web files.
2. The credits feature also doesn't seem to work when using custom_urls. I get Picture by / Unsplash in the credit section, and looking at the code I think the user's name is supposed to appear before that / (line 70, column 38-72 of index.php file). The best option if possible is to get it so that the credit section checks for protected being empty, and if not it uses the json file from our protected section to dynamically create values. I'm not that familiar with json so not sure how the arrays have to be structured. If possible, could we define a url to the image, the artist's name, and the artist's portfolio link in our custom json file and have it generates the image credits matched to the url? Also not sure if the picture refresh actually reloads the entire page or not (I think that or another ajax would be required to update the credit section, no?) so if not possible to do that just have the Picture by / Unsplash message hidden when using the protected section.

Unsplash no longer viable option

Unsplash no longer lets you use their API for something like this. You may get away with it for a while but there is a risk of them shutting it down. If they don’t, you are limited to 50 image impressions per hour with no approvals from them. If you apply for their normal free API tier which gives you thousands of image impressions (I don’t recall the exact number), although it is free, most likely the reviewer will not approve your “app” since they only like people using their API if you’re going to offer something different from what their site offers. They consider this, a rotating image, not different enough.

Question about a feature

Hello there,

nice work, the installation was easy and it work fine except one detail the menu isn't active by default.

Is there a way/option to active the menu directly ?

How can I change the amount of time it takes to change background photo?

Thanks a lot for the work, by the way! Perfect for our needs :)

I was just wondering where can I change how long it takes before the background image changes. I've been looking around but no luck so far...

FontAwesome icon - a lot of icons are not working

When trying to set icons for items, most don't work for me. I am trying to use free icons.

Some examples of NON working icons:
fa-solid fa-bowl-food
fa-solid fa-utensils
fa-brands fa-raspberry-pi

Some examples of working icons:
fa-regular fa-play
fa-regular fa-download
fa-regular fa-comments

Toggling the menu on mobile

I might have missed something obvious but how do we toggle the menu on a mobile device where the keyboard is not visible?

What icons can I use?

It seems, not all icons from font-awesome can be used (f.e. 'newspaper')

Suggestions - Change read permissions for config.json.

Reason - you can currently view the source of any config file via the browser. This is a security as the client app id is listed there.

https://dashboard.jamiesinn.ca/config.json

Information from config.json viewable in page source.

Hi,

Love the project. Nice and simple. I'm setting it up for use right now!

One thing. I noticed the .htaccess file blocking direct access to the config.json file, but if you view the source of the page, all the JSON data is sitting there. Exposing the UnSplash API Key like that does not seem great.

Is there a way you do not need to load this into the HTML (javascript) of the page?

Unsplash instructions not clear

Hi! I tried to install homepage, but I can't get it to work with unsplash. Can we document how to do that? Or at least add a link?

Unsplash - unsplash_client_id

Hello, I have been trying to get Unsplash to work, but I get no image background.

What I did:

• registered Unsplash dev acc
• made a demo app
• used demo app "Access key" as "unsplash_client_id" in config.json

Did I miss something or is this function not functional anymore?

Thank you in advance

Use pattern.css for backgrounds

Leverage pattern.css for random background patterns instead of the current image background when no Unsplash ID set.

Feature Request: Allow Overlay Timer Switch

Excellent dashboard but is there a way for the webpage to go back to a blank cover page after xx seconds?

Would be nice if we could have a setting in the config to allow a timeout of xx seconds. This will help keeping the page visibly hidden.

Hide Scrollbar for links-wrap

Hide the scrollbar for links-wrap. Overflow: hidden should be enough.

Uncaught TypeError: array_merge()

Hi, thanks a lot for your work, i'm new to PHP, i've been using your homepage for a while, but suddenly it started to show this error:
Fatal error: Uncaught TypeError: array_merge(): Argument #2 must be of type array, null given in X:\web\src\index.php:19 Stack trace: #0 X:\web\src\index.php(19): array_merge() #1 {main} thrown in X:\web\src\index.php on line 19

I was trying to google it but no success. Could you help me to figure it out?

Make it possible to put items into "directories"

I have a lot of items, that come into my mind, while setting up my config.json. So I would like to have directories. These can be configured by nesting items.

Hidden menu becomes visible when window is smaller than 1199 x 658

Hello,

Love the software. Looks really good.

Just noticing the hidden menu becomes visible when un-maximising the browser window and scaling it down. Around 1199 x 658 the menu appears without any interaction with the unlock pattern.

Also, for us Nginx users, the .htaccess file is not relevant. Adding a security section to the Readme.md mentioning to hide your config.json would be a useful addition for new comers. The following will help block access to it.

location = /config.json {
		return 403;
	}

Cheers,

Make wallpapers cover/stretch to fit the browser window

It'll now tile/repeat: