Giter Club home page Giter Club logo

startpage's Introduction

Startpage

Simple HTML Startpage that displays the time, date, a searchbar and customizable (plus hideable) cards.

Demo GIF

The startpage is generated using the generate.py Python3 script, so that one does not need to fiddle with HTML code when needing new cards or change links.

HTML code is generated using Jinja2 templates. That way cards can be dynamically created using a YAML config file (see config/config-template.yml).

CSS is generated using Sass - so that the design of the site can be easily altered/extended when needed.

Javascript Code does not use any libraries, as I see no need in using them with such simple implemented functionality.

Fonts - just some basic embedded Google Fonts (Roboto and Open Sans)

Demo

A demo of the startpage is hosted via github-pages under: https://b-01.github.io/startpage/

Generating a Startpage

To generate a new Startpage, the only requirement is Python3. Everything else will be pulled in automatically using the steps below.

the following code only works on linux based systems

Setting up the Environment

  • Create a virtual environment
    python -m venv venv

  • Activate virtual environment
    source venv/bin/activate

  • Update PIP
    pip install -U pip

  • Install required packages
    pip install -r requirements.txt

  • Optionally install development requirements (linter, code formatter ...)
    pip install -r requirements-dev.txt

Visual Studio Code Tasks

If you use Visual Studio Code you can open the folder and run one of the provided tasks which essentially run the next steps automatically:

  • Prepare Assets
  • Build Site
  • Build All

Else you can also run those next steps manually.

Prepare source files

Change Javascript, fonts, SCSS files, add assets, add/change templates ...

Then either run prepare.sh or run the appropiate commands from this file directly.

Generate HTML

To generate the HTML file using the python script, first activate the environment: source venv/bin/activate

generate.py needs some arguments to work. use the -h or --help switch to display all available arguments.

generate.py --help output

$> python generate.py --help

usage: generate.py [-h] [-v] [-o OUTPUT_PATH] [-1] [-f] [-s SOURCE_PATH] config template

Generate the Startpage HTML and CSS.

positional arguments:
  config                Path to the config file
  template              Path to the template file

optional arguments:
  -h, --help            show this help message and exit
  -v, --verbose         More verbose output
  -o OUTPUT_PATH, --output-path OUTPUT_PATH
                        Path to output the finished Startpage files to. Defaults to './dist'.
  -1, --one-file        Include all files into one big HTML file. Fonts are not included right now.
  -f, --force-overwrite
                        When present, overwrites any existing file under 'output_path'
  -s SOURCE_PATH, --source-path SOURCE_PATH
                        Path where all the resource files are stored (css, js, img etc.). Defaults to './dist'.

Acknowledgement

Found the startpages of many talented users on Reddits /r/startpages and wanted to create my own. As my HTML/CSS foo is not good enough, I borrowed some stuff. Many thanks to:

startpage's People

Contributors

b-01 avatar

Stargazers

 avatar Francesco Minnocci avatar Mikkel Rasmussen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.