Use V2 header via mini Vue.js app

[marvin-roesch]

This introduces a (temporary) alternative to the current website header, based around a Vue.js app that's injected into the regular Django context. The aim is to ease the transition to a prospective V2 frontend as well as make iterations on the header faster.

Features

The significant differences compared to the current version are as follows. Anything not listed here has remained, the current header functionality was ported in its entirety:

• Configurable navigation structure
• Dropdown menu capabilities for every navigation element
  • To improve UX, clicking outside a dropdown or on another one will close the currently active one
• Slightly better responsiveness by way of more flexible CSS
• Revamped mobile navigation drawer which closes on clicks outside

For a short overview of all the changes as well as the overall look and feel, see this video: https://streamable.com/1w0wm

Implementation

There are a few quirks to the implementation which are mostly due to the interplay between Vue.js and Django.

For minimal impact on the layout during page load, a "static" version of the header content is delivered with the standard layout template. This is then "hydrated" on the client-side and seamlessly replaced with a wholly interactive version.

The Vue.js application is built using the standard vue-cli tool, which uses webpack as an internal build system. Additionally, a metadata file pointing to the build results is automatically created. In order to ease development, the development server is configured such that it can be used straight from Django with hot reloading capabilities.

On the Django front, this uses django-webpack-loader in order to dynamically add the necessary resources as indicated by the previously generated metadata file. Because the Vue.js hydration algorithm is a little peculiar about what constitutes a matching element in the server-side markup, a custom space removal tag is also introduced. We could just have all the "dry" HTML in a single line, so this is mainly for developer comfort.

In order to use the hot reloadable header implementation during development, yarn serve is all that's required to run in the frontend directory.

Deployment

Django is configured such that it picks up any production-ready outputs from the frontend/dist directory with the collectstatic command. The metadata also points at the colleced-statics URL. They are then automatically injected into the HTML just like during development.

Building the Vue.js app for production only requires running the yarn serve command.

I have a local Docker setup that I could share to ease testing further.

[marvin-roesch]

Note that the links in the navbar are currently not finalized and subject to change.