Retro CRT Startpage

by George Merlocco (scar45) @ https://george.merloc.co

This repository contains an HTML5-based layout for creating (or using) a personalized startpage with a retro CRT feel.

Interactive example @ http://scar45.github.io/retro-crt-startpage/index.html

Features

Links are read in from a JSON file that's easy to update (see links.dist.json for an example)
Tag filters
Search form via DuckDuckGo (can be changed to other search providers if you wish)
3 customizable design features toggled via the metal plate in the top-right area:
- Power On/Off with CRT and sound effects
- Animated Scanlines/Flicker effect
- Colour choice between Amber and Green
Each of the settings above are saved as cookies, so the site will remember the state of what you've enabled/disabled
Variations of the ASCII header in ascii-headers.html, or generate your own, and paste into the <pre class="title"> tag in index.html
NOTE: The animated scanlines/flicker can be quite CPU intensive. Consider disabling if your system is stressed.

Editing `links.json`

Before working with this file, you'll need to rename the example links.dist.json to links.json. You can simply start editing the file with a text editor, and modify each link to your liking. Here's an example:

    {
      "name": "Syncthing",
      "url": "https://syncthing.net/",
      "icon": "icon-syncthing.png",
      "invert": false,
      "tags": [
        "files",
        "encrypted"
      ]
    }

Most are straight forward, however note that the icon should be a file in images/, as this path gets prepended automatically. invert, if true, will invert the colours of the icon image in the event that it is hard to see otherwise.

NOTE: As with any JSON, the last node should not contain any commas (,) -- This includes the main link, and tags arrays. Verify this first if you aren't seeing any links.

Running this startpage

Traditional web server

Apache, nginx, IIS, etc.
Download the latest release
Extract the .zip and rename links.dist.json to links.json
Edit links.json to contain the links you desire
Upload entire local directory to your hosted directory

Included Node.js http-server

Requires Node.js to be installed
Clone the repository, or download the latest archive, and rename links.dist.json to links.json
Edit links.json to contain the links you desire
Run:
- npm install
- npm start
Then browse to http://127.0.0.1:8080
If you wish, you can modify the scripts: {start} node in package.json to pass extra parameters to http-server which allows you to run on a different port, use SSL, etc.
Press CTRL+C to stop the server

Developing

If you just wish to use this startpage as your own, then you do not need to read this section. However, if you wish to modify the source (pull requests are encouraged!) then below is a brief outline of how this project has been put together.

Requirements

Node.js

Live Coding

Install dependencies:

npm install

...then rename links.dist.json to links.json, and customize it to your heart's content.

Start a first build, then spawn webserver for live coding (browser-sync):

gulp

This will dump compiled/processed files in a ./build directory, which will then be served by browser-sync, with files being watched for changes. When changes occur, browser-sync will automagically refresh the browser.

Browsersync is used for live coding (browser-sync) which vastly accelerates development time.

Releasing

Run gulp with a parameter of release to clean the ./build directory, recompile all sources fresh, exclude unneeded files, and write a .zip file to dist/:

gulp release

...and that's about it! I hope you enjoy this little nostalgic throwback to the terminals of old.

Thanks!

Colophon

.end

honsa / retro-crt-startpage Goto Github PK