Merge main into branch

build.js

@@ -31,7 +31,8 @@ let entries = {
   "kernel-form": "./static/js/src/kernel-form.js",
   "random-partner-logos": "./static/js/src/random-partner-logos.js",
   "credEnterprisePurchasing": "./static/js/src/advantage/credentials/app.tsx",
-  activate: "./static/js/src/activate.js"
+  activate: "./static/js/src/activate.js",
+  "chiselled-chart": "./static/js/src/charts/chiselled-chart.js"
 };
 
 const isDev = process && process.env && process.env.NODE_ENV === "development";

navigation.yaml

@@ -197,6 +197,8 @@ containers:
     - title: What are containers
       path: /containers/what-are-containers
     - title: Chiselled Ubuntu
+      path: /containers/chiselled
+    - title: Chiselled and .NET
       path: /containers/chiselled/dotnet
 
 ai:

package.json

@@ -115,7 +115,7 @@
     "typescript": "4.5.4",
     "url-polyfill": "1.1.12",
     "url-search-params-polyfill": "8.1.1",
-    "vanilla-framework": "4.3.0",
+    "vanilla-framework": "4.5.1",
     "yup": "0.32.11"
   },
   "resolutions": {

redirects.yaml

@@ -463,6 +463,7 @@ ec2/?: "/cloud/public-cloud"
 edge/?: "/edge-computing"
 edge-cloud/?: "/cloud"
 education.*/?: "/desktop/education"
+embedded: "/real-time"
 employment/?: "https://www.canonical.com/careers"
 employment/SSEBzr/?: "https://www.canonical.com/careers"
 end-of-life/?: "/about/release-cycle"

requirements.txt

@@ -1,10 +1,10 @@
 canonicalwebteam.flask-base==1.1.0
-canonicalwebteam.http==1.0.3
-canonicalwebteam.blog==6.4.1
+canonicalwebteam.http==1.0.4
+canonicalwebteam.blog==6.4.2
 canonicalwebteam.search==1.3.0
 canonicalwebteam.templatefinder==1.0.0
 canonicalwebteam.image-template==1.3.1
-canonicalwebteam.discourse==5.4.5
+canonicalwebteam.discourse==5.4.7
 python-dateutil==2.8.2
 pytz==2022.7.1
 maxminddb-geolite2==2018.703

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/DetailsTabs/DetailsTabs.tsx

@@ -1,15 +1,15 @@
-import { ICONS, Icon, List, Tabs, Tooltip } from "@canonical/react-components";
-import React, { HTMLProps, useState } from "react";
 import type { ReactNode } from "react";
+import React, { HTMLProps, useState } from "react";
+import { Icon, ICONS, List, Tabs, Tooltip } from "@canonical/react-components";
 import { UserSubscription } from "advantage/api/types";
-import {
-  EntitlementsStore,
-  filterAndFormatEntitlements,
-} from "advantage/react/utils/filterAndFormatEntitlements";
 import {
   isBlenderSubscription,
   isFreeSubscription,
 } from "advantage/react/utils";
+import {
+  EntitlementsStore,
+  filterAndFormatEntitlements,
+} from "advantage/react/utils/filterAndFormatEntitlements";
 import { sendAnalyticsEvent } from "advantage/react/utils/sendAnalyticsEvent";
 import FeaturesTab from "./components/FeaturesTab";
 
@@ -113,7 +113,7 @@ const DetailsTabs = ({
                 <tr>
                   <td data-test="doc-link">Knowledge Base</td>
                   <td>
-                    <a href="https://portal.support.canonical.com/?_ga=2.3371065.849364026.1691488233-1001052631.1648559628">
+                    <a href="https://support-portal.canonical.com/knowledge-base">
                       Online library of articles and tutorials
                     </a>
                   </td>
@@ -122,7 +122,7 @@ const DetailsTabs = ({
                   <tr>
                     <td data-test="doc-link">{supportLevel}</td>
                     <td>
-                      <a href="https://portal.support.canonical.com/staff/s/contactsupport">
+                      <a href="https://support-portal.canonical.com/contact-us">
                         Phone and ticket support
                       </a>
                     </td>

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/SubscriptionDetails.tsx

@@ -225,7 +225,7 @@ export const SubscriptionDetails = forwardRef<HTMLDivElement, Props>(
                       data-test="support-button"
                       disabled={editing}
                       element="a"
-                      href="https://portal.support.canonical.com/"
+                      href="https://support-portal.canonical.com/"
                     >
                       Support portal
                     </Button>

static/js/src/charts/chiselled-chart.js

@@ -0,0 +1,94 @@
+import { debounce } from "../utils/debounce.js";
+
+function buildChiselledChart(selector, data, isFirst) {
+  const colors = ["#CBA7B8", "#923A66", "#000000"];
+
+  const width = document.querySelector(selector).getBoundingClientRect().width;
+
+  const x = d3.scaleLinear().range([0, width]).domain([0, 330]);
+
+  const withAxis = screen.width < 1036 || isFirst;
+
+  const svg = d3
+    .select(selector)
+    .append("svg")
+    .attr("width", width)
+    .attr("height", `${2.5 * (data.length + (withAxis ? 1 : 0))}em`); // make the height bigger if it shows with axis
+
+  const xAxis = d3.axisTop(x).ticks(3).tickSizeInner(24).tickSizeOuter(0);
+
+  const axisG = svg.append("g");
+
+  if (withAxis) axisG.style("transform", "translate(0, 2.3rem)");
+
+  axisG.call(xAxis);
+
+  axisG
+    .selectAll("text")
+    .attr("transform", "translate(5, 20)")
+    .attr("text-anchor", "start")
+    .style("font-size", "1.6em")
+    .style("color", "#666666");
+
+  axisG
+    .select(".domain")
+    .attr("transform", "translate(0, -2)")
+    .attr("stroke", "#000000")
+    .attr("stroke-width", "1px")
+    .attr("opacity", "0.2");
+
+  axisG
+    .selectAll("line")
+    .attr("transform", "translate(0, -2)")
+    .attr("stroke", "#000000")
+    .attr("stroke-width", "1px")
+    .attr("opacity", "0.2");
+
+  const chartG = svg.append("g");
+
+  if (withAxis) chartG.style("transform", "translate(0, 2.4em)");
+
+  chartG
+    .selectAll()
+    .data(data)
+    .enter()
+    .append("rect")
+    .attr("fill", function (d, i) {
+      if (i === data.length - 1) return colors[colors.length - 1];
+      return colors[i];
+    })
+    .attr("x", 0)
+    .attr("y", function (d, i) {
+      return `${2.5 * i}em`;
+    })
+    .attr("height", "2.35em")
+    .attr("width", function (d, i) {
+      return x(d);
+    })
+    .attr("aria-label", function (d, i) {
+      return `${d} MB`;
+    });
+}
+
+function clearChiselledChart(selector) {
+  const chart = document.querySelector(selector);
+  if (chart) {
+    chart.innerHTML = "";
+  }
+}
+
+window.addEventListener(
+  "resize",
+  debounce(function () {
+    clearChiselledChart("#chiselled-dotnet-chart");
+    clearChiselledChart("#chiselled-java-chart");
+    clearChiselledChart("#chiselled-other-chart");
+    buildChiselledChart("#chiselled-dotnet-chart", [219, 116, 5], true);
+    buildChiselledChart("#chiselled-java-chart", [215, 113]);
+    buildChiselledChart("#chiselled-other-chart", [20, 12]);
+  }, 250)
+);
+
+buildChiselledChart("#chiselled-dotnet-chart", [219, 116, 5], true);
+buildChiselledChart("#chiselled-java-chart", [215, 113]);
+buildChiselledChart("#chiselled-other-chart", [20, 12]);

templates/confidential-computing/index.html

@@ -59,7 +59,7 @@ <h2>Intel TDX is available on Ubuntu for both the host and guest</h2>
         </p>
         <div class="u-align--center u-vertically-center u-hide--small">
           {{ image (
-          url="https://assets.ubuntu.com/v1/4143661e-Ubuntu%20VM%20on%20Intel%20TDX.png",
+          url="https://assets.ubuntu.com/v1/48765e85-Intel%20%20TDX%20and%20Ubuntu%20Figure.png",
           alt="Diagram showing that Ubuntu builds cater to both the host and guest sides, empowering users to launch a
           confidential TDX virtual machine seamlessly",
           width="410",

templates/containers/chiselled/_base_chiselled.html

@@ -1,6 +1,6 @@
 {% extends "templates/base.html" %}
 
-{% block meta_copydoc %}https://drive.google.com/drive/folders/1KzbPY6u1J4_F4-sVTR8fGnbD16EpIpAW{% endblock meta_copydoc %}
+{% block meta_copydoc %}https://docs.google.com/document/d/1ZkQ-UFTwsPkMnQn8IEEjZOXMy40tkgBscw_-qq9K3nc/edit{% endblock meta_copydoc %}
 
 {% block outer_content %}
   {% block content %}{% endblock %}