A keyboard-centric, feature-rich, responsive design homepage.
- Keyboard navigation
- Mobile support
- Form interface for adding tiles
- Support for custom color schemes
- Tile search and search engine integration
- Custom form interfaces for user input (replaces commands)
- Login improvements (autofill support)
- Better server/client communication
- Faster searching
- General Optimizations
- Refactored of JS code
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 |
- Simple popup forms allow for user input
- Forms have smart input fields for logins and icons
- Since this version of tiles is customization focused I omitted the default themes.
- To add them to your page I included the colors for the original themes and the file themes.txt contains commands you can copy and paste into the search bar for each theme.
Theme | Icons8 | Background | Top | Bottom | Text | Subtext | Credit |
---|---|---|---|---|---|---|---|
Skeletor | thriller | Syntax |
|||||
Switch | nintendo-switch | Switch |
|||||
Gogh | field | Gogh |
|||||
Todoist | leave | Todoist Dark |
|||||
Discord | discord-logo | Discord |
|||||
Terminal | console | None |
|||||
Lava | volcano | None |
|||||
Purple | purple-man | None |
(table generated from placehold.it)
- Tiles now supports custom sized grids which can be set in the settings form
- The server is set to be most responsive from 8-24 PST.
- My hosting goes through a sleep schedule so initial response times will be delayed for requests outside of that time range.
- Maintenance will occur during these evening periods.
To add an icon for a tile/page/theme:
- Go to icons8.com
- Search for the icon you want (set the style to color)
- Click on the icon you want and find the icons real name
-
Use this icon name in your command or in the input form
!tile https://google.com Google Search ~google-logo
- Backend will be open-sourced in the next few weeks.
- Spaces are replaced by
-
in commands. (use normal spaces in forms)- ex.
!tile url Bon-Apétit Recipes ~cooking
- ex.
- There are still some bugs involving pages longer than the grid
- If you run into some bug involving blank tiles reload the page and it should resolve.
- I would recommend leaving the
Themes
andSearch
pages on your homepage to hold all theme and search tiles.
(If you don't themes and searches will still function but the page to edit them will be unreachable)
- Feel free to reach out if you have any questions/bugs.
- Icons from Icons 8
- Theme hex colors from multiple brands and themes
- Original code from my other
repo
which started asDecaux
which has been abandoned - Kishlaya's fork for dynamic html generation