Feature blog

.github/workflows/pr.yaml

@@ -86,7 +86,7 @@ jobs:
       - name: Install python dependencies
         run: |
           python3 -m pip install --upgrade pip
-          sudo pip3 install djlint
+          sudo pip3 install "$(grep -m1 -E '^djlint==' requirements.txt)" "click>=8.1"
 
       - name: Get changed HTML files in the templates folder
         id: changed-files

navigation.yaml

@@ -709,8 +709,8 @@ company:
       links:
         - title: Blog
           url: /blog
-        - title: Press Center
-          url: /press-center
+        - title: Latest News
+          url: /latest-news
 
   preview_secondary_links:
     title: Company highlights

package.json

@@ -50,7 +50,7 @@
     "sass": "1.89.2",
     "use-query-params": "^2.2.1",
     "uuid": "^11.1.0",
-    "vanilla-framework": "4.50.0",
+    "vanilla-framework": "4.52.0",
     "venobox": "2.1.8",
     "yup": "^1.6.1"
   },
@@ -85,5 +85,8 @@
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
     },
     "coverageReporters": ["cobertura", "text", "html"]
+  },
+  "resolutions": {
+    "vanilla-framework": "canonical/vanilla-framework#WD-36957-create-8-column-card-pattern-on-vanilla-framework"
   }
 }

postcss.config.js

@@ -24,7 +24,7 @@ let config = {
         "node_modules/leaflet/dist/leaflet.js",
         "node_modules/venobox/dist/venobox.min.js",
         "node_modules/vanilla-framework/templates/_macros/*.jinja",
-        "node_modules/intl-tel-input/build/js/utils.js"
+        "node_modules/intl-tel-input/build/js/utils.js",
       ],
       defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
       safelist: {
@@ -48,6 +48,7 @@ let config = {
           /^cc-/, // Cookie consent related
           /^optanon/, // Cookie consent related
           /^has-/, // State-related classes
+          /blog-article/, // Blog article layout (incl. dynamic .wp-block-embed)
         ],
         deep: [/form-.+/],
         keyframes: true,

redirects.yaml

@@ -40,7 +40,8 @@ partners/apps-and-snaps/?: "/partners"
 partners/kubernetes/?: "/partners"
 partners/devices-and-iot/?: "/partners/iot-device"
 partners/isv-partners/?: "/partners/isv-program"
-press-centre/?: "/press-center"
+press-centre/?: "/blog/latest-news"
+press-center/?: "/blog/latest-news"
 enterprise-services/ubuntu-advantage/landscape/dedicated-edition/?: "https://ubuntu.com/support"
 intellectual-property-rights-policy/?: "/legal/intellectual-property-policy"
 intellectual-property-policy/?: "/legal/intellectual-property-policy"

requirements.txt

@@ -1,5 +1,5 @@
 canonicalwebteam.flask-base==2.6.1
-canonicalwebteam.blog==6.8.4
+canonicalwebteam.blog==7.1.0
 canonicalwebteam.http==1.0.4
 canonicalwebteam.image-template==1.9.0
 canonicalwebteam.templatefinder==1.0.0

static/js/careers-progression.js

@@ -110,9 +110,7 @@ function standardCarousel() {
         /** @type {HTMLElement} */
         const child = slidesContainer[i].children[j];
         child.style.transitionDuration = `${ms}s`;
-        child.style.transform = `translateX(-${
-          child.offsetWidth * index
-        }px)`;
+        child.style.transform = `translateX(-${child.offsetWidth * index}px)`;
       }
     }
 

static/js/csp-event-handlers.js

@@ -45,12 +45,12 @@
         pushGAEvent(
           el.getAttribute("data-ga-category"),
           el.getAttribute("data-ga-action"),
-          el.getAttribute("data-ga-label"),
+          el.getAttribute("data-ga-label")
         );
         pushGAEvent(
           el.getAttribute("data-ga-extra-category"),
           el.getAttribute("data-ga-extra-action"),
-          el.getAttribute("data-ga-extra-label"),
+          el.getAttribute("data-ga-extra-label")
         );
       });
     });
@@ -62,7 +62,7 @@
           pushGAEvent(
             form.getAttribute("data-ga-submit-category"),
             form.getAttribute("data-ga-submit-action"),
-            form.getAttribute("data-ga-submit-label"),
+            form.getAttribute("data-ga-submit-label")
           );
         });
       });

static/js/events.js

@@ -1,24 +1,26 @@
 // Add anchor to search form submission
-document.getElementById('event-search-form')?.addEventListener('submit', function(e) {
-  this.action = '/events#events-table';
-});
+document
+  .getElementById("event-search-form")
+  ?.addEventListener("submit", function (e) {
+    this.action = "/events#events-table";
+  });
 
 // Show more/less functionality
-const toggleBtn = document.querySelector('.js-toggle-show-events');
-const truncatedBody = document.querySelector('tbody.js-events-truncated');
-const allBody = document.querySelector('tbody.js-events-all');
+const toggleBtn = document.querySelector(".js-toggle-show-events");
+const truncatedBody = document.querySelector("tbody.js-events-truncated");
+const allBody = document.querySelector("tbody.js-events-all");
 
 if (toggleBtn) {
-  toggleBtn.addEventListener('click', function() {
-    const isHidden = allBody.classList.contains('u-hide');
+  toggleBtn.addEventListener("click", function () {
+    const isHidden = allBody.classList.contains("u-hide");
     if (isHidden) {
-      allBody.classList.remove('u-hide');
-      truncatedBody.classList.add('u-hide');
-      toggleBtn.innerHTML = 'Show less';
+      allBody.classList.remove("u-hide");
+      truncatedBody.classList.add("u-hide");
+      toggleBtn.innerHTML = "Show less";
     } else {
-      allBody.classList.add('u-hide');
-      truncatedBody.classList.remove('u-hide');
-      toggleBtn.innerHTML = 'Show all events';
+      allBody.classList.add("u-hide");
+      truncatedBody.classList.remove("u-hide");
+      toggleBtn.innerHTML = "Show all events";
     }
   });
 }
@@ -28,13 +30,17 @@ function getSortValue(cell, dataType) {
   let value;
 
   if (dataType === "link") {
-    const link = cell?.querySelector('a');
-    value = link ? link.textContent.toLowerCase().trim() : (cell ? cell.textContent.toLowerCase().trim() : '');
+    const link = cell?.querySelector("a");
+    value = link
+      ? link.textContent.toLowerCase().trim()
+      : cell
+      ? cell.textContent.toLowerCase().trim()
+      : "";
   } else if (dataType === "string") {
-    value = cell ? cell.textContent.toLowerCase().trim() : '';
+    value = cell ? cell.textContent.toLowerCase().trim() : "";
   } else if (dataType === "date") {
-    const parsed = new Date(cell ? cell.textContent.trim() : '');
-    value = isNaN(parsed) ? '' : parsed.getTime().toString().padStart(20, '0');
+    const parsed = new Date(cell ? cell.textContent.trim() : "");
+    value = isNaN(parsed) ? "" : parsed.getTime().toString().padStart(20, "0");
   }
 
   return value;
@@ -43,8 +49,8 @@ function getSortValue(cell, dataType) {
 // Helper function to sort rows
 function sortRows(rows, column, dataType, ascending) {
   return rows.sort((a, b) => {
-    const aCells = a.querySelectorAll('td');
-    const bCells = b.querySelectorAll('td');
+    const aCells = a.querySelectorAll("td");
+    const bCells = b.querySelectorAll("td");
     const aCell = aCells[column];
     const bCell = bCells[column];
 
@@ -60,21 +66,21 @@ function sortRows(rows, column, dataType, ascending) {
 }
 
 // Table sorting functionality
-const table = document.querySelector('.js-sortable-table');
+const table = document.querySelector(".js-sortable-table");
 if (table) {
-  const sortBtns = table.querySelectorAll('.js-sortable-table__button');
-  const initCol = table.getAttribute('data-sort-column');
-  const initDir = table.getAttribute('data-sort-direction');
+  const sortBtns = table.querySelectorAll(".js-sortable-table__button");
+  const initCol = table.getAttribute("data-sort-column");
+  const initDir = table.getAttribute("data-sort-direction");
   let currentSort = {
     column: initCol !== null ? parseInt(initCol) : null,
-    ascending: initDir !== 'desc',
+    ascending: initDir !== "desc",
   };
 
-  sortBtns.forEach(btn => {
-    btn.addEventListener('click', function() {
+  sortBtns.forEach((btn) => {
+    btn.addEventListener("click", function () {
       const th = this.parentElement;
-      const column = parseInt(th.getAttribute('data-column'));
-      const dataType = th.getAttribute('data-type') || 'string';
+      const column = parseInt(th.getAttribute("data-column"));
+      const dataType = th.getAttribute("data-type") || "string";
 
       // Toggle sort direction if clicking the same column
       if (currentSort.column === column) {
@@ -83,25 +89,36 @@ if (table) {
         currentSort.column = column;
         currentSort.ascending = true;
       }
-      
+
       // If there are two table bodies, sort from the "all" tbody
       if (allBody && truncatedBody) {
-        const allRows = sortRows(Array.from(allBody.querySelectorAll('tr')), column, dataType, currentSort.ascending);
+        const allRows = sortRows(
+          Array.from(allBody.querySelectorAll("tr")),
+          column,
+          dataType,
+          currentSort.ascending
+        );
 
         // Update "all" tbody
-        allBody.innerHTML = '';
-        allRows.forEach(row => allBody.appendChild(row));
+        allBody.innerHTML = "";
+        allRows.forEach((row) => allBody.appendChild(row));
 
         // Update truncated tbody with first 5 values
         const firstTen = allRows.slice(0, 10);
-        truncatedBody.innerHTML = '';
-        firstTen.forEach(row => truncatedBody.appendChild(row.cloneNode(true)));
-
+        truncatedBody.innerHTML = "";
+        firstTen.forEach((row) =>
+          truncatedBody.appendChild(row.cloneNode(true))
+        );
       } else if (truncatedBody) {
         // Update truncated tbody only
-        const rows = sortRows(Array.from(truncatedBody.querySelectorAll('tr')), column, dataType, currentSort.ascending);
-        rows.forEach(row => truncatedBody.appendChild(row));
+        const rows = sortRows(
+          Array.from(truncatedBody.querySelectorAll("tr")),
+          column,
+          dataType,
+          currentSort.ascending
+        );
+        rows.forEach((row) => truncatedBody.appendChild(row));
       }
     });
   });
-}
+}

static/js/forms.js

@@ -102,7 +102,7 @@ function requiredCheckbox(fieldset, target) {
  */
 function setDataLayerConsentInfo() {
   /** @type {Array} */
-  const dataLayer = (window.dataLayer) || [];
+  const dataLayer = window.dataLayer || [];
   const latestConsentUpdateElements = dataLayer
     .slice()
     .reverse()