diff --git a/build.js b/build.js index 02b93d3d2ee..31cb7d3c576 100644 --- a/build.js +++ b/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"; diff --git a/navigation.yaml b/navigation.yaml index 4c8e0871326..49e067a53f8 100644 --- a/navigation.yaml +++ b/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: diff --git a/static/js/src/charts/chiselled-chart.js b/static/js/src/charts/chiselled-chart.js new file mode 100644 index 00000000000..2a1b16ce4e0 --- /dev/null +++ b/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]); diff --git a/templates/containers/chiselled/_base_chiselled.html b/templates/containers/chiselled/_base_chiselled.html index 7a36cf245bf..49bfe7d778b 100644 --- a/templates/containers/chiselled/_base_chiselled.html +++ b/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 %} diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html new file mode 100644 index 00000000000..8e1dfe40e7e --- /dev/null +++ b/templates/containers/chiselled/index.html @@ -0,0 +1,514 @@ +{% extends "containers/chiselled/_base_chiselled.html" %} + +{% block title %}Ultra-small Ubuntu-based distroless containers - chiselled Ubuntu{% endblock %} +{% block meta_description %}Get started with chiselled Ubuntu: ultra-small Ubuntu container images. Build Distroless +containers with 6x smaller attack surface and the advantages of a vendor-supported Linux distribution.{% endblock %} + +{% block body_class %}is-paper{% endblock body_class %} + +{% block content %} + + +
+
+
+

Chiselled Ubuntu

+
+
+
+

Ultra-small, ultra-secure containerisation

+
+

Rethink your containerisation strategy with chiselled Ubuntu — where ultra-small meets ultra-secure. Trim your + attack surface by 6x and get the reliability of a vendor-supported Linux distribution.

+
+
+
+ +
+
+
+ An image that demonstrates how chiselled Ubuntu works +
+
+
+ +
+
+
+
+

How to reduce container image size

+

Chisel trims up to 80% of your containers’ attack surface.

+
+
+
+ +
+
+

Mark Lewis, VP Application Services at Canonical, explains how chisel works.

+
+
+
+ +
+
+
+
+

Why your attack surface matters

+
+
+
+

Container images’ attack surface is a critical factor in determining their security. As the size of a + container + image increases, so does the potential for vulnerabilities and known security issues.

+

According to Sysdig, 87% of container images have high or critical vulnerabilities.

+
+
+

+ Explore the benefits of smaller container + images › +

+
+
+
+ +
+
+
+
+

Chiselled Ubuntu:

+

Production-ready, ultra-small Ubuntu containers

+
+
+
+

Experience the power of ultra-small containerisation. Chiselled Ubuntu delivers efficiency with a minimal + attack surface.

+

Chiselled Ubuntu and your favourite toolchains come together seamlessly. It's your shortcut to creating and + deploying secure, super-efficient images for production environments.

+
+
+
+ +
+
+
+
+

.NET

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
.NET +
+ Ubuntu .NET image +
219MB
+
+ Chiselled Ubuntu .NET image +
116MB
+
+ Chiselled Ubuntu for self contained .NET image +
5MB
+
+
+
+
+
+
+
+
+
+
+

Java

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
Java +
+ Eclipse Temurin +
215MB
+
+ Chiselled Ubuntu for JRE8 +
113MB
+
+
+
+
+
+
+
+
+
+
+

C, C++, Go, R

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
C, C++, Go, R +
+ Google Distroless +
20MB
+
+ Chiselled Ubuntu +
12MB
+
+
+
+
+
+
+
+
+ +
+
+
+

+ Get + started now and ship with chiselled Ubuntu in minutes › +

+
+
+ +
+
+
+
+

How does chisel work

+
+
+
+ {{ image ( + url="https://assets.ubuntu.com/v1/805717bb-how%20it%20works.png", + alt="Diagram that shows how Chisel works", + height="346", + width="600", + hi_def=True, + loading="lazy" ) | safe + }} +
+

Chisel operates as a from-scratch package manager, meticulously sculpting ultra-small runtime file systems. +

+

To do so, chiselled Ubuntu relies on a curated collection of Slice Definitions Files. These files relate to + the + upstream packages from the Ubuntu archives, and define one or more slices for any given package. A package + slice + represents a subset of the package’s contents, comprising its maintainer scripts and dependencies.

+

Chisel effectively layers reusable knowledge on top of traditional Ubuntu deb packages, through a + developer-friendly CLI and fine-grained dependency management mechanism.

+
+
+

+ Read more about how chisel + works › + +

+
+
+
+ +
+ +
+
+ +
+
+ +
+
+
+
+

What industry experts say

+
+
+
+

Don’t take our word for it. Listen to industry experts discuss chiselled Ubuntu.

+

+ “There has always been a need for smaller and tighter images. Developers remind us, as a base image + provider, of that on a regular basis. Chiselled images leapfrog over approaches we’ve looked at in the past. + We love the idea and implementation of chiselled images and Canonical as a partner. When technical leaders + at + Canonical shared the first demos of chiselled images with us, we immediately wanted to be a launch partner, + and we’re thrilled that we’re shipping Ubuntu chiselled images for .NET as part of the GA release” + +

+

Richard Lander, Program Manager, .NET at Microsoft

+
+
+

+ Watch our interview with Richard Lander › +

+
+
+
+ +
+
+
+
+

From development to production: making developers' lives easier

+
+
+

A seamless developer experience means more productive teams and more secure + applications.

+

Chiselled Ubuntu is designed to simplify the containerisation journey, ensuring a smooth transition from + development to production.

+
    +
  • 100% library and release cycle alignment with Ubuntu LTS
  • +
  • Fewer dependency headaches
  • +
  • Chisel CLI for easier multi-stage builds
  • +
  • Simple image rebuilds
  • +
  • Prebuilt chiselled images for popular toolchains such as .NET and Java +
  • +
+
+

+ Get + started today › +

+
+
+
+ +
+
+
+
+

Vendor supported
distroless images

+
+
+

Chiselled Ubuntu images are fully supported by Canonical, on the same terms as classic minimal Ubuntu images: +

+
+
    +
  • 5-year free bug fixing and security patching for the main libraries
  • +
  • 10-year security patching for Ubuntu Pro customers, on all Ubuntu packages +
  • +
  • 24/7 phone and ticket customer support
  • +
+
+

Read more about our support commitments ›

+
+
+
+ +
+
+
+

+ Get started with chiselled Ubuntu containers + today › +

+
+
+ +
+
+
+
+

Further reading

+
+ +
+
+ +
+ +
+
+ +
+
+ + +
+ + + +{% endblock %} \ No newline at end of file