Apply paper background and add functionality for yaml files

_data/icons.yaml

@@ -0,0 +1,50 @@
+- name: highlight-off
+- name: highlight-on
+- name: home
+- name: import
+- name: in-progress
+- name: information
+- name: inspector-debug
+- name: warning-grey
+- name: spinner
+- name: controllers
+- name: change-version
+- name: loading-steps
+- name: lock-locked-active
+- name: lock-locked
+- name: lock-unlock
+- name: machines
+- name: maximise-bar
+- name: menu
+- name: minimise-bar
+- name: minus
+- name: models
+- name: mount-2
+- name: mount
+- name: open-terminal
+- name: pin
+- name: plans
+- name: plus
+- name: pods
+- name: power-error
+- name: power-off
+- name: power-on
+- name: profile
+- name: help
+- name: restart
+- name: revisions
+- name: search
+- name: security
+- name: settings
+- name: share
+- name: show
+- name: sort-both
+- name: sort-down
+- name: sort-up
+- name: starred
+- name: status-failed-small
+- name: error
+- name: status-in-progress-small
+- name: status-in-progress
+- name: status-queued-small
+- name: status-queued

_data/resources.yaml

@@ -0,0 +1,47 @@
+- svg_link_light: https://assets.ubuntu.com/v1/563c0d9b-Canonical.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/3cf74f71-Canonical%20Dark.svg
+  name: Canonical Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/a7e3c509-Canonical%20Ubuntu.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/594d0a0c-Canonical%20Ubuntu%20Dark.svg
+  name: Canonical Ubuntu Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/10140ab8-Canonical%20Snapcraft.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/6b7b9995-Canonical%20Snapcraft%20Dark.svg
+  name: Canonical Snapcraft Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/50cd3f20-Canonical%20Anbox.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/c65cea90-Canonical%20Anbox%20Dark.svg
+  name: Canonical Anbox Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/e45b7f3f-Canonical%20MAAS.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/2eee4c1c-Canonical%20MAAS%20Dark.svg
+  name: Canonical MAAS Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/7a3e288d-Canonical%20Landscape.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/1f81cf02-Canonical%20Landscape%20Dark.svg
+  name: Canonical Landscape Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/16a67f91-Canonical%20Juju.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/3998e1b9-Canonical%20Juju%20Dark.svg
+  name: Canonical Juju Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/f07eaf0c-Canonical%20OpenStack.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/8232828d-Canonical%20OpenStack%20Dark.svg
+  name: Canonical Openstack Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/e5279b88-Canonical%20Kubernetes.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/4bbaebaa-Canonical%20Kubernetes%20Dark.svg
+  name: Canonical Kubernetes Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/f53d0b97-Canonical%20Multipass.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/718b440a-Canonical%20Multipass%20Dark.svg
+  name: Canonical Multipass Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/096ad2c0-Canonical%20LXD.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/d124abfa-Canonical%20LXD%20Dark.svg
+  name: Canonical LXD Logo
+
+- svg_link_light: https://assets.ubuntu.com/v1/e195b28a-Canonical%20MicroCloud%20logo.svg
+  svg_link_dark: https://assets.ubuntu.com/v1/419df08b-Canonical%20MicroCloud%20dark%20logo@4x.png
+  name: Canonical Microcloud Logo

static/sass/_pattern-resources.scss

@@ -0,0 +1,44 @@
+@mixin design-p-resources {
+  .resources__content-thumb {
+    padding: 0.5rem;
+
+    &.typeface {
+      background-color: $color-light;
+      height: min-content;
+      padding: 1.5rem 0.625rem 0.625rem;
+    }
+
+    &.logo_thumb {
+      margin-bottom: 0.5rem;
+    }
+
+    &.icons_thumb {
+      background-color: $color-light;
+      display: grid;
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+
+      .icon__item {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+
+  .resources__dark_mode {
+    background-color: $color-dark !important;
+    color: $color-x-light;
+  }
+
+  .resources_logo {
+    /* remove rounded corners from images to avoid distorting logos */
+    border-radius: 0;
+    height: 3rem;
+  }
+
+  .email-signature-frame {
+    background-color: white;
+    display: block;
+    width: 100%;
+  }
+}

static/sass/styles.scss

@@ -8,8 +8,59 @@
 @import "@canonical/cookie-policy/build/css/cookie-policy";
 
 // Site patterns
-@import "pattern-font-tester";
-@include design-p-font-tester;
+@import "pattern-resources";
+@include design-p-resources;
+@include vf-p-icons;
+@include vf-p-icon-highlight-off;
+@include vf-p-icon-highlight-on;
+@include vf-p-icon-home;
+@include vf-p-icon-import;
+@include vf-p-icon-in-progress;
+@include vf-p-icon-info;
+@include vf-p-icon-inspector-debug;
+@include vf-p-icon-warning-grey;
+@include vf-p-icon-spinner;
+@include vf-p-icon-controllers;
+@include vf-p-icon-change-version;
+@include vf-p-icon-loading-steps;
+@include vf-p-icon-lock-locked-active;
+@include vf-p-icon-lock-locked;
+@include vf-p-icon-lock-unlock;
+@include vf-p-icon-machines;
+@include vf-p-icon-maximise-bar;
+@include vf-p-icon-menu;
+@include vf-p-icon-minimise-bar;
+@include vf-p-icon-minus;
+@include vf-p-icon-models;
+@include vf-p-icon-mount-2;
+@include vf-p-icon-mount;
+@include vf-p-icon-open-terminal;
+@include vf-p-icon-pin;
+@include vf-p-icon-plans;
+@include vf-p-icon-plus;
+@include vf-p-icon-pods;
+@include vf-p-icon-power-error;
+@include vf-p-icon-power-off;
+@include vf-p-icon-power-on;
+@include vf-p-icon-profile;
+@include vf-p-icon-help;
+@include vf-p-icon-restart;
+@include vf-p-icon-revisions;
+@include vf-p-icon-search;
+@include vf-p-icon-security;
+@include vf-p-icon-settings;
+@include vf-p-icon-share;
+@include vf-p-icon-show;
+@include vf-p-icon-sort-both;
+@include vf-p-icon-sort-down;
+@include vf-p-icon-sort-up;
+@include vf-p-icon-starred;
+@include vf-p-icon-status-failed-small;
+@include vf-p-icon-error;
+@include vf-p-icon-status-in-progress-small;
+@include vf-p-icon-status-in-progress;
+@include vf-p-icon-status-queued-small;
+@include vf-p-icon-status-queued;
 
 // Blockquote style override until officially in vanilla
 .p-pull-quote {

templates/shared/_email-signature.html

@@ -0,0 +1,242 @@
+<div style="font-family: Ubuntu,sans-serif; margin:0px;">
+  <table style="border-spacing:0px;
+                border-width:0px;
+                font-family: Ubuntu, sans-serif;
+                margin:0px;
+                color: #000;
+                border-color:white">
+    <tbody>
+      <tr>
+        <th style="vertical-align:top;
+                   padding:0px;
+                   font-size: 0px;
+                   text-align: left;
+                   padding-top: 4px;
+                   padding-left: 4px"
+            colspan="2">
+          <img height="40px"
+               width="128px"
+               style="margin-bottom: 17px"
+               src="https://assets.ubuntu.com/v1/7620920d-Canonical-Logo-Light%201.png"
+               alt="Canonical Logo"
+               title="Canonical Logo" />
+        </th>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px"
+            colspan="2">
+          <p style="display:inline-block;
+                    font-size:13px;
+                    line-height:16px;
+                    padding-top:0.8px;
+                    margin-bottom: 0px;
+                    margin-top:0.8px;
+                    font-weight:600">Hadley Carlisle</p>
+        </td>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px"
+            colspan="2">
+          <p style="display:inline-block;
+                    font-size:13px;
+                    line-height:16px;
+                    padding-top:0.8px;
+                    margin-bottom: 8px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">VP Engineering, Enterprise Solutions</p>
+        </td>
+      </tr>
+
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom: 0px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">Email:</p>
+        </td>
+        <td style="vertical-align:top;
+                   padding:0px;
+                   padding-left:5px;
+                   padding-right:4px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    margin-left: 12px;
+                    font-weight:500">hadley.carlisle@canonical.com</p>
+        </td>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom: 0px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">Mailing List:</p>
+        </td>
+        <td style="vertical-align:top;
+                   padding:0px;
+                   padding-left:5px;
+                   padding-right:4px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    margin-left: 12px;
+                    font-weight:500">design.ops@canonical.com</p>
+        </td>
+      </tr>
+
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom: 0px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">Location:</p>
+        </td>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom: 0px;
+                    margin-top:0.8px;
+                    margin-left: 12px;
+                    font-weight:500">United Kingdom</p>
+        </td>
+      </tr>
+
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">Mobile:</p>
+        </td>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    margin-left: 12px;
+                    font-weight:500">+1 2345 6789</p>
+        </td>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    color:#757575;
+                    font-weight:500">Mobile:</p>
+        </td>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px">
+          <p style="display: inline-block;
+                    font-size:13px;
+                    line-height:17px;
+                    padding-top:0.8px;
+                    margin-bottom:0px;
+                    margin-top:0.8px;
+                    margin-left: 12px;
+                    font-weight:500">+1 2345 6789</p>
+        </td>
+      </tr>
+
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px"
+            colspan="2">
+          <a href="https://canonical.com/"
+             style="color:#0066cc;
+                    text-decoration: none">
+            <p style="display: inline-block;
+                      font-size:13px;
+                      line-height:17px;
+                      padding-top:0.8px;
+                      margin-bottom: 0px;
+                      margin-top:8.8px;
+                      font-weight:500">canonical.com</p>
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;
+                   padding:0px;
+                   padding-left:5px;
+                   font-size: 0px"
+            colspan="2">
+          <a href="https://ubuntu.com/"
+             style="color:#0066cc;
+                    text-decoration: none">
+            <p style="display: inline-block;
+                      font-size:13px;
+                      line-height:17px;
+                      padding-top:0.8px;
+                      margin-bottom: 0px;
+                      margin-top:0.8px;
+                      font-weight:500">ubuntu.com</p>
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

webapp/app.py

@@ -1,4 +1,6 @@
 import requests
+import flask
+import yaml
 
 from flask import render_template, request
 from urllib.parse import parse_qs, urlencode
@@ -17,6 +19,25 @@ app = FlaskBase(
 
 session = requests.Session()
 
+with open("_data/resources.yaml", "r") as stream:
+    parsed_resources = yaml.safe_load(stream)
+
+with open("_data/icons.yaml", "r") as stream:
+    parsed_icons = yaml.safe_load(stream)
+
+resources_data = {
+    "logos": parsed_resources,
+    "icons": parsed_icons,
+}
+
+
+@app.context_processor
+def global_template_context():
+    return {
+        "resources_data": resources_data,
+        "path": flask.request.path,
+    }
+
 
 @app.errorhandler(Exception)
 def render_error_page(error):