The shiny new website page 🎉

We have a new landing page for opensource.zalando.com 🎉🎉🎉.

• This initial release is based on HTML, CSS and JavaScript and is a responsive website layout using CSS Flexbox
• The design is based on https://opensource.zalando.com/dress-code/
• The projects page was earlier a React app, which is now an archived repository - https://github.com/zalando-incubator/zalando.github.io-dev.
• A brief overview about the above mentioned React app and the old zalando.github.io website can be found in this discussion.

Directory structure

• index.html is the main website page.
• projects/index.html is the projects page listing Zalando's open source projects.
• assets/ folder contains css, js files, website images, and svg icons.
  • The programming language logos in svg/languages/ folder are picked from here.
  • The other svg icons are picked as described in this article.
• The components/ folder contains js files which generate dynamic code and are reused across pages.

Scope

• The config.js file in assets/js folder contains the Catwatch API urls and Github data for the team profiles.
• The store.js file in assets/js folder contains global variables which are referenced as store.<variable>.
• For the MVP version in this release, the programming languages, top programming languages are hard coded in the above mentioned store.js file.
• The projects page serves open source repositories only from the public Zalando Github organisation.
• CSS uses BEM naming convention.
• index.js is the main file which contains JavaScript code to execute various functions.
• init() at the end of the index.html and projects/index.html is the main entry point to execute the JavaScript code.

Todos

• This release uses latest features like async/await, Set, template literals, fetch API which are supported in modern browsers. This hasn't been tested for older browser support.
• Add ESLint configuration
• Setup test environment
• The logo for Shell programming language is missing from the assets/svg/languages folder. This logo couldn't be found from this repo where all the other programming language logos were found.
• Get Jobs from Greenhouse API.
• Make store.js immutable.
• Refactor index.js.
• Update <object> tag for SVG to <img> tag.