Tiles

A keyboard centric, feature rich, responsive design homepage!

Live Demo

Benefits over Homepage

• Entire js rewrite
• Clearer data structure with one static index.html file
• Support for preloading icons
• Major bug fixes and stability improvements
• Clearer code and documentation -> much easier customization
• Lib.js allows for easy addition and deletion of tiles and themes
• Live search and external searches
• Cool new themes
• Better mobile support
• Live search and definitions

Setup

• Add any custom tiles to lib.js
• Add your api key to the var "api" for open weather and news updates

Features

• Keyboard navigation and shortcuts
• Full mobile support
• Simple and clear data structure for customization
• Dynamic approach towards page generation
• Multiple themes and easy support for adding new ones
• Live "tile" search as well as external api search
• External api support for tiles (in progress)

Keyboard Shortcuts

Function	Key	Description
up	k / up	up one tile
down	j / down	down one tile
left	h / left	left one tile
right	l / right	right one tile
hop	1...0, -, +	hop to any tile #
search	[space]	starts live search
api search	/	searches external sources
themes	\	opens theme menu
enter	[enter]	go to tile / exit search
esc	[esc]	close search, return to homepage

Mobile Support

• Fixed css breakpoints and general layout improvements
• Full featured w/o different file base

Data structure

Tile syntax

There are 3 types of tile that all use similar syntax:

1. Tiles represent static webpages. ["url","icn","title","subtitle"]
2. Folders represent a key for a array of tiles. ["#key-name","icn","title","subtitle"]
3. Themes repersent tiles for a given theme name ["$theme-name","icn","title",["background","main color","alt color","main text","subtext"]]
4. Themes can also have background images ["$theme-name","icn","title",["image_url","main color","alt color","main text","subtext"]]
5. References represent simple tiles for duplicate entries ["~Title"] for a given tile in pages["~"]

Example
  tile = ["https://github.com","gh","Github","Code"]
  folder = ["#","mt","Code","~/hack.sh"]
  theme = ["$","ds","Discord","Purple, Black, Grey",['#23272A','#2C2F33','#7289DA','#7289DA','#99AAB5']]
  wallpaper = ["$","pnr","Starry Night","Blue Green Yellow",["src/wall/starry.jpg","#007849","#FECE00","#FFFFFF","#FFFFFF"]]
  reference = ["~Github"]

Both themes and tiles are stored in lib.js -> look there for more info and examples

Icons8

Icons taken from Icons 8

Themes

Theme	Bg	Main	Comp	Sub	Txt	Credit
Skeletor						Syntax
Switch						Switch
Gogh						Gogh
Todoist						Todoist Dark
Discord						Discord
Terminal						None
Lava						None
Purple						None
(table generated with help from placehold.it)

See code for detailed documentation for each function

Credits

1. Icons from icons8
2. Theme colors from sources listed in table
3. Original code from my other repo which started as Decaux which has been abandoned and deleted
4. Snippets referenced from exterior sources

• Iphone scaling fixes
• Overscrolling bug
• Array sorting logic