stegschreck / uberpage

Simple overview page for various links as tiles

UberPage

A simple webpage for displaying a collection of links. Each link can have an optional background image, link text, or icon. The layout of the links will be generated automatically, depending on the number of links to be displayed.

For a live demo, you can visit uberpage.schreck.berlin, for which this project was created initially. I also created an overview of GitHub projects as my GitHub Page.

How to Use

• Fill data.js with your items. See about possible configuration in the next paragraph.
• Put the necessary images in appropriate quality at public/img. Reference them in the data.js by filename only, not including the path. I suggest using SVG files which offer better scalability.
• Deploy on somewhere. I've included some guides below.
• Done.

Possible Configuration Values for an Item

data.js:

    export default {
      items: [
        {
          link: 'https://github.com/StegSchreck', // optional
          title: 'https://github.com/StegSchreck', // optional
          description: 'My open source projects on GitHub', // optional
          text_color: '#ffffff', // defaults to '#4A86E8' - affects both title and description (if set)
          background_logo: 'GitHub_white.svg', // optional
          background_logo_size: '70%', // defaults to '50%'
          background_picture: 'cover.jpg', // optional
          background_picture_size: 'cover', // defaults to 'cover'
          background_color: '#000000', // defaults to '#282c34'
        },
        // ... more items ...
      ],
      // ...
    }

The effect of the background configuration values is as follows (from top to bottom):

• title (or description on hover)
• background_logo
• background_picture
• background_color

This means if both background_logo and background_picture are set, that the logo will cover parts of the picture. Additionally, if a title is set, it with have a darkening effect on whatever is underneath to make it more readable.

Deployment

• AWS
• GitHub user page
• GitLab user page
• Uberspace

Acknowledgements

Third Party Stuff

• React
• Nova Square font
• Bungee Hairline font

Why this Name?

Obviously there is no connection to any mobility provider. The word "uber" is taken from the German word "über", meaning "over", "above" or "on top". As this project is meant to act as an overview page for multiple other pages via linking, this name can be taken literally.

uberpage's Issues

Create GitHub Action workflow to potentially replace Travis

Refine HTTP Headers

https://securityheaders.com/?q=https%3A%2F%2Fuberpage.schreck.berlin%2F&followRedirects=on

Support Tiles without link

• tile as layouting helpers
• tile as plain text item
• ...

Enable PWA

Display description text on item hover

• description replaces title

Add GitLab Pages deployment documentation

Introduce Semantic Release

https://semantic-release.gitbook.io/semantic-release/
AC:

• create git tag
• update package.json
• create release on GitHub

Listen on resize event

If resize occurs (e.g. mobile portrait to landscape), recalculate the number of columns

Run Lighthouse Audit

• run lighthouse audit in Google Chrome dev console
• prioritize findings

Make max number of columns dependent on viewport width

mobile device: 1 column max
tablet: 2 columns max
desktop: 3 columns max