From 8d5943aa2a6479bee85b1201cfa0bbd04a05fe83 Mon Sep 17 00:00:00 2001
From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:18:52 -0400
Subject: [PATCH] Add macro loader example

---
 requirements.txt             |  1 +
 templates/desktop/index.html | 77 ++++++++++++++++++++++++++++++++++++
 webapp/app.py                | 15 +++++++
 3 files changed, 93 insertions(+)

diff --git a/requirements.txt b/requirements.txt
index 949bd1a85b5..f19ff03ba57 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -32,3 +32,4 @@ bleach==6.0.0
 numpy==1.24.4
 python-slugify==8.0.1
 djlint==1.34.1
+Jinja2
diff --git a/templates/desktop/index.html b/templates/desktop/index.html
index 5968c351725..f0321e66949 100755
--- a/templates/desktop/index.html
+++ b/templates/desktop/index.html
@@ -1,4 +1,5 @@
 {% extends "desktop/base_desktop.html" %}
+{% from "_macros/tiered-list.jinja" import tiered_list %}
 
 {% block title %}Ubuntu Desktop PC operating system{% endblock %}
 
@@ -16,6 +17,82 @@
 
 {% block content %}
 
+  {%- call(slot) tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%}
+    {%- if slot == 'title' -%}
+      <h2>H2 - up to two lines; ideally one.</h2>
+    {%- endif -%}
+
+    {%- if slot == 'description' -%}
+      <p>A <a href="#">private cloud</a> provides organisations with on-demand
+      compute, storage and other resources that can be accessed over the network
+      and that are reserved exclusively for them - either in their own data centre
+      or via a 3rd party.</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_1' -%}
+      <h5>Rich portfolio of products</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_1' -%}
+      <p>Resell the full range of Canonical’s portfolio of private and public
+      cloud products: OpenStack, Kubernetes, IoT, support, security and
+      compliance for Ubuntu.</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_2' -%}
+      <h5>Sales enablement</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_2' -%}
+      <p>Canonical can help train your field sales and presales teams and
+      provide you with sales collateral and permission to use the Canonical
+      and Ubuntu trademarks in your own materials.</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_3' -%}
+      <h5>Access to Canonical partner portal</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_3' -%}
+      <p>We host a partner portal with product and solutions collaterals, agreed
+      pricing, incentives and a deal registration system.</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_4' -%}
+      <h5>Training and certification</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_4' -%}
+      <p>Gain access to technology that is the foundation for digital
+      transformation and expand your business through marketing support and
+      alignment with a trusted brand</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_5' -%}
+      <h5>Technical enablement</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_5' -%}
+      <p>We provide in-depth technical training for your customer engineering
+      teams with access to technical resources for your labs and customer
+      engagements.</p>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_title_6' -%}
+      <h5>Go to market with Canonical</h5>
+    {%- endif -%}
+
+    {%- if slot == 'list_item_description_6' -%}
+      <p>Working with our dedicated partner team, get new joint marketing
+      opportunities and lead generation.</p>
+    {%- endif -%}
+
+    {%- if slot == 'cta' -%}
+      <a href="#" class="p-button">Learn more</a>
+      <a href="#">Contact us ›</a>
+    {%- endif -%}
+  {%- endcall -%}
+
   {# 0 -180px #}
 
   <section class="p-section--hero">
diff --git a/webapp/app.py b/webapp/app.py
index b0583890a42..c76b57a6fc4 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -166,6 +166,17 @@
 # Set up application
 # ===
 
+# Vanilla Macro loader example
+
+from jinja2 import ChoiceLoader, FileSystemLoader
+
+# ChoiceLoader attempts loading templates from each given path in successive
+# order
+loader = ChoiceLoader([
+    FileSystemLoader('templates'),
+    FileSystemLoader('node_modules/vanilla-framework/templates/')
+])
+
 app = FlaskBase(
     __name__,
     "ubuntu.com",
@@ -175,6 +186,10 @@
     static_folder="../static",
 )
 
+# Loader supplied to jinja_loader effectively overwrites template_folder in
+# base config
+app.jinja_loader = loader
+
 sentry = app.extensions["sentry"]
 session = talisker.requests.get_session()
 charmhub_session = requests.Session()