Fix stylesheet console error

.env

@@ -1,4 +1,3 @@
 PORT=8037
 FLASK_DEBUG=true
 SECRET_KEY=local_development_fake_key
-

.prettierignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -1,20 +1,55 @@
-FROM ubuntu:bionic
+# syntax=docker/dockerfile:experimental
+
+# Build stage: Install python dependencies
+# ===
+FROM ubuntu:focal AS python-dependencies
+RUN apt-get update && apt-get install --no-install-recommends --yes python3-pip python3-setuptools
+COPY requirements.txt /tmp/requirements.txt
+RUN --mount=type=cache,target=/root/.cache/pip pip3 install --user --requirement /tmp/requirements.txt
+
+# Build stage: Install yarn dependencies
+# ===
+FROM node:12-slim AS yarn-dependencies
+WORKDIR /srv
+COPY . .
+RUN --mount=type=cache,target=/usr/local/share/.cache/yarn yarn install
+
+# Build stage: Run "yarn run build-css"
+# ===
+FROM yarn-dependencies AS build-css
+RUN yarn run build-css
+
+# Build stage: Run "yarn run build-js"
+# ===
+FROM yarn-dependencies AS build-js
+RUN yarn run build-js
+
+
+# Build the production image
+# ===
+FROM ubuntu:focal
 
-# Set up environment
 ENV LANG C.UTF-8
 WORKDIR /srv
 
-# System dependencies
-RUN apt-get update && apt-get install -y --no-install-recommends python3 python3-setuptools python3-pip
+# Install python and import python dependencies
+RUN apt-get update && apt-get install --no-install-recommends --yes python3 python3-lib2to3 python3-pkg-resources
+ENV PATH="/root/.local/bin:${PATH}"
 
-# Set git commit ID
-ARG COMMIT_ID
-ENV COMMIT_ID "${COMMIT_ID}"
-ENV TALISKER_REVISION_ID "${COMMIT_ID}"
+# Copy python dependencies
+COPY --from=python-dependencies /root/.local/lib/python3.8/site-packages /root/.local/lib/python3.8/site-packages
+COPY --from=python-dependencies /root/.local/bin /root/.local/bin
 
-# Import code, install code dependencies
+# Import code, build assets
 COPY . .
-RUN python3 -m pip install --no-cache-dir -r requirements.txt
+RUN rm -rf package.json yarn.lock .babelrc webpack.config.js requirements.txt
+COPY --from=build-css /srv/static/css static/css
+COPY --from=build-js /srv/static/js static/js
+
+# Set build ID
+ARG BUILD_ID
+ENV TALISKER_REVISION_ID "${BUILD_ID}"
+
 
 # Setup commands to run server
 ENTRYPOINT ["./entrypoint"]

package.json

@@ -36,7 +36,7 @@
     "postcss-cli": "7.1.0",
     "prettier": "2.0.2",
     "terser-webpack-plugin": "^2.3.5",
-    "vanilla-framework": "2.9.0",
+    "vanilla-framework": "2.10.0",
     "watch-cli": "0.2.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"

run

@@ -41,7 +41,7 @@ Commands
 ##
 
 # Define docker images versions
-dev_image="canonicalwebteam/dev:v1.6.4"
+dev_image="canonicalwebteam/dev:v1.6.7"
 if [ -n "${DOCKER_REGISTRY:-}" ]; then
     dev_image="${DOCKER_REGISTRY}/${dev_image}"
 fi
@@ -179,6 +179,7 @@ start_django_db () {
                 --network ${network_name}    `# Use an isolated network`  \
                 --network-alias db           `# Call this container "db" on the network so it can be found`  \
                 --detach                     `# Run in the background` \
+                --env POSTGRES_HOST_AUTH_METHOD="trust"  `# Allow without a password`  \
                 postgres                     `# Use the image for node version 7`
         fi
 
@@ -189,7 +190,7 @@ start_django_db () {
         done
 
         # Provision database
-        run_as_user "${network}" python3 manage.py migrate
+        run_as_user "" python3 manage.py migrate
     fi
 }
 

static/js/base.js

@@ -1 +1,55 @@
-// Any js should be added here
+/**
+  Toggles the expanded/collapsed classed on side navigation element.
+
+  @param {HTMLElement} sideNavigation The side navigation element.
+  @param {Boolean} show Whether to show or hide the drawer.
+*/
+function toggleDrawer(sideNavigation, show) {
+  if (sideNavigation) {
+    if (show) {
+      sideNavigation.classList.remove("is-collapsed");
+      sideNavigation.classList.add("is-expanded");
+    } else {
+      sideNavigation.classList.remove("is-expanded");
+      sideNavigation.classList.add("is-collapsed");
+    }
+  }
+}
+
+/**
+  Attaches event listeners for the side navigation toggles
+  @param {HTMLElement} sideNavigation The side navigation element.
+*/
+function setupSideNavigation(sideNavigation) {
+  var toggles = [].slice.call(
+    sideNavigation.querySelectorAll(".js-drawer-toggle")
+  );
+
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener("click", function (event) {
+      event.preventDefault();
+      var sideNav = document.getElementById(
+        toggle.getAttribute("aria-controls")
+      );
+
+      if (sideNav) {
+        toggleDrawer(sideNav, !sideNav.classList.contains("is-expanded"));
+      }
+    });
+  });
+}
+
+/**
+  Attaches event listeners for all the side navigations in the document.
+  @param {String} sideNavigationSelector The CSS selector matching side navigation elements.
+*/
+function setupSideNavigations(sideNavigationSelector) {
+  // Setup all side navigations on the page.
+  var sideNavigations = [].slice.call(
+    document.querySelectorAll(sideNavigationSelector)
+  );
+
+  sideNavigations.forEach(setupSideNavigation);
+}
+
+setupSideNavigations(".p-side-navigation, .p-side-navigation--icons");

static/sass/styles.scss

@@ -12,6 +12,12 @@
   background-color: $ubuntu-orange;
 }
 
+.p-side-navigation__drawer {
+  @media screen and (max-width: $breakpoint-medium) {
+    margin-top: 2rem;
+  }
+}
+
 .p-navigation {
   .p-navigation__row {
     padding: 0;

templates/base_layout.html

@@ -24,9 +24,6 @@
     })(window, document, 'script', 'dataLayer', 'GTM-MV7Z9M3');</script>
   <!-- End Google Tag Manager -->
 
-  <!-- link rel="stylesheet"-->
-  <link rel="stylesheet" href="/css/styles.css" />
-
   <!-- GitHub buttons -->
   <script async defer src="https://buttons.github.io/buttons.js"></script>
 

templates/docs/base_docs.html

@@ -3,9 +3,17 @@
 {% block content %}
 <div class="row">
   <div class="col-3 p-strip is-shallow has-divider">
-    <div class="p-side-navigation " id="drawer">
-      <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>
+    <div class="p-side-navigation" id="side-navigation">
+      <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="side-navigation">
+        Toggle side navigation
+      </button>
+      <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="side-navigation"></div>
       <div class="p-side-navigation__drawer">
+        <div class="p-side-navigation__drawer-header">
+          <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="side-navigation">
+            Toggle side navigation
+          </button>
+        </div>
         <ul class="p-side-navigation__list">
           <li class="p-side-navigation__item">
             <a class="p-side-navigation__link {% if request.path == '/docs' %}is-active{% endif %}" href="/docs">Home</a>
@@ -25,4 +33,6 @@
   </div>
 </div>
 <hr>
+
+<script src="{{ versioned_static('js/dist/base.js') }}"></script>
 {% endblock %}

templates/partial/_footer.html

@@ -1,7 +1,7 @@
 <footer class="p-strip">
   <div class="row">
     <div class="col-12">
-      <p>&copy; {{ current_year }} Canonical Ltd.</p>
+      <p>&copy; {{ now("%Y") }} Canonical Ltd.</p>
       <nav>
         <ul class="p-inline-list--middot">
           <li class="p-inline-list__item">

templates/partial/_navigation.html

@@ -14,7 +14,7 @@
         <a href="#main-content">Jump to main content</a>
       </span>
       <ul class="p-navigation__links" role="menu">
-        <li class="p-navigation__link" role="menuitem">
+        <li class="p-navigation__link {% if request.path in ['/docs', '/docs/faq', '/docs/protocol'] %}is-selected{% endif %}" role="menuitem">
           <a href="/docs">Docs</a>
         </li>
         <li class="p-navigation__link" role="menuitem">

webapp/app.py

@@ -1,6 +1,3 @@
-# Standard library
-import datetime
-
 # Packages
 from canonicalwebteam.flask_base.app import FlaskBase
 from flask import render_template
@@ -34,8 +31,3 @@ def faq():
 @app.route("/docs/protocol")
 def protocol():
     return render_template("docs/protocol.html")
-
-
-@app.context_processor
-def inject_today_date():
-    return {"current_year": datetime.date.today().year}