rename variable, add alt text to an image, fix formatting

canonical · Dec 8, 2023 · 89836a3 · 89836a3
1 parent 76bd480
commit 89836a3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/static/js/src/charts/chiselled-chart.js b/static/js/src/charts/chiselled-chart.js
@@ -3,23 +3,23 @@ import { debounce } from "../utils/debounce.js";
 function buildChiselledChart(selector, data, isFirst) {
   const colors = ["#CBA7B8", "#923A66", "#000000"];
 
-  var width = document.querySelector(selector).getBoundingClientRect().width;
+  const width = document.querySelector(selector).getBoundingClientRect().width;
 
   const x = d3.scaleLinear().range([0, width]).domain([0, 330]);
 
-  const withScale = screen.width < 1036 || isFirst;
+  const withAxis = screen.width < 1036 || isFirst;
 
   const svg = d3
     .select(selector)
     .append("svg")
     .attr("width", width)
-    .attr("height", `${2.5 * (data.length + (withScale ? 1 : 0))}em`);
+    .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 (withScale) axisG.style("transform", "translate(0, 2.3rem)");
+  if (withAxis) axisG.style("transform", "translate(0, 2.3rem)");
 
   axisG.call(xAxis);
 
@@ -46,7 +46,7 @@ function buildChiselledChart(selector, data, isFirst) {
 
   const chartG = svg.append("g");
 
-  if (withScale) chartG.style("transform", "translate(0, 2.4em)");
+  if (withAxis) chartG.style("transform", "translate(0, 2.4em)");
 
   chartG
     .selectAll()

diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html
@@ -58,7 +58,7 @@ <h2>Ultra-small, ultra-secure containerisation</h2>
   <div class="row">
     <div class="u-align--center">
       <img src="https://assets.ubuntu.com/v1/b0a37cc9-canonical.com_%20(1).png" style="height: auto; width: 100%;"
-        alt="" />
+        alt="An image that demonstrates how chiselled Ubuntu works" />
     </div>
   </div>
 </section>
@@ -345,7 +345,8 @@ <h2>What industry experts say</h2>
         <p><cite>Richard Lander, Program Manager, .NET at Microsoft</cite></p>
       </div>
       <hr class="p-rule" />
-      <p><a href="https://www.youtube.com/watch?v=FLGFzlWF4Gs">Watch our interview with Richard Lander&nbsp;&rsaquo;</a>
+      <p>
+        <a href="https://www.youtube.com/watch?v=FLGFzlWF4Gs">Watch our interview with Richard Lander&nbsp;&rsaquo;</a>
       </p>
     </div>
   </div>
@@ -374,8 +375,10 @@ <h2>From development to production: making developers' lives easier</h2>
         </li>
       </ul>
       <hr class="p-rule">
-      <p><a href="https://canonical-oci.readthedocs-hosted.com/en/latest/oci-how-to/create-chiselled-ubuntu-image/">Get
-          started today&nbsp;&rsaquo;</a></p>
+      <p>
+        <a href="https://canonical-oci.readthedocs-hosted.com/en/latest/oci-how-to/create-chiselled-ubuntu-image/">Get
+          started today&nbsp;&rsaquo;</a>
+      </p>
     </div>
   </div>
 </section>
@@ -492,9 +495,9 @@ <h3 class="p-text--small-caps">GitHub</h3>
   <div class="row">
     <div class="col-12">
       <p class="p-heading--2">
-        <a href="/containers/contact-us" class="js-invoke-modal">Talk to an expert about how<br
-            class="u-hide--small u-hide--medium" /> Ubuntu
-          containers can benefit your enterprise&nbsp;&rsaquo;</a>
+        <a href="/containers/contact-us" class="js-invoke-modal">Talk to an expert about how
+          <br class="u-hide--small u-hide--medium" /> Ubuntu containers can benefit your enterprise&nbsp;&rsaquo;
+        </a>
       </p>
     </div>
   </div>