From 34dd98fd44b3dadcc1f9a6a2e5e2f1c902ba11e4 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Tue, 30 Jan 2024 15:15:36 +0100 Subject: [PATCH 01/72] WD-8424 - update contact from for /ceph --- .../shared/forms/interactive/storage.html | 164 +++++++----------- 1 file changed, 61 insertions(+), 103 deletions(-) diff --git a/templates/shared/forms/interactive/storage.html b/templates/shared/forms/interactive/storage.html index 49e0eeba92d..0a5dd8c7c95 100644 --- a/templates/shared/forms/interactive/storage.html +++ b/templates/shared/forms/interactive/storage.html @@ -2,117 +2,75 @@ @@ -123,7 +130,7 @@

Smart home

-

Digital signage

+

Digital signage

A small footprint and full OpenGL make Ubuntu Core the perfect platform for secure digital signs. Try Ubuntu Frame, a reliable and secure display server for embedded Linux devices with long term support.

Guide to developing GUIs for IoT ›

@@ -145,7 +152,7 @@

Digital signage

-

Automotive

+

Automotive

Trusted by major automotive companies, Canonical delivers a full suite of open source solutions and services to deliver security, safety and innovation for digital transformation in automotive.

A CTO's guide to software-defined vehicles ›

@@ -170,7 +177,7 @@

Automotive

-

Smart city

+

Smart city

Canonical has a wide portfolio of products. Each of them play a role in bringing open source technologies to the cities of the future.

A guide on how to solve the top 5 IoT challenges ›

@@ -192,7 +199,7 @@

Smart city

-

Robotics

+

Robotics

Develop, deploy and maintain your fleet of robots with Ubuntu and ROS. We work with a wide range of robotics institutions, from education to manufacturing.

Choose the right OS for your robot ›

@@ -261,8 +268,8 @@

Trusted by

-

Our products

-

Building your IoT business is a journey, develop your application with the Ubuntu you know and love, package your application using Snaps, deploy your devices using Ubuntu Core, manage them with a dedicated Snap Store and certify your hardware to ensure maximum reliability.

+

Our products

+

Building your IoT business is a journey, develop your application with the Ubuntu you know and love, package your application using Snaps, deploy your devices using Ubuntu Core, manage them with a dedicated Snap Store and certify your hardware to ensure maximum reliability.

@@ -474,8 +481,8 @@

From prototype to production on all major platforms

IoT professional services

Our expert technical teams offer full enablement, customisation and development to ensure that taking your devices to market is fast, scalable and seamless. You can focus on your applications, we handle the rest, including full support and technical workshops.

- Learn more - Pricing and packages + Pricing and packages + Learn more about IoT Professional Services ›

@@ -501,7 +508,7 @@

Ready to innovate?

Whether you are a startup bringing your concept to market or already have large fleets of devices deployed in the field, we have the expertise and infrastructure to launch and support you.

- Contact our team + Contact our team
From 4bb6da282a57b5de064179059731afc782d64f7e Mon Sep 17 00:00:00 2001 From: Liza Date: Wed, 31 Jan 2024 13:51:10 +0100 Subject: [PATCH 04/72] Update templates/shared/forms/interactive/storage.html Co-authored-by: MariaPaula Trujillo --- templates/shared/forms/interactive/storage.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/shared/forms/interactive/storage.html b/templates/shared/forms/interactive/storage.html index 0a5dd8c7c95..8685c16b54b 100644 --- a/templates/shared/forms/interactive/storage.html +++ b/templates/shared/forms/interactive/storage.html @@ -21,9 +21,9 @@

Contact us about software-defi
  • - + + required />
  • From d31c4941af40d05d802060c0b27c19a44e0fa7cf Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 31 Jan 2024 14:06:59 +0100 Subject: [PATCH 05/72] WD-8424 - review fixes --- .../shared/forms/interactive/storage.html | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/templates/shared/forms/interactive/storage.html b/templates/shared/forms/interactive/storage.html index 8685c16b54b..0218f15b346 100644 --- a/templates/shared/forms/interactive/storage.html +++ b/templates/shared/forms/interactive/storage.html @@ -9,41 +9,40 @@

    Contact us about software-defi
    - + + + + + + + + + + +
    \ No newline at end of file From c091aa6247bda82d29f59d7fb8c1825c0a3bde4c Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 31 Jan 2024 14:53:08 +0100 Subject: [PATCH 06/72] WD-8424 - form fix --- templates/shared/forms/interactive/storage.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/shared/forms/interactive/storage.html b/templates/shared/forms/interactive/storage.html index 0218f15b346..e30127a36a1 100644 --- a/templates/shared/forms/interactive/storage.html +++ b/templates/shared/forms/interactive/storage.html @@ -7,9 +7,8 @@

    Contact us about software-defi

    Please fill out this form and a member of our Cloud sales team will be in touch with you

    -
    - -

    • + + + + + + + + + + + +
    - - - - - - - - - - - \ No newline at end of file From 6ac52e5a031064e7372a71fcdd1b82207e80c6a0 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 31 Jan 2024 21:52:09 +0100 Subject: [PATCH 10/72] WD-8067 - remove unneeded link --- templates/internet-of-things/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/internet-of-things/index.html b/templates/internet-of-things/index.html index 3cc1de7d894..ad7983eea1f 100644 --- a/templates/internet-of-things/index.html +++ b/templates/internet-of-things/index.html @@ -48,7 +48,6 @@

    Why Ubuntu?

  • Optimised custom commercial images for the edge
  • Secure boot and full disk encryption
    • -

    Learn more about Ubuntu Core ›

    From e05d41d1c4d4d27fcd2e47fdeb9a0d14aaea51a6 Mon Sep 17 00:00:00 2001 From: Carlos Wu Fei Date: Wed, 24 Jan 2024 15:24:14 +0000 Subject: [PATCH 11/72] Fix IoT and Server SoC filter This is regression due to the security patch. Check Ubuntu Core and Server SoC during parsing, so that page redirects with the correct params. Removed the bleach function, it's not longer needed since we are checking every param given by the user with the API data using _parse_query_params. So in this case bleach is causing more harm than good. --- requirements.txt | 1 - webapp/certified/views.py | 12 +++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/requirements.txt b/requirements.txt index 359aab98f42..09266c2cbf6 100644 --- a/requirements.txt +++ b/requirements.txt @@ -28,4 +28,3 @@ google-cloud-datastore==2.16.1 django-openid-auth==0.17 time-machine==2.9.0 filelock==3.12.0 -bleach==6.0.0 diff --git a/webapp/certified/views.py b/webapp/certified/views.py index e6ee2b450ea..4d76523c92e 100644 --- a/webapp/certified/views.py +++ b/webapp/certified/views.py @@ -2,7 +2,6 @@ import talisker.sentry import requests import math -import bleach from flask import ( request, @@ -102,12 +101,12 @@ def _parse_query_params(all_releases, all_vendors): "servers", "iot", "socs", + "Ubuntu Core", + "Server SoC", ]: for item in request.args.getlist("category"): - if request.args["category"] == "Ubuntu Core": - item = "IoT" - if request.args["category"] == "Server SoC": - item = "SoC" + if item in category_params: + continue if item == category: new_query_params["category"] = category_params.append( category @@ -714,9 +713,8 @@ def create_category_views(category, template_path): """ if len(request.args.getlist("category")) > 1: url = f"/certified?{request.query_string.decode()}&category={category}" - clean_url = bleach.clean(url, tags=[], strip=True) # UX requirement - return redirect(clean_url) + return redirect(url) if category == "Desktop": certified_releases = api.certified_releases( From 4923463d799d6cc0474025dc48f2773b54775b96 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Thu, 1 Feb 2024 12:28:30 +0100 Subject: [PATCH 12/72] WD-8594 - remove /download/kvm page --- redirects.yaml | 3 +- templates/download/kvm.html | 127 ------------------------------------ 2 files changed, 2 insertions(+), 128 deletions(-) delete mode 100644 templates/download/kvm.html diff --git a/redirects.yaml b/redirects.yaml index 256e59a01da..997bd428be5 100644 --- a/redirects.yaml +++ b/redirects.yaml @@ -430,7 +430,8 @@ download/intel-joule/?: "/download/iot/" download/intel-joule-desktop/?: "/download/iot/" download/samsung-artik-5-10/?: "/download/iot/" download/samsung-artik-5-10-server/?: "/download/iot/" -download/iot/kvm/?: "/download/kvm" +download/iot/kvm/?: "/core/docs/getting-started" +download/kvm/?: "/core/docs/getting-started" download/iot/up-squared-iot-grove-server/?: "/download/up-squared-iot-grove-server" download/releasenotes.*/?: "https://wiki.ubuntu.com/Releases" download/server/download/?: "/download/server" diff --git a/templates/download/kvm.html b/templates/download/kvm.html deleted file mode 100644 index 30e3c6e3f09..00000000000 --- a/templates/download/kvm.html +++ /dev/null @@ -1,127 +0,0 @@ -{% extends "download/_base_download.html" %} - -{% block title %}Install Ubuntu Core on KVM{% endblock %} -{% block meta_copydoc %}https://docs.google.com/document/d/1FHIArLpuAyLe2gnDwymefvzc4Lg8dSGvN8QAl8wX18Q/edit{% endblock meta_copydoc %} - -{% block content %} -
    -
    -
    -

    Install Ubuntu Core on KVM

    -
    -
    -
    -
    -
    -
    -

    Install Ubuntu Core

    -

    We will walk you through the steps of installing Ubuntu Core 20 on your Linux desktop in a virtual machine.

    -
    -
    -

    Minimum requirements

    -
      -
    • An Ubuntu SSO account with an SSH key
      • -
    • A computer running Ubuntu Desktop
      • -
    -
    -
    -
    -
    -
    - -
    -
    -

    Installation instructions

    -
      - {% include "download/iot/_setup-ubuntu-sso.html" %} -
    1. -

      - - Download Ubuntu Core -

      -
      - -
      -
      2. -
    2. -

      - - Install KVM -

      -
      -
        -
      1. -

        Install the qemu-kvm package with the following command:

        - 
        sudo apt install qemu-kvm ovmf
        -
        2. -
      2. -

        Then, run the kvm-ok command to check KVM status and your hardware:

        - 
        kvm-ok
        -
        3. -
      3. -

        The message should say:

        - 
        INFO: /dev/kvm exists
-KVM acceleration can be used
        -

        This is the best outcome — it means that Ubuntu Core will run fast on your system, taking advantage of hardware acceleration in your CPU.

        -
        4. -
      -
      -
      3. -
    3. -

      - - Launch KVM -

      -
      -

      You can now launch a virtual machine with KVM, using the following command:

      - 
      qemu-system-x86_64 -smp 2 -m 2048 -net nic,model=virtio -net user,hostfwd=tcp::8022-:22,hostfwd=tcp::8090-:80 -vga qxl -drive file=/usr/share/OVMF/OVMF_CODE.fd,if=pflash,format=raw,unit=0,readonly=on -drive file=ubuntu-core-20-amd64.img,cache=none,format=raw,id=disk1,if=none -device virtio-blk-pci,drive=disk1,bootindex=1 -machine accel=kvm
      -

      - Note: this command sets up port redirections: -

        -
      • localhost:8022 is redirecting to port 22 of the virtual machine for accessing it through SSH
        • -
      • localhost:8090 is redirecting to its port 80
        • -
      -

      -

      - Note: this command is required for graphics such as mir-kiosk: -

        -
      • -vga qxl sets the paravirtual graphics driver qxl
        • -
      -

      -

      You should now see a window, with your Ubuntu Core virtual machine booting inside it.

      -
      -
      4. - {% include "download/iot/_first-boot-setup.html" %} -
    4. -

      - - Login -

      -
      -

      Once setup is done, you can login with SSH into Ubuntu Core, using the following command:

      - 
      ssh -p 8022 <Ubuntu SSO user name>@localhost
      -

      Your username is your Ubuntu SSO user name, shown to you at the end of the account configuration step.

      -
      -
      5. -
    -
    -
    - -{% with strip="p-strip--light" %}{% include "download/iot/_boot-tips-strip.html" %}{% endwith %} - -{% with board="virtual machine" %} - {% include "download/iot/_install-snaps-strip.html" %} -{% endwith %} - -{% include "download/shared/_get-ebook-security.html"%} - -{% with first_item="_core_learn_more", second_item="_core_contribute", third_item="_iot_further_reading" %}{% include "shared/contextual_footers/_contextual_footer.html" %}{% endwith %} - -{% endblock content %} From aa65c9fe00dafd88875b388cf600687ae692e8cb Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Thu, 1 Feb 2024 12:44:34 +0100 Subject: [PATCH 13/72] WD-8578 - copy update on /support --- templates/support/index.html | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/templates/support/index.html b/templates/support/index.html index 480c5ddc834..d71f48eb286 100755 --- a/templates/support/index.html +++ b/templates/support/index.html @@ -626,10 +626,9 @@

    Fully supported data fabric

    -

    OCI-compliant container images

    +

    Modular MLOps platforms

    -

    Modular MLOps platforms

    Rely on secure and supported leading open source tools like Kubeflow and MLFlow as part of Canonical MLOps to scale your AI initiatives and move from experimentation to production. Benefit from a modular solution to develop and deploy machine learning projects.

    Let our team handle the maintenance and back up your team with any unexpected events.

    @@ -742,8 +741,8 @@

    Service Level Agreements

    Hours of coverage N/A - Standard business hours2 - 24/7/365 for severity 1. Standard business hours for other severity levels + 24/52 + 24/7/3653 Available channels @@ -767,13 +766,13 @@

    Service Level Agreements

    Severity 1 - Production service down, critically affecting core functionality in a production environment. N/A 4 hours - 1 hour3 + 1 hour Severity 2 - Core functionality severely degraded in a production environment. N/A 8 business hours - 2 hours3 + 2 hours Severity 3 - Issues have a medium to low impact in a production environment. @@ -792,10 +791,12 @@

    Service Level Agreements

    -
    -

    1 Included with any Ubuntu Pro subscription

    -

    2 Standard business hours are defined as Monday to Friday from 8:00 AM to 6:00 PM at the location of your organization's headquarters. Weekends and holidays are excluded.

    -

    3 24/7/365 support is intended for Severity 1 issues. We will work with you until the issue is solved or mitigated with a workaround. As soon as the service or the core functionality is available in production, we will adjust the severity level accordingly. We assume that you will be reachable throughout the process as the functionality is restored.

    +
    +
      +
    1. Included with any Ubuntu Pro subscription
      2. +
    2. 24/5 support is intended for Severity 1 issues. Standard business hours are defined as Monday to Friday from 8:00 AM to 6:00 PM at the location of your organization’s headquarters. Weekends and holidays are excluded.
      3. +
    3. 24/7/365 support is intended for Severity 1 issues. We will work with you until the issue is solved or mitigated with a workaround. As soon as the service or the core functionality is available in production, we will adjust the severity level accordingly. We assume that you will be reachable throughout the process as the functionality is restored.
      4. +
    @@ -833,7 +834,7 @@

    Embedded services

    Legacy support

    -

    Still running Ubuntu 14.04 or 16.04 and need time to migrate to a newer version?

    +

    Still running Ubuntu 14.04 and need time to migrate to a newer version?

    Ensure the stability of your platform by getting assistance directly from Canonical and get the time you need to migrate to the newer version.

    From 5032b03271f221dbee773ce88824b47c4b718208 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Thu, 1 Feb 2024 12:54:20 +0100 Subject: [PATCH 14/72] WD-8067 - review fix --- templates/internet-of-things/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/internet-of-things/index.html b/templates/internet-of-things/index.html index ad7983eea1f..21d1753bad7 100644 --- a/templates/internet-of-things/index.html +++ b/templates/internet-of-things/index.html @@ -77,7 +77,7 @@

    Discover Ubuntu IoT in your industry

    -

    Industrial

    +

    Industrial ›

    Ubuntu Core runs in multiple industrial environments today, from factory floors to healthcare appliances and food production.

    How real-time Linux accelerates industrial @@ -101,7 +101,7 @@

    Industrial

    -

    Smart home

    +

    Smart home ›

    Supporting the Matter standard as a member of the CSA. Explore smart home applications available on the Snap Store to build your next smart home project.

    Matter on Ubuntu: get started with the standard for @@ -129,7 +129,7 @@

    Smart home

    -

    Digital signage

    +

    Digital signage ›

    A small footprint and full OpenGL make Ubuntu Core the perfect platform for secure digital signs. Try Ubuntu Frame, a reliable and secure display server for embedded Linux devices with long term support.

    Guide to developing GUIs for IoT ›

    @@ -151,7 +151,7 @@

    Digital s
    -

    Automotive

    +

    Automotive ›

    Trusted by major automotive companies, Canonical delivers a full suite of open source solutions and services to deliver security, safety and innovation for digital transformation in automotive.

    A CTO's guide to software-defined vehicles ›

    @@ -176,7 +176,7 @@

    Automotive

    -

    Smart city

    +

    Smart city ›

    Canonical has a wide portfolio of products. Each of them play a role in bringing open source technologies to the cities of the future.

    A guide on how to solve the top 5 IoT challenges ›

    @@ -198,7 +198,7 @@

    Smart city
    -

    Robotics

    +

    Robotics ›

    Develop, deploy and maintain your fleet of robots with Ubuntu and ROS. We work with a wide range of robotics institutions, from education to manufacturing.

    Choose the right OS for your robot ›

    From 37a7c63775c42db20d6eeceecbd3f4feb249293f Mon Sep 17 00:00:00 2001 From: minkyngkm Date: Thu, 1 Feb 2024 17:58:34 +0000 Subject: [PATCH 15/72] Update pro selector page --- .../components/Form/ProductType/ProductType.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx b/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx index fb26f3a3469..3ce5a99408f 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx @@ -48,9 +48,9 @@ const PublicCloudInfo = { name: "Azure", CTA: [ { - CTAName: "Ubuntu Pro in Azure marketplace", + CTAName: "in-place upgrade to Ubuntu Pro", link: - "https://azuremarketplace.microsoft.com/en-us/marketplace/apps?search=ubuntu%20pro%20canonical&page=1", + "/blog/announcing-in-place-upgrade-from-ubuntu-server-to-ubuntu-pro-on-azure", appearance: "positive", }, { @@ -65,8 +65,9 @@ const PublicCloudInfo = { launch new Ubuntu Pro instances on the Azure Marketplace {" "} - at an hourly, per-machine rate. If you need tech support as well, or to - add Ubuntu Pro entitlements to existing Ubuntu LTS instances, please{" "} + at an hourly, per-machine rate. If you have a running Ubuntu LTS + instance in Azure, you can also in-place upgrade that instance to a + Ubuntu Pro. If you need tech support as well,{" "} contact us. ), @@ -112,7 +113,7 @@ const PublicCloudInfo = { appearance: "positive", }, { - CTAName: "Solutions for Ubuntu 18.04 LTS instances", + CTAName: "More info for Ubuntu 18.04 LTS instances", link: "/18-04/oci", appearance: "", }, @@ -135,7 +136,7 @@ const PublicCloudInfo = { appearance: "positive", }, { - CTAName: "Solutions for Ubuntu 18.04 LTS instances", + CTAName: "More info for Ubuntu 18.04 LTS instances", link: "/18-04/ibm", appearance: "", }, From d01243a294e984fb1517b44fbe2d0ae01468a799 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Fri, 2 Feb 2024 12:47:56 +0100 Subject: [PATCH 16/72] WD-8578 - update layout --- templates/support/index.html | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/templates/support/index.html b/templates/support/index.html index d71f48eb286..8c91eb393db 100755 --- a/templates/support/index.html +++ b/templates/support/index.html @@ -790,14 +790,16 @@

    Service Level Agreements

    -
    -
    -
      -
    1. Included with any Ubuntu Pro subscription
      2. -
    2. 24/5 support is intended for Severity 1 issues. Standard business hours are defined as Monday to Friday from 8:00 AM to 6:00 PM at the location of your organization’s headquarters. Weekends and holidays are excluded.
      3. -
    3. 24/7/365 support is intended for Severity 1 issues. We will work with you until the issue is solved or mitigated with a workaround. As soon as the service or the core functionality is available in production, we will adjust the severity level accordingly. We assume that you will be reachable throughout the process as the functionality is restored.
      4. -
    -
    +
    +
      +
    1. Included with any Ubuntu Pro subscription
      2. +
    2. 24/5 support is intended for Severity 1 issues. Standard business hours are defined as Monday to Friday from + 8:00 AM to 6:00 PM at the location of your organization’s headquarters. Weekends and holidays are excluded.
      3. +
    3. 24/7/365 support is intended for Severity 1 issues. We will work with you until the issue is solved or mitigated + with a workaround. As soon as the service or the core functionality is available in production, we will adjust the + severity level accordingly. We assume that you will be reachable throughout the process as the functionality is + restored.
      4. +
    From 0459236a739c5b9e9f1a878777a549b4b2b2c624 Mon Sep 17 00:00:00 2001 From: minkyngkm Date: Mon, 5 Feb 2024 12:23:35 +0000 Subject: [PATCH 17/72] Capitalize i --- .../react/components/Form/ProductType/ProductType.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx b/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx index 3ce5a99408f..e6cc6ba9666 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/ProductType/ProductType.tsx @@ -15,7 +15,7 @@ const PublicCloudInfo = { name: "AWS", CTA: [ { - CTAName: "in-place upgrade to Ubuntu Pro", + CTAName: "In-place upgrade to Ubuntu Pro", link: "/blog/upgrade-your-existing-ubuntu-lts-instances-to-ubuntu-pro-in-aws", appearance: "positive", @@ -48,7 +48,7 @@ const PublicCloudInfo = { name: "Azure", CTA: [ { - CTAName: "in-place upgrade to Ubuntu Pro", + CTAName: "In-place upgrade to Ubuntu Pro", link: "/blog/announcing-in-place-upgrade-from-ubuntu-server-to-ubuntu-pro-on-azure", appearance: "positive", @@ -77,7 +77,7 @@ const PublicCloudInfo = { name: "Google Cloud", CTA: [ { - CTAName: "in-place upgrade to Ubuntu Pro", + CTAName: "In-place upgrade to Ubuntu Pro", link: "https://cloud.google.com/compute/docs/images/premium/ubuntu-pro/upgrade-from-ubuntu", appearance: "positive", From b141ef7f33e4bf24cc709dc7651f92929d32e027 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Tue, 6 Feb 2024 10:52:22 +0600 Subject: [PATCH 18/72] remove Support sub-navigation item from /pricing bubble --- navigation.yaml | 2 -- 1 file changed, 2 deletions(-) diff --git a/navigation.yaml b/navigation.yaml index 035db161648..153fd31b26c 100644 --- a/navigation.yaml +++ b/navigation.yaml @@ -474,8 +474,6 @@ pricing: children: - title: Overview path: /pricing - - title: Support - path: /pricing/infra - title: Consulting path: /pricing/consulting - title: Desktops From 0f45fa18fefdbef2c263ed556f6636bdf53d275b Mon Sep 17 00:00:00 2001 From: Peter French Date: Tue, 6 Feb 2024 15:44:35 +0100 Subject: [PATCH 19/72] Meganav-rebase (#12939) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add is-reduced class to top nav bar when subnav is present * WIP reduced top nav * Remove global nav * Remove margin botton from the nav * WIP - Update sign in icon * add skip link * WIP update main nav to use vanilla pattern as prescribed * WIP sign in dropdown * WIP mobile dropdown * Display username when logged in * Update background of selected menu * Update mobile view of reduced top nav * Add menu on mobile view * WIP - secondary dropdowns * Fix dropdown * Update vanilla to 3.2.0 * Update sign in * Fix dropdown-window * Update dropdown-windown-overlay * Update dropdown mobile view * Fix menu button * Lint scss * Update search bar * Fix overlay on mobile * Fix user dropdown * Fix overlay when closing menu * Update secondary nav classes * Update nav on tutorials page * Fix tutorial topic dropdown * Apply design review * Update dropdown bg color * Switch to scroll listening over page anchors * Fix dropdown mobile view on home page * Fix z-index * Update dropdown content mobile view * Update dropdown content responsiveness * Keep menu open on small screen * Stop Propagation * Apply suggestions after code review * Fix mobile dropdown cta * fix search form * remove position absolute on reduced mobile top nav * remove active indicator on small screen nav dropdown * adjust reduced nav translateY position on x large screens * linting * prevetn page from scrolling when opening secondary nav item on mobile * maintain reduced nav within bubbles * remove hash triggers for mega nav * update the way the reduced nav is hidden to prevent modals breaking * add focus event listeners on reduced nav * make sure mobile dropdowns are closed when closing the menu * add meganav yaml proof of concept * Remove unused variables * add global nav * set global nav breakpoint to match the project nav threshold * add all get ubuntu links to meganav * add support links to meganav yaml * add community links to mega nav yaml * add products links to meganav.yaml * add use case links to meganav.yaml * fix typos and add missing links * create meganav base partial * Fix typos Co-authored-by: Peter French * More typos Co-authored-by: Peter French * add use case link descriptions * add missing meganav data * update tabbed content to support dynamically added tabs * add tabbed content js to main js * WIP styles for get ubuntu dropdown * add missing link to meganav * set meganav secondary link color * fix hover and active states on meganav tabbed content * fix background colors * linting * improve split lists in main panel * remove placeholder content * easeout the dropdown window, rather than easein * add is-muted class * initial pass at adding mobile styles to meganav * add chevrons to mobile meganav * add check for dropdown content elements * add animating sub sections to mobile meganav * fix alignment of muted headings in meganav * fix button margin * fix padding on mobile meganv, and animation speed on overlay * update slide behaviour on mobile meganav * linting * prevent main nav transform on desktop * update bg color on selected meganav sidenav * update hover state on list items * update column layout * add hero item to primary content * remove psuedo element based hover state * organise meganv partials into their own directory * add split_list filter to context * create list item partial for repeated markup * update layout of meganav hero item * revert hero item concept and single column layout * fix kvm link * WIP remaining meganav sections * fix infrastructure typo * add unique ids to all meganav sidenav ctas and targets * update global nav to 3.2.0 * add numpy for easier list splitting * add 3 column views to meganav content panels * add update meganav.yaml * update global nav to 3.2.1 * close open meganav dropdowns when global nav is opened * handle focus events * hide dropdown chevron on subnav if there are no items to show * update user login nav item * remove animation rule from nav row * Rename download-content to get-ubuntu-content * Format python * Update products in meganav.yaml * Update 'use cases', 'support' and 'community' in meganav.yaml * Edit content Replace anchor links Improve bubble titles * Make references to "Certified" consistent Incorporate feedback from Gloria * Rename "Support" product tab as "Security and support" Add Pro and Certifications Make Certified consistent * Tweak Ubuntu Server links Shorten Landscape description Tweak Smart home/city * Review YAML to match spreadsheet Repurpose secondary links under "Use case" for "By industry" Fix capitalisation * Remove temp fixes * Implement sliding nav into meganav (#13009) * add global nav * add tabbed content js to main js * fix global nav chevron position on reduced view * Add second view for mobile * Refactor to work with new sliding nav * Fix css issues from refactoring html structure * lint-scss * Update with design usggestions from initial ux review * Further ux review changes * Make user dropdown work wit sliding nav * Fix bug in account dropdown where clicking outside the made navigation would cause it to open * Format prettier * revert use-cases changes for demo * Increase default grid width * Implemened redesigned use-cases * Lint-scss * Further ux changes for demo purpose - global nav not working on mobile * Implement new global nav for desktop * Implement new global nav for mobile view * Changes based on code and QA * Content QA Shorten line on Products > Featured Fix capitalisation Fix consistency issues * Reposition search icon * Add content fixes Hyphenation for "enterprise-grade" Replace Cloud Native Operations Survey link Sort and tweak quick links under K8s, Juju and snaps * Some final ux improvement and a small bug fix * Fix spacing issue and highlight not appearing on account dropdown * Fix global nav item alignment * Implement global-nav 3.5.0 changes * Changes based on Hans feedback * Tweak bubble labels Fix "Sign in" hyphenation typo * Remove redundant headings ("Products") * Visual design review changes * Fix navigation padding bug * Remove second 'skip to main content' * Update with UX suggestions * Bump grid-max-width to 90rem * Fix logo alignment in primary navigation * Refactor to use event delegation * Update alignment in reduced nav * Add failsafe to prevent dropdowns being fetched multiple times * Bump global-nav version to 3.6.1 * Align logos far left * Make reduced nav not sticky * Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height * Add missing links to mobile dropdowns * Align top level mobile items with logo * Add fallback for hover loading on touchscreen devices * Use variables for repeated values * Handle resize events * Close meganav on any resize event * Use grid-max-width variable * Handle resize event on secondary nav * Fix highlighted page alignment * Delete unused 'navigation-meganav-base.html file * Only closeAll on resize event if mobile-breakpoint threshold is crossed --------- Co-authored-by: Scott Mason Nash Co-authored-by: Juan Ruitiña * Nojs meganav (#13141) * add global nav * add tabbed content js to main js * fix global nav chevron position on reduced view * Add second view for mobile * Refactor to work with new sliding nav * Fix css issues from refactoring html structure * lint-scss * Update with design usggestions from initial ux review * Further ux review changes * Make user dropdown work wit sliding nav * Fix bug in account dropdown where clicking outside the made navigation would cause it to open * Format prettier * revert use-cases changes for demo * Increase default grid width * Implemened redesigned use-cases * Lint-scss * Further ux changes for demo purpose - global nav not working on mobile * Implement new global nav for desktop * Implement new global nav for mobile view * Changes based on code and QA * Content QA Shorten line on Products > Featured Fix capitalisation Fix consistency issues * Reposition search icon * Add content fixes Hyphenation for "enterprise-grade" Replace Cloud Native Operations Survey link Sort and tweak quick links under K8s, Juju and snaps * Some final ux improvement and a small bug fix * Fix spacing issue and highlight not appearing on account dropdown * Fix global nav item alignment * Implement global-nav 3.5.0 changes * Changes based on Hans feedback * Tweak bubble labels Fix "Sign in" hyphenation typo * Remove redundant headings ("Products") * Visual design review changes * Fix navigation padding bug * Remove second 'skip to main content' * Update with UX suggestions * Bump grid-max-width to 90rem * Fix logo alignment in primary navigation * Refactor to use event delegation * Update alignment in reduced nav * Add failsafe to prevent dropdowns being fetched multiple times * Bump global-nav version to 3.6.1 * Align logos far left * Make reduced nav not sticky * Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height * Add missing links to mobile dropdowns * Align top level mobile items with logo * Add fallback for hover loading on touchscreen devices * Use variables for repeated values * Handle resize events * Close meganav on any resize event * Use grid-max-width variable * Handle resize event on secondary nav * Fix highlighted page alignment * Delete unused 'navigation-meganav-base.html file * Only closeAll on resize event if mobile-breakpoint threshold is crossed * Create basic static nojs-meganav * Apply style changes from UX mockup * Enable nojs-meganav when JS is not enabled * Apply changes from U review and make a basic mobile view mockup * Format prettier * Hide chevrons and implement fallbacks for 'menu' and 'search' * Fix search not working on nojs mobile view * Ux updates * Fix prettier errors * Lint JS * Format prettier --------- Co-authored-by: Scott Mason Nash Co-authored-by: Juan Ruitiña * Rebase branch * Appease linter gods * Update meganav.yaml Replace "Links" heading with "Quick links" Add new pages Incorporate feedback on CTAs * Fix links & menu padding * Revert "Fix links & menu padding" This reverts commit c262b98779d3560eebc8c383c9250c31e5869827. * Fix links and fix menu padding (#13355) * Remove comment * Update nojs-nav links * Format-python * Update GA tracking and a location hash in the URL (#13362) * Implement GA tracking and a location hash in the URL * Appease the linter gods * Update with code&qa suggestions * Fix keyboarding trapping * Bump global nav version * Fix input, placeholder color and run prettier * Adds keyboard trapping for mobile (#13447) * Fix 'quick links' not being tabable on mobile * Add keyboard trapping for mobile * Make query for side-panel more generic * Remove console.logs * Minor bug fixes (#13467) * Minor bug fixes * Make global-nav link detection more specific * Fix linter errors * Fix alignment on bubble and remove black box on mobile (#13428) * Fix alignment within grid within bubbles & remove floating black box on mobile * Fix alignment of 'canonical' in the reduced mobile nav * Add missing requirements * Actually add missing requirements * Align navigation to grid text * Appease lint gods * Update color of side nav tabs when active * Align first nav item with text * Appease linter * Align items inside the dropdown ith page text * Fix download desktop link + add why-pro to yaml * Fix p-muted-heading alignment (#13482) * Fix p-muted-heading alignment * Account for both medium and small screens difference in padding * Include highlighted_secondary_links in mobile view * Let highlighted_secondary_links heading have top padding * Add a tad more padding to use cases headings * Lint lint lint * Change Download link to 22.04.3 * Fix secondary links bug (#13507) * Fix secondary links bug * Run linter * Fix "enterprise" typo in meganav.yaml * Add functionality to account for height differences on mobile caused by the url navigation (#13517) * Add functionality to account for height differences on mobile caused by the url navigation * Lint * Apply review suggestions * Update URLs in meganav.yaml * Add breakpoint crossover * Remove amd-xilinx.html * Remove reference to navigation-lock * Revert yarn.lock --------- Co-authored-by: Scott Mason Nash Co-authored-by: minkyngkm Co-authored-by: Anthony Dillon Co-authored-by: Beth Collins Co-authored-by: Juan Ruitiña Co-authored-by: MariaPaula Trujillo --- build.js | 1 - meganav.yaml | 951 +++++++++++++++++ navigation.yaml | 16 +- package.json | 2 +- requirements.txt | 3 + static/js/src/core.js | 15 +- static/js/src/main.js | 2 +- static/js/src/navigation.js | 991 ++++++++++++++---- static/js/src/tabbed-content.js | 15 + static/sass/_global-settings.scss | 3 + static/sass/_pattern_navigation-dropdown.scss | 230 ++++ static/sass/_pattern_navigation.scss | 880 +++++++++------- static/sass/print.scss | 3 - static/sass/styles.scss | 16 +- templates/about/release-cycle.html | 1 - templates/core/features/index.html | 1 - templates/download/risc-v/index.html | 1 + templates/engage/shared/_de_thank-you.html | 5 - templates/engage/shared/_es_thank-you.html | 5 - templates/engage/shared/_fr_thank-you.html | 5 - templates/engage/shared/_header.html | 5 - templates/engage/shared/_it_thank-you.html | 5 - templates/engage/shared/_pt_thank-you.html | 5 - templates/engage/shared/_ru_thank-you.html | 5 - templates/engage/thank-you.html | 5 - templates/openstack/install.html | 1 - templates/templates/_navigation.html | 248 ++--- templates/templates/base.html | 9 + templates/templates/meganav/_list-item.html | 12 + .../templates/meganav/_section-heading.html | 11 + templates/templates/meganav/base.html | 294 ++++++ templates/templates/meganav/community.html | 5 + templates/templates/meganav/get-ubuntu.html | 5 + .../templates/meganav/navigation-nojs.html | 222 ++++ templates/templates/meganav/products.html | 5 + templates/templates/meganav/support.html | 5 + templates/templates/meganav/use-case.html | 5 + webapp/app.py | 2 + webapp/context.py | 31 + webapp/handlers.py | 6 + webapp/views.py | 4 + yarn.lock | 140 +-- 42 files changed, 3237 insertions(+), 939 deletions(-) create mode 100644 meganav.yaml create mode 100644 static/sass/_pattern_navigation-dropdown.scss create mode 100644 templates/templates/meganav/_list-item.html create mode 100644 templates/templates/meganav/_section-heading.html create mode 100644 templates/templates/meganav/base.html create mode 100644 templates/templates/meganav/community.html create mode 100644 templates/templates/meganav/get-ubuntu.html create mode 100644 templates/templates/meganav/navigation-nojs.html create mode 100644 templates/templates/meganav/products.html create mode 100644 templates/templates/meganav/support.html create mode 100644 templates/templates/meganav/use-case.html diff --git a/build.js b/build.js index 31cb7d3c576..614dbeb27c8 100644 --- a/build.js +++ b/build.js @@ -26,7 +26,6 @@ let entries = { "certified-search-results": "./static/js/src/certified-search-results.js", openstackDeploymentChart: "./static/js/src/openstack-deployment-chart.js", blender: "./static/js/src/advantage/subscribe/blender/app.tsx", - tabbedContent: "./static/js/src/tabbed-content.js", utmInheritance: "./static/js/src/utm-inheritance.js", "kernel-form": "./static/js/src/kernel-form.js", "random-partner-logos": "./static/js/src/random-partner-logos.js", diff --git a/meganav.yaml b/meganav.yaml new file mode 100644 index 00000000000..556ba3c5927 --- /dev/null +++ b/meganav.yaml @@ -0,0 +1,951 @@ +# -- Format example -- +# A section can have either a "flat" layout where all of the content +# appears in a single panel, or it can have multiple panels navigated +# via a side navigation. +# +# To achieve the "flat" layout, the section should include primary_links +# and secondary_links at the top level, and to use the side navigation view +# the section should only include side_nav_sections at the top level, using +# the formats below. +# +# section_name: +# primary_links: (optional) +# - title: (optional) +# links: +# - title: +# description: +# url: +# secondary_links: (optional) +# - title: (optional) +# links: +# - title: +# url: +# side_nav_sections: (optional) +# - title: +# primary_links: +# - title: (optional) +# links: +# - title: +# description: +# url: +# secondary_cta_title: (optional) +# secondary_cta_url: (optional) +# secondary_links: +# - title: (optional) +# links: +# - title: +# url: +# section_footer: (optional) +# copy: +# cta_title: +# cta_url: + +products: + side_nav_sections: + - title: Featured + primary_links: + - links: + - title: Ubuntu Desktop + description: Secure enterprise Linux + url: /desktop + - title: Ubuntu Server + description: Scalable Linux for the cloud + url: /server + - title: MAAS + description: Bare metal provisioning + url: https://maas.io/ + - title: Snapcraft + description: App store for Linux + url: https://snapcraft.io/ + - title: OpenStack + description: Private cloud provisioning + url: /openstack + - title: Multipass + description: VMs for Windows, macOS & Linux + url: https://multipass.run/ + - title: Ubuntu Pro + description: Security & compliance subscription + url: /pro + - title: Enterprise-grade support + description: 24/7 support for the full-stack + url: /support + - title: Livepatch + description: Stay patched and defer reboots + url: /security/livepatch + - title: Kubernetes + description: Containerised workloads + url: /kubernetes + - title: Charmhub + description: Charmed Operators marketplace + url: https://charmhub.io/ + - title: Juju + description: Orchestration engine for operators + url: https://juju.is/ + - title: Certified hardware + description: Ubuntu hardware you can trust + url: /certified + section_footer: + copy: We're here to help with any questions and more information. + cta_title: Contact us + cta_url: /contact-us + + - title: Ubuntu OS + primary_links: + - links: + - title: Ubuntu Desktop + description: Secure enterprise Linux + url: /desktop + - title: Ubuntu Server + description: Scalable Linux for the cloud + url: /server + - title: Ubuntu Pro + description: Security & compliance subscription + url: /pro + - title: Ubuntu Core + description: Embedded Linux + url: /core + - title: FIPS for Ubuntu + description: Secure Linux for government + url: /security/fips + - title: WSL + description: Windows Subsystem for Linux + url: /wsl + - title: Multipass + description: VMs for Windows, macOS & Linux + url: https://multipass.run/ + secondary_links: + - title: Quick links + links: + - title: Upgrade Ubuntu + url: /tutorials/upgrading-ubuntu-desktop + - title: Ubuntu documentation + url: https://help.ubuntu.com/ + - title: Desktop install + url: /tutorials/install-ubuntu-desktop + - title: Server install + url: /server/docs/installation + - title: Server guide + url: /server/docs + - title: Ubuntu on public clouds + url: /cloud/public-cloud + + - title: Private cloud + primary_links: + - links: + - title: OpenStack + description: Enterprise private cloud + url: /openstack + - title: Ubuntu Server + description: Scalable Linux for the cloud + url: /server + - title: Landscape + description: Monitor and manage machines + url: https://landscape.canonical.com/ + - title: MAAS + description: Bare metal provisioning + url: https://maas.io/ + - title: Ceph + description: Open source storage + url: /ceph + - title: Anbox Cloud + description: Virtualised Android on demand + url: https://anbox-cloud.io/ + - title: Open Source MANO + description: Network Functions Virtualisation + url: /telco/osm + - title: JAAS + description: Juju as a Service + url: https://jaas.ai/ + - title: Private cloud build + description: OpenStack implementation + url: /openstack/consulting + secondary_links: + - title: Quick links + links: + - title: Server documentation + url: /server/docs + - title: MAAS documentation + url: https://maas.io/docs + - title: MicroStack installation + url: https://microstack.run/docs/single-node + - title: Data Centre Networking blog + url: /blog/data-centre-networking-what-is-sdn + - title: OpenStack pricing + url: /openstack/pricing-calculator + - title: Private cloud consulting + url: /openstack/consulting + - title: "Private cloud: Avoiding the high cost of operations" + url: /blog/private_cloud_avoiding_operational_costs + + - title: Public cloud + primary_links: + - links: + - title: Ubuntu on AWS + description: AWS Marketplace + url: /aws + - title: Ubuntu on Azure + description: Microsoft Azure Marketplace + url: /azure + - title: Ubuntu on GCP + description: Google Cloud Marketplace + url: /gcp + - title: Ubuntu WorkSpaces + description: Virtual desktops on AWS + url: /aws/workspaces + + - title: Virtualisation + primary_links: + - links: + - title: Multipass + description: VMs for Windows, macOS & Linux + url: https://multipass.run/ + - title: LXD + description: Linux containers + url: https://canonical.com/lxd + - title: WSL + description: Windows Subsystem for Linux + url: /wsl + + secondary_links: + - title: Quick links + links: + - title: What is virtualisation? + url: https://snapcraft.io/blog/what-is-virtualisation-the-basics + - title: Multipass documentation + url: https://multipass.run/docs + - title: Virtualisation docs in the server guide + url: /server/docs/virtualization-multipass + - title: What is WSL? + url: https://wiki.ubuntu.com/WSL + - title: Install Ubuntu on Windows 11 + url: /tutorials/install-ubuntu-on-wsl2-on-windows-11-with-gui-support + - title: Install Ubuntu on Windows 10 + url: /tutorials/install-ubuntu-on-wsl2-on-windows-10 + + - title: Security and support + primary_links: + - links: + - title: Ubuntu Pro + description: Security & compliance subscription + url: /pro + - title: Ubuntu Pro + support + description: 24/7 support for the full-stack + url: /support + - title: ESM + description: 10 years of security maintenance + url: /security/esm + - title: Landscape + description: Monitor and manage machines + url: /landscape + - title: Livepatch + description: Stay patched without reboots + url: /security/livepatch + - title: Ubuntu Pro for AWS + description: Amazon Web Services support + url: /aws/pro + - title: Ubuntu Pro for Azure + description: Microsoft Azure cloud support + url: /azure/pro + - title: Ubuntu Pro for GCP + description: Google Cloud support + url: /gcp/pro + - title: Certifications and hardening + description: CIS, DISA-STIG, FIPS compliance + url: /security/certifications + + secondary_links: + - title: Quick links + links: + - title: Ubuntu Pro pricing + url: /pricing/pro + - title: Open infrastructure consulting + url: /pricing/consulting + - title: Certified hardware + url: /certified + - title: CVE reports + url: /security/cves + - title: Ubuntu Security Notices (USN) + url: /security/notices + + - title: Kubernetes + primary_links: + - links: + - title: Kubernetes + description: Containerised workloads + url: /kubernetes + - title: MicroK8s + description: Simplest way to get Kubernetes + url: https://microk8s.io/ + - title: Kubeflow + description: Machine learning toolkit for K8s + url: /ai/what-is-kubeflow + + secondary_links: + - title: Quick links + links: + - title: Kubernetes documentation + url: /kubernetes/docs + - title: Getting started with Kubernetes + url: /kubernetes/docs/quickstart + - title: Distributions comparison + url: /kubernetes/compare + - title: Cloud native operations report + url: https://juju.is/cloud-native-kubernetes-usage-report-2022 + - title: Getting started with MicroK8s + url: http://microk8s.io/docs/getting-started + - title: Kubeflow installation tutorial + url: https://charmed-kubeflow.io/docs/install + + - title: Charmhub and Juju + primary_links: + - links: + - title: Charmhub + description: Store for Juju operators + url: https://charmhub.io/ + - title: Juju + description: Model-driven operations for apps + url: https://juju.is/ + - title: JAAS + description: Juju as a Service + url: https://jaas.ai/ + + secondary_links: + - title: Quick links + links: + - title: Juju documentation + url: https://juju.is/docs + - title: Juju tutorials + url: https://juju.is/tutorials + - title: Charmhub forum + url: https://discourse.charmhub.io/ + - title: Juju blog + url: https://juju.is/blog + - title: About JAAS + url: https://jaas.ai/jaas + - title: Build and deploy a mini charm + url: https://juju.is/tutorials/build-and-deploy-mini-charm + + - title: Snapcraft + primary_links: + - links: + - title: Snap Store + description: App store for Linux + url: https://snapcraft.io/ + - title: Snaps + description: Universal Linux packages + url: https://snapcraft.io/about + - title: Snapcraft + description: Build and publish your snaps + url: https://snapcraft.io/build + - title: IoT App Store + description: Private app store for Linux and IoT + url: /internet-of-things/appstore + + secondary_links: + - title: Quick links + links: + - title: Getting started with snaps + url: http://snapcraft.io/docs/getting-started + - title: Snap documentation + url: https://snapcraft.io/docs + - title: "Tutorial: Create your first snap" + url: /tutorials/create-your-first-snap + - title: Snapcraft forum + url: https://forum.snapcraft.io/ + - title: Snapcraft blog + url: https://snapcraft.io/blog + - title: Build from GitHub + url: https://snapcraft.io/build + + - title: Certified hardware + primary_links: + - links: + - title: Certified hardware + description: Ubuntu hardware you can trust + url: /certified + - title: PC and laptops + description: Certified for Ubuntu + url: /certified?q=&limit=20&category=Laptop&category=Desktop + - title: Servers + description: Hardware for data centres + url: /certified/servers + - title: IoT devices + description: Stable and secure devices + url: /certified/devices + - title: SoCs + description: System on a Chip hardware + url: /certified/socs + - title: Raspberry Pi + description: Certified Pi devices + url: /certified?q=&limit=20&vendor=Raspberry+Pi+Foundation + + secondary_links: + - title: Quick links + links: + - title: Why use Certified devices? + url: /certified/why-certified + - title: Certify your device + url: https://canonical.com/partners/become-a-partner + - title: Why certification matters for AIoT + url: https://www.brighttalk.com/webcast/6793/497538 + - title: Industrial Pi use cases webinar + url: https://www.brighttalk.com/webcast/6793/514263 + - title: Why buy a preinstalled workstation? + url: /blog/why-you-should-buy-a-pre-installed-ubuntu-workstation + + - title: IoT and Edge + primary_links: + - links: + - title: Ubuntu Core + description: Minimal embedded Ubuntu + url: /core + - title: IoT App Store + description: Private app store for Linux and IoT + url: /internet-of-things/appstore + - title: Device management + description: Manage fleets of IoT devices + url: /internet-of-things/management + - title: Certified devices + description: Hardware/OS compatibility + url: /certified/devices + - title: Ubuntu Frame + description: Embedded graphical displays + url: https://mir-server.io/ubuntu-frame + - title: ROS ESM + description: Expanded security for robots + url: /robotics/ros-esm + - title: Real-time Ubuntu + description: Low-latency kernel + url: /real-time + - title: IoT Professional Services + description: Bring IoT devices to market + url: /core/services + + secondary_links: + - title: Quick links + links: + - title: Guide to IoT lifecycle management + url: /engage/a-practical-guide-to-iot-lifecycle-management + - title: Canonical joins the CSA + url: /blog/canonical-joins-the-connectivity-standards-alliance + - title: Pick the OS for your robots + url: /engage/robot-operating-system-choice + - title: "Embedded Linux: make or buy?" + url: /engage/embedded-linux-make-or-buy + - title: Try Ubuntu Core on Raspberry Pi + url: /download/raspberry-pi-core + - title: Industry 4.0 webinar + url: /engage/bridge-the-IT-OT-gap-Industry4 + +use_case: + primary_links: + - title: By solution + links: + - title: AI/ML + description: MLOps tools + url: /ai + - title: Compliance + description: Certifications and hardening + url: /security/certifications + - title: Confidential computing + description: Protect your data in use + url: /confidential-computing + - title: Containers + description: Ubuntu for container operations + url: /containers + - title: Data fabric + description: Deploy and operate databases + url: https://canonical.com/data + - title: Edge computing + description: Micro clouds + url: /edge-computing + - title: HPC and supercomputing + description: High-performance computing + url: /hpc + - title: IoT + description: Internet of Things + url: /internet-of-things + - title: Managed applications + description: Fully managed open source + url: /managed/apps + - title: Managed infrastructure + description: Managed IT services + url: /managed + - title: Observability + description: Monitoring tools + url: /observability + - title: Private cloud and data centre + description: OpenStack implementation + url: /openstack/consulting + - title: Public cloud + description: Ubuntu across public clouds + url: /cloud/public-cloud + - title: Security + description: Enterprise-grade security + url: /security + - title: Signage + description: Smart displays and kiosks + url: /internet-of-things/smart-displays + + highlighted_secondary_links: + - title: By industry + links: + - title: Automotive + description: Smarter vehicles and factories + url: /automotive + - title: Financial services + description: Innovate with open source + url: /financial-services + - title: Government + description: Public sector and federal + url: /gov + - title: Industrial + description: The factory of the future + url: /industrial + - title: Robotics + description: Build robots with Ubuntu and ROS + url: /robotics + - title: Telco + description: Carrier-grade solutions + url: /telco + +support: + side_nav_sections: + - title: Enterprise + primary_links: + - links: + - title: Enterprise-grade support + description: 24/7 support for the full-stack + url: /support + - title: Ubuntu Pro + description: Security & compliance subscription + url: /pro + - title: Ubuntu Pro for Azure + description: Microsoft Azure cloud support + url: /azure/pro + - title: Ubuntu Pro for AWS + description: Amazon Web Services support + url: /aws/pro + - title: Ubuntu Pro for GCP + description: Google Cloud support + url: /gcp/pro + - title: Managed apps + description: Fully managed open source + url: /managed/apps + - title: Managed infrastructure + description: Managed IT services + url: /managed + + secondary_links: + - title: Quick links + links: + - title: Upgrade from 18.04 + url: /18-04 + - title: Why Ubuntu Pro? + url: /pro/why-pro + - title: Expanded Security Maintenance + url: /security/esm + - title: Pricing + url: /pricing/pro + - title: Open infrastructure consulting + url: /pricing/consulting + + - title: Resources + primary_links: + - links: + - title: Read documentation + description: Official Ubuntu Documentation + url: https://help.ubuntu.com/ + - title: Read the blogs + description: Blogs from Canonical + url: /blog + - title: Case studies, whitepapers & webinars + description: Resource hub + url: /engage + - title: Tutorials + description: Guides for development + url: /tutorials + - title: Ask Ubuntu + description: Q&A site for users and developers + url: https://askubuntu.com + - title: Certified hardware + description: Ubuntu hardware you can trust + url: /certified + - title: About Ubuntu + description: Introduction to the OS + url: /about + - title: Ubuntu forums + description: Discuss Ubuntu with other users + url: https://ubuntuforums.org/ + + secondary_links: + - title: Quick links + links: + - title: Webinars + url: /engage?resource=webinar + - title: Case studies + url: /engage?resource=case+study + - title: Whitepapers + url: /engage?resource=whitepaper + - title: Become an Ubuntu-certified engineer + url: /credentials + - title: Videos + url: https://www.youtube.com/c/UbuntuOS + +community: + side_nav_sections: + - title: Learning resources + primary_links: + - links: + - title: Tutorials + description: Guides for development + url: /tutorials/ + - title: Documentation + description: Official Ubuntu documentation + url: https://help.ubuntu.com/ + - title: Ubuntu on Air + description: Community-focused videos + url: https://www.youtube.com/ubuntuonair + - title: Discourse + description: Coordinating the Ubuntu project + url: https://discourse.ubuntu.com/ + - title: Ask Ubuntu + description: Q&A for users and developers + url: https://askubuntu.com/ + - title: Forums + description: Discuss Ubuntu with other users + url: https://ubuntuforums.org/ + - title: Ubuntu Masters + description: Get inspired by IT practitioners + url: /masters-conference + + secondary_links: + - title: Quick links + links: + - title: Upgrade Ubuntu + url: /tutorials/upgrading-ubuntu-desktop + - title: Official Ubuntu documentation + url: https://help.ubuntu.com/ + - title: Install guide + url: /tutorials/install-ubuntu-desktop + - title: How to write a tutorial + url: /tutorials/tutorial-guidelines + + - title: Forums + primary_links: + - links: + - title: Ask Ubuntu + description: Q&A for users and developers + url: https://askubuntu.com/ + - title: Forums + description: Discuss Ubuntu with other users + url: https://ubuntuforums.org/ + - title: Chat on IRC + description: Speak to Ubuntu users + url: https://help.ubuntu.com/community/InternetRelayChat + - title: Discourse + description: Coordinating the Ubuntu project + url: https://discourse.ubuntu.com/ + + secondary_links: + - title: Quick links + links: + - title: "Forum: New to Ubuntu" + url: https://ubuntuforums.org/forumdisplay.php?f=125 + - title: "Forum: Ubuntu Official Flavours Support" + url: https://ubuntuforums.org/forumdisplay.php?f=327 + - title: "Forum: Ubuntu, Linux and OS Chat" + url: https://ubuntuforums.org/forumdisplay.php?f=434 + - title: Ubuntu Community on Discourse + url: https://discourse.ubuntu.com/c/community/78 + + - title: Contribute to Ubuntu + primary_links: + - links: + - title: Translate and localise + description: Translate into your language + url: /community/contribute/translation-localisation + - title: QA and testing + description: Test releases and features + url: /community/contribute/qa-testing + - title: Report bugs + description: Report bugs on Launchpad + url: https://help.ubuntu.com/community/ReportingBugs + - title: Software development + description: Create and maintain software + url: /community/contribute/software-development + - title: Improve documentation + description: Help write the docs + url: https://wiki.ubuntu.com/DocumentationTeam/SystemDocumentation + - title: Art and design + description: Contribute your artwork + url: /community/contribute/art-design + - title: Donate + description: Donate to the Ubuntu project + url: /download/desktop/thank-you + - title: Local community teams + description: Join a community team + url: /community/locos/join + + - title: Mission and governance + primary_links: + - links: + - title: Our mission + description: What we stand for + url: /community/mission + - title: Ubuntu code of conduct + description: Expectations of participants + url: /community/code-of-conduct + - title: Diversity policy + description: Our stance on diversity + url: /community/diversity + - title: Project governance + description: How the project is governed + url: /community/governance + - title: Community Council + description: Governing body for the project + url: https://discourse.ubuntu.com/t/what-is-the-ubuntu-community-council/706 + - title: Teams + description: The teams in the project + url: /community/governance/teams + - title: Local community teams + description: Join a community team + url: /community/locos/join + + secondary_links: + - title: Quick links + links: + - title: Community Council agenda + url: https://discourse.ubuntu.com/t/community-council-meeting-agendas-schedule/708 + - title: Ubuntu Technical Board + url: https://wiki.ubuntu.com/TechnicalBoard + - title: Technical Board agenda + url: https://wiki.ubuntu.com/TechnicalBoardAgenda + + - title: Keep up to date + primary_links: + - links: + - title: Read the blogs + description: Ubuntu blogs + url: /blog + - title: Weekly Newsletter + description: Sign up for our newsletter + url: https://wiki.ubuntu.com/UbuntuWeeklyNewsletter + - title: Mailing lists + description: All the public mailing lists + url: https://lists.ubuntu.com/ + - title: Ubuntu Planet + description: Blogs by Ubuntu members + url: http://planet.ubuntu.com/ + - title: Teams + description: The teams in the project + url: https://wiki.ubuntu.com/Teams + + secondary_links: + - title: Quick links + links: + - title: Become a blog contributor + url: https://community.ubuntu.com/t/call-for-contributors-to-the-ubuntu-weekly-newsletter/1542 + - title: Facebook + url: https://www.facebook.com/ubuntulinux + - title: Twitter + url: https://twitter.com/ubuntu + - title: YouTube + url: https://www.youtube.com/c/UbuntuOS + - title: GitHub + url: https://github.com/ubuntu + +get_ubuntu: + side_nav_sections: + - title: Desktop + primary_links: + - links: + - title: Ubuntu Desktop + description: Free and reliable desktop OS + url: /download/desktop + secondary_cta_title: Download 22.04 LTS + secondary_cta_url: /download/desktop/thank-you?version=22.04.3&architecture=amd64 + - title: Ubuntu flavours + description: Variations of Ubuntu OS + url: /download/flavours + - title: Ubuntu-ready PC and laptops + description: Certified hardware + url: /certified + secondary_links: + - title: Quick links + links: + - title: Upgrade Ubuntu Desktop + url: /tutorials/upgrading-ubuntu-desktop + - title: 22.04 desktop guide + url: https://help.ubuntu.com/lts/ubuntu-help/index.html + - title: 20.04 desktop guide + url: https://help.ubuntu.com/20.04/ubuntu-help/index.html + - title: Installation tutorial + url: /tutorials/install-ubuntu-desktop + - title: Try before installing + url: /tutorials/try-ubuntu-before-you-install + - title: Case studies, whitepapers & webinars + url: /engage + - title: All Ubuntu tutorials + url: /tutorials + - title: Server + primary_links: + - links: + - title: Ubuntu Server + description: Scalable Linux for the cloud + url: /server + secondary_cta_title: Get Ubuntu Server + secondary_cta_url: /download/server + - title: MAAS + description: Bare metal provisioning + url: https://maas.io/ + - title: Certified hardware + description: Ubuntu hardware you can trust + url: /certified/servers + - title: Public clouds + description: AWS, Azure and Google Cloud + url: /cloud/public-cloud + - title: Multipass + description: VMs for Windows, macOS & Linux + url: https://multipass.run/ + secondary_links: + - title: Quick links + links: + - title: Server guide + url: /server/docs + - title: Installation tutorial + url: /tutorials/install-ubuntu-server + - title: ARM + url: /download/server/arm + - title: IBM Power + url: /download/server/power + - title: s390x + url: /download/server/s390x + - title: RISC-V + url: /download/risc-v + - title: Raspberry Pi + primary_links: + - links: + - title: Ubuntu for Raspberry Pi + description: Single board computer + url: /raspberry-pi + secondary_cta_title: Get Ubuntu for Raspberry Pi + secondary_cta_url: /download/raspberry-pi + - title: Ubuntu Core for Raspberry Pi + description: Embedded OS + url: /download/raspberry-pi-core + - title: Ubuntu-ready Pi devices + description: Certified hardware + url: /certified?q=&limit=20&vendor=Raspberry+Pi+Foundation + secondary_links: + - title: Quick links + links: + - title: Desktop installation tutorial + url: /tutorials/install-ubuntu-desktop + - title: Server installation tutorial + url: /tutorials/how-to-install-ubuntu-on-your-raspberry-pi + - title: Core installation tutorial + url: /download/raspberry-pi-core + - title: Introduction video + url: /engage/raspberry-pi-livestream + - title: Build a Kubernetes cluster on Raspberry Pi + url: /tutorials/how-to-kubernetes-cluster-on-raspberry-pi + - title: Ubuntu for IoT + primary_links: + - links: + - title: Ubuntu Core + description: OS designed for IoT + url: /core + - title: Internet of Things + description: Ubuntu for IoT + url: /internet-of-things + - title: Smart things as a service + description: Deliver IoT devices to market + url: /core/services + - title: Ubuntu-ready devices + description: Certified hardware + url: /certified?q=&limit=20&category=Device&category=SoC + - title: Embedded Linux + description: Developers, apps and hardware + url: /embedded + - title: Real-time Ubuntu + description: Low-latency kernel + url: /real-time + secondary_links: + - title: Quick links + links: + - title: Ubuntu for Raspberry Pi + url: /raspberry-pi + - title: Intel IoT platforms + url: /download/iot/intel-iotg + - title: Intel NUC + url: /download/intel-nuc + - title: KVM + url: /download/kvm + - title: Qualcomm Dragonboard 410c + url: /download/qualcomm-dragonboard-410c + - title: Intel IEI TANK 870 + url: /download/intel-iei-tank-870 + - title: AMD-Xilinx Evaluation kits & SOMs + url: /download/xilinx + - title: Mediatek Genio + url: /download/mediatek-genio + section_footer: + cta_title: Get Ubuntu for IoT + cta_url: /download/iot + - title: Develop on Ubuntu + primary_links: + - links: + - title: Deb, snap and charm packages + description: Deliver Ubuntu software + url: /about/packages + - title: Publish apps + description: For users, servers and devices + url: https://snapcraft.io/ + - title: Cloud packages + description: Deploy and operate cloud software + url: https://charmhub.io/ + - title: AI and machine learning + description: Develop AI models + url: /ai + - title: Ubuntu certification for engineers + description: Professional endorsement + url: /credentials + secondary_links: + - title: Quick links + links: + - title: Ubuntu on public clouds + url: /cloud/public-cloud + - title: Minimal Ubuntu for containers + url: /blog/minimal-ubuntu-released + - title: Customise cloud instances + url: https://cloud-init.io/ + - title: Model driven operations + url: /model-driven-operations + - title: Juju for standardised operations + url: https://jaas.ai/ + - title: Charmed Kubernetes + url: /kubernetes + - title: MicroK8s - single node k8s + url: https://microk8s.io/ + - title: MAAS - fast server provisioning + url: https://maas.io/ + section_footer: + cta_title: Develop on Ubuntu + cta_url: /desktop/developers + - title: Windows & macOS + primary_links: + - links: + - title: WSL + description: Windows Subsystem for Linux + url: /wsl + - title: Multipass + description: Ubuntu VMs for Windows and macOS + url: https://multipass.run/ + secondary_links: + - title: Quick links + links: + - title: Install Ubuntu on WSL for Windows 11 + url: /tutorials/install-ubuntu-on-wsl2-on-windows-11-with-gui-support + - title: Install Ubuntu on WSL for Windows 10 + url: /tutorials/install-ubuntu-on-wsl2-on-windows-10 diff --git a/navigation.yaml b/navigation.yaml index 153fd31b26c..4d8488ca6af 100644 --- a/navigation.yaml +++ b/navigation.yaml @@ -80,7 +80,7 @@ managedapps: path: /observability/managed openstack: - title: OpenStack + title: Canonical OpenStack path: /openstack children: @@ -122,7 +122,7 @@ financial-services: path: /financial-services/resources ceph: - title: Ceph + title: Canonical Ceph path: /ceph children: @@ -158,7 +158,7 @@ cloud: path: /cloud/public-cloud server: - title: Server + title: Ubuntu Server path: /server children: @@ -220,7 +220,7 @@ ai: path: /ai/roadshow kubernetes: - title: Kubernetes + title: Canonical Kubernetes path: /kubernetes children: @@ -264,7 +264,7 @@ blog: path: /blog/upcoming desktop: - title: Desktop + title: Ubuntu Desktop path: /desktop children: @@ -282,7 +282,7 @@ desktop: path: /desktop/flavours core: - title: Core + title: Ubuntu Core path: /core children: @@ -330,7 +330,7 @@ support: path: https://discourse.ubuntu.com/c/ubuntu-pro pro: - title: Pro + title: Ubuntu Pro path: /pro children: @@ -600,7 +600,7 @@ telco: path: /telco/magma certification: - title: Hardware + title: Ubuntu Certified path: /certified children: diff --git a/package.json b/package.json index 7596a29f544..37987c95e71 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ }, "dependencies": { "@canonical/cookie-policy": "3.5.0", - "@canonical/global-nav": "^2.7.0", + "@canonical/global-nav": "3.6.2", "@canonical/latest-news": "1.5.0", "@canonical/react-components": "^0.38.0", "@reduxjs/toolkit": "1.7.1", diff --git a/requirements.txt b/requirements.txt index 09266c2cbf6..b60f3cb4dc1 100644 --- a/requirements.txt +++ b/requirements.txt @@ -28,3 +28,6 @@ google-cloud-datastore==2.16.1 django-openid-auth==0.17 time-machine==2.9.0 filelock==3.12.0 +bleach==6.0.0 +numpy==1.24.4 +python-slugify==8.0.1 diff --git a/static/js/src/core.js b/static/js/src/core.js index 7701c7b5755..1766ba5bb7b 100755 --- a/static/js/src/core.js +++ b/static/js/src/core.js @@ -1,12 +1,11 @@ -import { createNav } from "@canonical/global-nav"; import { cookiePolicy } from "@canonical/cookie-policy"; - -// Initalise the global navigation. -createNav({ - showLogins: false, - hiring: "https://canonical.com/careers/start", - maxWidth: "80rem", -}); +import { createNav } from "@canonical/global-nav"; // Initalise the cookie policy notification. cookiePolicy(); + +createNav({ + breakpoint: 1150, + mobileContainerSelector: ".global-nav-mobile", + desktopContainerSelector: ".global-nav-desktop", +}); diff --git a/static/js/src/main.js b/static/js/src/main.js index 8535cba5df2..e9ff55e6ae0 100644 --- a/static/js/src/main.js +++ b/static/js/src/main.js @@ -7,7 +7,7 @@ import "./accordion.js"; import "./dynamic-forms.js"; import "./static-forms.js"; import "./core.js"; -import "./navigation.js"; import "./mobile-footer-navigation.js"; import "./smart-quotes.js"; import "./intlTelInput.js"; +import "./tabbed-content.js"; diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js index 05e9fe75966..71e046aadae 100644 --- a/static/js/src/navigation.js +++ b/static/js/src/navigation.js @@ -1,92 +1,811 @@ -var navDropdowns = [].slice.call( - document.querySelectorAll(".p-navigation__dropdown-link") +const ANIMATION_DELAY = 200; +const MOBILE_VIEW_BREAKPOINT = 1281; +const dropdownWindow = document.querySelector(".dropdown-window"); +const dropdownWindowOverlay = document.querySelector( + ".dropdown-window-overlay" +); +const searchOverlay = document.querySelector(".p-navigation__search-overlay"); +const secondaryNav = document.querySelector(".p-navigation.is-secondary"); +const navigation = document.querySelector(".p-navigation--sliding"); +const topLevelNavDropdowns = Array.from( + document.querySelectorAll( + ".p-navigation__item--dropdown-toggle:not(.global-nav__dropdown-toggle):not(.js-back)" + ) +); +const nav = navigation.querySelector(".js-show-nav"); +const menuButtons = document.querySelectorAll(".js-menu-button"); +let dropdowns = []; +const mainList = document.querySelector( + "nav.p-navigation__nav > .p-navigation__items" ); -var dropdownWindow = document.querySelector(".dropdown-window"); -var dropdownWindowOverlay = document.querySelector(".dropdown-window-overlay"); -navDropdowns.forEach(function (dropdown) { - dropdown.addEventListener("click", function (event) { - event.preventDefault(); +navigation.classList.add("js-enabled"); +nav.classList.remove("u-hide"); - var clickedDropdown = this; +//Helper functions - dropdownWindow.classList.remove("slide-animation"); - dropdownWindowOverlay.classList.remove("fade-animation"); +function toggleIsActiveState(element, active) { + element.classList.toggle("is-active", active); +} - navDropdowns.forEach(function (dropdown) { - var dropdownContent = document.getElementById(dropdown.id + "-content"); +function addClassesToElements(elements, classes) { + elements.forEach((element, index) => element.classList.add(classes[index])); +} - if (dropdown === clickedDropdown) { - if (dropdown.classList.contains("is-selected")) { - closeMenu(dropdown, dropdownContent); - } else { - dropdown.classList.add("is-selected"); - dropdownContent.classList.remove("u-hide"); +function removeClassesFromElements(elements, classes) { + elements.forEach((element, index) => + element.classList.remove(classes[index]) + ); +} - if (window.history.pushState) { - window.history.pushState(null, null, "#" + dropdown.id); - } - } - } else { - dropdown.classList.remove("is-selected"); - dropdownContent.classList.add("u-hide"); - } - }); +function getAllElements(queryString) { + const lists = [...dropdowns, mainList]; + let listItems = []; + lists.forEach(function (list) { + const items = list.querySelectorAll(queryString); + listItems = [...items, ...listItems]; }); + return listItems; +} + +// Attach initial event listeners +mainList.addEventListener("click", function (e) { + e.preventDefault(); + let target = e.target; + if (target.classList.contains("p-navigation__link")) { + if (target.classList.contains("js-back")) { + goBackOneLevel(e, target); + } else { + handleDropdownClick(e.target.parentNode); + } + } else if ( + target.classList.contains("p-navigation__dropdown-item") || + target.classList.contains("p-navigation__secondary-link") || + target.classList.contains("p-button--positive") + ) { + if (target.tagName === "A" || target.firstChild.tagName === "A") { + window.location.href = target.href; + } + } +}); + +window.addEventListener("load", closeAll); +let wasBelowSpecificWidth = window.innerWidth < MOBILE_VIEW_BREAKPOINT; +window.addEventListener("resize", function () { + // Only closeAll if the resize event crosses the MOBILE_VIEW_BREAKPOINT threshold + const currViewportWidth = window.innerWidth; + const isBelowSpecificWidth = currViewportWidth < MOBILE_VIEW_BREAKPOINT; + if (wasBelowSpecificWidth !== isBelowSpecificWidth) { + closeAll(); + } + wasBelowSpecificWidth = isBelowSpecificWidth; +}); + +dropdownWindowOverlay?.addEventListener("click", () => { + if (dropdownWindow.classList.contains("is-active")) { + closeAll(); + } +}); + +secondaryNav + ?.querySelector(".p-navigation__toggle--open") + ?.addEventListener("click", toggleSecondaryMobileNavDropdown); + +document.addEventListener("global-nav-opened", () => { + addClassesToElements( + [dropdownWindow, dropdownWindowOverlay], + ["slide-animation", "fade-animation"] + ); + topLevelNavDropdowns.forEach((dropdown) => updateNavMenu(dropdown, false)); }); -// Close the menu if browser back button is clicked -window.addEventListener("hashchange", function () { - navDropdowns.forEach(function (dropdown) { - const dropdownContent = document.getElementById(dropdown.id + "-content"); +// Event handler functions + +function toggleSecondaryMobileNavDropdown(e) { + const mobileNavDropdown = secondaryNav.querySelector(".p-navigation__nav"); + const mobileNavDropdownToggle = secondaryNav.querySelector( + ".p-navigation__toggle--open" + ); + let isDropdownOpen; + if (e && e.type == "click") { + e.preventDefault(); + isDropdownOpen = mobileNavDropdown.classList.contains("is-open"); + } else { + isDropdownOpen = true; + } + mobileNavDropdown?.classList.toggle("is-open", !isDropdownOpen); + mobileNavDropdownToggle?.classList.toggle("is-open", !isDropdownOpen); +} + +function handleDropdownClick(clickedDropdown) { + const isActive = clickedDropdown.classList.contains("is-active"); + updateNavMenu(clickedDropdown, !isActive); + setTabIndex(clickedDropdown.querySelector("ul.p-navigation__dropdown")); +} - if (dropdown.classList.contains("is-selected")) { - closeMenu(dropdown, dropdownContent); +function updateUrlHash(id, open) { + if (id && open) { + window.history.pushState( + null, + document.title, + window.location.pathname + window.location.search + `#${id}` + ); + } else { + window.history.pushState( + null, + document.title, + window.location.pathname + window.location.search + ); + } +} + +function goBackOneLevel(e, backButton) { + e.preventDefault(); + const target = backButton.parentNode.parentNode; + target.setAttribute("aria-hidden", true); + toggleIsActiveState(backButton.closest(".is-active"), false); + toggleIsActiveState(backButton.closest(".is-active"), false); + setTabIndex(target.parentNode.parentNode); + + if (target.parentNode.getAttribute("role") == "menuitem") { + updateNavMenu(target.parentNode, false); + } + updateWindowHeight(); +} + +function escKeyPressHandler(e) { + if (e.key === "Escape") { + closeAll(); + } +} + +// Attaches to tab items in desktop dropdown and updates them, +// also applies the same update to the mobile dropdown. +// Is attached via HTML onclick attribute. +function toggleSection(e) { + e.preventDefault(); + const targetId = e.target.getAttribute("aria-controls"); + const el = document.querySelector(`.dropdown-content-desktop #${targetId}`); + const currTabWindow = el.closest(".dropdown-window__content-container"); + const tabLinks = currTabWindow.querySelectorAll(".p-side-navigation__link"); + tabLinks.forEach((tabLink) => { + const tabId = tabLink.getAttribute("aria-controls"); + const tabWindow = dropdownWindow.querySelector(`#${tabId}`); + if (tabId === targetId) { + el.removeAttribute("hidden"); + tabLink.setAttribute("aria-selected", true); + tabLink.classList.add("is-active"); + } else { + tabWindow.setAttribute("hidden", true); + tabLink.setAttribute("aria-selected", false); + tabLink.classList.remove("is-active"); } }); -}); -if (dropdownWindowOverlay) { - dropdownWindowOverlay.addEventListener("click", function () { - navDropdowns.forEach(function (dropdown) { - var dropdownContent = document.getElementById(dropdown.id + "-content"); + const firstLink = el.querySelector("a"); + setTimeout(function () { + toggleIsActiveState(el, true); + firstLink.focus(); + }, 1); +} + +/** + Function to update the state of mobile and desktop dropdowns + @param {HTMLNode} dropdown
  • +*/ +function updateNavMenu(dropdown, show) { + let dropdownContent = document.getElementById(dropdown.id + "-content"); + let dropdownContentMobile = document.getElementById( + dropdown.id + "-content-mobile" + ); + let isAccountDropdown = dropdown.classList.contains("js-account"); + + if (dropdownContent) { + updateUrlHash(dropdown.id, show); + } - if (dropdown.classList.contains("is-selected")) { - closeMenu(dropdown, dropdownContent); + // This is needed as the onhover/onfocus effect does not work with touch screens, + // but will trigger calling the navigation contents. We then need to manually + // open the dropdown. + function handleMutation(mutationsList, observer) { + mutationsList.forEach((mutation) => { + if (mutation.type === "childList") { + handleDropdownClick(mutation.target); + observer.disconnect(); } }); + } + + if ((dropdownContent && dropdownContentMobile) || isAccountDropdown) { + if (!show) updateDropdownStates(dropdown, show, ANIMATION_DELAY); + else updateDropdownStates(dropdown, show); + showDesktopDropdown(show); + } else if (dropdownContentMobile) { + updateMobileDropdownState(dropdown, show); + updateWindowHeight(); + } else { + const observer = new MutationObserver(handleMutation); + const observerConfig = { childList: true, subtree: true }; + observer.observe(dropdown, observerConfig); + } +} + +function updateDropdownStates(dropdown, show, delay) { + let isNested = dropdown.parentNode.classList.contains( + "p-navigation__dropdown" + ); + if (!isNested && show) { + topLevelNavDropdowns + .filter((filteredDropdown) => filteredDropdown !== dropdown) + .forEach((filteredDropdown) => { + updateDesktopDropdownStates(filteredDropdown, !show, delay); + updateMobileDropdownState(filteredDropdown, !show); + }); + } + updateDesktopDropdownStates(dropdown, show, delay); + updateMobileDropdownState(dropdown, show, isNested); + updateWindowHeight(); +} + +function updateDesktopDropdownStates(dropdown, show, delay) { + let dropdownContent = document.getElementById(dropdown.id + "-content"); + toggleIsActiveState(dropdown, show); + if (dropdownContent) { + toggleDropdownContentVisibility(dropdownContent, show, delay); + } + if (dropdown.id === "all-canonical") { + toggleGlobalNavVisibility(dropdownContent, show, delay); + } +} + +function updateMobileDropdownState(dropdown, show, isNested) { + let dropdownContentMobile = document.getElementById( + dropdown.id + "-content-mobile" + ); + if (dropdownContentMobile) { + dropdownContentMobile.setAttribute("aria-hidden", !show); + toggleIsActiveState(dropdownContentMobile.parentNode.parentNode, show); + toggleIsActiveState(dropdownContentMobile.parentNode, show); + } +} + +// Functions to handle visual states + +function toggleDropdownContentVisibility(contentElement, show, delay = 0) { + if (delay > 0 && !show) { + setTimeout(() => contentElement.classList.toggle("u-hide", !show), delay); + } else { + contentElement.classList.toggle("u-hide", !show); + } +} + +function showDesktopDropdown(show) { + dropdownWindow.classList.toggle("slide-animation", !show); + dropdownWindowOverlay.classList.toggle("fade-animation", !show); + toggleIsActiveState(dropdownWindow, show); + addKeyboardEvents(); +} + +function toggleGlobalNavVisibility(dropdown, show, delay) { + const globalNavContent = dropdown.querySelector(".global-nav-dropdown"); + const globalNavInnerContent = dropdown.querySelector( + ".global-nav-dropdown__content" + ); + if (show) { + globalNavInnerContent.classList.remove("u-hide"); + globalNavInnerContent.setAttribute("aria-hidden", !show); + setTimeout(() => { + globalNavContent.classList.add("show-content"); + }, delay); + } else { + globalNavContent.classList.remove("show-content"); + globalNavInnerContent.setAttribute("aria-hidden", show); + setTimeout(() => { + globalNavInnerContent.classList.add("u-hide"); + }, delay); + } +} + +function getUrlBarHeight(element) { + const visibleHeight = window.innerHeight; + const fullHeight = document.querySelector("#control-height").clientHeight; + const barHeight = fullHeight - visibleHeight; + return barHeight; +} + +// Handles mobile navigation height taking up veiwport space +const navEle = document.querySelector(".p-navigation__nav"); +const originalMaxHeight = navEle.style.maxHeight; +function updateWindowHeight() { + navEle.style.maxHeight = originalMaxHeight; + const isInDropdownList = mainList.classList.contains("is-active"); + if (isInDropdownList) { + const newHeight = navEle.clientHeight - getUrlBarHeight() - 20 + "px"; + navEle.style.maxHeight = newHeight; + } else { + navEle.style.maxHeight = originalMaxHeight; + } +} + +function makeRequest(url, callback) { + const req = new XMLHttpRequest(); + req.open("GET", url); + req.addEventListener("load", callback); + req.send(); +} + +function convertHTMLToNode(responseText, selector) { + const tempElement = document.createElement("div"); + tempElement.innerHTML = responseText; + return tempElement.querySelector(selector); +} + +function deactivateActiveCTA(element) { + toggleIsActiveState(element, false); +} + +/** + Fetches the contents of indervidual, top level, navigation items + @param {String} url the path to fetch the subsection + @param {String} id the id of the target subsection +*/ +const fetchedMap = {}; +function fetchDropdown(url, id) { + const key = `${url}-${id}`; + if (fetchedMap[key] === true) return; + fetchedMap[key] = true; + + const desktopContainer = document.getElementById(id + "-content"); + const mobileContainer = document.getElementById(id); + + if (desktopContainer.innerHTML === "") { + makeRequest(url, function () { + const desktopContent = convertHTMLToNode( + this.responseText, + ".desktop-dropdown-content" + ); + desktopContainer.appendChild(desktopContent); + + const mobileContent = convertHTMLToNode( + this.responseText, + ".dropdown-content-mobile" + ); + mobileContainer.appendChild(mobileContent); + + const targetDropdowns = mobileContent.querySelectorAll( + "ul.p-navigation__dropdown" + ); + dropdowns = [...dropdowns, ...targetDropdowns]; + + const activeCTAs = mobileContainer.querySelectorAll("a.is-active"); + activeCTAs.forEach(deactivateActiveCTA); + }); + } +} + +/** + Updates the tab index of the target group to 0 + @param {HTMLNode} target
      + or
        +*/ +function setTabIndex(target) { + const lists = [...dropdowns, mainList]; + lists.forEach((list) => { + const elements = list.querySelectorAll("ul > li > a, ul > li > button"); + elements.forEach(function (element) { + element.setAttribute("tabindex", "-1"); + }); + }); + + const targetLiItems = target.querySelectorAll("li"); + targetLiItems.forEach((element, index) => { + if ( + element.parentNode === target || + element.parentNode.parentNode === target + ) { + element.children[0].setAttribute("tabindex", "0"); + } + }); + + // If on desktop, update the nav items tab index. + // Keep the active nav item at tabindex 0 + // When none are active, set them all to tabindex 0 + if (window.innerWidth > MOBILE_VIEW_BREAKPOINT) { + const currActiveNavItem = navigation.querySelector( + ".p-navigation__item--dropdown-toggle.is-active" + ); + if (currActiveNavItem) { + currActiveNavItem.children[0].setAttribute("tabindex", "0"); + } else { + mainList.querySelectorAll(":scope > li").forEach((element) => { + element.children[0].setAttribute("tabindex", "0"); + }); + } + } +} + +/** + Setup functions for keyboard navigation and trapping +*/ +function addKeyboardEvents() { + document.addEventListener("keydown", keyboardNavigationHandler); +} + +function removeKeyboardEvents() { + document.removeEventListener("keydown", keyboardNavigationHandler); +} + +function keyboardNavigationHandler(e) { + if (e.key === "Escape") { + handleEscapeKey(e); + } else if (e.shiftKey && e.key === "Tab") { + handleShiftTabKey(e); + } else if (e.key === "Tab") { + handleTabKey(e); + } +} + +function handleEscapeKey(e) { + // If '.dropdown-window__sidenav-content' exists we are in the + // dropdown window so we want to move up to the side-tabs + const targetTabId = e.target.closest( + ".dropdown-window__sidenav-content.is-active" + )?.id; + if (targetTabId) { + const targetTab = document.querySelector( + `.p-side-navigation__link[aria-controls="${targetTabId}"]` + ); + targetTab?.focus(); + return; + } + + // Else check if we are in the side-tabs so want to move up to the nav bar items + const targetDropdownToggleId = e.target.closest(".dropdown-content-desktop") + ?.id; + if (targetDropdownToggleId) { + const targetNavItem = document.querySelector( + `.p-navigation__link[aria-controls="${targetDropdownToggleId}"]` + ); + targetNavItem?.focus(); + closeAll(); + } +} + +function handleTabKey(e) { + // Find which dropdown container we are in + const dropdownPanel = getContainingDropdown(e.target); + const mobileDropdownPanel = getMobileContainingDropdown(e.target); + if (mobileDropdownPanel && isLastMobileLinkFocused(e, mobileDropdownPanel)) { + e.preventDefault(); + const canonicalLogo = navigation.querySelector( + ".p-navigation__tagged-logo > a" + ); + canonicalLogo.focus(); + } else if (dropdownPanel && isLastLinkFocused(e, dropdownPanel)) { + const currDropdownToggle = mainList.querySelector( + ":scope > .p-navigation__item--dropdown-toggle.is-active" + ); + const nextDropdownToggleLink = + currDropdownToggle.nextElementSibling.children[0]; + closeAll(); + e.preventDefault(); + nextDropdownToggleLink.focus(); + } +} + +function handleShiftTabKey(e) { + const dropdownPanel = getContainingDropdown(e.target); + if ( + isFirstLinkFocused(e, dropdownPanel) && + tabPanelExists(e.target) && + !isInTabPanel(e.target) + ) { + const parentContainer = dropdownPanel.closest(".dropdown-window__content"); + const targetTab = parentContainer.querySelector( + ".p-side-navigation__item .p-side-navigation__link.is-active" + ); + if (targetTab) { + e.preventDefault(); + targetTab?.focus(); + } + } +} + +function isLastLinkFocused(e, dropdownPanel) { + const listOfLinks = dropdownPanel?.querySelectorAll("a"); + if (listOfLinks?.length > 0) { + const lastLink = Array.from(listOfLinks).pop(); + return e.target === lastLink; + } +} + +function isLastMobileLinkFocused(e, dropdownPanel) { + // Find what level of the navigation we are in, 'menuItems' being the top level + const listOfMenuItems = dropdownPanel?.querySelectorAll( + "li[role='menuitem']" + ); + const listOfLinks = Array.from( + dropdownPanel?.querySelectorAll(":scope > li") + ); + if (listOfMenuItems?.length > 0) { + const lastLink = Array.from(listOfMenuItems).pop(); + return e.target === lastLink.firstElementChild; + } else if (listOfLinks?.length > 0) { + // Sometimes there is a secondary list of links, so we need to add those to the list + appendSecondaryListItems(dropdownPanel, listOfLinks); + const lastLink = Array.from(listOfLinks).pop(); + return e.target === lastLink.firstElementChild; + } +} + +function isFirstLinkFocused(e, dropdownPanel) { + const listOfLinks = dropdownPanel?.querySelectorAll("a"); + if (listOfLinks?.length > 0) { + const firstLink = Array.from(listOfLinks).shift(); + return e.target === firstLink; + } +} + +function getContainingDropdown(target) { + return ( + target.closest(".dropdown-window__sidenav-content") || + target.closest(".dropdown-window__content") || + target.closest(".global-nav-dropdown__content") + ); +} + +function getMobileContainingDropdown(target) { + return ( + target.closest(".p-navigation__dropdown") || + target.closest(".p-navigation__nav > .p-navigation__items") + ); +} + +function isInTabPanel(target) { + return target.closest(".dropdown-window__tab-panel") ? true : false; +} + +function tabPanelExists(target) { + const parentContainer = target.closest(".dropdown-window__content"); + return parentContainer?.querySelector(".dropdown-window__tab-panel") + ? true + : false; +} + +function appendSecondaryListItems(dropdownPanel, listOfLinks) { + const secondaryList = [ + ...(dropdownPanel + .querySelector(":scope > .p-navigation__secondary-links") + ?.querySelectorAll("li") || []), + ]; + if (secondaryList?.length > 0) { + secondaryList.forEach((listItem) => { + listOfLinks.push(listItem); + }); + } +} + +function toggleMenu(e) { + e.preventDefault(); + + if (navigation.classList.contains("has-menu-open")) { + closeAll(); + } else { + closeAll(); + openMenu(e); + } +} + +function closeNav() { + menuButtons.forEach((searchButton) => { + searchButton.removeAttribute("aria-pressed"); }); + closeMobileDropdown(); + closeDesktopDropdown(); + removeKeyboardEvents(); + document.removeEventListener("keyup", escKeyPressHandler); } -function closeMenu(dropdown) { - dropdown.classList.remove("is-selected"); - dropdownWindow.classList.add("slide-animation"); - dropdownWindowOverlay.classList.add("fade-animation"); - if (window.history.pushState) { - window.history.pushState(null, null, window.location.href.split("#")[0]); +function closeDesktopDropdown() { + showDesktopDropdown(false); + removeClassesFromElements([mainList], ["is-active"]); + [].slice.call(dropdownWindow.children).forEach((dropdownContent) => { + if (!dropdownContent.classList.contains("u-hide")) { + dropdownContent.classList.add("u-hide"); + } + }); +} + +function closeMobileDropdown() { + const dropdownElements = getAllElements( + ".p-navigation__item--dropdown-toggle" + ); + removeClassesFromElements( + [navigation, mainList], + ["has-menu-open", "is-active"] + ); + if (secondaryNav) { + toggleSecondaryMobileNavDropdown(); } + dropdownElements.forEach((dropdown) => { + if (dropdown.classList.contains("is-active")) { + toggleIsActiveState(dropdown, false); + const listItem = dropdown.querySelector("ul.p-navigation__dropdown"); + listItem.setAttribute("aria-hidden", true); + toggleIsActiveState(listItem, false); + } + }); } -if (window.location.hash) { - var tabId = window.location.hash.split("#")[1]; - var tab = document.getElementById(tabId); +function closeAll() { + closeSearch(); + closeNav(); + updateUrlHash(); + setTabIndex(mainList); + updateWindowHeight(); +} + +function openMenu(e) { + e.preventDefault(); + + menuButtons.forEach((menuButton) => { + menuButton.setAttribute("aria-pressed", true); + }); + + navigation.classList.add("has-menu-open"); + document.addEventListener("keyup", escKeyPressHandler); + setTabIndex(mainList); + addKeyboardEvents(); +} + +// Setup and functions for navigation search +function initNavigationSearch() { + searchButtons.forEach((searchButton) => + searchButton.addEventListener("click", toggleSearch) + ); - if (tab) { - setTimeout(function () { - document.getElementById(tabId).click(); - }, 0); + searchOverlay.addEventListener("click", toggleSearch); + + if (menuButtons) { + menuButtons.forEach((menuButton) => + menuButton.addEventListener("click", toggleMenu) + ); + } +} + +function toggleSearch(e) { + e.preventDefault(); + if (navigation.classList.contains("has-search-open")) { + closeAll(); + } else { + closeAll(); + openSearch(e); } } +function openSearch(e) { + e.preventDefault(); + const searchInput = navigation.querySelector(".p-search-box__input"); + Array.from(searchButtons).forEach((searchButton) => { + searchButton.setAttribute("aria-pressed", true); + }); + + addClassesToElements([navigation], ["has-search-open"]); + if (secondaryNav) { + addClassesToElements([secondaryNav], ["u-hide"]); + } + searchInput.focus(); + document.addEventListener("keyup", escKeyPressHandler); +} + +function closeSearch() { + searchButtons.forEach((searchButton) => { + searchButton.removeAttribute("aria-pressed"); + }); + + navigation.classList.remove("has-search-open"); + + if (secondaryNav) { + secondaryNav.classList.remove("u-hide"); + } + + document.removeEventListener("keyup", escKeyPressHandler); +} + +const searchButtons = document.querySelectorAll(".js-search-button"); +const overlay = document.querySelector(".p-navigation__search-overlay"); +initNavigationSearch(); + +// Setup global-nav +function setUpGlobalNav() { + const globalNavTab = document.querySelector(".global-nav-mobile"); + const globalNavMainTab = globalNavTab.querySelector("ul.p-navigation__items"); + + globalNavMainTab.classList.replace("u-hide", "dropdown-content-mobile"); + globalNavMainTab.classList.replace( + "p-navigation__items", + "p-navigation__dropdown" + ); + + globalNavMainTab.setAttribute("id", "all-canonical-content-mobile"); + + globalNavTab + .querySelectorAll(".p-navigation__dropdown") + .forEach((dropdown) => { + dropdown.setAttribute("aria-hidden", "true"); + const dropdownToggle = dropdown.closest( + ".p-navigation__item--dropdown-toggle" + ); + if (dropdownToggle.getAttribute("role") != "menuitem") { + const newDropdownId = `all-canonical-${dropdown.id}`; + dropdown.setAttribute("id", `${newDropdownId}-content-mobile`); + dropdownToggle.setAttribute("id", newDropdownId); + dropdownToggle + .querySelector("button.p-navigation__link") + .setAttribute("href", `#${newDropdownId}-content-mobile`); + } + const tempHTMLContainer = document.createElement("div"); + tempHTMLContainer.innerHTML = `
      • + +
        • `; + const backButton = tempHTMLContainer.firstChild.cloneNode(true); + dropdown.prepend(backButton); + }); +} +document.addEventListener("DOMContentLoaded", () => { + setUpGlobalNav(); +}); + +// Initiate login +var accountContainer = document.querySelector(".js-account"); +if (accountContainer) { + fetch("/account.json") + .then((response) => response.json()) + .then((data) => { + if (data.account === null) { + accountContainer.innerHTML = `Sign in`; + } else { + window.accountJSONRes = data.account; + accountContainer.innerHTML = ` + `; + } + }); +} + +// Add GA events + var origin = window.location.href; -addGANavEvents("#canonical-global-nav", "www.ubuntu.com-nav-global"); +addGANavEvents("#all-canonical-link", "www.ubuntu.com-nav-global"); addGANavEvents("#canonical-login", "www.ubuntu.com-nav-0-login"); -addGANavEvents("#enterprise-content", "www.ubuntu.com-nav-1-enterprise"); -addGANavEvents("#developer-content", "www.ubuntu.com-nav-1-developer"); -addGANavEvents("#community-content", "www.ubuntu.com-nav-1-community"); -addGANavEvents("#download-content", "www.ubuntu.com-nav-1-download"); -addGANavEvents(".p-navigation--secondary", "www.ubuntu.com-nav-2"); +addGANavEvents("#use-case", "www.ubuntu.com-nav-1-use-case"); +addGANavEvents("#support", "www.ubuntu.com-nav-1-support"); +addGANavEvents("#community", "www.ubuntu.com-nav-1-community"); +addGANavEvents("#get-ubuntu", "www.ubuntu.com-nav-1-get-ubuntu"); +addGANavEvents(".p-navigation.is-secondary", "www.ubuntu.com-nav-2"); addGANavEvents(".p-contextual-footer", "www.ubuntu.com-footer-contextual"); addGANavEvents(".p-footer__nav", "www.ubuntu.com-nav-footer-0"); addGANavEvents(".p-footer--secondary", "www.ubuntu.com-nav-footer-1"); @@ -189,157 +908,3 @@ function addUTMToForms() { } } } - -var accountContainer = document.querySelector(".js-account"); -var accountContainerSmall = document.querySelector(".js-account--small"); -if (accountContainer && accountContainerSmall) { - fetch("/account.json") - .then((response) => response.json()) - .then((data) => { - if (data.account === null) { - accountContainerSmall.innerHTML = `Sign in`; - accountContainer.innerHTML = `Sign in`; - } else { - window.accountJSONRes = data.account; - accountContainerSmall.innerHTML = `${data.account.fullname} (logout)`; - accountContainer.innerHTML = `
        - - -
        `; - } - - function toggleMenu(element, show) { - const container = element.closest(".p-navigation__dropdown-link"); - var target = document.getElementById( - element.getAttribute("aria-controls") - ); - - if (show) { - container.classList.add("is-selected"); - } else { - container.classList.remove("is-selected"); - } - - if (target) { - element.setAttribute("aria-expanded", show); - target.setAttribute("aria-hidden", !show); - - if (show) { - target.focus(); - navDropdowns.forEach(function (dropdown) { - closeMenu(dropdown); - }); - } - } - } - - /** - Attaches event listeners for the menu toggle open and close click events. - @param {HTMLElement} menuToggle The menu container element. - */ - function setupContextualMenu(menuToggle) { - menuToggle.addEventListener("click", function (event) { - event.preventDefault(); - - var menuAlreadyOpen = - menuToggle.getAttribute("aria-expanded") === "true"; - - var top = menuToggle.offsetHeight; - // for inline elements leave some space between text and menu - if (window.getComputedStyle(menuToggle).display === "inline") { - top += 5; - } - - toggleMenu(menuToggle, !menuAlreadyOpen, top); - }); - } - - /** - Attaches event listeners for all the menu toggles in the document and - listeners to handle close when clicking outside the menu or using ESC key. - @param {String} contextualMenuToggleSelector The CSS selector matching menu toggle elements. - */ - function setupAllContextualMenus(contextualMenuToggleSelector) { - // Setup all menu toggles on the page. - var userToggle = document.querySelector(contextualMenuToggleSelector); - if (userToggle) { - setupContextualMenu(userToggle); - - // Add handler for clicking outside the menu. - document.addEventListener("click", function (event) { - var contextualMenu = document.getElementById( - userToggle.getAttribute("aria-controls") - ); - var clickOutside = !( - userToggle.contains(event.target) || - contextualMenu.contains(event.target) - ); - - if (clickOutside) { - toggleMenu(userToggle, false); - } - }); - } - } - - setupAllContextualMenus( - ".p-navigation__link-anchor.p-navigation__toggle" - ); - }); -} - -// TEMP FIX - DE 06.07.23 -// UPDATES LXD LINK TARGET IN THE MEGANAV UNTIL -// WE MERGE THE NEW MEGANAV -function replaceLxdLink() { - const globalNav = document.querySelector("#canonical-global-nav"); - const lxdNavLinks = globalNav.querySelectorAll( - '[href="https://linuxcontainers.org/"]' - ); - lxdNavLinks.forEach(function (element) { - element.href = "/lxd"; - }); -} -replaceLxdLink(); - -// TEMP FIX - PETE F 15.05.23 -// UPDATES 'UBUNTU ADVANTAGE' TO 'UBUNTU PRO' IN THE MEGANAV UNTIL -// WE MERGE THE NEW MEGANAV -function replaceUbuntuAdvantage() { - const globalNav = document.querySelector("#canonical-global-nav"); - const targetElementsArray = globalNav.querySelectorAll( - "[href='https://ubuntu.com/support']" - ); - targetElementsArray.forEach(function (element) { - if (element.children.length) { - element.querySelector("h4").innerText = "Ubuntu Pro ›"; - } else { - element.innerText = "Ubuntu Pro"; - } - }); -} -replaceUbuntuAdvantage(); - -// TEMP FIX - MPT 03.07.23 -// REPLACES CANONICAL LOGO WITH CANONICAL LINK UNTIL -// WE MERGE THE NEW MEGANAV -function replaceGlobalNavLogo() { - const globalNavLogo = document.querySelector(".global-nav__header-logo"); - if (globalNavLogo) { - globalNavLogo.innerHTML = `Canonical`; - } -} - -replaceGlobalNavLogo(); diff --git a/static/js/src/tabbed-content.js b/static/js/src/tabbed-content.js index df663a021a4..0fe4c82d4b9 100644 --- a/static/js/src/tabbed-content.js +++ b/static/js/src/tabbed-content.js @@ -112,12 +112,14 @@ tabContent.forEach((content) => { if (tabElement === tab) { tabElement.setAttribute("aria-selected", true); + tabElement.classList.add("is-active"); content.classList.remove("u-hide"); if (triggerReload) { window.dispatchEvent(new Event("resize")); } } else { tabElement.setAttribute("aria-selected", false); + tabElement.classList.remove("is-active"); content.classList.add("u-hide"); } }); @@ -190,6 +192,19 @@ document.addEventListener("DOMContentLoaded", () => { initTabs(".js-tabbed-content"); }); + + document.addEventListener("click", (e) => { + if (e.target.classList.contains("js-tab")) { + const tabContainer = e.target.closest(".js-tabs"); + const tabs = [].slice.call( + tabContainer.querySelectorAll("[aria-controls]") + ); + + if (tabs) { + setActiveTab(e.target, tabs); + } + } + }); })(); (function () { diff --git a/static/sass/_global-settings.scss b/static/sass/_global-settings.scss index 919e9889d5a..52f68b11081 100644 --- a/static/sass/_global-settings.scss +++ b/static/sass/_global-settings.scss @@ -13,3 +13,6 @@ $color-mid-x-light: #e5e5e5; $font-use-subset-latin: true; $font-allow-cyrillic-greek-latin: true; $font-display-option: fallback; +$breakpoint-navigation-threshold: $viewport-threshold; +$theme-default-nav: dark; +$grid-max-width: 80rem; diff --git a/static/sass/_pattern_navigation-dropdown.scss b/static/sass/_pattern_navigation-dropdown.scss new file mode 100644 index 00000000000..db2fb8b6945 --- /dev/null +++ b/static/sass/_pattern_navigation-dropdown.scss @@ -0,0 +1,230 @@ +@mixin ubuntu-p-navigation-dropdown { + $dropdown-border: 1px solid $colors--dark-theme--border-low-contrast; + + .dropdown-content-mobile { + @media (min-width: $breakpoint-navigation-threshold) { + display: none !important; + } + } + + .dropdown-content-desktop { + background-color: #2d2d2d; + border-top: $dropdown-border; + + @media (max-width: $breakpoint-navigation-threshold - 1) { + display: none !important; + } + } + + .dropdown-window-overlay { + @include vf-animation(opacity, brisk, out); + + background-color: rgba(17, 17, 17, 0.4); + height: 100%; + position: fixed; + top: 0; + width: 100%; + z-index: 7; + } + + .dropdown-window { + @include vf-animation(all, brisk, out); + + background-color: #262626; + box-shadow: 0 1px 32px 1px transparentize($color-dark, 0.8); + flex-direction: column; + height: auto; + max-height: calc(100vh - 3rem); + overflow-y: auto; + position: fixed; + width: 100%; + z-index: 11; + } + + .p-navigation--sliding.is-reduced ~ .dropdown-window { + position: absolute; + } + + .dropdown-window__content { + color: $color-light; + + [hidden="true"] { + display: none; + } + + &__tab-panel { + padding-left: 1rem; + } + + .p-side-navigation { + height: 100%; + padding: 2rem 0; + position: relative; + + &::after { + background: #262626; + bottom: 0; + content: ""; + display: block; + left: -50vw; + position: absolute; + right: 0; + top: 0; + } + + &__drawer { + height: 100%; + position: relative; + } + + &__link { + border-bottom: $dropdown-border; + padding: 0.25rem 1rem 0.25rem 0.5rem; + + &::before, + &:focus::before { + display: none; + } + + &.is-active { + background: #2d2d2d; + } + } + + &__item:last-child { + .p-side-navigation__link { + border: 0; + } + } + } + } + + .dropdown-window__footer { + align-items: start; + border-top: $dropdown-border; + display: flex; + justify-content: space-between; + padding: 1rem 0; + + [class*="p-button"] { + background: transparent; + margin: 0; + } + } + + .dropdown-window__main-panel, + .dropdown-window__side-panel { + margin: 2.5rem 0 2.5rem -0.5rem; + + .p-muted-heading { + color: rgba(255, 255, 255, 0.6); + padding-left: 0.5rem; + } + + .p-navigation__dropdown-item { + border-bottom: $dropdown-border; + line-height: 1.5rem; + margin: 0; + padding: 0; + position: relative; + + a { + display: block; + font-weight: 400; + padding: 0.25rem 0.5rem; + white-space: normal; + + &.p-button--positive { + display: inline-block; + margin: 0.5rem 0.5rem 0.75rem; + } + + &:visited { + color: #f7f7f7; + } + + &:hover:not([class*="p-button--positive"]) { + background-color: rgba(170, 170, 170, 0.1); + text-decoration: none; + } + + small.is-muted { + color: #aaa; + } + } + + &:last-child { + border-bottom: 0; + } + + &::before { + left: 2rem; + } + + .p-muted-heading { + padding-left: 0.5rem; + } + } + } + + .dropdown-window__side-panel { + margin: 2.5rem 0; + padding: 0; + + .p-list { + .p-list__item { + padding-left: 0.5rem; + + a.dropdown-window__side-panel-link { + color: #69c; + + &:visited { + color: #a679d2; + } + } + } + } + } + + .dropdown-window__sidenav-back { + color: $color-light; + display: block; + padding: 0.75rem 0.25rem 0.75rem 2.5rem; + position: relative; + + @media (min-width: $breakpoint-small) { + padding-left: 3rem; + } + + &:hover { + background-color: $colors--dark-theme--background-hover; + text-decoration: none; + } + + &:visited { + color: $color-light; + } + + &::before { + @extend %icon; + @include vf-icon-chevron; + + bottom: 0; + content: ""; + left: 1.25rem; + margin: auto; + position: absolute; + top: 0; + transform: rotate(90deg); + } + } + + .slide-animation { + transform: translateY(-101%); + } + + .fade-animation { + opacity: 0; + visibility: hidden; + } +} diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss index 45cc2b13db7..58719630616 100644 --- a/static/sass/_pattern_navigation.scss +++ b/static/sass/_pattern_navigation.scss @@ -1,278 +1,512 @@ -// Vanilla 2.32 removes internal $grid-margin-width variable, -// $grid-margin-widths map should be used instead -$grid-margin-width: map-get($grid-margin-widths, default); - -$ubuntu-logo-svg-width: 5rem; // width in rems -$ubuntu-logo-width--desktop: $ubuntu-logo-svg-width + 2 * $grid-margin-width; -$ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph--large; +$row-margin-medium: 1.5rem; +$row-margin-small: 1rem; +$meganav-height: 3rem; @mixin ubuntu-p-navigation { - html { - overflow-x: hidden !important; // prevent horizontal overflow full width breakout + #control-height { + height: 100vh; + position: absolute; + width: 0; } - %row-no-margins-on-mobile { - @media (max-width: $breakpoint-navigation-threshold) { - padding-left: 0; - padding-right: 0; + #all-canonical-mobile .global-nav__header-link-anchor::after { + @media (max-width: $breakpoint-small) { + right: 1rem !important; + top: 1.25rem !important; } + } - @media (min-width: $breakpoint-navigation-threshold + 1) { - padding-left: $grid-margin-width; - padding-right: $grid-margin-width; + #all-canonical-content-mobile { + @media (min-width: $breakpoint-navigation-threshold) { + display: none; } } - .p-navigation { - background-color: $nav-bg-color; - flex-direction: column; - z-index: 40; - - &__items { - @media (max-width: $breakpoint-x-small - 1) { - font-size: 0.875rem; - } + body:has(header.p-navigation--sliding.has-menu-open) { + overflow: hidden; + } - @media (max-width: $breakpoint-navigation-threshold) { - align-items: stretch; - display: flex; - justify-content: center; - margin: 0; - order: 2; + .global-nav-desktop .global-nav-dropdown { + position: relative; + top: 0; - .p-navigation__dropdown-link { - flex: 1; - text-align: center; - } - } + .global-nav-dropdown__content { + max-width: $grid-max-width; } - &__link-anchor { - @media (max-width: $breakpoint-x-small - 1) { - padding-left: math.div($grid-margin-width, 4) !important; - padding-right: math.div($grid-margin-width, 4) !important; - } + .global-nav__link { + color: #69c; } + } - &__banner { - background-color: $color-brand; - padding-left: 1rem; + .p-navigation--sliding { + position: sticky; + top: 0; + z-index: 40; - @media (max-width: $breakpoint-navigation-threshold - 1) { - padding-left: 1.5rem; - } + .p-navigation__secondary-link { + @extend .dropdown-window__side-panel-link; } - &::after { - // disable rule under nav - background-color: none; - height: 0; + .p-link--inverted { + font-weight: 400; } - & &__nav { - border-bottom: 0; - display: flex; + .p-navigation__nav { + margin-left: -1rem; margin-right: 0; - width: 100%; + max-height: calc(100vh - 3rem); + width: auto; - &.has-active-search { - @media (min-width: $breakpoint-navigation-threshold) { - .p-navigation__items { - display: none; + .p-navigation__items { + width: 100%; + + @media (max-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__link { + padding-left: calc(1.5rem + $row-margin-medium); + + &::before { + left: calc(1.5rem + $row-margin-medium); + } + + &.js-back::after { + left: $row-margin-medium; + } + } + + & > .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-left: $row-margin-medium; + + &::before { + left: $row-margin-medium; + } + } + + .p-navigation__item--dropdown-toggle { + &:first-child .p-navigation__link::before { + content: ""; + } + + &.is-selected > .p-navigation__link::before { + content: none; + } } + + .p-navigation__item--dropdown-toggle:first-of-type, + .p-navigation__item--dropdown-close:first-of-type { + > .p-navigation__link::before { + content: none; + } + } + + .p-navigation__dropdown-item { + padding-left: calc(1.5rem + $row-margin-medium); + + &::before { + left: calc(1.5rem + $row-margin-medium); + } + } + + .p-muted-heading { + padding-left: 0; + } + } + + @media (max-width: $breakpoint-medium) { + .p-navigation__link { + padding-left: calc(1.5rem + $row-margin-small); + + &::before { + left: calc(1.5rem + $row-margin-small); + } + + &.js-back::after { + left: $row-margin-small; + } + } + + & > .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-left: $row-margin-small; + + &::before { + left: $row-margin-small; + } + } + + .p-navigation__dropdown-item { + padding-left: calc(1.5rem + $row-margin-small); + + &::before { + left: calc(1.5rem + $row-margin-small); + } + } + + .p-muted-heading { + padding-left: 0; + } + } + + .global-nav { + margin-left: auto; } } - } - &__user .p-navigation__link-anchor { - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; - transition-duration: 0s; - white-space: nowrap; + .p-search-box__input { + background-color: $color-light !important; + + &:focus, + &:hover { + background-color: $color-light !important; + } + } - @media (min-width: $breakpoint-large) { - max-width: 240px; + .p-search-box__input::placeholder { + color: #000; } } - & &__link-anchor { - color: $color-light; - display: block; - line-height: 1.5rem; + .p-navigation__banner { + padding-left: 0; + } - @media (max-width: $breakpoint-navigation-threshold) { - padding: $spv--large $grid-margin-width $spv--large $grid-margin-width; + @media (max-width: $breakpoint-navigation-threshold - 1) { + .row { + display: unset; } - @media (min-width: $breakpoint-navigation-threshold + 1) { - padding: $spv--large 2rem $spv--large $sph--large; + .p-navigation__nav { + margin-left: 0; + overflow-y: auto; } - &:focus, - &:visited { - background-color: $nav-bg-color; - color: $color-light; + .p-navigation__banner { + height: $meganav-height; + padding-left: $row-margin-medium; } + } - &:hover { - background-color: darken($nav-bg-color, 3%); - color: $color-x-light; + @media (max-width: $breakpoint-medium) { + .p-navigation__banner { + padding-left: $row-margin-small; } + } - .p-icon--search { - margin-left: 0.25rem; + .row { + @media (max-width: $breakpoint-navigation-threshold - 1) { + padding-left: 0; + padding-right: 0; } - } - .p-navigation__dropdown-link--noscript { - position: relative; + .p-navigation__dropdown { + height: calc(100vh - $meganav-height); + overflow: hidden; + + &[aria-hidden="false"] { + overflow: unset; + + &::before { + pointer-events: none; + } + } + + &::before { + box-shadow: none; + } + + .p-muted-heading { + padding-left: 3rem; + + @media (max-width: $breakpoint-medium) { + padding-left: 2.5rem; + } + } - .p-navigation__link-anchor { - padding: 0.75rem 1rem; + .p-navigation__secondary-links .p-muted-heading { + padding-left: 0; + } } - } - .p-navigation__user .p-navigation__dropdown--right { - border-radius: 0 0 0.125rem 0.125rem; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); + .p-navigation__link--search-toggle::after { + right: 1rem; - &[aria-hidden="true"] { - display: none; + @media (max-width: $breakpoint-navigation-threshold - 1) { + right: 0.5rem; + } } - &[aria-hidden="false"] { - display: block; + @media (max-width: $breakpoint-navigation-threshold - 1) { + .subsection-active & { + transform: translateX(-100vw); + } } - } - & &__row { - @extend %row-no-margins-on-mobile; + .p-navigation__secondary-links { + margin-top: 1.5rem; + padding-left: calc(1.5rem + $row-margin-medium); - &.row { - grid-gap: 0; + @media (max-width: $breakpoint-medium) { + padding-left: calc(1.5rem + $row-margin-small); + } - @media (max-width: $breakpoint-x-small) { - display: block; - padding-left: 0 !important; - padding-right: 0 !important; + a { + color: #69c; } } - } - .p-navigation__banner .p-navigation__link-anchor { - @media (max-width: $breakpoint-x-small) { - margin-right: calc(1rem - 6px); + ul.p-navigation__dropdown { + li.p-navigation__dropdown-item { + line-height: 1.5rem; + margin: 0; + padding-bottom: 0.25rem; + padding-top: 0.25rem; + position: relative; + + a { + &:not(.p-button--positive) { + display: block; + padding: 0.25rem 0; + white-space: normal; + } + + &:hover { + text-decoration: none; + } + } + } + } + + .p-navigation__item--dropdown-toggle { + .p-navigation__account-name { + @extend .p-navigation__dropdown-item; + + @media (max-width: $breakpoint-medium) { + padding-left: calc(1.5rem + $row-margin-small); + } + + pointer-events: none; + + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-text--small { + max-width: 13rem; + overflow: hidden; + text-overflow: ellipsis; + } + } + + @media (max-width: $breakpoint-navigation-threshold - 1) { + hr { + display: none; + } + } + } + + &.js-account { + .p-navigation__dropdown-item { + padding-bottom: 0.75rem; + padding-top: 0.75rem; + } + + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__dropdown { + height: auto; + min-width: 10rem; + right: 3rem; + } + } + + a.p-navigation__link { + &::after { + @media (min-width: $breakpoint-navigation-threshold - 1) { + content: none; + } + } + } + + a.p-navigation__link:not(.is-signed-in) { + &::after { + content: none; + } + } + + button[aria-expanded="true"] { + background-color: rgba(255, 255, 255, 0.05); + } + } + + &.is-active[role="menuitem"] { + @extend .is-selected; + + > a.p-navigation__link { + background-color: #2d2d2d; + } + } + + .p-navigation__link::before { + &:first-of-type { + content: ""; + } + } } - .p-link--inverted:visited { - color: $color-x-light; + a.p-navigation__dropdown-item { + padding-bottom: 0.75rem; + padding-top: 0.75rem; + } + + .p-navigation__link::after { + top: 1.25rem; + @media (max-width: $breakpoint-navigation-threshold - 1) { + right: 1.5rem; + top: 1rem; + } } } + } - &__dropdown-link { - position: relative; + .p-navigation--sliding:not(.js-enabled) { + .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-right: 1rem; &::after { - @include vf-icon-chevron(vf-url-friendly-color($color-mid-light)); - - background-position: top 52% right 50%; - background-repeat: no-repeat; - background-size: 0.75rem; - content: ""; - height: 100%; - pointer-events: none; + content: none; + } + } + } + + .p-navigation--sliding.has-menu-open { + height: fit-content; + + @media (max-width: $breakpoint-navigation-threshold - 1) { + .row { + height: 100vh; + } + } + } +} + +@mixin ubuntu-p-navigation-reduced { + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation--sliding.is-reduced.has-search-open { + .p-navigation__nav .p-navigation__items { + display: inline-flex; + } + + .p-navigation__search { + align-items: center; + background-color: #262626; + display: flex; + justify-content: center; + left: 0; + padding: 1rem; position: absolute; - right: 0; - top: 0; - transition: transform 0.1s; - width: 2rem; - @media (max-width: $breakpoint-navigation-threshold) { - display: none; + top: 2rem; + width: 100%; + + .p-search-box { + margin: 0; + max-width: 50rem; } } + } + } - &.is-selected { - &::after { - @include vf-icon-chevron(vf-url-friendly-color($color-dark)); + .p-navigation--sliding.is-reduced { + margin-bottom: 0; + position: relative; - transform: rotate(-180deg); - } + .p-navigation__banner { + height: auto; - .p-navigation__link-anchor { - background-color: $color-x-light; - color: $color-dark; + @media (max-width: $breakpoint-navigation-threshold - 1) { + padding-left: $row-margin-medium; + } - &::after { - background-color: transparent; - } + @media (max-width: $breakpoint-medium) { + padding-left: $row-margin-small; + } - &:focus, - &:visited { - background-color: $color-x-light; - color: $color-dark; - } + @media (min-width: $breakpoint-x-large) { + height: 2rem; + width: calc(21rem - 1px); + } + } - &:hover { - background-color: $color-x-light; - color: $color-dark; - } + .p-navigation__tagged-logo { + .p-navigation__link { + padding-left: 0; + padding-top: 0.5rem; + + @media (max-width: $breakpoint-navigation-threshold - 1) { + padding-top: 0.75rem; } } } - .p-navigation__banner .p-navigation__link-anchor:hover { - background-color: transparent; + .p-navigation__user { + .p-navigation__link span { + display: none; + } } - &__image { - max-height: 1.5rem; - max-width: $ubuntu-logo-svg-width; + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__link span { + display: initial; + padding-right: 0.5rem; + } + + .p-navigation__link::after { + top: 0.5rem; + } } - &__logo { - background: $color-brand; - height: 3.5rem; + .p-navigation__item { + .p-navigation__link { + color: $color-mid-light; + } + + .js-menu-button.p-navigation__link { + padding-left: 1rem; + padding-right: 1rem; + } } - &__search { - align-items: center; - display: inline-flex; - flex-grow: 1; - margin: 0; + .p-navigation__link--search-toggle { + padding-bottom: 0.5rem; + padding-top: 0.5rem; - @media (max-width: $breakpoint-navigation-threshold) { - margin-top: $sp-medium !important; - order: 1; + @media (max-width: $breakpoint-large) { + padding-right: 3rem; + } + + &::after { + color: $color-mid-light; + right: 1rem; + top: 1rem; } } - &--secondary { - background-color: $color-light; - display: flex; - margin-top: 0; - position: relative; - width: 100%; - z-index: 36; + @media (min-width: $breakpoint-navigation-threshold - 1) { + background-color: $color-dark; + margin-bottom: 0; - @media (max-width: $breakpoint-x-small - 1) { - padding-bottom: $sp-medium; - padding-top: math.div($sp-small, 2); + .p-navigation__item { + color: $color-mid-light; } - &__banner { - background-color: $color-brand; - float: left; + .p-navigation__link { + color: $color-mid-light; + font-size: 0.875rem; font-weight: 300; + line-height: 1rem; + padding: 0.5rem 2rem 0.5rem 1rem; + transition: none; + } - &:hover { - color: $color-x-light; - } + .p-navigation__tagged-logo > .p-navigation__link { + padding-left: 0; } &__logo { - @extend %paragraph; - align-items: center; color: $color-x-light; display: flex; @@ -298,12 +532,9 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph--large; } &::after { - // white separator inside lockup - @extend %vf-pseudo-border--top; - display: none; - @media only screen and (min-width: $breakpoint-navigation-threshold) { + @media only screen and (min-width: $breakpoint-navigation-threshold - 1) { background-color: $color-light; display: block; left: $sph--large; @@ -311,237 +542,160 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph--large; right: $sph--large - $circle-of-friends-compensation; } } - - @media only screen and (min-width: $breakpoint-navigation-threshold) { - padding-left: $sph--large; - padding-right: $sph--large - $circle-of-friends-compensation; - width: $ubuntu-logo-svg-width + 2 * $sph--large - - $circle-of-friends-compensation; - } } - .breadcrumbs { - &--secondary { - @extend .p-inline-list; - - display: flex; - flex-wrap: wrap; - margin-bottom: 0; - width: auto; - } + .p-navigation__link--search-toggle { + color: $color-mid-light; + line-height: 1rem; + padding: 0.5rem 2rem 0.5rem 1rem; - &__item { - color: $color-dark; - display: inline-flex; - list-style: none; + &::after { + color: $color-mid-light; + top: 0.5rem; } - &__chevron { + .p-navigation__search-label { font-size: 0.875rem; - padding: 0.55rem 0 0.2rem 0; + font-weight: 300; + padding-left: 0.5rem; } + } - &__space { - display: none; - - @media (max-width: $breakpoint-small - 1) { - display: block; - } + .p-navigation__item--dropdown-toggle { + &::after { + top: 0.5rem; } - &__link { - font-size: math.div( - 1rem, - pow($ms-ratio, 1) - ); //XXX: move font-sizes to map in vanilla so it can be changed globally + &.is-selected { + background-color: rgba(255, 255, 255, 0.1); - padding-left: $spv--medium; - padding-right: $spv--medium; - padding-top: $nudge--small; - - @media (max-width: $breakpoint-x-small - 1) { - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - } - - @media (min-width: $breakpoint-x-small) and (max-width: $breakpoint-medium - 1) { - padding-bottom: map-get($sp-after, small) + $p-small-lh-diff - - $nudge--small; + &::after { + transform: rotate(-180deg); } - &:first-child { + .p-navigation__link { + color: $color-x-light; padding-left: 1rem; } - &.p-link--active { - color: $color-brand; + .p-navigation__link::before { + display: none; } } - } - .row { - @extend %row-no-margins-on-mobile; + &.js-account .p-navigation__dropdown { + right: 2.75rem; + } } - } - &__toggle--open, - &__toggle--close { - color: $color-light !important; - font-size: 0.875rem; - - @media (max-width: $breakpoint-x-small - 1) { - margin-right: math.div($grid-margin-width, 1.5) !important; + .p-navigation__dropdown--right { + top: 2rem; } } - @media (min-width: $breakpoint-navigation-threshold) { - .p-search-box { - margin-left: 1rem; - max-width: none; - - .p-search-box__button { - display: none; - } - - .p-search-box__input:not(:valid) ~ .p-search-box__reset { - display: inherit; - margin-bottom: 0; - margin-top: 0.3rem; - } - } + & ~ .global-nav-dropdown { + top: 2.1rem !important; } } - .dropdown-window-overlay { - background-color: rgba(17, 17, 17, 0.4); - height: 100%; - opacity: 1; - position: fixed; + .p-navigation.is-secondary { + position: sticky; top: 0; - transition: opacity 0.5s ease-in-out; - width: 100%; - z-index: 38; - } - - .dropdown-window { - @include vf-animation(all, brisk, in); + z-index: 10; - background-color: $color-x-light; - box-shadow: 0 1px 32px 1px transparentize($color-dark, 0.8); - flex-direction: column; - position: absolute; - width: 100%; - z-index: 39; + .p-navigation__nav { + margin-left: -1rem; - &.slide-animation { - box-shadow: none; - } - .row { - padding-left: $grid-margin-width; - padding-right: $grid-margin-width; - } + &.is-open { + display: flex; - &__content { - @extend %p-strip--very-shallow; + .p-navigation__items { + display: block; + } - background-color: $color-x-light; - color: $color-dark; + .p-navigation__link { + padding-left: calc(1rem + $row-margin-medium); - &:last-child { - padding-bottom: math.div($spv--x-large, 1.5); - } + @media (max-width: $breakpoint-medium) { + padding-left: calc(1rem + $row-margin-small); + } - @media (max-width: $breakpoint-x-small - 1) { - .p-inline-list--middot.is-x-dense { - margin-bottom: 0.3rem; + &::before { + left: $row-margin-small; + } } } } - & .p-inline-list__item { - @extend %small-text-fixed; + .p-navigation__banner { + padding-left: 0; + } + + @media (max-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__banner { + padding-left: $row-margin-medium; + } - list-style-type: none; + .row { + display: unset; + padding-left: 0; + padding-right: 0; + } - &::after { - @media only screen and (max-width: $breakpoint-medium - 1) { - display: none; - } + .p-navigation__nav { + margin-left: -1rem; } } - &__summary { - @extend %small-text-fixed; - - margin-bottom: map-get($sp-after, small) * 2 + $p-small-lh-diff - - $nudge--small; - max-width: $text-max-width; + @media (max-width: $breakpoint-medium) { + .p-navigation__banner { + padding-left: $row-margin-small; + } } - } - .slide-animation { - transform: translateY(-101%); - } + .p-navigation__toggle--open.is-open { + transform: rotate(-180deg); + } - .fade-animation { - opacity: 0; - visibility: hidden; + .p-navigation__tagged-logo { + width: 17.5rem; - .u-visible-nav & { - opacity: 1; - transform: none; - visibility: visible; + @media (min-width: $breakpoint-x-large) { + width: 19.5rem; + } } } } -.p-card--navigation { - @include vf-p-card; - - display: flex; - flex-direction: column; - margin-bottom: 0; - padding: 0; -} - -.p-card--light { - @extend %vf-has-round-corners; +@mixin ubuntu-p-nojs-navigation { + .nojs-meganav { + background: #262626; + overflow-x: unset !important; - @extend %bg--light; + h2 { + color: $color-light; + padding-left: 1.5rem; + } - @include vf-p-card; + .p-side-navigation { + padding-top: 1rem; + } - flex-direction: column; - margin-bottom: $spv--large; - padding: calc(#{$spv--large} - 1px); - transition: all 0.2s; -} + .dropdown-window__tab-panel { + height: fit-content; + padding-bottom: 3rem; + position: sticky; + top: 3rem; + } -.u-hide--nav-threshold-down { - @media (max-width: $breakpoint-navigation-threshold - 1) { - display: none !important; - } -} + .dropdown-window__footer { + padding-bottom: 3rem; + } -.u-hide--nav-threshold-up { - @media (min-width: $breakpoint-navigation-threshold) { - display: none !important; + @media (max-width: $breakpoint-navigation-threshold - 1) { + .dropdown-window__tab-panel { + display: none; + } + } } } - -.p-logomark { - display: inline-block; - margin-bottom: $spv--large; - margin-right: $sph--small; - max-height: 4 * $sp-unit; - max-width: 4 * $sp-unit; - position: relative; - top: 0.1rem; -} - -.p-button--small { - @extend %small-text; - - padding-top: $sp-unit * 0.5 + map-get($nudges, nudge--small); -} diff --git a/static/sass/print.scss b/static/sass/print.scss index 3d1b156c0a9..d31a06ee35f 100644 --- a/static/sass/print.scss +++ b/static/sass/print.scss @@ -89,9 +89,6 @@ footer, .p-heading-icon__img, .p-contextual-footer, .p-navigation, -.global-nav__dropdown-overlay, -.global-nav, -.global-nav__header-list, .dropdown-window, .dropdown-window-overlay, .p-navigation--secondary, diff --git a/static/sass/styles.scss b/static/sass/styles.scss index bbe68352547..a339a4d821d 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -64,6 +64,7 @@ $color-shadow: rgba(0, 0, 0, 0.5) !default; @import "pattern_lists"; @import "pattern_matrix"; @import "pattern_navigation"; +@import "pattern_navigation-dropdown"; @import "pattern_pie_chart"; @import "pattern_ratings"; @import "pattern_renewal-modal"; @@ -118,9 +119,12 @@ $color-shadow: rgba(0, 0, 0, 0.5) !default; @include ubuntu-p-lists; @include ubuntu-p-matrix; @include ubuntu-p-navigation; +@include ubuntu-p-navigation-dropdown; +@include ubuntu-p-navigation-reduced; +@include ubuntu-p-nojs-navigation; @include ubuntu-p-strip; -@include ubuntu-p-pie-chart; @include ubuntu-p-ua-payment-modal; +@include ubuntu-p-pie-chart; @include ubuntu-p-ua-shop-cart; @include ubuntu-p-ua-subscribe; @include ubuntu-p-ua-subscriptions; @@ -537,6 +541,10 @@ summary { color: inherit; } } + + .is-muted { + color: $colors--dark-theme--text-muted; + } } .u-disable { @@ -622,12 +630,6 @@ td.p-accordion { background-image: url("#{$assets-path}f1a7515d-tick-darkaubergine.svg"); } -// Prevent the page from jumping as the global nav loads -.global-nav__header { - background-color: #262626; - height: 32px; -} - .article-title { -webkit-box-orient: vertical; display: -webkit-box; diff --git a/templates/about/release-cycle.html b/templates/about/release-cycle.html index 51c314a8052..250433e1468 100755 --- a/templates/about/release-cycle.html +++ b/templates/about/release-cycle.html @@ -248,6 +248,5 @@

        Canonical Kubernetes release cycle

        - {% endblock content %} diff --git a/templates/core/features/index.html b/templates/core/features/index.html index e3c6d6f0d02..d766c90b90e 100644 --- a/templates/core/features/index.html +++ b/templates/core/features/index.html @@ -367,5 +367,4 @@

        Secure your devices

        - {% endblock content %} diff --git a/templates/download/risc-v/index.html b/templates/download/risc-v/index.html index 2810e9227d4..5cb2fb07b34 100644 --- a/templates/download/risc-v/index.html +++ b/templates/download/risc-v/index.html @@ -78,4 +78,5 @@

        Download Ubuntu for RISC-V Platforms

    • + {% endblock content %} diff --git a/templates/engage/shared/_de_thank-you.html b/templates/engage/shared/_de_thank-you.html index 98eeccce62a..1c804d7ab37 100644 --- a/templates/engage/shared/_de_thank-you.html +++ b/templates/engage/shared/_de_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/shared/_es_thank-you.html b/templates/engage/shared/_es_thank-you.html index bd0b160b977..4adb7eaca8b 100644 --- a/templates/engage/shared/_es_thank-you.html +++ b/templates/engage/shared/_es_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/shared/_fr_thank-you.html b/templates/engage/shared/_fr_thank-you.html index cac8111db3d..4927c3ff5ec 100644 --- a/templates/engage/shared/_fr_thank-you.html +++ b/templates/engage/shared/_fr_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/shared/_header.html b/templates/engage/shared/_header.html index bd7acd47cf6..9bf5bab7c49 100644 --- a/templates/engage/shared/_header.html +++ b/templates/engage/shared/_header.html @@ -1,8 +1,3 @@ -
    {% if class %}
    diff --git a/templates/engage/shared/_it_thank-you.html b/templates/engage/shared/_it_thank-you.html index fdddcae1a3b..bfc635c608f 100644 --- a/templates/engage/shared/_it_thank-you.html +++ b/templates/engage/shared/_it_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/shared/_pt_thank-you.html b/templates/engage/shared/_pt_thank-you.html index 1b560bf4bbc..71a5c583344 100644 --- a/templates/engage/shared/_pt_thank-you.html +++ b/templates/engage/shared/_pt_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/shared/_ru_thank-you.html b/templates/engage/shared/_ru_thank-you.html index b997279ed03..e7a3874c047 100644 --- a/templates/engage/shared/_ru_thank-you.html +++ b/templates/engage/shared/_ru_thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/engage/thank-you.html b/templates/engage/thank-you.html index e371bb11e55..8546c7bf196 100644 --- a/templates/engage/thank-you.html +++ b/templates/engage/thank-you.html @@ -5,11 +5,6 @@ {% block head_extra%}{% endblock %} {% block content %} -
    diff --git a/templates/openstack/install.html b/templates/openstack/install.html index 2245281a5f7..06ba27b9d05 100644 --- a/templates/openstack/install.html +++ b/templates/openstack/install.html @@ -160,6 +160,5 @@

    Take the next step

    - {% endblock content %} diff --git a/templates/templates/_navigation.html b/templates/templates/_navigation.html index dcf008bd124..dbe94a3be16 100644 --- a/templates/templates/_navigation.html +++ b/templates/templates/_navigation.html @@ -1,98 +1,106 @@ {% set breadcrumbs = get_navigation(request.path).breadcrumbs %} - -
    {% endif %} {% endif %} - - diff --git a/templates/templates/base.html b/templates/templates/base.html index ced7ebcf00b..0a771b12ba0 100644 --- a/templates/templates/base.html +++ b/templates/templates/base.html @@ -12,6 +12,7 @@ {% block content_experiment %}{% endblock %} + @@ -73,6 +74,14 @@ + + {% if not(hide_nav == True) %} {% include "templates/_navigation.html" %} {% endif %} diff --git a/templates/templates/meganav/_list-item.html b/templates/templates/meganav/_list-item.html new file mode 100644 index 00000000000..df37afb82c3 --- /dev/null +++ b/templates/templates/meganav/_list-item.html @@ -0,0 +1,12 @@ +
  • + + {{ title }}
    + {{ description }} +     + + {% if secondary_cta_url and secondary_cta_title %} + + {{ secondary_cta_title }} + + {% endif %} +
    • diff --git a/templates/templates/meganav/_section-heading.html b/templates/templates/meganav/_section-heading.html new file mode 100644 index 00000000000..80219853ec1 --- /dev/null +++ b/templates/templates/meganav/_section-heading.html @@ -0,0 +1,11 @@ +{% if section == "products" %} +

    Products

    +{% elif section == "use_case" %} +

    Use cases

    +{% elif section == "support" %} +

    Support

    +{% elif section == "community" %} +

    Community

    +{% elif section == "get_ubuntu" %} +

    Get Ubuntu

    +{% endif %} \ No newline at end of file diff --git a/templates/templates/meganav/base.html b/templates/templates/meganav/base.html new file mode 100644 index 00000000000..0ff848ebc6e --- /dev/null +++ b/templates/templates/meganav/base.html @@ -0,0 +1,294 @@ + + + \ No newline at end of file diff --git a/templates/templates/meganav/community.html b/templates/templates/meganav/community.html new file mode 100644 index 00000000000..8977bc1f156 --- /dev/null +++ b/templates/templates/meganav/community.html @@ -0,0 +1,5 @@ +{% set nav = get_meganav("community") %} + +{% with sections = nav.sections, key = "community", id = "community" %} + {% include "templates/meganav/base.html" %} +{% endwith %} diff --git a/templates/templates/meganav/get-ubuntu.html b/templates/templates/meganav/get-ubuntu.html new file mode 100644 index 00000000000..2ceb741d57c --- /dev/null +++ b/templates/templates/meganav/get-ubuntu.html @@ -0,0 +1,5 @@ +{% set nav = get_meganav("get_ubuntu") %} + +{% with sections = nav.sections, key = "get_ubuntu", id = "get-ubuntu" %} + {% include "templates/meganav/base.html" %} +{% endwith %} diff --git a/templates/templates/meganav/navigation-nojs.html b/templates/templates/meganav/navigation-nojs.html new file mode 100644 index 00000000000..06c3e8f982e --- /dev/null +++ b/templates/templates/meganav/navigation-nojs.html @@ -0,0 +1,222 @@ +{% set nav = get_meganav("all") %} + +{% extends "templates/base.html" %} + +{% block title %}Navigation{% endblock %} + +{% block outer_content %} + +
    + {% for section in nav %} +
    + + {% endfor %} +
    + +{% endblock %} \ No newline at end of file diff --git a/templates/templates/meganav/products.html b/templates/templates/meganav/products.html new file mode 100644 index 00000000000..7189b90efc4 --- /dev/null +++ b/templates/templates/meganav/products.html @@ -0,0 +1,5 @@ +{% set nav = get_meganav("products") %} + +{% with sections = nav.sections, key = "products", id = "products" %} + {% include "templates/meganav/base.html" %} +{% endwith %} diff --git a/templates/templates/meganav/support.html b/templates/templates/meganav/support.html new file mode 100644 index 00000000000..f6fa13ea0d8 --- /dev/null +++ b/templates/templates/meganav/support.html @@ -0,0 +1,5 @@ +{% set nav = get_meganav("support") %} + +{% with sections = nav.sections, key = "support", id = "support" %} + {% include "templates/meganav/base.html" %} +{% endwith %} diff --git a/templates/templates/meganav/use-case.html b/templates/templates/meganav/use-case.html new file mode 100644 index 00000000000..f0c0ab3c1ec --- /dev/null +++ b/templates/templates/meganav/use-case.html @@ -0,0 +1,5 @@ +{% set nav = get_meganav("use_case") %} + +{% with sections = nav.sections, key = "use_case", id = "use-case" %} + {% include "templates/meganav/base.html" %} +{% endwith %} diff --git a/webapp/app.py b/webapp/app.py index 58ee3624669..6402d831e3f 100644 --- a/webapp/app.py +++ b/webapp/app.py @@ -141,6 +141,7 @@ subscription_centre, thank_you, unlisted_engage_page, + navigation_nojs, ) DISCOURSE_API_KEY = os.getenv("DISCOURSE_API_KEY") @@ -203,6 +204,7 @@ view_func=pro_activate_activation_key, methods=["POST"], ) +app.add_url_rule("/navigation", view_func=navigation_nojs) app.add_url_rule("/pro/dashboard", view_func=advantage_view) app.add_url_rule("/pro/user-subscriptions", view_func=get_user_subscriptions) app.add_url_rule( diff --git a/webapp/context.py b/webapp/context.py index e6c2688d1e3..620e258ea2a 100644 --- a/webapp/context.py +++ b/webapp/context.py @@ -4,6 +4,7 @@ import calendar import logging import json +import numpy from urllib.parse import parse_qs, urlencode # Packages @@ -11,6 +12,7 @@ import requests import yaml import dateutil.parser +from slugify import slugify from canonicalwebteam.http import CachedSession @@ -22,6 +24,10 @@ with open("navigation.yaml") as navigation_file: nav_sections = yaml.load(navigation_file.read(), Loader=yaml.FullLoader) +# Read meganav.yaml +with open("meganav.yaml") as meganav_file: + meganav = yaml.load(meganav_file.read(), Loader=yaml.FullLoader) + # Process data from YAML files # === @@ -38,6 +44,23 @@ def releases(): return yaml.load(releases, Loader=yaml.FullLoader) +def get_meganav(section): + """ + Set "meganav_section" as global template variable + """ + sections = {} + meganav_sections = copy.deepcopy(meganav) + + if section == "all": + return meganav_sections + + for section_name, meganav_section in meganav_sections.items(): + if section_name == section: + sections = meganav_section + + return {"sections": sections} + + def get_navigation(path): """ Set "nav_sections" and "breadcrumbs" dictionaries @@ -116,6 +139,14 @@ def descending_years(end_year): return range(now.year, end_year, -1) +def split_list(array, parts): + return numpy.array_split(array, parts) + + +def format_to_id(string): + return slugify(string) + + def get_json_feed(url, offset=0, limit=None): """ Get the entries in a JSON feed diff --git a/webapp/handlers.py b/webapp/handlers.py index 6ff41e7671b..00e9ef063f3 100644 --- a/webapp/handlers.py +++ b/webapp/handlers.py @@ -16,6 +16,9 @@ releases, schedule_banner, sort_by_key_and_ordered_list, + get_meganav, + split_list, + format_to_id, ) from webapp.login import empty_session, user_info from webapp.security.api import SecurityAPIError @@ -177,6 +180,9 @@ def context(): ), "http_host": flask.request.host, "schedule_banner": schedule_banner, + "get_meganav": get_meganav, + "split_list": split_list, + "format_to_id": format_to_id, } @app.context_processor diff --git a/webapp/views.py b/webapp/views.py index 93425786d75..a43ccf3a83d 100644 --- a/webapp/views.py +++ b/webapp/views.py @@ -1166,3 +1166,7 @@ def subscription_centre_submit(sfdcLeadId, unsubscribe): return response except HTTPError: flask.current_app.extensions["sentry"].captureException() + + +def navigation_nojs(): + return flask.render_template("templates/meganav/navigation-nojs.html") diff --git a/yarn.lock b/yarn.lock index 8f595f1cae3..ac7b53fac39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1069,27 +1069,17 @@ resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@canonical/cookie-policy@3.3.0": - version "3.3.0" - resolved "https://registry.npmjs.org/@canonical/cookie-policy/-/cookie-policy-3.3.0.tgz" - integrity sha512-G4u2dr04t138BoIsdbnVsL5i2vBl3supgqkAG03AfvAIbbkt1QlIlodGtrv0s3sczmUTEiSNfmT3iC70GY0Suw== - "@canonical/cookie-policy@3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@canonical/cookie-policy/-/cookie-policy-3.5.0.tgz#1c7e6cc2d5a7218375001b2cff2996a927693e89" integrity sha512-XLCIl8+h+3BRfvqADqFsmAfWdaDGDchY/TPCKtpeQdb4r64SR6arsdNftlOb7vX8EuLCK2QRp6evUy0J+qnQTg== -"@canonical/global-nav@^2.7.0": - version "2.7.0" - resolved "https://registry.npmjs.org/@canonical/global-nav/-/global-nav-2.7.0.tgz" - integrity sha512-jepwipTPIlceeHMvLSC8mafziknvhefr0SNCvSWMOdkPnZC28Rd45wBahfnEJ7THi4qt9xkZ99I+xHuJVKfpOA== +"@canonical/global-nav@3.6.2": + version "3.6.2" + resolved "https://registry.yarnpkg.com/@canonical/global-nav/-/global-nav-3.6.2.tgz#ee12cf7ebbf212c724a4652f1f4643ac5c4c461c" + integrity sha512-ZIC3OhSpDINAHfuDtX/1adrSiWl7qdYC5mqdYVt/2gyH3C8ffz2QmELpkZamSQ6qxYsGjVVzmddFJVP/W8vxaw== dependencies: - vanilla-framework "3.0.1" - -"@canonical/latest-news@1.3.0": - version "1.3.0" - resolved "https://registry.npmjs.org/@canonical/latest-news/-/latest-news-1.3.0.tgz" - integrity sha512-VwGcZo9LGzdeQ/sKt+5TQttIibTxjZEpsEtuWbbsacbqqzqVfqZhDsZkkg/7WNxKQ2lpnyq+4mLT70u9YbYSYA== + vanilla-framework "4.0.0" "@canonical/latest-news@1.5.0": version "1.5.0" @@ -2163,11 +2153,6 @@ array-union@^2.1.0: resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz" integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== -array-union@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/array-union/-/array-union-3.0.1.tgz#da52630d327f8b88cfbfb57728e2af5cd9b6b975" - integrity sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw== - array-unique@^0.3.2: version "0.3.2" resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz" @@ -2815,15 +2800,6 @@ cliui@^7.0.2: strip-ansi "^6.0.0" wrap-ansi "^7.0.0" -cliui@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa" - integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ== - dependencies: - string-width "^4.2.0" - strip-ansi "^6.0.1" - wrap-ansi "^7.0.0" - clone-regexp@^2.1.0: version "2.2.0" resolved "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz" @@ -3272,11 +3248,6 @@ delayed-stream@~1.0.0: resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -dependency-graph@^0.11.0: - version "0.11.0" - resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27" - integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg== - dependency-graph@^0.9.0: version "0.9.0" resolved "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz" @@ -4048,7 +4019,7 @@ fast-diff@^1.1.2: resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz" integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== -fast-glob@^3.1.1, fast-glob@^3.2.5, fast-glob@^3.2.7: +fast-glob@^3.1.1, fast-glob@^3.2.5: version "3.2.12" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== @@ -4244,15 +4215,6 @@ fs-constants@^1.0.0: resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz" integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow== -fs-extra@^10.0.0: - version "10.1.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" - integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^6.0.1" - universalify "^2.0.0" - fs-extra@^9.0.0, fs-extra@^9.1.0: version "9.1.0" resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz" @@ -4346,11 +4308,6 @@ get-stdin@^8.0.0: resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz" integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg== -get-stdin@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575" - integrity sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA== - get-stream@^4.0.0: version "4.1.0" resolved "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz" @@ -4467,18 +4424,6 @@ globby@^11.0.0, globby@^11.0.3: merge2 "^1.3.0" slash "^3.0.0" -globby@^12.0.0: - version "12.2.0" - resolved "https://registry.yarnpkg.com/globby/-/globby-12.2.0.tgz#2ab8046b4fba4ff6eede835b29f678f90e3d3c22" - integrity sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA== - dependencies: - array-union "^3.0.1" - dir-glob "^3.0.1" - fast-glob "^3.2.7" - ignore "^5.1.9" - merge2 "^1.4.1" - slash "^4.0.0" - globjoin@^0.1.4: version "0.1.4" resolved "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz" @@ -4749,7 +4694,7 @@ ignore@^4.0.6: resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== -ignore@^5.1.4, ignore@^5.1.8, ignore@^5.1.9: +ignore@^5.1.4, ignore@^5.1.8: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== @@ -6144,7 +6089,7 @@ merge-stream@^2.0.0: resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== -merge2@^1.3.0, merge2@^1.4.1: +merge2@^1.3.0: version "1.4.1" resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== @@ -6292,7 +6237,7 @@ nanoid@3.3.4: resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz" integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== -nanoid@^3.1.30, nanoid@^3.3.6: +nanoid@^3.3.6: version "3.3.6" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== @@ -6796,24 +6741,6 @@ postcss-cli@8.3.1: slash "^3.0.0" yargs "^16.0.0" -postcss-cli@9.1.0: - version "9.1.0" - resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-9.1.0.tgz#1a86404cbe848e370127b4bdf5cd2be83bc45ebe" - integrity sha512-zvDN2ADbWfza42sAnj+O2uUWyL0eRL1V+6giM2vi4SqTR3gTYy8XzcpfwccayF2szcUif0HMmXiEaDv9iEhcpw== - dependencies: - chokidar "^3.3.0" - dependency-graph "^0.11.0" - fs-extra "^10.0.0" - get-stdin "^9.0.0" - globby "^12.0.0" - picocolors "^1.0.0" - postcss-load-config "^3.0.0" - postcss-reporter "^7.0.0" - pretty-hrtime "^1.0.3" - read-cache "^1.0.0" - slash "^4.0.0" - yargs "^17.0.0" - postcss-html@^0.36.0: version "0.36.0" resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz" @@ -6919,15 +6846,6 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@8.4.5: - version "8.4.5" - resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz" - integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg== - dependencies: - nanoid "^3.1.30" - picocolors "^1.0.0" - source-map-js "^1.0.1" - postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6: version "7.0.36" resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz" @@ -7718,11 +7636,6 @@ slash@^3.0.0: resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== -slash@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7" - integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== - slice-ansi@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz" @@ -7776,7 +7689,7 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== @@ -8650,17 +8563,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vanilla-framework@3.0.1: - version "3.0.1" - resolved "https://registry.npmjs.org/vanilla-framework/-/vanilla-framework-3.0.1.tgz" - integrity sha512-KwZ0wZCbNhEjuTb50BkAX2frWwNjtgmKRcQEDHOQFNuEweDUT2O1E0ps2GLHv7lSOVxli1jQv56VvIBEr0+lqw== - dependencies: - "@canonical/cookie-policy" "3.3.0" - "@canonical/latest-news" "1.3.0" - autoprefixer "10.4.1" - postcss "8.4.5" - postcss-cli "9.1.0" - sass "1.45.2" +vanilla-framework@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.0.0.tgz#a2fee9bd9763ebd6932b764f9d66484dc177d4cc" + integrity sha512-fiPnmaTUe15l5MRNJ6IsiJ8qiunfmgtLETOFltaYiE/bQKL7xTI+riBak2iygBKeF1y0Gi/GxUNt4hyb6xDPKA== vanilla-framework@4.5.1: version "4.5.1" @@ -8920,11 +8826,6 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3: resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz" integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== -yargs-parser@^21.1.1: - version "21.1.1" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35" - integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== - yargs@^15.4.1: version "15.4.1" resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz" @@ -8955,19 +8856,6 @@ yargs@^16.0.0, yargs@^16.2.0: y18n "^5.0.5" yargs-parser "^20.2.2" -yargs@^17.0.0: - version "17.7.2" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269" - integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w== - dependencies: - cliui "^8.0.1" - escalade "^3.1.1" - get-caller-file "^2.0.5" - require-directory "^2.1.1" - string-width "^4.2.3" - y18n "^5.0.5" - yargs-parser "^21.1.1" - yauzl@^2.10.0: version "2.10.0" resolved "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz" From 442915684cf0e0427bcc3c067bba25a97a34edaf Mon Sep 17 00:00:00 2001 From: Peter French Date: Wed, 7 Feb 2024 09:27:27 +0100 Subject: [PATCH 20/72] Re-introduce margin to h1 on /download/desktop (#13542) --- templates/download/desktop/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/download/desktop/index.html b/templates/download/desktop/index.html index 9dbae176269..58ee0c9e670 100644 --- a/templates/download/desktop/index.html +++ b/templates/download/desktop/index.html @@ -8,7 +8,7 @@
    -

    Download Ubuntu Desktop

    +

    Download Ubuntu Desktop

    The open-source desktop operating system that powers millions of PCs and laptops around the world. Find out more about Ubuntu's features and how we support developers and organisations below.

    @@ -271,4 +271,4 @@

    Help is always at hand

    {% include "shared/_latest_news_strip.html" %} {% endwith %} -{% endblock content %} \ No newline at end of file +{% endblock content %} From 4240b3372ffd17063ad64cca70e900ecdabb8371 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 7 Feb 2024 11:07:53 +0100 Subject: [PATCH 21/72] WD-8434 - update newsletter signup on /blog --- templates/download/desktop/thank-you.html | 126 ++++++++++++++-------- 1 file changed, 81 insertions(+), 45 deletions(-) diff --git a/templates/download/desktop/thank-you.html b/templates/download/desktop/thank-you.html index 67dd74b870a..f3a4a8616c3 100644 --- a/templates/download/desktop/thank-you.html +++ b/templates/download/desktop/thank-you.html @@ -50,52 +50,88 @@

    Thank you for your contribution

    -

    Sign up for our newsletter

    -

    Get the latest Ubuntu news and updates in your inbox.

    -
      -
    • - - -
      • -
    • -
      • -
    • -

      By submitting this form, I confirm that I have read and agree to Canonical's Privacy Notice and Privacy Policy.

      -
      • -
    -
    - - - - - - - - - - - - - - -
    +
    + +
    +

    + By submitting this form, I confirm that I have read and agree to Canonical's Privacy Notice and Privacy Policy. +

    + +
    + + + + + + + + + + + + + + + + +
    From 9b7f1e9c0a1f53d2d34cbd86d9383dbc49d78312 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 7 Feb 2024 11:49:16 +0100 Subject: [PATCH 22/72] WD-8434 - fix --- templates/blog/newsletter-form.html | 130 +++++++--------------- templates/download/desktop/thank-you.html | 91 +++++---------- 2 files changed, 63 insertions(+), 158 deletions(-) diff --git a/templates/blog/newsletter-form.html b/templates/blog/newsletter-form.html index 6e1bdc706a2..87937955f71 100644 --- a/templates/blog/newsletter-form.html +++ b/templates/blog/newsletter-form.html @@ -5,101 +5,47 @@
    Newsletter signup
    -

    Select topics you're
    interested in

    - -
      -
    • - - -
      • - -
    • - - -
      • - -
    • - - -
      • - -
    • - -
      • - -
    • - -
      • -
    • - -
      • - {# These are honey pot fields to catch bots #} -
    • - - -
      • -
    • - - -
      • - {# End of honey pots #} -
    - +

    Newsletter signup

    +

    Get the latest Ubuntu news and updates in your inbox.

    - -
    - +
    +
    -
    diff --git a/templates/download/desktop/thank-you.html b/templates/download/desktop/thank-you.html index f3a4a8616c3..47345d4541c 100644 --- a/templates/download/desktop/thank-you.html +++ b/templates/download/desktop/thank-you.html @@ -51,86 +51,45 @@

    Thank you for your contribution

    Newsletter signup

    -

    Select topics you're interested in:

    -
      -
    • - - -
      • - -
    • - - -
      • - -
    • - - -
      • - -
    • - -
      • - -
    • - -
      • - {# These are honey pot fields to catch bots #} -
    • - - -
      • -
    • - - -
      • - {# End of honey pots #} -
    - -
    -

    -
    @@ -286,7 +284,6 @@

    Office software

    -
    {{ image( @@ -323,7 +320,6 @@

    Web browsing

    -
    {{ image( @@ -361,7 +357,6 @@

    Email

    -
    {{ image( @@ -399,7 +394,6 @@

    Photos

    -
    @@ -422,7 +416,6 @@

    Organise your photos

    -
    {{ image( @@ -503,7 +496,6 @@

    Videos

    -
    {{ image ( url="https://assets.ubuntu.com/v1/de158d4e-desktop-22.04-video.jpg", @@ -531,7 +523,6 @@

    Gaming

    -
    {{ image ( url="https://assets.ubuntu.com/v1/1d582338-dota2.jpg", From d8b468d39609e27c801ef0e835436b6429bc1598 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Wed, 24 Jan 2024 09:41:35 +0600 Subject: [PATCH 38/72] replace px with rem in styles of /desktop/features --- static/sass/_pattern_strip-photos.scss | 6 +++--- templates/desktop/features.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/sass/_pattern_strip-photos.scss b/static/sass/_pattern_strip-photos.scss index aec57ebb7e7..2ad03cc65fa 100644 --- a/static/sass/_pattern_strip-photos.scss +++ b/static/sass/_pattern_strip-photos.scss @@ -7,7 +7,7 @@ } &__container { - height: 25px; + height: 1.6rem; @media only screen and (min-width: $breakpoint-medium) { margin-bottom: 10.6rem; margin-top: 10.6rem; @@ -17,13 +17,13 @@ &__credit { @media only screen and (min-width: $breakpoint-medium) { background-color: rgba(0, 0, 0, 0.6); - bottom: 10px; + bottom: 0.6rem; color: $color-light; display: block; margin-top: -$sp-xxx-large; padding: $sp-small; position: absolute; - right: 10px; + right: 0.6rem; } } diff --git a/templates/desktop/features.html b/templates/desktop/features.html index b8c045d1214..264046913d2 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -116,7 +116,7 @@

    Bitward

    -

    VLC player

    +

    VLC

    No other video player is compatible with as many different file formats.

    From d3b83ec61ce5f29d32b41cc216db89b4dec5a3cb Mon Sep 17 00:00:00 2001 From: Peter French Date: Thu, 25 Jan 2024 19:10:26 +0100 Subject: [PATCH 39/72] Refresh desktop/developers (#13491) * Refresh /desktop/developers * Make the linter not sad * Apply review changes * Update logos * Apply final suggestions from UX review --- static/sass/styles.scss | 36 + .../about/release_cycles/ubuntu-eol.html | 6 +- templates/desktop/developers.html | 989 +++++++++--------- 3 files changed, 523 insertions(+), 508 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 290352921e8..db3c18fa1b5 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1435,6 +1435,35 @@ $color-link-dark: #69c !default; } } +.p-icon-section--dense { + @extend .p-icon-section; + + .p-icon-section__items { + line-height: 2rem; + row-gap: calc(1rem + 1vw); + + @media screen and (max-width: $breakpoint-large - 1) { + row-gap: 1.5rem; + } + } + + .p-icon-section__item { + margin-right: 2.5rem; + + @media screen and (max-width: $breakpoint-small - 1) { + margin-right: 1rem; + } + } + + .p-icon-section__icon { + height: 3.75rem; + + @media screen and (max-width: $breakpoint-large - 1) { + height: 3rem; + } + } +} + // XXX: MPT: Can be removed once this is fixed in Vanilla // https://github.com/canonical/vanilla-framework/pull/4950 .desktop-footer { @@ -1455,3 +1484,10 @@ $color-link-dark: #69c !default; } } } + +// XXX: Pete F: Can be removed once this is fixed in Vanilla +// https://github.com/canonical/vanilla-framework/issues/4955 +hr.is-extra-muted { + background-color: rgba(0, 0, 0, 0.1); + opacity: 0.5; +} diff --git a/templates/about/release_cycles/ubuntu-eol.html b/templates/about/release_cycles/ubuntu-eol.html index bd413012072..370f023dcd4 100644 --- a/templates/about/release_cycles/ubuntu-eol.html +++ b/templates/about/release_cycles/ubuntu-eol.html @@ -1,7 +1,9 @@
    -

    Ubuntu releases

    -
    +

    Ubuntu releases

    + +
    + {% include "about/release_cycles/releases-table.html" %}
    \ No newline at end of file diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 8067fa295d9..40137bfcd10 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -1,658 +1,635 @@ {% extends "desktop/base_desktop.html" %} {% block title %}Desktop for developers{% endblock %} + {% block meta_description %}Learn why Ubuntu is the ideal platform for developers.{% endblock %} -{% block meta_copydoc %}https://docs.google.com/document/d/1VJ3xT2ViC-CvL0UmsAUzpYFmvpuqUP4AbpnlPm8tqOA{% endblock -meta_copydoc %} + +{% block meta_copydoc %}https://docs.google.com/document/d/1VJ3xT2ViC-CvL0UmsAUzpYFmvpuqUP4AbpnlPm8tqOA/edit{% endblock meta_copydoc %} + +{% block body_class %}is-paper{% endblock body_class %} {% block content %} - -
    -
    -
    -

    Ubuntu Desktop for developers

    -

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu - is your ideal workstation.

    -

    Get Ubuntu now

    +
    +
    +
    +
    +

    Ubuntu Desktop
    for developers

    + +
    +
    +

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu is your ideal workstation.

    + Get Ubuntu now +
    -
    +
    +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/676d7b5d-xs9320nt-xnb-shot-15-2-sl-min.png", - alt="", - width="3677", - height="2589", - hi_def=True, - loading="auto" - ) | safe + url="https://assets.ubuntu.com/v1/1819c545-woman-working.jpg", + alt="", + width="2464", + height="1052", + hi_def=True, + loading="auto" + ) | safe }}
    -
    -
    -

    Why choose Ubuntu for Desktop?

    -
    -
    -
    -

    The developers’ choice -

    +
    +
    +
    +
    +

    Why choose Ubuntu Desktop?

    +

    The developers' choice

    -
    -
      -
    • Using Ubuntu Desktop provides a common platform for development, test, and - production environments. -
      • -
    • Tools, such as Juju, Microk8s, and Multipass make - developing, testing, and cross-building easy and affordable. -
      • -
    • Long term support (LTS) releases are delivered every - 2-years, with 5 years of standard support extended to 10 years with an Ubuntu Pro Desktop subscription. -
      • -
    • New Developer editions of Ubuntu Desktop are released every 6-months, with - 9-months of support and access to the latest kernel, libraries, and new upstream OS features.
      • +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/7f76ac3a-hp-laptop-studio-jammy.png", + alt="", + width="1659", + height="1246", + hi_def=True, + loading="lazy" + ) | safe + }} +
      +
      +
        +
      • Using Ubuntu Desktop provides a common platform for development, test, and production environments.
        • +
      • Tools, such as Juju, Microk8s, and Multipass make developing, testing, and cross-building easy and affordable.
        • +
      • Long term support (LTS) releases are delivered every 2-years, with 5 years of standard support extended to 10 years with an Ubuntu Pro Desktop subscription.
        • +
      • New Developer editions of Ubuntu Desktop are released every 6-months, with 9-months of support and access to the latest kernel, libraries, and new upstream OS features.
      -

      - The Ubuntu release cycle › -

      -
      +
      + The Ubuntu release cycle ›
    -
    +
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     ReleasedEnd of Standard SupportEnd of Life
    14.04 LTS (Trusty Tahr)Apr 2014Apr 2019Apr 2024
    16.04 LTS (Xenial Xerus)Apr 2016Apr 2021Apr 2026
    18.04 LTS (Bionic Beaver)Apr 2018Apr 2023Apr 2028
    20.04 LTS (Focal Fossa)Apr 2020Apr 2025Apr 2030
    22.04 LTS (Jammy Jellyfish)Apr 2022Apr 2027Apr 2032
    23.04 (Lunar Lobster)Apr 2023Jan 2024
    23.10 (Mantic Minotaur)Oct 2023Jul 2024
    +
    +
    +
    +
    +

    Security support
    for Ubuntu releases

    -
    +
    + {% include "about/release_cycles/releases-table.html" %}
    -
    -
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/1d1d6362-AI_sml.svg", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/1bc694f0-nvidia-cuda-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/eea32cc5-jupyter-logo.png", - alt="", - width="288", - height="288", +
    + +
    +
    +
    +
    +

    Access to cutting-edge hardware and software

    +
    +
    +
      +
    • Ubuntu ships with the latest toolchains for Python, Rust, Ruby, Go, PHP and Perl, and users get first access to the latest updates for key libraries and packages.
      • +
    • Ubuntu is the OS of choice for data science and machine learning, with support for popular frameworks like OpenCV, TensorFlow, Keras, PyTorch and Kubeflow.
      • +
    • Ubuntu is the target platform for the NVIDIA data science stack, which enables GPU accelerated data science workloads to be run locally before deploying to the cloud.
      • +
    +
    + How Ubuntu enables AI innovation › +
    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/1bc694f0-nvidia-cuda-logo.png", + alt="nvidia cuda logo", + width="288", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/e332a639-jupyter-logo.png", + alt="juptyer logo", + width="129", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/462ef9f5-keras-logo.png", - alt="", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", + alt="keras logo", + width="277", + height="384", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/c1fd7abe-scikit-learn-logo.png", - alt="", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/fbb20c33-scikit-logo.png", + alt="scikit logo", + width="233", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( + }} +
    +
    + {{ image ( url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", - alt="", + alt="tensor flow logo", width="145", height="145", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( + }} +
    +
    + {{ image ( url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", - alt="", + alt="pytorch logo", width="288", height="288", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    + }}
    -
    -

    Access to cutting-edge hardware and software

    -
      -
    • Ubuntu ships with the latest toolchains for Python, Rust, Ruby, Go, PHP and - Perl, and users get first access to the latest updates for key libraries and packages.
      • -
    • Ubuntu is the OS of choice for data science and machine learning, with - support for popular frameworks like OpenCV, TensorFlow, Keras, PyTorch and Kubeflow.
      • -
    • Ubuntu is the target platform for the NVIDIA data science stack, which enables GPU - accelerated data science workloads to be run locally before deploying to the cloud.
      • -
    -

    - How Ubuntu enables AI innovation › -

    -
    -
    -
    -
    -
    -
    -

    A rich ecosystem

    -
      -
    • With a Snap Store of over 7,000 - applications in addition to the Ubuntu repository, it's easy to tailor Ubuntu desktop to your needs.
      • -
    • Development tools include Visual Studio Code, IntelliJ, GitKraken, Unity and - Blender.
      • -
    • Office productivity tools include Slack, Microsoft Teams, Dropbox, and Zoom - as well as the Microsoft-compatible LibreOffice.
      • -
    • Media, gaming, and content creation apps include Spotify, Steam, Discord and - OBS Studio.
      • +
    + +
    +
    +
    +
    +

    A rich ecosystem

    +
    +
    +
      +
    • With a Snap Store of over 7,000 applications in addition to the Ubuntu repository, it's easy to tailor Ubuntu desktop to your needs.
      • +
    • Development tools include Visual Studio Code, IntelliJ, GitKraken, Unity and Blender.
      • +
    • Office productivity tools include Slack, Microsoft Teams, Dropbox, and Zoom as well as the Microsoft-compatible LibreOffice.
      • +
    • Media, gaming, and content creation apps include Spotify, Steam, Discord and OBS Studio.
    -

    - Learn more about Snapcraft › -

    +
    + Learn more about Snapcraft ›
    -
    -
    -
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/034147e9-code_ozwVHSV.png", + alt="VSCode", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/a8d0ab5b-slack-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/11d81b4e-IntelliJ_IDEA_Logo.svg", + alt="intelli J idea logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/e850e108-dropbox-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/fbce8950-git-kraken.png", + alt="git kraken logo", + width="62", + height="63", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/df56b8a5-libreoffice-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/f0bd491c-blender.png", + alt="blender logo", + width="512", + height="512", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/c7dae67a-zoom-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/aadb53b3-unity-seeklogo.com.svg", + alt="unity seek logo", + width="249", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/2abedabb-google-chrome-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", + alt="slack logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/60c97798-unity-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/8f85ef3f-microsoft-teams.png", + alt="microsoft teams logo", + width="512", + height="512", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/b8c1f574-intellij-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/6e5fe7ef-logo-dropbox.svg", + alt="dropbox logo", + width="184", + height="174", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/3294f6e8-vs-code-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/ceca3817-zoom-app.svg", + alt="zoom logo", + width="2500", + height="2500", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/982a200a-blender-notext-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/be731535-Logo-libreoffice.svg", + alt="libre office logo", + width="219", + height="264", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", + alt="Spotify logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/aa55fac4-microsoft-teams-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/ff5561bc-steam.png", + alt="steam logo", + width="61", + height="62", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    -
    +
    + +
    +
    +
    +
    +

    Certified hardware

    +
    +
    +
      +
    • Streamline deployment of Ubuntu Desktop with certified hardware from OEMs including Dell, Lenovo, and HP – no additional configuration required.
      • +
    • Ubuntu performs out of the box across a wide range of laptops, desktops, and workstations, including the HP Z series and Dell XPS and Precision lines.
      • +
    • Strategic partnerships extend to component manufacturers and Ubuntu is certified to work with the full range of NVIDIA GPUs.
      • +
    +
    + Ubuntu certified hardware › +
    -
    -
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/11814428-hp-logo.png", - alt="Hewlett Packard", - width="288", - height="288", +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/4b74a5f4-hp-logo.png", + alt="hp logo", + width="110", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/c70b529e-lenovo-logo.png", - alt="Lenovo", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/a34e318a-lenovo-logo.svg", + alt="lenovo logo", + width="105", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/987acdaa-dell-logo.png", - alt="Dell", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/fe17c507-dell-logo.svg", + alt="dell logo", + width="71", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/6079d02b-amd-logo.png", - alt="AMD", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/dac5c9d7-amd-logo.png", + alt="amd logo", + width="186", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/67f81bfe-intel-new-logo.png", - alt="Intel", - width="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/834d57ab-intel-logo.png", + alt="intel logo", + width="149", height="288", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/711be910-arm-logo.png", - alt="ARM", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/d9d05f49-arm-logo.png", + alt="arm logo", + width="183", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/cd765ccc-nvidia-logo.png", - alt="Nvidia", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/49c503f5-nvidia-logo.png", + alt="nvidia logo", + width="254", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    + }}
    -
    -

    Certified hardware

    -
      -
    • Streamline deployment of Ubuntu Desktop with certified - hardware from OEMs including Dell, Lenovo, and HP — no additional configuration required.
      • -
    • Ubuntu performs out of the box across a wide range of laptops, desktops, and - workstations, including the HP Z series and Dell XPS and Precision lines.
      • -
    • Strategic partnerships extend to component - manufacturers and Ubuntu is certified to work with the full range of NVIDIA GPUs.
      • -
    -

    - Ubuntu certified hardware › -

    -
    -
    -
    -
    -

    What's new in Ubuntu {{ releases.latest.short_version }}

    -
    -
    -
    -
      -
    • Linux 6.5 kernel
      • -
    • GNOME 45 desktop environment
      • -
    • New App Center for improved application discovery and management
      • -
    • Support for Active Directory certificate auto-enrollment in ADsys
      • -
    • Experimental support for hardware-backed full-disc encryption
      • -
    • Experimental support for guided ZFS install
      • -
    • Support for Raspberry Pi 5
      • -
    • Network Manager now uses Netplan as its default settings storage backend
      • -
    -
    -
    -

    Read the full release notes ›

    -
    -
    -
    -
    -
    -

    What's new in Ubuntu {{ releases.lts.short_version }}

    -
    -
    -
    -
      -
    • Linux 5.15 kernel
      • -
    • New Ubuntu theme with accent colors, improved integration for snaps and - system-wide dark style preference support
      • -
    • GNOME Shell and most GNOME libraries updated to the 42 release -
        -
      • Streamlined user interface and workspace transitions
        • -
      • Compact and modern on-screen display notifications
        • -
      • New screenshot/screen recording interface
        • -
      • New power profile selection
        • -
      • Improved multi-monitor support
        • -
      -
      • -
    • GNOME desktop performance improvements -
        -
      • Up to 2x improvement in frame rates with Intel and Raspberry Pi graphics drivers
        • -
      • Significant improvements for AMD and NVIDIA
        • -
      -
      • -
    • Wayland as the default display server for most systems whilst X11 remains the - default for those with an NVIDIA discrete GPU
      • -
    • Latest PulseAudio support for LDAC and AptX bluetooth codecs, HFP bluetooth - profiles and bluetooth device battery level reporting
      • -
    • Up-to-date toolchains, including Python 3.10, PHP 8.1, Ruby 3.0, Perl 5.34, Go - 1.18, GCC 11.2, Rust 1.58.1
      • -
    • Core productivity apps LibreOffice 7.3.2, Thunderbird 91.8, and Firefox 99 - which is now included as a snap -
      • -
    • Active Directory integration with the Ubuntu installer
      • -
    • Policy-based administration using Microsoft Active Directory Group Policy (GPO) - and advanced policy support for Ubuntu Pro Desktop users
      • -
    • Raspberry Pi 4 2GB Desktop support as a result of various performance - improvements
      • -
    • Better power management for NVIDIA dGPUs
      • -
    • Wifi 6E support
      • -
    -
    -
    -

    Read the full release - notes ›

    -
    -
    -
    -
    -

    Developers love Ubuntu, organisations trust it

    + +
    +
    +
    +

    Developers love Ubuntu, organisations trust it

    -
    -
    -

    Operating systems developers prefer

    -

    Multiple choice poll -

    -

    Source: The 2020 - HackerEarth Developer Survey

    +
    +
    +

    Operating systems developers prefer
    Multiple choice poll

    -
    -
    -

    Which of these open source technologies does your organisation use today to support your - software infrastructure?

    +

    Source: The - 2022 State of Open Source Report – OpenLogic

    + href="https://recruit-c7ff.kxcdn.com/recruit/wp-content/uploads/2020/05/he-developer-survey-2020.pdf">The 2020 + HackerEarth Developer Survey

    +
    +
    +

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    +
    +

    Source: The + 2022 State of Open Source Report – OpenLogic

    -
    - {% include "shared/_pro_strip.html" %} -
    -

    Free for personal use on up to five machines

    -

    Secure your open source stack with a personal Ubuntu Pro license and get access to security patching for over - 23,000 packages in the Ubuntu Universe repository.

    -

    Get started with a free subscription ›

    -

    Ubuntu Desktop for organisations ›

    + +
    +
    +
    +
    +
    +
    +
    +

    Secure enterprise management with Ubuntu Pro Desktop

    +
    +
    +

    Ubuntu Pro Desktop is a comprehensive subscription delivering enterprise-grade security, management tooling, and extended support for developers and organisations. Ubuntu Pro Desktop is free for personal use on up to five machines.

    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Free for personal use
    on up to five machines

    +
    +
    +

    Secure your open source stack with a personal Ubuntu Pro license and get access to security patching for over 23,000 packages in the Ubuntu Universe repository.

    +

    + Get started with a free subscription › +

    +
    +

    + Ubuntu Desktop for organisations › +

    +
    +
    -
    -
    +
    +
    +

    Get started today

    -
    -

    Download and install

    -

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or - run Ubuntu alongside it.

    -

    Download now

    +
    +
    +
    +
    +

    Download and install

    +
    +
    +

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or run Ubuntu alongside it.

    +
    + Download now +
    +
    +
    +
    +
    +

    Buy it pre-installed

    +
    +
    +

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, HP, and Lenovo.

    +
    + Find out more about our retail partners › +
    +
    +
    +
    +
    +

    Join our community

    +
    +
    +

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    +
    + +
    +
    -
    -

    Buy it pre-installed

    -

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, - HP, and Lenovo.

    -

    Find out more about our retail partners

    +
    +
    + +
    +
    +
    +
    +
    +

    Latest Ubuntu Desktop news
    from our blog ›

    +
    -
    -

    Join our community

    -

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    - +
    +
    +
    +
    +

    Explore all

    + +
    -{% with section_classes='p-strip', heading_topic='Ubuntu Desktop', tag_name='ubuntu-desktop', tag_id='1920', limit='4' -%} -{% include "shared/_latest_news_strip.html" %} -{% endwith %} + + + From e29bdef61201c5764b999adec2f958aafb92cc33 Mon Sep 17 00:00:00 2001 From: Peter French Date: Fri, 26 Jan 2024 17:12:03 +0100 Subject: [PATCH 40/72] Update ubuntu lts security support graph with new design (#13492) * Refresh /desktop/developers * Make the linter not sad * Update ubuntu lts security support graph with new design * Make the key responsive * Refactor embolden and hightlight functions * Make happy the gods of lint * Refresh /desktop/developers * Apply review changes * Update logos * Apply final suggestions from UX review * Fix merge conflict * Refresh /desktop/developers * Update ubuntu lts security support graph with new design * Make the key responsive * Refactor embolden and hightlight functions * Make happy the gods of lint * Fix bug from not passing scale to highlightChartRow --- static/js/src/chart-data.js | 6 +- static/js/src/release-chart.js | 22 +- static/js/src/support-chart.js | 656 ++++++++++++++++++ static/sass/_pattern_chart.scss | 34 + .../release_cycles/ubuntu-small-eol.html | 6 +- templates/desktop/developers.html | 34 +- templates/shared/_release_schedule.html | 2 +- 7 files changed, 733 insertions(+), 27 deletions(-) create mode 100644 static/js/src/support-chart.js diff --git a/static/js/src/chart-data.js b/static/js/src/chart-data.js index ef859d8b4d9..ef3596f8340 100644 --- a/static/js/src/chart-data.js +++ b/static/js/src/chart-data.js @@ -1229,10 +1229,10 @@ export var microStackReleases = [ ]; export var desktopServerStatus = { - HARDWARE_AND_MAINTENANCE_UPDATES: "chart__bar--orange", + HARDWARE_AND_MAINTENANCE_UPDATES: "chart__bar--black", MAINTENANCE_UPDATES: "chart__bar--orange-light", - ESM: "chart__bar--aubergine", - MAIN_UNIVERSE: "chart__bar--charcoal", + ESM: "chart__bar--aubergine-light", + MAIN_UNIVERSE: "chart__bar--aubergine-mid-light", INTERIM_RELEASE: "chart__bar--grey", }; diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 1ca2ef20532..72fe93d340d 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -1,4 +1,4 @@ -import { createChart, createChartWithTitles } from "./chart"; +import { createChart } from "./chart"; import { debounce } from "./utils/debounce.js"; import { serverAndDesktopReleases, @@ -39,10 +39,20 @@ import { } from "./chart-data"; function buildCharts() { - if (document.querySelector("#server-desktop-eol")) { + if (document.querySelector("#server-desktop-eol-old")) { delete desktopServerStatus.MAINTENANCE_UPDATES; createChart( + "#server-desktop-eol-old", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#server-desktop-eol")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createSupportChart( "#server-desktop-eol", + "#server-desktop-eol-key", desktopServerReleaseNames, desktopServerStatus, serverAndDesktopReleases @@ -164,10 +174,18 @@ function buildCharts() { } function clearCharts() { + const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); + if (serverDesktopEolOld) { + serverDesktopEolOld.innerHTML = ""; + } const serverDesktopEol = document.querySelector("#server-desktop-eol"); if (serverDesktopEol) { serverDesktopEol.innerHTML = ""; } + const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); + if (serverDesktopEolKey) { + serverDesktopEolKey.innerHTML = ""; + } const eol1604 = document.querySelector("#eol-1604"); if (eol1604) { eol1604.innerHTML = ""; diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js new file mode 100644 index 00000000000..f2d5c3470cc --- /dev/null +++ b/static/js/src/support-chart.js @@ -0,0 +1,656 @@ +import { ro } from "date-fns/locale"; + +/** + * + * @param {Array} tasks + * + * Sorts tasks by date + */ +function sortTasks(tasks) { + tasks.sort(function (a, b) { + return a.endDate - b.endDate; + }); + + tasks.sort(function (a, b) { + return a.startDate - b.startDate; + }); + + return tasks; +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {Object} taskStatus + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { + svg + .selectAll(".chart") + .data(tasks, function (d) { + return d.startDate + d.taskName + d.endDate; + }) + .enter() + .append("rect") + .attr("class", function (d) { + var className = ""; + + if (taskStatus[d.status] === null) { + return "bar"; + } + + if (highlightVersion && !d.taskName.includes(highlightVersion)) { + className += " chart__bar--transparent"; + } + + className += " " + taskStatus[d.status]; + + return className; + }) + .attr("y", 0) + .attr("transform", function (d) { + if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { + return ( + "translate(" + + x(d.startDate) + + "," + + (y(d.taskName) - y.bandwidth()) + + ")" + ); + } + return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; + }) + .attr("height", function () { + return y.bandwidth(); + }) + .attr("width", function (d) { + return x(d.endDate) - x(d.startDate); + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + (margin.top - 32) + ")") + .call(xAxis); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {*} y + * + * Centers labels in line with bars + */ +function transformTickText(yAxisGroup, y) { + yAxisGroup.selectAll(".tick text").attr("transform", function (d) { + var centerOffset = y.bandwidth() / 2; + return "translate(0, " + -centerOffset + ")"; + }); +} + +/** + * + * @param {*} textElement + * + * Splits the label into version number (inc. LTS if it exists) + * and release name and puts them over two lines + */ +function formatLabel(textElement) { + var textXValue = textElement.attr("x"); + var words = textElement.text().split("("); + + if (words[1]) { + words[1] = "(" + words[1]; + } + + textElement.text(""); + + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "-0.5em") + .text(words[0]) + .call(emboldenLTSLabels); + + if (words.length > 1) { + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "1.6em") + .text(words.slice(1).join(" ")); + } +} + +/** + * + * @param {*} textNode + * + * Embolden text if it contains LTS + * + */ +function emboldenLTSLabels(textNode) { + const textContent = textNode.text(); + if (textContent?.includes("LTS")) { + textNode.classed("chart__label--bold", true); + } +} + +/** + * + * @param {*} yAxisGroup + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatAxisLabels(yAxisGroup) { + yAxisGroup.selectAll(".tick text").call(function (t) { + t.each(function (d) { + formatLabel(d3.select(this)); + }); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {*} y + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, y) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + transformTickText(yAxisGroup, y); + formatAxisLabels(yAxisGroup); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {Int} x1 + * @param {Int} x2 + * @param {*} y + * @param {String} strokeColor + * @param {Int} strokeColor + * + * Appends a horiontal line to the SVG based on custom parameters + */ +function addHorizontalLine(svg, x1, x2, y, strokeColor, strokeWidth) { + svg + .append("line") + .attr("x1", x1) + .attr("x2", x2) + .attr("y1", y) + .attr("y2", y) + .attr("stroke", strokeColor) + .attr("stroke-width", strokeWidth); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + + const lineAdjustment = 27; + + tickPositions.forEach((posY, index) => { + addHorizontalLine( + svg, + -margin.left, + 0, + posY - lineAdjustment, + "#D9D9D9", + 2 + ); + + addHorizontalLine( + svg, + 0, + width + margin.right, + posY - lineAdjustment, + "#D9D9D9", + index === 0 ? 2 : 1 + ); + }); +} + +/** + * + * @param {*} svg + * @param {*} versionAxis + * + * Add version axis to chart + */ +function addVersionAxis(svg, versionAxis) { + svg.append("g").attr("class", "version axis").call(versionAxis); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {*} svg + * @param {String} highlightVersion + * + * Set version axis labels + */ +function highlightChartRow(svg, scale, highlightVersion) { + const domain = scale.domain(); + const tickValues = domain.map((value) => value.toString()); + + svg.selectAll(".y.axis .tick text").each(function (d, i) { + const tickText = d3.select(this); + const textContent = tickValues[i].toString(); + + var isNotHighlightedVersion = + highlightVersion && !textContent.includes(highlightVersion); + var isYearLabel = + textContent.includes("20") && !textContent.includes("Ubuntu "); + + if (isNotHighlightedVersion) { + tickText.classed("chart__label--transparent", true); + } + + if (isYearLabel) { + tickText.classed("chart__label--transparent", false); + } + }); +} + +/** + * + * @param {*} svg + * + * Set version axis labels + */ +function setVersionAxisLabels(svg, taskVersions) { + svg.selectAll(".version .tick text").select(function (tickLabel, index) { + this.textContent = taskVersions[index]; + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * + * Adds vertical lines to the x axis + */ +function addXAxisVerticalLines(svg, height, margin) { + svg + .selectAll(".x.axis .tick line") + .attr("y1", height - margin.bottom - margin.top) + .attr("y2", 26); +} + +/** + * + * @param {String} chartSelector + * @param {Object} taskStatus + * + * Builds key for supplied chart based on task status + */ +function buildChartKey(chartSelector, taskStatus) { + var taskStatusKeys = Object.keys(taskStatus); + var rectDimensions = 25; + var rowHeight = rectDimensions + 5; + var gapBetweenRectAndText = 10; + var verticalTextAlignmentOffset = 16; + var containerWidth = document.querySelector(chartSelector).clientWidth; + + var numberOfExtraLines = + getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + var extraChartHeight = numberOfExtraLines * 9; + + var chartKey = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart-key") + .attr("width", containerWidth) + .attr( + "height", + rowHeight * taskStatusKeys.length + + extraChartHeight * taskStatusKeys.length + ); + + taskStatusKeys.forEach(function (key, i) { + var keyRow = chartKey + .append("g") + .attr("class", "chart-key__row") + .attr( + "transform", + "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" + ) + .attr("height", rectDimensions); + + keyRow + .append("rect") + .attr("class", taskStatus[key]) + .attr("width", rectDimensions) + .attr("height", rectDimensions) + .attr("y", 0); + + keyRow + .append("text") + .text(formatKeyLabel(key)) + .attr("class", "chart-key__label") + .attr("x", rectDimensions + gapBetweenRectAndText) + .attr("y", verticalTextAlignmentOffset) + .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); + }); +} + +/** + * + * @param {String} text + * @param {Int} containerWidth + * + * Find the max number of lines that any given text will occupy from + * a list of texts, based on a given container width + */ +function getMaxNumberOfLines(textList, width) { + var tempSvg = (svg = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg" + )); + svg.style.position = "absolute"; + svg.style.visibility = "hidden"; + svg.width = width; + document.body.appendChild(svg); + + var maxNumberOfLines = 1; + + textList.forEach(function (key, i) { + let textNode = document.createElementNS( + "http://www.w3.org/2000/svg", + "text" + ); + textNode.textContent = formatKeyLabel(key); + svg.appendChild(textNode); + var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); + if (numberOfLines > maxNumberOfLines) { + maxNumberOfLines = numberOfLines; + } + svg.removeChild(textNode); + }); + document.body.removeChild(svg); + return maxNumberOfLines; +} + +/** + * + * @param {String} text + * @param {Int} width + * + * At the point where a text would be longer that the container width, + * split the text into tspan (two lines) + */ +function wrapText(text, width) { + var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; + text.each(function () { + var text = d3.select(this), + words = text.text().split(/\s+/).reverse(), + word, + line = [], + lineNumber = 0, + lineHeight = 1.1, + x = text.attr("x"), + y = text.attr("y"), + dy = 0; + tspan = text + .text(null) + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", dy + "em"); + while ((word = words.pop())) { + line.push(word); + tspan.text(line.join(" ")); + if (tspan.node().getComputedTextLength() > width) { + line.pop(); + tspan.text(line.join(" ")); + line = [word]; + tspan = text + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", ++lineNumber * lineHeight + dy + "em") + .text(word); + } + } + }); +} + +/** + * + * @param {String} key + * + * Formats key into readable string + */ +function formatKeyLabel(key) { + var keyLowerCase = key.toLowerCase().replace(/_/g, " "); + var formattedKey = + keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); + formattedKey = formattedKey.replace( + "Lts", + "Ubuntu LTS release Standard Support" + ); + formattedKey = formattedKey.replace(" openstack ", " OpenStack "); + formattedKey = formattedKey.replace("kub", "Kub"); + formattedKey = formattedKey.replace( + "Interim release", + "Interim release standard security maintenance (9 months)" + ); + formattedKey = formattedKey.replace( + "Esm", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" + ); + formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); + formattedKey = formattedKey.replace("Early", "Early preview"); + formattedKey = formattedKey.replace( + "Hardware and maintenance updates", + "LTS standard security maintenance for Ubuntu Main (initial 5 years)" + ); + formattedKey = formattedKey.replace( + "Main universe", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" + ); + formattedKey = formattedKey.replace( + "Microstack esm", + "Expanded Security Maintenance (ESM)" + ); + formattedKey = formattedKey.replace( + "Pro support", + "Ubuntu Pro + Support coverage" + ); + return formattedKey; +} + +/** + * + * @param {Array} taskTypes + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * 7; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Object} taskStatus + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createSupportChart( + chartSelector, + keySelector, + taskTypes, + taskStatus, + tasks, + taskVersions, + removePadding, + highlightVersion +) { + var margin = { + top: 12, + right: 40, + bottom: 20, + }; + margin.left = calculateYAxisWidth(taskTypes); + var rowHeight = 64; + var timeDomainStart; + var timeDomainEnd; + var earliestStartDate = d3.min(tasks, (d) => d.startDate); + var latestEndDate = d3.max(tasks, (d) => d.endDate); + if (removePadding) { + timeDomainStart = earliestStartDate; + timeDomainEnd = latestEndDate; + } else { + timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); + timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); + } + var keyAttachmentSelector = keySelector || chartSelector; + var height = taskTypes.length * rowHeight; + var containerWidth = document.querySelector(chartSelector).clientWidth; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + + containerWidth = closestCol.clientWidth - margin.left; + } + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleTime() + .domain([timeDomainStart, timeDomainEnd]) + .range([0, width + margin.right]) + .clamp(true); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.58); + + var version = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.4); + + var xAxis = d3.axisBottom(x); + + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + var chartTranslateX = margin.left; + + if (taskVersions) { + var versionAxis = d3 + .axisRight(version) + .tickPadding(-margin.left * 1.6) + .tickSize(0); + + chartTranslateX = margin.left * 1.6; + } + + sortTasks(tasks); + + // Build initial chart body + var svg = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height - margin.top - margin.bottom) + .append("g") + .attr("class", "gantt-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr( + "transform", + "translate(" + chartTranslateX + ", " + margin.top + ")" + ); + + addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, y); + + if (taskVersions) { + addVersionAxis(svg, versionAxis); + setVersionAxisLabels(svg, taskVersions); + } + + addXAxisVerticalLines(svg, height, margin); + addYAxisHorizontalLines(svg, yAxis, width, margin); + cleanUpChart(svg); + buildChartKey(keyAttachmentSelector, taskStatus); + + highlightChartRow(svg, y, highlightVersion); +} diff --git a/static/sass/_pattern_chart.scss b/static/sass/_pattern_chart.scss index dd672e4bd2a..9896a994d1f 100644 --- a/static/sass/_pattern_chart.scss +++ b/static/sass/_pattern_chart.scss @@ -22,6 +22,18 @@ stroke-width: 1px; } +.chart__bar--aubergine-mid-light { + fill: #923a66; + stroke: #923a66; + stroke-width: 1px; +} + +.chart__bar--aubergine-light { + fill: #cba7b8; + stroke: #cba7b8; + stroke-width: 1px; +} + .chart__bar--green { fill: green; stroke: green; @@ -34,6 +46,12 @@ stroke-width: 1px; } +.chart__bar--black { + fill: #111; + stroke: #111; + stroke-width: 1px; +} + .chart__label--bold { font-weight: bold; } @@ -63,6 +81,22 @@ text-anchor: start !important; } +#server-desktop-eol { + .tick text { + font-size: 16px; + } + + .x.axis text { + color: #666; + font-size: 16px; + text-anchor: start !important; + } + + .chart__label--bold { + font-weight: 600; + } +} + .chart-key { display: block; } diff --git a/templates/about/release_cycles/ubuntu-small-eol.html b/templates/about/release_cycles/ubuntu-small-eol.html index ff0e433d2c4..16a332478d9 100644 --- a/templates/about/release_cycles/ubuntu-small-eol.html +++ b/templates/about/release_cycles/ubuntu-small-eol.html @@ -1,8 +1,6 @@
    -
    -
    - {% include "about/release_cycles/releases-table.html" %} -
    +
    + {% include "about/release_cycles/releases-table.html" %}
    \ No newline at end of file diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 40137bfcd10..0c54fc3567e 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -17,7 +17,6 @@

    Ubuntu Desktop
    for developers

    -

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu is your ideal workstation.

    @@ -78,6 +77,8 @@

    Why choose Ubuntu Desktop?

    Security support
    for Ubuntu releases

    +
    +
    @@ -112,11 +113,11 @@

    Access to cutting-edge hardware and software

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/e332a639-jupyter-logo.png", alt="juptyer logo", @@ -128,7 +129,7 @@

    Access to cutting-edge hardware and software

    ) | safe }}
    -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", alt="keras logo", @@ -378,8 +379,8 @@

    Certified hardware

    width="110", height="256", hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} + loading="auto|lazy", + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -391,7 +392,7 @@

    Certified hardware

    height="144", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -402,8 +403,8 @@

    Certified hardware

    width="71", height="144", hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} + loading="auto|lazy", + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -415,7 +416,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -427,7 +428,7 @@

    Certified hardware

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -439,7 +440,7 @@

    Certified hardware

    height="372", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -451,7 +452,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -546,7 +547,7 @@

    Download and install

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or run Ubuntu alongside it.

    -
    +
    Download now
    @@ -557,7 +558,7 @@

    Buy it pre-installed

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, HP, and Lenovo.

    -
    +
    Find out more about our retail partners ›
    @@ -568,7 +569,7 @@

    Join our community

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    -
    +
    • Ubuntu Discourse @@ -630,7 +631,6 @@

      ) - diff --git a/templates/shared/_release_schedule.html b/templates/shared/_release_schedule.html index 94ee28b609c..38bd39ecf98 100644 --- a/templates/shared/_release_schedule.html +++ b/templates/shared/_release_schedule.html @@ -15,7 +15,7 @@

      A release schedule you can depend

    -
    +
    From a46c2d279c2b231246fa9cc0f4cfec72122e76f9 Mon Sep 17 00:00:00 2001 From: Peter French Date: Mon, 29 Jan 2024 13:44:41 +0100 Subject: [PATCH 41/72] Fix logo misalignment (#13504) * Fix logo misalignment * Appease linter --- static/js/src/support-chart.js | 21 +++++++++------------ templates/desktop/developers.html | 18 +++++++++--------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js index f2d5c3470cc..737725a9d60 100644 --- a/static/js/src/support-chart.js +++ b/static/js/src/support-chart.js @@ -403,14 +403,11 @@ function buildChartKey(chartSelector, taskStatus) { * a list of texts, based on a given container width */ function getMaxNumberOfLines(textList, width) { - var tempSvg = (svg = document.createElementNS( - "http://www.w3.org/2000/svg", - "svg" - )); - svg.style.position = "absolute"; - svg.style.visibility = "hidden"; - svg.width = width; - document.body.appendChild(svg); + var tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + tempSvg.style.position = "absolute"; + tempSvg.style.visibility = "hidden"; + tempSvg.width = width; + document.body.appendChild(tempSvg); var maxNumberOfLines = 1; @@ -420,14 +417,14 @@ function getMaxNumberOfLines(textList, width) { "text" ); textNode.textContent = formatKeyLabel(key); - svg.appendChild(textNode); + tempSvg.appendChild(textNode); var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); if (numberOfLines > maxNumberOfLines) { maxNumberOfLines = numberOfLines; } - svg.removeChild(textNode); + tempSvg.removeChild(textNode); }); - document.body.removeChild(svg); + document.body.removeChild(tempSvg); return maxNumberOfLines; } @@ -451,7 +448,7 @@ function wrapText(text, width) { x = text.attr("x"), y = text.attr("y"), dy = 0; - tspan = text + var tspan = text .text(null) .append("tspan") .attr("x", x) diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 0c54fc3567e..0b1fe83ba9c 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -113,7 +113,7 @@

    Access to cutting-edge hardware and software

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -129,7 +129,7 @@

    Access to cutting-edge hardware and software

    ) | safe }} -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", alt="keras logo", @@ -380,7 +380,7 @@

    Certified hardware

    height="256", hi_def=True, loading="auto|lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }}
    @@ -392,7 +392,7 @@

    Certified hardware

    height="144", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }}
    @@ -404,7 +404,7 @@

    Certified hardware

    height="144", hi_def=True, loading="auto|lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -416,7 +416,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -428,7 +428,7 @@

    Certified hardware

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -440,7 +440,7 @@

    Certified hardware

    height="372", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -452,7 +452,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} From 046fda59d60b584033f91ca47822449b196b8088 Mon Sep 17 00:00:00 2001 From: Peter French Date: Thu, 1 Feb 2024 13:57:21 +0100 Subject: [PATCH 42/72] Redesign hackearth and opensource charts (#13511) * Refresh /desktop/developers * Make the linter not sad * Apply review changes * Refactor developer-chart.js to match new design * Refactor hows graphs are drawn * Apply redesign to hackearth&opensource chars && change some d3 file names for clarity * Apply design suggestions * Linty lint * Use a table inplace of the graph on small screens --- build.js | 3 +- static/js/src/developer-chart.js | 483 ++++++++-- static/js/src/release-chart-manager.js | 263 ++++++ .../js/src/{chart.js => release-chart-old.js} | 2 +- static/js/src/release-chart.js | 855 +++++++++++++----- static/js/src/support-chart.js | 653 ------------- static/js/src/tabbed-content.js | 2 +- static/sass/_pattern_chart.scss | 35 +- templates/16-04/_release-chart-1604.html | 2 +- templates/18-04/_release-chart-1604.html | 2 +- templates/about/index.html | 2 +- templates/about/release-cycle.html | 3 +- templates/cpu-compatibility/index.html | 2 +- templates/desktop/developers.html | 76 +- .../desktop/partial/_developers-table.html | 46 + .../desktop/partial/_hackearth-table.html | 50 + templates/engage/de_why-openstack.html | 2 +- templates/engage/es_why-openstack.html | 2 +- templates/engage/fr_why-openstack.html | 2 +- templates/openstack/why-openstack.html | 2 +- .../shared/_kernel-support-schedule.html | 4 +- templates/shared/_release_schedule.html | 2 +- 22 files changed, 1445 insertions(+), 1048 deletions(-) create mode 100644 static/js/src/release-chart-manager.js rename static/js/src/{chart.js => release-chart-old.js} (99%) delete mode 100644 static/js/src/support-chart.js create mode 100644 templates/desktop/partial/_developers-table.html create mode 100644 templates/desktop/partial/_hackearth-table.html diff --git a/build.js b/build.js index 614dbeb27c8..4681ebefef6 100644 --- a/build.js +++ b/build.js @@ -8,7 +8,8 @@ let entries = { "side-navigation": "./static/js/src/side-navigation.js", "image-download": "./static/js/src/image-download.js", main: "./static/js/src/main.js", - "release-chart": "./static/js/src/release-chart.js", + "release-chart-manager": "./static/js/src/release-chart-manager.js", + "developer-chart": "./static/js/src/developer-chart.js", tabotronic: "./static/js/src/tabotronic.js", appliance: "./static/js/src/appliance.js", costCalculator: "./static/js/src/openstack/react/app.jsx", diff --git a/static/js/src/developer-chart.js b/static/js/src/developer-chart.js index 399c439d983..5f341a1b53c 100644 --- a/static/js/src/developer-chart.js +++ b/static/js/src/developer-chart.js @@ -1,107 +1,404 @@ -const hackerEarthData = [ - { count: 66, label: "Ubuntu" }, - { count: 61, label: "MS Windows" }, - { count: 57, label: "MacOS" }, - { count: 11, label: "CentOs" }, - { count: 10, label: "Debian" }, - { count: 9, label: "Fedora" }, - { count: 8, label: "Arch Linux" }, - { count: 4, label: "Solaris" }, - { count: 2, label: "FreeBSD" }, - { count: 1, label: "Deepin" }, -]; -const OpenSourcedata = [ - { count: 35.6, label: "Ubuntu" }, - { count: 21.4, label: "Debian" }, - { count: 19.5, label: "CentOS" }, - { count: 16, label: "RHEL" }, - { count: 14.6, label: "OpenSUSE" }, - { count: 13.5, label: "SLES" }, - { count: 11.1, label: "SELinux" }, - { count: 7.5, label: "Rocky Linux" }, - { count: 4.8, label: "NavyLinux" }, -]; - -function createChart(dataset, id) { - const data = dataset.sort(function (a, b) { +import { debounce } from "./utils/debounce.js"; + +var hackerEarthData = { + tasks: [ + { value: 66, taskName: "Ubuntu" }, + { value: 61, taskName: "MS Windows" }, + { value: 57, taskName: "MacOS" }, + { value: 11, taskName: "CentOs" }, + { value: 10, taskName: "Debian" }, + { value: 9, taskName: "Fedora" }, + { value: 8, taskName: "Arch Linux" }, + { value: 4, taskName: "Solaris" }, + { value: 2, taskName: "FreeBSD" }, + { value: 1, taskName: "Deepin" }, + ], + labels: [ + "Ubuntu", + "MS Windows", + "MacOS", + "CentOs", + "Debian", + "Fedora", + "Arch Linux", + "Solaris", + "FreeBSD", + "Deepin", + ], +}; + +var openSourceData = { + tasks: [ + { value: 35.6, taskName: "Ubuntu" }, + { value: 21.4, taskName: "Debian" }, + { value: 19.5, taskName: "CentOS" }, + { value: 16, taskName: "RHEL" }, + { value: 14.6, taskName: "OpenSUSE" }, + { value: 13.5, taskName: "SLES" }, + { value: 11.1, taskName: "SELinux" }, + { value: 7.5, taskName: "Rocky Linux" }, + { value: 4.8, taskName: "NavyLinux" }, + ], + labels: [ + "Ubuntu", + "Debian", + "CentOS", + "RHEL", + "OpenSUSE", + "SLES", + "SELinux", + "Rocky Linux", + "NavyLinux", + ], +}; + +// Global variables - used widely throughout the chart making process +var margin = { + top: 24, + right: 40, + bottom: 30, + left: 0, +}; +var gapSpacing = 32; + +/** + * + * @param {*} data + */ +function sortData(data) { + return (data = data.sort(function (a, b) { return d3.ascending(a.count, b.count); + })); +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, x, y) { + const barClass = (d) => + d.taskName === "Ubuntu" ? "chart__bar--orange" : "chart__bar--light-grey"; + const barWidth = (d) => x(d.value) - x(0); + const barTransform = (d) => `translate(${x(0)},${y(d.taskName)})`; + + svg + .selectAll(".chart") + .data(tasks, (d) => d.taskName + d.value) + .enter() + .append("rect") + .attr("class", barClass) + .attr("y", 0) + .attr("transform", barTransform) + .attr("height", y.bandwidth) + .attr("width", barWidth); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + var xAxisGroup = svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + -margin.top + ")") + .call(xAxis); + xAxisGroup.selectAll(".tick text").attr("dx", 3); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {Array} tasks + * Example of tasks array: + * [{taskName: "Task 1", value: 10}, {taskName: "Task 2", value: 20}, ...] + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatYAxisLabels(yAxisGroup, tasks) { + yAxisGroup.selectAll(".tick text").each(function (d, i) { + d3.select(this).text(""); + d3.select(this).append("tspan").text(d); + d3.select(this) + .append("tspan") + .text(tasks[i].value + "%") + .attr("style", "text-anchor: end;") + .attr("x", -gapSpacing); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Array} tasks + * Example of tasks array: + * [{taskName: "Task 1", value: 10}, {taskName: "Task 2", value: 20}, ...] + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, tasks) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + formatYAxisLabels(yAxisGroup, tasks); + addPercentageSymbol(svg); +} + +function addPercentageSymbol(svg) { + svg + .append("text") + .text("%") + .attr("style", "text-anchor:end;font-weight:500;font-size:14px;") + .attr("x", 0 - gapSpacing) + .attr("dy", -3); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {Int} x1 + * @param {Int} x2 + * @param {Int} y1 + * @param {Int} y2 + * @param {String} strokeColor + * @param {Int} strokeColor + * + * Appends a horiontal line to the SVG based on custom parameters + */ +function addHorizontalLine(svg, x1, x2, y1, y2, strokeColor, strokeWidth) { + svg + .append("line") + .attr("x1", x1) + .attr("x2", x2) + .attr("y1", y1) + .attr("y2", y2) + .attr("stroke", strokeColor) + .attr("stroke-width", strokeWidth); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + + tickPositions.forEach((posY, index) => { + addHorizontalLine( + svg, + -margin.left, + -gapSpacing, + posY - 2, + posY - 2, + "#D9D9D9", + 1 + ); }); - var margin = { - top: 15, - right: 60, - bottom: 15, - left: 100, - }; + addHorizontalLine( + svg, + 0, + width + margin.right, + tickPositions[0] - 2, + tickPositions[0] - 2, + "#D9D9D9", + 2 + ); +} + +/** + * + * @param {*} svg + * + * Selects the elements in the x-axis and extends it + */ +function addXAxisTicks(svg) { + svg.selectAll(".x.axis .tick line").each(function () { + d3.select(this) + .attr("y1", 3) + .attr("y2", 28) + .attr("style", "stroke-dasharray:none;"); + }); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {Array} YAxisLabels + * @param {Int} spacePerChar + * @param {Int} extraSpace + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels, spacePerChar, extraSpace = 0) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * spacePerChar + extraSpace; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createDeveloperChart(chartSelector, taskTypes, tasks) { + margin.left = calculateYAxisWidth(taskTypes, 15, gapSpacing); + var rowHeight = 36; + var highestValue = d3.max(tasks, (d) => d.value); + var height = taskTypes.length * rowHeight + margin.bottom; + var parent = d3.select(chartSelector); + var containerWidth = parent.node().getBoundingClientRect().width; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + containerWidth = closestCol.clientWidth - margin.left; + } + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleLinear() + .domain([0, highestValue + 10]) + .range([0, width + margin.right]); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.1); - var width = 500 - margin.left - margin.right, - height = 300 - margin.top - margin.bottom; + var xAxis = d3.axisBottom(x).tickValues(d3.range(0, highestValue + 10, 10)); + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + sortData(tasks); + + // Build initial chart body var svg = d3 - .select(`#${id}`) + .select(chartSelector) .append("svg") + .attr("class", "chart") .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) + .attr("height", height - margin.top) .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - var x = d3.scale - .linear() - .range([0, width]) - .domain([ - 0, - d3.max(data, function (d) { - return d.count; - }), - ]); - - var y = d3.scale - .ordinal() - .rangeRoundBands([height, 0], 0.1) - .domain( - data.map(function (d) { - return d.label; - }) + .attr("class", "horizontal-bar-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); + + addBarsToChart(svg, tasks, x, y); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, tasks); + + addYAxisHorizontalLines(svg, yAxis, width, margin); + addXAxisTicks(svg); + cleanUpChart(svg); +} + +function buildCharts() { + if (document.querySelector("#hackerearth-chart")) { + createDeveloperChart( + "#hackerearth-chart", + hackerEarthData.labels, + hackerEarthData.tasks ); + } + if (document.querySelector("#opensource-chart")) { + createDeveloperChart( + "#opensource-chart", + openSourceData.labels, + openSourceData.tasks + ); + } +} - var yAxis = d3.svg.axis().scale(y).tickSize(0).orient("left"); +function clearCharts() { + const hackerEarthData = document.querySelector("#hackerearth-chart"); + if (hackerEarthData) { + hackerEarthData.innerHTML = ""; + } + const openSourceData = document.querySelector("#opensource-chart"); + if (openSourceData) { + openSourceData.innerHTML = ""; + } +} - var gy = svg.append("g").attr("class", "y axis").call(yAxis); +var mediumBreakpoint = 620; - var bars = svg.selectAll(".bar").data(data).enter().append("g"); +// A bit of a hack, but chart doesn't load with full year axis on first load, +// It has to be loaded once, and then again +// This will need looking into but this fix will work for now +if (window.innerWidth >= mediumBreakpoint) { + buildCharts(); + setTimeout(function () { + clearCharts(); + buildCharts(); + }, 0); +} - bars - .append("rect") - .attr("class", "bar") - .attr("y", function (d) { - return y(d.label); - }) - .attr("height", y.rangeBand()) - .attr("x", 8) - .attr("width", function (d) { - return x(d.count); - }) - .attr("fill", function (d) { - if (d.label == "Ubuntu") { - return "#E95420"; - } else { - return "#AEA79F"; - } - }); - - bars - .append("text") - .attr("class", "label") - .attr("y", function (d) { - return y(d.label) + y.rangeBand() / 2 + 4; - }) - .attr("x", function (d) { - return x(d.count) + 17; - }) - .text(function (d) { - return `${d.count}%`; - }); -} - -createChart(hackerEarthData, "hackerearth-chart"); -createChart(OpenSourcedata, "opensource-chart"); +window.addEventListener( + "resize", + debounce(function () { + if (window.innerWidth >= mediumBreakpoint) { + clearCharts(); + buildCharts(); + } + }, 250) +); diff --git a/static/js/src/release-chart-manager.js b/static/js/src/release-chart-manager.js new file mode 100644 index 00000000000..7f4188bed6a --- /dev/null +++ b/static/js/src/release-chart-manager.js @@ -0,0 +1,263 @@ +import { createReleaseChartOld } from "./release-chart-old.js"; +import { createReleaseChart } from "./release-chart.js"; +import { debounce } from "./utils/debounce.js"; +import { + serverAndDesktopReleases, + kernelReleases, + kernelReleaseSchedule, + kernelReleases2204, + kernelReleases2004, + kernelReleases1804, + kernelReleases1604, + kernelReleases1404, + kernelReleasesALL, + kernelReleasesLTS, + openStackReleases, + kubernetesReleases, + microStackReleases, + desktopServerStatus, + kernelStatus, + kernelReleaseScheduleStatus, + kernelStatusLTS, + kernelStatusALL, + openStackStatus, + kubernetesStatus, + microStackStatus, + desktopServerReleaseNames, + kernelReleaseNames, + kernelVersionNames, + kernelReleaseScheduleNames, + kernelReleaseNames2204, + kernelReleaseNames2004, + kernelReleaseNames1804, + kernelReleaseNames1604, + kernelReleaseNames1404, + kernelReleaseNamesLTS, + kernelReleaseNamesALL, + openStackReleaseNames, + kubernetesReleaseNames, + microStackReleaseNames, +} from "./chart-data.js"; + +function buildCharts() { + if (document.querySelector("#server-desktop-eol")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChart( + "#server-desktop-eol", + "#server-desktop-eol-key", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#server-desktop-eol-old")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChartOld( + "#server-desktop-eol-old", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#eol-1604")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChartOld( + "#eol-1604", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases, + false, + [], + "16.04" + ); + } + if (document.querySelector("#kernel-eol")) { + createReleaseChartOld( + "#kernel-eol", + kernelReleaseNames, + kernelStatus, + kernelReleases, + kernelVersionNames + ); + } + if (document.querySelector("#kernel2204")) { + createReleaseChartOld( + "#kernel2204", + kernelReleaseNames2204, + kernelStatus, + kernelReleases2204 + ); + } + if (document.querySelector("#kernel2004")) { + createReleaseChartOld( + "#kernel2004", + kernelReleaseNames2004, + kernelStatus, + kernelReleases2004 + ); + } + if (document.querySelector("#kernel1804")) { + createReleaseChartOld( + "#kernel1804", + kernelReleaseNames1804, + kernelStatus, + kernelReleases1804 + ); + } + if (document.querySelector("#kernel1604")) { + createReleaseChartOld( + "#kernel1604", + kernelReleaseNames1604, + kernelStatus, + kernelReleases1604 + ); + } + if (document.querySelector("#kernel1404")) { + createReleaseChartOld( + "#kernel1404", + kernelReleaseNames1404, + kernelStatus, + kernelReleases1404 + ); + } + if (document.querySelector("#kernellts")) { + createReleaseChartOld( + "#kernellts", + kernelReleaseNamesLTS, + kernelStatusLTS, + kernelReleasesLTS + ); + } + if (document.querySelector("#kernelall")) { + createReleaseChartOld( + "#kernelall", + kernelReleaseNamesALL, + kernelStatusALL, + kernelReleasesALL + ); + } + if (document.querySelector("#openstack-eol")) { + createReleaseChartOld( + "#openstack-eol", + openStackReleaseNames, + openStackStatus, + openStackReleases + ); + } + if (document.querySelector("#kubernetes-eol")) { + createReleaseChartOld( + "#kubernetes-eol", + kubernetesReleaseNames, + kubernetesStatus, + kubernetesReleases, + false, + true + ); + } + if (document.querySelector("#kernel-schedule")) { + createReleaseChartOld( + "#kernel-schedule", + kernelReleaseScheduleNames, + kernelReleaseScheduleStatus, + kernelReleaseSchedule + ); + } + if (document.querySelector("#microstack-eol")) { + createReleaseChartOld( + "#microstack-eol", + microStackReleaseNames, + microStackStatus, + microStackReleases + ); + } +} + +function clearCharts() { + const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); + if (serverDesktopEolOld) { + serverDesktopEolOld.innerHTML = ""; + } + const serverDesktopEol = document.querySelector("#server-desktop-eol"); + if (serverDesktopEol) { + serverDesktopEol.innerHTML = ""; + } + const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); + if (serverDesktopEolKey) { + serverDesktopEolKey.innerHTML = ""; + } + const eol1604 = document.querySelector("#eol-1604"); + if (eol1604) { + eol1604.innerHTML = ""; + } + const kernelEol = document.querySelector("#kernel-eol"); + if (kernelEol) { + kernelEol.innerHTML = ""; + } + const kernel2204 = document.querySelector("#kernel2204"); + if (kernel2204) { + kernel2204.innerHTML = ""; + } + const kernel2004 = document.querySelector("#kernel2004"); + if (kernel2004) { + kernel2004.innerHTML = ""; + } + const kernel1804 = document.querySelector("#kernel1804"); + if (kernel1804) { + kernel1804.innerHTML = ""; + } + const kernel1604 = document.querySelector("#kernel1604"); + if (kernel1604) { + kernel1604.innerHTML = ""; + } + const kernel1404 = document.querySelector("#kernel1404"); + if (kernel1404) { + kernel1404.innerHTML = ""; + } + const kernellts = document.querySelector("#kernellts"); + if (kernellts) { + kernellts.innerHTML = ""; + } + const kernelall = document.querySelector("#kernelall"); + if (kernelall) { + kernelall.innerHTML = ""; + } + const openstackEol = document.querySelector("#openstack-eol"); + if (openstackEol) { + openstackEol.innerHTML = ""; + } + const kubernetesEol = document.querySelector("#kubernetes-eol"); + if (kubernetesEol) { + kubernetesEol.innerHTML = ""; + } + const kernelSchedule = document.querySelector("#kernel-schedule"); + if (kernelSchedule) { + kernelSchedule.innerHTML = ""; + } + const microstackEol = document.querySelector("#microstack-eol"); + if (microstackEol) { + microstackEol.innerHTML = ""; + } +} + +var mediumBreakpoint = 620; + +// A bit of a hack, but chart doesn't load with full year axis on first load, +// It has to be loaded once, and then again +// This will need looking into but this fix will work for now +if (window.innerWidth >= mediumBreakpoint) { + buildCharts(); + setTimeout(function () { + clearCharts(); + buildCharts(); + }, 0); +} + +window.addEventListener( + "resize", + debounce(function () { + if (window.innerWidth >= mediumBreakpoint) { + clearCharts(); + buildCharts(); + } + }, 250) +); diff --git a/static/js/src/chart.js b/static/js/src/release-chart-old.js similarity index 99% rename from static/js/src/chart.js rename to static/js/src/release-chart-old.js index 55c50b29fee..5f426a60057 100644 --- a/static/js/src/chart.js +++ b/static/js/src/release-chart-old.js @@ -309,7 +309,7 @@ function calculateYAxisWidth(YAxisLabels) { * * Builds chart using supplied selector and data */ -export function createChart( +export function createReleaseChartOld( chartSelector, taskTypes, taskStatus, diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 72fe93d340d..10478f79050 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -1,264 +1,617 @@ -import { createChart } from "./chart"; -import { debounce } from "./utils/debounce.js"; -import { - serverAndDesktopReleases, - kernelReleases, - kernelReleaseSchedule, - kernelReleases2204, - kernelReleases2004, - kernelReleases1804, - kernelReleases1604, - kernelReleases1404, - kernelReleasesALL, - kernelReleasesLTS, - openStackReleases, - kubernetesReleases, - microStackReleases, - desktopServerStatus, - kernelStatus, - kernelReleaseScheduleStatus, - kernelStatusLTS, - kernelStatusALL, - openStackStatus, - kubernetesStatus, - microStackStatus, - desktopServerReleaseNames, - kernelReleaseNames, - kernelVersionNames, - kernelReleaseScheduleNames, - kernelReleaseNames2204, - kernelReleaseNames2004, - kernelReleaseNames1804, - kernelReleaseNames1604, - kernelReleaseNames1404, - kernelReleaseNamesLTS, - kernelReleaseNamesALL, - openStackReleaseNames, - kubernetesReleaseNames, - microStackReleaseNames, -} from "./chart-data"; - -function buildCharts() { - if (document.querySelector("#server-desktop-eol-old")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createChart( - "#server-desktop-eol-old", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases - ); - } - if (document.querySelector("#server-desktop-eol")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createSupportChart( - "#server-desktop-eol", - "#server-desktop-eol-key", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases - ); - } - if (document.querySelector("#eol-1604")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createChart( - "#eol-1604", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases, - false, - [], - "16.04" - ); - } - if (document.querySelector("#kernel-eol")) { - createChartWithTitles( - "#kernel-eol", - kernelReleaseNames, - "Ubuntu", - kernelStatus, - kernelReleases, - kernelVersionNames, - "Kernel" - ); - } - if (document.querySelector("#kernel2204")) { - createChart( - "#kernel2204", - kernelReleaseNames2204, - kernelStatus, - kernelReleases2204 - ); - } - if (document.querySelector("#kernel2004")) { - createChart( - "#kernel2004", - kernelReleaseNames2004, - kernelStatus, - kernelReleases2004 - ); - } - if (document.querySelector("#kernel1804")) { - createChart( - "#kernel1804", - kernelReleaseNames1804, - kernelStatus, - kernelReleases1804 - ); - } - if (document.querySelector("#kernel1604")) { - createChart( - "#kernel1604", - kernelReleaseNames1604, - kernelStatus, - kernelReleases1604 - ); - } - if (document.querySelector("#kernel1404")) { - createChart( - "#kernel1404", - kernelReleaseNames1404, - kernelStatus, - kernelReleases1404 - ); - } - if (document.querySelector("#kernellts")) { - createChart( - "#kernellts", - kernelReleaseNamesLTS, - kernelStatusLTS, - kernelReleasesLTS - ); - } - if (document.querySelector("#kernelall")) { - createChart( - "#kernelall", - kernelReleaseNamesALL, - kernelStatusALL, - kernelReleasesALL - ); +/** + * + * @param {Array} tasks + * + * Sorts tasks by date + */ +function sortTasks(tasks) { + tasks.sort(function (a, b) { + return a.endDate - b.endDate; + }); + + tasks.sort(function (a, b) { + return a.startDate - b.startDate; + }); + + return tasks; +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {Object} taskStatus + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { + svg + .selectAll(".chart") + .data(tasks, function (d) { + return d.startDate + d.taskName + d.endDate; + }) + .enter() + .append("rect") + .attr("class", function (d) { + var className = ""; + if (taskStatus[d.status] === null) { + return "bar"; + } + + className += " " + taskStatus[d.status]; + + return className; + }) + .attr("y", 0) + .attr("transform", function (d) { + if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { + return ( + "translate(" + + x(d.startDate) + + "," + + (y(d.taskName) - y.bandwidth()) + + ")" + ); + } + return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; + }) + .attr("height", function () { + return y.bandwidth(); + }) + .attr("width", function (d) { + return x(d.endDate) - x(d.startDate); + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + (margin.top - 32) + ")") + .call(xAxis); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {*} y + * + * Centers labels in line with bars + */ +function transformTickText(yAxisGroup, y) { + yAxisGroup.selectAll(".tick text").attr("transform", function (d) { + var centerOffset = y.bandwidth() / 2; + return "translate(0, " + -centerOffset + ")"; + }); +} + +/** + * + * @param {*} textElement + * + * Splits the label into version number (inc. LTS if it exists) + * and release name and puts them over two lines + */ +function formatLabel(textElement) { + var textXValue = textElement.attr("x"); + var words = textElement.text().split("("); + + if (words[1]) { + words[1] = "(" + words[1]; } - if (document.querySelector("#openstack-eol")) { - createChart( - "#openstack-eol", - openStackReleaseNames, - openStackStatus, - openStackReleases - ); + + textElement.text(""); + + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "-0.5em") + .text(words[0]) + .call(emboldenLTSLabels); + + if (words.length > 1) { + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "1.6em") + .text(words.slice(1).join(" ")); } - if (document.querySelector("#kubernetes-eol")) { - createChart( - "#kubernetes-eol", - kubernetesReleaseNames, - kubernetesStatus, - kubernetesReleases, - false, - true - ); +} + +/** + * + * @param {*} textNode + * + * Embolden text if it contains LTS + * + */ +function emboldenLTSLabels(textNode) { + const textContent = textNode.text(); + if (textContent?.includes("LTS")) { + textNode.classed("chart__label--bold", true); } - if (document.querySelector("#kernel-schedule")) { - createChart( - "#kernel-schedule", - kernelReleaseScheduleNames, - kernelReleaseScheduleStatus, - kernelReleaseSchedule +} + +/** + * + * @param {*} yAxisGroup + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatAxisLabels(yAxisGroup) { + yAxisGroup.selectAll(".tick text").call(function (t) { + t.each(function (d) { + formatLabel(d3.select(this)); + }); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {*} y + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, y) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + transformTickText(yAxisGroup, y); + formatAxisLabels(yAxisGroup); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + const lineAdjustment = 27; + + tickPositions.forEach((posY, index) => { + svg + .append("line") + .attr("x1", -margin.left) + .attr("x2", width + margin.right) + .attr("y1", posY - lineAdjustment) + .attr("y2", posY - lineAdjustment) + .attr("stroke", "#D9D9D9") + .attr("stroke-width", index === 0 ? 2 : 1); + }); +} + +/** + * + * @param {*} svg + * @param {*} versionAxis + * + * Add version axis to chart + */ +function addVersionAxis(svg, versionAxis) { + svg.append("g").attr("class", "version axis").call(versionAxis); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {*} svg + * @param {String} highlightVersion + * + * Set version axis labels + */ +function highlightChartRow(svg, scale, highlightVersion) { + const domain = scale.domain(); + const tickValues = domain.map((value) => value.toString()); + + svg.selectAll(".y.axis .tick text").each(function (d, i) { + const tickText = d3.select(this); + const textContent = tickValues[i].toString(); + + var isNotHighlightedVersion = + highlightVersion && !textContent.includes(highlightVersion); + var isYearLabel = + textContent.includes("20") && !textContent.includes("Ubuntu "); + + if (isNotHighlightedVersion) { + tickText.classed("chart__label--transparent", true); + } + + if (isYearLabel) { + tickText.classed("chart__label--transparent", false); + } + }); +} + +/** + * + * @param {*} svg + * + * Set version axis labels + */ +function setVersionAxisLabels(svg, taskVersions) { + svg.selectAll(".version .tick text").select(function (tickLabel, index) { + this.textContent = taskVersions[index]; + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * + * Adds vertical lines to the x axis + */ +function addXAxisVerticalLines(svg, height, margin) { + svg + .selectAll(".x.axis .tick line") + .attr("y1", height - margin.bottom - margin.top) + .attr("y2", 26); +} + +/** + * + * @param {String} chartSelector + * @param {Object} taskStatus + * + * Builds key for supplied chart based on task status + */ +function buildChartKey(chartSelector, taskStatus) { + var taskStatusKeys = Object.keys(taskStatus); + var rectDimensions = 25; + var rowHeight = rectDimensions + 5; + var gapBetweenRectAndText = 10; + var verticalTextAlignmentOffset = 16; + var containerWidth = document.querySelector(chartSelector).clientWidth; + + var numberOfExtraLines = + getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + var extraChartHeight = numberOfExtraLines * 9; + + var chartKey = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart-key") + .attr("width", containerWidth) + .attr( + "height", + rowHeight * taskStatusKeys.length + + extraChartHeight * taskStatusKeys.length ); - } - if (document.querySelector("#microstack-eol")) { - createChart( - "#microstack-eol", - microStackReleaseNames, - microStackStatus, - microStackReleases + + taskStatusKeys.forEach(function (key, i) { + var keyRow = chartKey + .append("g") + .attr("class", "chart-key__row") + .attr( + "transform", + "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" + ) + .attr("height", rectDimensions); + + keyRow + .append("rect") + .attr("class", taskStatus[key]) + .attr("width", rectDimensions) + .attr("height", rectDimensions) + .attr("y", 0); + + keyRow + .append("text") + .text(formatKeyLabel(key)) + .attr("class", "chart-key__label") + .attr("x", rectDimensions + gapBetweenRectAndText) + .attr("y", verticalTextAlignmentOffset) + .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); + }); +} + +/** + * + * @param {String} text + * @param {Int} containerWidth + * + * Find the max number of lines that any given text will occupy from + * a list of texts, based on a given container width + */ +function getMaxNumberOfLines(textList, width) { + var tempSvg = (svg = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg" + )); + svg.style.position = "absolute"; + svg.style.visibility = "hidden"; + svg.width = width; + document.body.appendChild(svg); + + var maxNumberOfLines = 1; + + textList.forEach(function (key, i) { + let textNode = document.createElementNS( + "http://www.w3.org/2000/svg", + "text" ); - } + textNode.textContent = formatKeyLabel(key); + svg.appendChild(textNode); + var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); + if (numberOfLines > maxNumberOfLines) { + maxNumberOfLines = numberOfLines; + } + svg.removeChild(textNode); + }); + document.body.removeChild(svg); + return maxNumberOfLines; } -function clearCharts() { - const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); - if (serverDesktopEolOld) { - serverDesktopEolOld.innerHTML = ""; - } - const serverDesktopEol = document.querySelector("#server-desktop-eol"); - if (serverDesktopEol) { - serverDesktopEol.innerHTML = ""; - } - const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); - if (serverDesktopEolKey) { - serverDesktopEolKey.innerHTML = ""; - } - const eol1604 = document.querySelector("#eol-1604"); - if (eol1604) { - eol1604.innerHTML = ""; - } - const kernelEol = document.querySelector("#kernel-eol"); - if (kernelEol) { - kernelEol.innerHTML = ""; - } - const kernel2204 = document.querySelector("#kernel2204"); - if (kernel2204) { - kernel2204.innerHTML = ""; - } - const kernel2004 = document.querySelector("#kernel2004"); - if (kernel2004) { - kernel2004.innerHTML = ""; - } - const kernel1804 = document.querySelector("#kernel1804"); - if (kernel1804) { - kernel1804.innerHTML = ""; - } - const kernel1604 = document.querySelector("#kernel1604"); - if (kernel1604) { - kernel1604.innerHTML = ""; - } - const kernel1404 = document.querySelector("#kernel1404"); - if (kernel1404) { - kernel1404.innerHTML = ""; - } - const kernellts = document.querySelector("#kernellts"); - if (kernellts) { - kernellts.innerHTML = ""; - } - const kernelall = document.querySelector("#kernelall"); - if (kernelall) { - kernelall.innerHTML = ""; - } - const openstackEol = document.querySelector("#openstack-eol"); - if (openstackEol) { - openstackEol.innerHTML = ""; +/** + * + * @param {String} text + * @param {Int} width + * + * At the point where a text would be longer that the container width, + * split the text into tspan (two lines) + */ +function wrapText(text, width) { + var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; + text.each(function () { + var text = d3.select(this), + words = text.text().split(/\s+/).reverse(), + word, + line = [], + lineNumber = 0, + lineHeight = 1.1, + x = text.attr("x"), + y = text.attr("y"), + dy = 0; + tspan = text + .text(null) + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", dy + "em"); + while ((word = words.pop())) { + line.push(word); + tspan.text(line.join(" ")); + if (tspan.node().getComputedTextLength() > width) { + line.pop(); + tspan.text(line.join(" ")); + line = [word]; + tspan = text + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", ++lineNumber * lineHeight + dy + "em") + .text(word); + } + } + }); +} + +/** + * + * @param {String} key + * + * Formats key into readable string + */ +function formatKeyLabel(key) { + var keyLowerCase = key.toLowerCase().replace(/_/g, " "); + var formattedKey = + keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); + formattedKey = formattedKey.replace( + "Lts", + "Ubuntu LTS release Standard Support" + ); + formattedKey = formattedKey.replace(" openstack ", " OpenStack "); + formattedKey = formattedKey.replace("kub", "Kub"); + formattedKey = formattedKey.replace( + "Interim release", + "Interim release standard security maintenance (9 months)" + ); + formattedKey = formattedKey.replace( + "Esm", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" + ); + formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); + formattedKey = formattedKey.replace("Early", "Early preview"); + formattedKey = formattedKey.replace( + "Hardware and maintenance updates", + "LTS standard security maintenance for Ubuntu Main (initial 5 years)" + ); + formattedKey = formattedKey.replace( + "Main universe", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" + ); + formattedKey = formattedKey.replace( + "Microstack esm", + "Expanded Security Maintenance (ESM)" + ); + formattedKey = formattedKey.replace( + "Pro support", + "Ubuntu Pro + Support coverage" + ); + return formattedKey; +} + +/** + * + * @param {Array} taskTypes + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * 7; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Object} taskStatus + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createReleaseChart( + chartSelector, + keySelector, + taskTypes, + taskStatus, + tasks, + taskVersions, + removePadding, + highlightVersion +) { + var margin = { + top: 12, + right: 40, + bottom: 20, + }; + margin.left = calculateYAxisWidth(taskTypes); + var rowHeight = 64; + var timeDomainStart; + var timeDomainEnd; + var earliestStartDate = d3.min(tasks, (d) => d.startDate); + var latestEndDate = d3.max(tasks, (d) => d.endDate); + if (removePadding) { + timeDomainStart = earliestStartDate; + timeDomainEnd = latestEndDate; + } else { + timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); + timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); } - const kubernetesEol = document.querySelector("#kubernetes-eol"); - if (kubernetesEol) { - kubernetesEol.innerHTML = ""; + var keyAttachmentSelector = keySelector || chartSelector; + var height = taskTypes.length * rowHeight; + var containerWidth = document.querySelector(chartSelector).clientWidth; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + + containerWidth = closestCol.clientWidth - margin.left; } - const kernelSchedule = document.querySelector("#kernel-schedule"); - if (kernelSchedule) { - kernelSchedule.innerHTML = ""; + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleTime() + .domain([timeDomainStart, timeDomainEnd]) + .range([0, width + margin.right]) + .clamp(true); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.58); + + var version = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.4); + + var xAxis = d3.axisBottom(x); + + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + var chartTranslateX = margin.left; + + if (taskVersions) { + var versionAxis = d3 + .axisRight(version) + .tickPadding(-margin.left * 1.6) + .tickSize(0); + + chartTranslateX = margin.left * 1.6; } - const microstackEol = document.querySelector("#microstack-eol"); - if (microstackEol) { - microstackEol.innerHTML = ""; + + sortTasks(tasks); + + // Build initial chart body + var svg = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height - margin.top - margin.bottom) + .append("g") + .attr("class", "gantt-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr( + "transform", + "translate(" + chartTranslateX + ", " + margin.top + ")" + ); + + addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, y); + + if (taskVersions) { + addVersionAxis(svg, versionAxis); + setVersionAxisLabels(svg, taskVersions); } -} -var mediumBreakpoint = 620; - -// A bit of a hack, but chart doesn't load with full year axis on first load, -// It has to be loaded once, and then again -// This will need looking into but this fix will work for now -if (window.innerWidth >= mediumBreakpoint) { - buildCharts(); - setTimeout(function () { - clearCharts(); - buildCharts(); - }, 0); -} + addXAxisVerticalLines(svg, height, margin); + addYAxisHorizontalLines(svg, yAxis, width, margin); + cleanUpChart(svg); + buildChartKey(keyAttachmentSelector, taskStatus); -window.addEventListener( - "resize", - debounce(function () { - if (window.innerWidth >= mediumBreakpoint) { - clearCharts(); - buildCharts(); - } - }, 250) -); + highlightChartRow(svg, y, highlightVersion); +} diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js deleted file mode 100644 index 737725a9d60..00000000000 --- a/static/js/src/support-chart.js +++ /dev/null @@ -1,653 +0,0 @@ -import { ro } from "date-fns/locale"; - -/** - * - * @param {Array} tasks - * - * Sorts tasks by date - */ -function sortTasks(tasks) { - tasks.sort(function (a, b) { - return a.endDate - b.endDate; - }); - - tasks.sort(function (a, b) { - return a.startDate - b.startDate; - }); - - return tasks; -} - -/** - * - * @param {*} svg - * @param {Array} tasks - * @param {Object} taskStatus - * @param {*} x - * @param {*} y - * - * Add bars to chart using supplied data - */ -function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { - svg - .selectAll(".chart") - .data(tasks, function (d) { - return d.startDate + d.taskName + d.endDate; - }) - .enter() - .append("rect") - .attr("class", function (d) { - var className = ""; - - if (taskStatus[d.status] === null) { - return "bar"; - } - - if (highlightVersion && !d.taskName.includes(highlightVersion)) { - className += " chart__bar--transparent"; - } - - className += " " + taskStatus[d.status]; - - return className; - }) - .attr("y", 0) - .attr("transform", function (d) { - if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { - return ( - "translate(" + - x(d.startDate) + - "," + - (y(d.taskName) - y.bandwidth()) + - ")" - ); - } - return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; - }) - .attr("height", function () { - return y.bandwidth(); - }) - .attr("width", function (d) { - return x(d.endDate) - x(d.startDate); - }); -} - -/** - * - * @param {*} svg - * @param {Int} height - * @param {Object} margin - * @param {*} xAxis - * - * Add x-axis group to SVG - */ -function addXAxis(svg, height, margin, xAxis) { - svg - .append("g") - .attr("class", "x axis") - .attr("transform", "translate(0, " + (margin.top - 32) + ")") - .call(xAxis); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * - * Append y-axis group to SVG - */ -function appendYAxisGroup(svg, yAxis) { - return svg.append("g").attr("class", "y axis").call(yAxis); -} - -/** - * - * @param {*} yAxisGroup - * @param {*} y - * - * Centers labels in line with bars - */ -function transformTickText(yAxisGroup, y) { - yAxisGroup.selectAll(".tick text").attr("transform", function (d) { - var centerOffset = y.bandwidth() / 2; - return "translate(0, " + -centerOffset + ")"; - }); -} - -/** - * - * @param {*} textElement - * - * Splits the label into version number (inc. LTS if it exists) - * and release name and puts them over two lines - */ -function formatLabel(textElement) { - var textXValue = textElement.attr("x"); - var words = textElement.text().split("("); - - if (words[1]) { - words[1] = "(" + words[1]; - } - - textElement.text(""); - - textElement - .append("tspan") - .attr("x", textXValue) - .attr("dy", "-0.5em") - .text(words[0]) - .call(emboldenLTSLabels); - - if (words.length > 1) { - textElement - .append("tspan") - .attr("x", textXValue) - .attr("dy", "1.6em") - .text(words.slice(1).join(" ")); - } -} - -/** - * - * @param {*} textNode - * - * Embolden text if it contains LTS - * - */ -function emboldenLTSLabels(textNode) { - const textContent = textNode.text(); - if (textContent?.includes("LTS")) { - textNode.classed("chart__label--bold", true); - } -} - -/** - * - * @param {*} yAxisGroup - * - * Loops through the axis labels and calls the formatLabel - * function on them - */ -function formatAxisLabels(yAxisGroup) { - yAxisGroup.selectAll(".tick text").call(function (t) { - t.each(function (d) { - formatLabel(d3.select(this)); - }); - }); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * @param {*} y - * - * Builds and appends the y-axis - */ -function addYAxis(svg, yAxis, y) { - var yAxisGroup = appendYAxisGroup(svg, yAxis); - transformTickText(yAxisGroup, y); - formatAxisLabels(yAxisGroup); -} - -/** - * - * @param {*} yAxis - * - * Gets the tick positions of the y-axis - */ -function getTickPositions(yAxis) { - const yAxisScale = yAxis.scale(); - const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); - return ticks.map((tick) => yAxisScale(tick)); -} - -/** - * - * @param {*} svg - * @param {Int} x1 - * @param {Int} x2 - * @param {*} y - * @param {String} strokeColor - * @param {Int} strokeColor - * - * Appends a horiontal line to the SVG based on custom parameters - */ -function addHorizontalLine(svg, x1, x2, y, strokeColor, strokeWidth) { - svg - .append("line") - .attr("x1", x1) - .attr("x2", x2) - .attr("y1", y) - .attr("y2", y) - .attr("stroke", strokeColor) - .attr("stroke-width", strokeWidth); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * @param {Int} width - * @param {Obj} margin - * - * Find the postion of the Y-axis ticks and adds a horizontal - * line above each label and one that spans the chart area - */ -function addYAxisHorizontalLines(svg, yAxis, width, margin) { - const tickPositions = getTickPositions(yAxis); - - const lineAdjustment = 27; - - tickPositions.forEach((posY, index) => { - addHorizontalLine( - svg, - -margin.left, - 0, - posY - lineAdjustment, - "#D9D9D9", - 2 - ); - - addHorizontalLine( - svg, - 0, - width + margin.right, - posY - lineAdjustment, - "#D9D9D9", - index === 0 ? 2 : 1 - ); - }); -} - -/** - * - * @param {*} svg - * @param {*} versionAxis - * - * Add version axis to chart - */ -function addVersionAxis(svg, versionAxis) { - svg.append("g").attr("class", "version axis").call(versionAxis); -} - -/** - * - * @param {*} svg - * - * Clean up unwanted elements on chart put in by d3.js - */ -function cleanUpChart(svg) { - svg.selectAll(".domain").remove(); -} - -/** - * - * @param {*} svg - * @param {String} highlightVersion - * - * Set version axis labels - */ -function highlightChartRow(svg, scale, highlightVersion) { - const domain = scale.domain(); - const tickValues = domain.map((value) => value.toString()); - - svg.selectAll(".y.axis .tick text").each(function (d, i) { - const tickText = d3.select(this); - const textContent = tickValues[i].toString(); - - var isNotHighlightedVersion = - highlightVersion && !textContent.includes(highlightVersion); - var isYearLabel = - textContent.includes("20") && !textContent.includes("Ubuntu "); - - if (isNotHighlightedVersion) { - tickText.classed("chart__label--transparent", true); - } - - if (isYearLabel) { - tickText.classed("chart__label--transparent", false); - } - }); -} - -/** - * - * @param {*} svg - * - * Set version axis labels - */ -function setVersionAxisLabels(svg, taskVersions) { - svg.selectAll(".version .tick text").select(function (tickLabel, index) { - this.textContent = taskVersions[index]; - }); -} - -/** - * - * @param {*} svg - * @param {Int} height - * - * Adds vertical lines to the x axis - */ -function addXAxisVerticalLines(svg, height, margin) { - svg - .selectAll(".x.axis .tick line") - .attr("y1", height - margin.bottom - margin.top) - .attr("y2", 26); -} - -/** - * - * @param {String} chartSelector - * @param {Object} taskStatus - * - * Builds key for supplied chart based on task status - */ -function buildChartKey(chartSelector, taskStatus) { - var taskStatusKeys = Object.keys(taskStatus); - var rectDimensions = 25; - var rowHeight = rectDimensions + 5; - var gapBetweenRectAndText = 10; - var verticalTextAlignmentOffset = 16; - var containerWidth = document.querySelector(chartSelector).clientWidth; - - var numberOfExtraLines = - getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; - var extraChartHeight = numberOfExtraLines * 9; - - var chartKey = d3 - .select(chartSelector) - .append("svg") - .attr("class", "chart-key") - .attr("width", containerWidth) - .attr( - "height", - rowHeight * taskStatusKeys.length + - extraChartHeight * taskStatusKeys.length - ); - - taskStatusKeys.forEach(function (key, i) { - var keyRow = chartKey - .append("g") - .attr("class", "chart-key__row") - .attr( - "transform", - "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" - ) - .attr("height", rectDimensions); - - keyRow - .append("rect") - .attr("class", taskStatus[key]) - .attr("width", rectDimensions) - .attr("height", rectDimensions) - .attr("y", 0); - - keyRow - .append("text") - .text(formatKeyLabel(key)) - .attr("class", "chart-key__label") - .attr("x", rectDimensions + gapBetweenRectAndText) - .attr("y", verticalTextAlignmentOffset) - .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); - }); -} - -/** - * - * @param {String} text - * @param {Int} containerWidth - * - * Find the max number of lines that any given text will occupy from - * a list of texts, based on a given container width - */ -function getMaxNumberOfLines(textList, width) { - var tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - tempSvg.style.position = "absolute"; - tempSvg.style.visibility = "hidden"; - tempSvg.width = width; - document.body.appendChild(tempSvg); - - var maxNumberOfLines = 1; - - textList.forEach(function (key, i) { - let textNode = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - textNode.textContent = formatKeyLabel(key); - tempSvg.appendChild(textNode); - var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); - if (numberOfLines > maxNumberOfLines) { - maxNumberOfLines = numberOfLines; - } - tempSvg.removeChild(textNode); - }); - document.body.removeChild(tempSvg); - return maxNumberOfLines; -} - -/** - * - * @param {String} text - * @param {Int} width - * - * At the point where a text would be longer that the container width, - * split the text into tspan (two lines) - */ -function wrapText(text, width) { - var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; - text.each(function () { - var text = d3.select(this), - words = text.text().split(/\s+/).reverse(), - word, - line = [], - lineNumber = 0, - lineHeight = 1.1, - x = text.attr("x"), - y = text.attr("y"), - dy = 0; - var tspan = text - .text(null) - .append("tspan") - .attr("x", x) - .attr("y", y - negativeTextMargin) - .attr("dy", dy + "em"); - while ((word = words.pop())) { - line.push(word); - tspan.text(line.join(" ")); - if (tspan.node().getComputedTextLength() > width) { - line.pop(); - tspan.text(line.join(" ")); - line = [word]; - tspan = text - .append("tspan") - .attr("x", x) - .attr("y", y - negativeTextMargin) - .attr("dy", ++lineNumber * lineHeight + dy + "em") - .text(word); - } - } - }); -} - -/** - * - * @param {String} key - * - * Formats key into readable string - */ -function formatKeyLabel(key) { - var keyLowerCase = key.toLowerCase().replace(/_/g, " "); - var formattedKey = - keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); - formattedKey = formattedKey.replace( - "Lts", - "Ubuntu LTS release Standard Support" - ); - formattedKey = formattedKey.replace(" openstack ", " OpenStack "); - formattedKey = formattedKey.replace("kub", "Kub"); - formattedKey = formattedKey.replace( - "Interim release", - "Interim release standard security maintenance (9 months)" - ); - formattedKey = formattedKey.replace( - "Esm", - "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" - ); - formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); - formattedKey = formattedKey.replace("Early", "Early preview"); - formattedKey = formattedKey.replace( - "Hardware and maintenance updates", - "LTS standard security maintenance for Ubuntu Main (initial 5 years)" - ); - formattedKey = formattedKey.replace( - "Main universe", - "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" - ); - formattedKey = formattedKey.replace( - "Microstack esm", - "Expanded Security Maintenance (ESM)" - ); - formattedKey = formattedKey.replace( - "Pro support", - "Ubuntu Pro + Support coverage" - ); - return formattedKey; -} - -/** - * - * @param {Array} taskTypes - * - * Calculate the longest Y-Axis label - */ -function calculateYAxisWidth(YAxisLabels) { - var YAxisLabelsCopy = YAxisLabels.slice(); - var longestLabel = YAxisLabelsCopy.sort(function (a, b) { - return b.length - a.length; - })[0]; - return longestLabel.length * 7; -} - -/** - * - * @param {String} chartSelector - * @param {Array} taskTypes - * @param {Object} taskStatus - * @param {Array} tasks - * - * Builds chart using supplied selector and data - */ -export function createSupportChart( - chartSelector, - keySelector, - taskTypes, - taskStatus, - tasks, - taskVersions, - removePadding, - highlightVersion -) { - var margin = { - top: 12, - right: 40, - bottom: 20, - }; - margin.left = calculateYAxisWidth(taskTypes); - var rowHeight = 64; - var timeDomainStart; - var timeDomainEnd; - var earliestStartDate = d3.min(tasks, (d) => d.startDate); - var latestEndDate = d3.max(tasks, (d) => d.endDate); - if (removePadding) { - timeDomainStart = earliestStartDate; - timeDomainEnd = latestEndDate; - } else { - timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); - timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); - } - var keyAttachmentSelector = keySelector || chartSelector; - var height = taskTypes.length * rowHeight; - var containerWidth = document.querySelector(chartSelector).clientWidth; - if (containerWidth <= 0) { - var closestCol = document - .querySelector(chartSelector) - .closest('[class*="col-"]'); - - if (closestCol.clientWidth <= 0) { - return; - } - - containerWidth = closestCol.clientWidth - margin.left; - } - var width = containerWidth - margin.right - margin.left; - - var x = d3 - .scaleTime() - .domain([timeDomainStart, timeDomainEnd]) - .range([0, width + margin.right]) - .clamp(true); - - var y = d3 - .scaleBand() - .domain(taskTypes) - .rangeRound([0, height - margin.top - margin.bottom]) - .padding(0.58); - - var version = d3 - .scaleBand() - .domain(taskTypes) - .rangeRound([0, height - margin.top - margin.bottom]) - .padding(0.4); - - var xAxis = d3.axisBottom(x); - - var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); - - var chartTranslateX = margin.left; - - if (taskVersions) { - var versionAxis = d3 - .axisRight(version) - .tickPadding(-margin.left * 1.6) - .tickSize(0); - - chartTranslateX = margin.left * 1.6; - } - - sortTasks(tasks); - - // Build initial chart body - var svg = d3 - .select(chartSelector) - .append("svg") - .attr("class", "chart") - .attr("width", width + margin.left + margin.right) - .attr("height", height - margin.top - margin.bottom) - .append("g") - .attr("class", "gantt-chart") - .attr("width", width + margin.left + margin.right) - .attr("height", height) - .attr( - "transform", - "translate(" + chartTranslateX + ", " + margin.top + ")" - ); - - addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); - addXAxis(svg, height, margin, xAxis); - addYAxis(svg, yAxis, y); - - if (taskVersions) { - addVersionAxis(svg, versionAxis); - setVersionAxisLabels(svg, taskVersions); - } - - addXAxisVerticalLines(svg, height, margin); - addYAxisHorizontalLines(svg, yAxis, width, margin); - cleanUpChart(svg); - buildChartKey(keyAttachmentSelector, taskStatus); - - highlightChartRow(svg, y, highlightVersion); -} diff --git a/static/js/src/tabbed-content.js b/static/js/src/tabbed-content.js index 0fe4c82d4b9..06cfff5925e 100644 --- a/static/js/src/tabbed-content.js +++ b/static/js/src/tabbed-content.js @@ -186,7 +186,7 @@ return false; }; - const targetScript = "release-chart.js"; + const targetScript = "release-chart-manager.js"; const triggerReload = isScriptIncluded(targetScript); document.addEventListener("DOMContentLoaded", () => { diff --git a/static/sass/_pattern_chart.scss b/static/sass/_pattern_chart.scss index 9896a994d1f..5d2d27b22a2 100644 --- a/static/sass/_pattern_chart.scss +++ b/static/sass/_pattern_chart.scss @@ -16,6 +16,12 @@ stroke-width: 1px; } +.chart__bar--light-grey { + fill: #c2c2c2; + stroke: #c2c2c2; + stroke-width: 1px; +} + .chart__bar--aubergine { fill: #772953; stroke: #772953; @@ -81,6 +87,27 @@ text-anchor: start !important; } +.chart-key { + display: block; +} + +.chart-key__row { + display: block; +} + +.horizontal-bar-chart { + .tick text { + font-size: 16px; + font-weight: 350; + } + + .x.axis text { + color: #666; + font-size: 16px; + font-weight: 400; + } +} + #server-desktop-eol { .tick text { font-size: 16px; @@ -96,11 +123,3 @@ font-weight: 600; } } - -.chart-key { - display: block; -} - -.chart-key__row { - display: block; -} diff --git a/templates/16-04/_release-chart-1604.html b/templates/16-04/_release-chart-1604.html index 8205cfc1329..214233b2b74 100644 --- a/templates/16-04/_release-chart-1604.html +++ b/templates/16-04/_release-chart-1604.html @@ -94,4 +94,4 @@ - + diff --git a/templates/18-04/_release-chart-1604.html b/templates/18-04/_release-chart-1604.html index 8205cfc1329..214233b2b74 100644 --- a/templates/18-04/_release-chart-1604.html +++ b/templates/18-04/_release-chart-1604.html @@ -94,4 +94,4 @@ - + diff --git a/templates/about/index.html b/templates/about/index.html index d723c8aa9e9..a3d8dca46ab 100755 --- a/templates/about/index.html +++ b/templates/about/index.html @@ -45,5 +45,5 @@

    Ubuntu today

    - + {% endblock content %} diff --git a/templates/about/release-cycle.html b/templates/about/release-cycle.html index 250433e1468..2cb500d99a4 100755 --- a/templates/about/release-cycle.html +++ b/templates/about/release-cycle.html @@ -247,6 +247,7 @@

    Canonical Kubernetes release cycle

    - + + {% endblock content %} diff --git a/templates/cpu-compatibility/index.html b/templates/cpu-compatibility/index.html index 3ac763d15d7..cb83bba62ce 100755 --- a/templates/cpu-compatibility/index.html +++ b/templates/cpu-compatibility/index.html @@ -253,6 +253,6 @@

    Supported OpenStack versions

    - + {% endblock content %} diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 0b1fe83ba9c..b454ec5dfd6 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -155,26 +155,26 @@

    Access to cutting-edge hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", - alt="tensor flow logo", - width="145", - height="145", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", + alt="tensor flow logo", + width="145", + height="145", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe }}
    {{ image ( - url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", - alt="pytorch logo", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", + alt="pytorch logo", + width="288", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe }}
    @@ -466,22 +466,43 @@

    Certified hardware

    Developers love Ubuntu, organisations trust it

    -
    -
    -

    Operating systems developers prefer
    Multiple choice poll

    -
    -
    +
    +
    +

    Operating systems developers prefer
    Multiple choice poll

    +
    +
    + {% include "desktop/partial/_hackearth-table.html" %} +
    + +
    +
    +

    Source: The 2020 + HackerEarth Developer Survey

    +
    +
    +

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    +
    +
    + {% include "desktop/partial/_hackearth-table.html" %} +
    +
    +
    +

    Source: The + 2022 State of Open Source Report – OpenLogic

    +
    +
    +
    +
    +

    Source: The 2020 HackerEarth Developer Survey

    -

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    -
    -
    -

    Source: The @@ -632,8 +653,7 @@

    - - - + + {% endblock content %} \ No newline at end of file diff --git a/templates/desktop/partial/_developers-table.html b/templates/desktop/partial/_developers-table.html new file mode 100644 index 00000000000..8571830a71e --- /dev/null +++ b/templates/desktop/partial/_developers-table.html @@ -0,0 +1,46 @@ +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Operating systemPercentage
    Ubutun35.6%
    Debian21.4%
    CentOS19.5%
    RHEL16%
    OpenSUSE14.6%
    SLES13.5%
    SELinux11.1%
    Rocky Linux7.5%
    NavyLinux4.8%
    \ No newline at end of file diff --git a/templates/desktop/partial/_hackearth-table.html b/templates/desktop/partial/_hackearth-table.html new file mode 100644 index 00000000000..7ea229a09fa --- /dev/null +++ b/templates/desktop/partial/_hackearth-table.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Operating systemPercentage
    Ubuntu66%
    MS Windows61%
    MacOS57%
    CentOs11%
    Debian10%
    Fedora9%
    Arch Linux8%
    Solaris4%
    FreeBSD2%
    Deepin1%
    \ No newline at end of file diff --git a/templates/engage/de_why-openstack.html b/templates/engage/de_why-openstack.html index df6b2d92ebe..f91d8af7a19 100644 --- a/templates/engage/de_why-openstack.html +++ b/templates/engage/de_why-openstack.html @@ -173,5 +173,5 @@

    Kontaktieren Sie uns

    - + {% endblock content %} diff --git a/templates/engage/es_why-openstack.html b/templates/engage/es_why-openstack.html index 1d5ebff21ad..e7c1c292159 100644 --- a/templates/engage/es_why-openstack.html +++ b/templates/engage/es_why-openstack.html @@ -155,5 +155,5 @@

    Ponerse en contacto

    - + {% endblock content %} diff --git a/templates/engage/fr_why-openstack.html b/templates/engage/fr_why-openstack.html index 5283887519e..f226abef1d2 100644 --- a/templates/engage/fr_why-openstack.html +++ b/templates/engage/fr_why-openstack.html @@ -158,5 +158,5 @@

    Entrer en contact

    - + {% endblock content %} diff --git a/templates/openstack/why-openstack.html b/templates/openstack/why-openstack.html index 904db530589..ff84d8e1a81 100644 --- a/templates/openstack/why-openstack.html +++ b/templates/openstack/why-openstack.html @@ -171,5 +171,5 @@

    Get in touch

    - + {% endblock content %} diff --git a/templates/shared/_kernel-support-schedule.html b/templates/shared/_kernel-support-schedule.html index 29f9045c71f..4509a220e29 100644 --- a/templates/shared/_kernel-support-schedule.html +++ b/templates/shared/_kernel-support-schedule.html @@ -392,5 +392,5 @@

    Kernel release schedule

    - - \ No newline at end of file + + diff --git a/templates/shared/_release_schedule.html b/templates/shared/_release_schedule.html index 38bd39ecf98..b0dd72d2250 100644 --- a/templates/shared/_release_schedule.html +++ b/templates/shared/_release_schedule.html @@ -111,4 +111,4 @@

    A release schedule you can depend

    - + From 1ce38a5ff40fee7921ee77db1d44cef164e38a01 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Mon, 5 Feb 2024 16:12:12 +0100 Subject: [PATCH 43/72] Apply visual refresh --- templates/desktop/flavours.html | 532 ++++++++++++++++++++------------ 1 file changed, 338 insertions(+), 194 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 4fe82b6db00..26b65a7e8ff 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -4,33 +4,37 @@ {% block meta_description %}Ubuntu flavours are different installations of Ubuntu - each with a choice of packages and applications included by default. Here you are able to choose and download the officially recognised flavour that would best suit your particular industry and unique needs.{% endblock %} {% block meta_copydoc %}https://docs.google.com/document/d/1M5nkigcSRzq1YVjiXOZkeU4EUCqT0uYBR3Y_sjxM-wM/edit{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock %} {% block content %} -
    -
    -
    -

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    -

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto" - ) | safe - }} +
    +
    +
    +
    +

    Ubuntu flavours

    +

    What are Ubuntu flavours?

    +

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", + alt="", + width="1296", + height="460", + hi_def=True, + loading="auto" + ) | safe + }} +
    +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -41,35 +45,29 @@

    Ubuntu flavours

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img"}, ) | safe }} -

    Edubuntu

    +

    Edubuntu

    +
    +
    +
    +

    Edubuntu is an official flavor of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    -

    Get Edubuntu

    -

    Join the Edubuntu community ›

    -

    Follow Edubuntu ›

    + Get Edubuntu
    + +
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/54331fa0-edubuntu-2304-screenshot.png", - alt="", - width="2560", - height="1440", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    - -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/7c6fa2da-kubuntu-2204-screenshot.png", +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/54331fa0-edubuntu-2304-screenshot.png", alt="", width="2560", height="1440", @@ -78,7 +76,13 @@

    Edubuntu

    ) | safe }}
    -
    +
    +
    + +
    +
    +
    +
    {{ @@ -92,23 +96,42 @@

    Edubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Kubuntu

    +

    Kubuntu

    -
    +
    +
    +
    +

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    -

    Get Kubuntu

    -

    Join the Kubuntu community › -

    Follow Kubuntu ›

    -
    + Get Kubuntu
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/7c6fa2da-kubuntu-2204-screenshot.png", + alt="", + width="2560", + height="1440", + hi_def=True, + loading="lazy" + ) | safe + }}
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -122,18 +145,25 @@

    Kubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Lubuntu

    -
    -
    -

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    -

    Get Lubuntu

    -

    Join the Lubuntu community ›

    -

    Follow Lubuntu ›

    +

    Lubuntu

    -
    - {{ image ( +
    +
    +

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    + Get Lubuntu +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/8d50725a-lubuntu-2204-screenshot.png", alt="", width="1920", @@ -146,20 +176,10 @@

    Lubuntu

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/eb97c55b-Ubuntu_Budgie.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -173,22 +193,42 @@

    Lubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Budgie

    -
    -

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    -

    Get Ubuntu Budgie

    -

    Join the Ubuntu Budgie community ›

    -

    Follow Ubuntu Budgie ›

    +

    Ubuntu Budgie

    +
    +
    +

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    + Get Ubuntu Budgie +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/eb97c55b-Ubuntu_Budgie.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -202,18 +242,25 @@

    Ubuntu Budgie

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Cinnamon

    -
    -
    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    -

    Get Ubuntu Cinnamon

    -

    Join the Ubuntu Cinnamon community ›

    -

    Follow Ubuntu Cinnamon ›

    +

    Ubuntu Cinnamon

    -
    - {{ image ( +
    +
    +

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    + Get Ubuntu Cinnamon +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/70b28e5e-ubuntu-cinnamon-2304-screenshot.png", alt="", width="1920", @@ -226,20 +273,10 @@

    Ubuntu Cinnamon

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/0bd4870d-Kylin2204.png", - alt="", - width="1360", - height="768", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -253,21 +290,41 @@

    Ubuntu Cinnamon

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Kylin

    -
    -

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    -

    Get Ubuntu Kylin

    -

    Join the Ubuntu Kylin community ›

    -

    Follow Ubuntu Kylin ›

    +

    Ubuntu Kylin

    +
    +
    +

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    + Get Ubuntu Kylin +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/0bd4870d-Kylin2204.png", + alt="", + width="1360", + height="768", + hi_def=True, + loading="lazy" + ) | safe + }} +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -281,18 +338,25 @@

    Ubuntu Kylin

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu MATE

    -
    -
    -

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    -

    Get Ubuntu MATE

    -

    Join the Ubuntu MATE community ›

    -

    Follow Ubuntu MATE ›

    +

    Ubuntu MATE

    -
    - {{ image ( +
    +
    +

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    + Get Ubuntu MATE +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/1d7a53b1-UbuntuMATE-screenshot.png", alt="", width="1664", @@ -305,20 +369,10 @@

    Ubuntu MATE

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/777dd5d3-UbuntuStudio.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -332,24 +386,45 @@

    Ubuntu MATE

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Studio

    -
    -
    -

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    -

    Get Ubuntu Studio

    -

    Join the Ubuntu Studio community ›

    -

    Follow Ubuntu Studio ›

    +

    Ubuntu Studio

    +
    +
    +

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    + Get Ubuntu Studio +
    + +
    -
    -
    -
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/777dd5d3-UbuntuStudio.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +
    + +
    +
    +
    +
    - {{ image ( + {{ + image ( url="https://assets.ubuntu.com/v1/219d06b0-ubuntu-unity-logo.png", alt="Unity Icon", width="64", @@ -359,34 +434,26 @@

    Ubuntu Studio

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Unity

    -
    -
    -

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    -

    Get Ubuntu Unity

    -

    Join the Ubuntu Unity community ›

    -

    Follow Ubuntu Unity ›

    +

    Ubuntu Unity

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e96f6b6d-ubuntu-unity-desktop-screenshot.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} +
    +
    +

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    + Get Ubuntu Unity +
    +
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/5f23328b-xubuntu-2204-screenshot.png", +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/e96f6b6d-ubuntu-unity-desktop-screenshot.png", alt="", width="1920", height="1080", @@ -395,7 +462,13 @@

    Ubuntu Unity

    ) | safe }}
    -
    +
    +
    + +
    +
    +
    +
    {{ @@ -409,36 +482,107 @@

    Ubuntu Unity

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Xubuntu

    +

    Xubuntu

    +
    +
    +
    +
    +
    +

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    + Get Xubuntu +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/5f23328b-xubuntu-2204-screenshot.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +
    + +
    +
    +
    +

    More ways to experienc Ubuntu

    +
    +
    +
    +
    +
    +
    +

    Ubuntu-based variants

    +
    +
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    +

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    -

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    -

    Get Xubuntu

    -

    Join the Xubuntu community ›

    -

    Follow Xubuntu ›

    +
    +
    +
    +
    +

    Looking for Ubuntu?

    +
    +
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    +

    Download now

    -
    -
    -
    -

    Ubuntu-based variants

    -

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    -

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    -
    -

    Looking for Ubuntu?

    -

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    -

    Download now

    +
    +
    +
    +
    +
    +

    Latest Ubuntu Desktop news
    from our blog ›

    +
    +
    +
    +
    +
    +
    +

    Explore all

    + +
    -{% with section_classes='p-strip', heading_topic='Ubuntu Desktop', tag_name='ubuntu-desktop', tag_id='1920', limit='4' %} - {% include "shared/_latest_news_strip.html" %} -{% endwith %} + + {% endblock content %} From 38f6841faf88aadf240eccfcf376a88b787873ab Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Mon, 5 Feb 2024 17:09:19 +0100 Subject: [PATCH 44/72] Update asset and icon margin --- templates/desktop/flavours.html | 64 +++++++++++++++++---------------- 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 26b65a7e8ff..6a1d31399cc 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -15,17 +15,21 @@

    Ubuntu flavours

    What are Ubuntu flavours?

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto" - ) | safe - }} -
    +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/fe7c346b-ubuntu-flavours-23.png", + alt="", + width="1296", + height="460", + hi_def=True, + loading="auto", + attrs={"style": "margin-left: 2.5rem"} + ) | safe + }}
    @@ -45,7 +49,7 @@

    What are Ubuntu flavours?

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"}, + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

    Edubuntu

    @@ -54,7 +58,7 @@

    Edubuntu

    -

    Edubuntu is an official flavor of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    Get Edubuntu
      @@ -93,7 +97,7 @@

      Edubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Kubuntu

      @@ -142,7 +146,7 @@

      Kubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Lubuntu

      @@ -190,7 +194,7 @@

      Lubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Budgie

      @@ -239,7 +243,7 @@

      Ubuntu Budgie

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Cinnamon

      @@ -287,7 +291,7 @@

      Ubuntu Cinnamon

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Kylin

      @@ -335,7 +339,7 @@

      Ubuntu Kylin

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu MATE

      @@ -383,7 +387,7 @@

      Ubuntu MATE

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Studio

      @@ -431,7 +435,7 @@

      Ubuntu Studio

      height="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Unity

      @@ -479,7 +483,7 @@

      Ubuntu Unity

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Xubuntu

      @@ -519,23 +523,23 @@

      Xubuntu

      More ways to experienc Ubuntu

    -
    +
    -
    +

    Ubuntu-based variants

    -
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    +

    Looking for Ubuntu?

    -
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    Download now

    @@ -573,16 +577,16 @@

    {% endblock content %} From 5f7aefdb7cb539d2a40ccb9c6f7542784748ffc7 Mon Sep 17 00:00:00 2001 From: l Date: Tue, 6 Feb 2024 12:13:29 +0000 Subject: [PATCH 45/72] visual QA --- templates/desktop/flavours.html | 116 ++++++++++++++------------------ 1 file changed, 52 insertions(+), 64 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 6a1d31399cc..f1f1558c00c 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -12,24 +12,32 @@
    -

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    -

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    +
    +

    Ubuntu flavours

    +
    +
    +
    +

    What are Ubuntu flavours?

    +

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/8527100a-ubuntu-flavours-23.png", + alt="", + width="518", + height="173", + hi_def=True, + loading="auto", + ) | safe + }} +
    +
    - {{ - image ( - url="https://assets.ubuntu.com/v1/fe7c346b-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto", - attrs={"style": "margin-left: 2.5rem"} - ) | safe - }} +
    @@ -57,10 +65,8 @@

    Edubuntu

    -
    -

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    - Get Edubuntu -
    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    + Get Edubuntu
    -
    -

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    -

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    - Get Kubuntu -
    +

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    +

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    + Get Kubuntu
    -
    -

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    - Get Lubuntu -
    +

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    + Get Lubuntu
    -
    -

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    - Get Ubuntu Budgie -
    +

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    + Get Ubuntu Budgie
    -
    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    - Get Ubuntu Cinnamon -
    +

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    + Get Ubuntu Cinnamon
    -
    -

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    - Get Ubuntu Kylin -
    +

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    + Get Ubuntu Kylin
    -
    -

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    - Get Ubuntu MATE -
    +

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    + Get Ubuntu MATE
    -
    -

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    - Get Ubuntu Studio -
    +

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    + Get Ubuntu Studio
    -
    -

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    - Get Ubuntu Unity -
    +

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    + Get Ubuntu Unity
    -
    -

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    - Get Xubuntu -
    +

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    + Get Xubuntu
    -
    -
    +
    +
    -
    +

    Ubuntu-based variants

    -
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    +
    -
    +

    Looking for Ubuntu?

    -
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    Download now

    @@ -553,7 +541,7 @@

    Looking for Ubuntu?

    -

    Latest Ubuntu Desktop news
    from our blog ›

    +

    Latest Ubuntu Desktop news from our blog ›

    From b4efd6d0bab963c4e5543d8124a181861cb969ae Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:36:22 +0100 Subject: [PATCH 46/72] Apply review suggestions --- templates/desktop/flavours.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index f1f1558c00c..f6235e2aeda 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -18,7 +18,7 @@

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    +

    What are Ubuntu flavours?

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    {{ @@ -52,7 +52,7 @@

    What are Ubuntu flavours?

    {{ image( url="https://assets.ubuntu.com/v1/a2f090ef-edubuntu-logo.svg", - alt="Edubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -98,7 +98,7 @@

    Edubuntu

    {{ image( url="https://assets.ubuntu.com/v1/267e8693-Kubuntu_logo.svg", - alt="Kubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -145,7 +145,7 @@

    Kubuntu

    {{ image( url="https://assets.ubuntu.com/v1/6ac4ba34-lubuntu-logo.svg", - alt="Lubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -191,7 +191,7 @@

    Lubuntu

    {{ image( url="https://assets.ubuntu.com/v1/49e647f4-budgie-remix-logo-medium.svg", - alt="Budgie icon", + alt="", height="64", width="64", hi_def=True, @@ -209,7 +209,7 @@

    Ubuntu Budgie

    Get Ubuntu Budgie
    @@ -508,7 +508,7 @@

    Xubuntu

    -

    More ways to experienc Ubuntu

    +

    More ways to experience Ubuntu

    From 54c2014387a9e9a1cccc5edb0c6b61c32876e1f1 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:39:08 +0100 Subject: [PATCH 47/72] Remove missed icon alt text --- templates/desktop/flavours.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index f6235e2aeda..dfab800009e 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -238,7 +238,7 @@

    Ubuntu Budgie

    {{ image( url="https://assets.ubuntu.com/v1/504cc54e-ubuntu-cinnamon-logo.svg", - alt="Cinnamon icon", + alt="", height="64", width="64", hi_def=True, @@ -284,7 +284,7 @@

    Ubuntu Cinnamon

    {{ image( url="https://assets.ubuntu.com/v1/a9914e3f-ubuntu-kylin.svg", - alt="Kylin icon", + alt="", height="64", width="64", hi_def=True, @@ -330,7 +330,7 @@

    Ubuntu Kylin

    {{ image( url="https://assets.ubuntu.com/v1/b89d0c93-mate.svg", - alt="MATE icon", + alt="", height="64", width="64", hi_def=True, @@ -376,7 +376,7 @@

    Ubuntu MATE

    {{ image( url="https://assets.ubuntu.com/v1/4a512076-ubuntustudio.svg", - alt="Studio icon", + alt="", height="64", width="64", hi_def=True, @@ -422,7 +422,7 @@

    Ubuntu Studio

    {{ image ( url="https://assets.ubuntu.com/v1/219d06b0-ubuntu-unity-logo.png", - alt="Unity Icon", + alt="", width="64", height="64", hi_def=True, @@ -468,7 +468,7 @@

    Ubuntu Unity

    {{ image( url="https://assets.ubuntu.com/v1/36e8f12b-Xubuntu_logo.svg", - alt="Xbuntu icon", + alt="", height="64", width="64", hi_def=True, From 2565109d57faf1c6d963d791b3357c8f419efe2b Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 7 Feb 2024 12:11:52 +0100 Subject: [PATCH 48/72] Apply review suggestions --- templates/desktop/flavours.html | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index dfab800009e..a511476c76f 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -35,11 +35,6 @@

    Ubuntu flavours

    -
    -
    - -
    -
    @@ -57,7 +52,7 @@

    Ubuntu flavours

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

    Edubuntu

    @@ -65,7 +60,7 @@

    Edubuntu

    -

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools and universities.

    Get Edubuntu
    • Join the Edubuntu community ›
      • @@ -103,7 +98,7 @@

      Edubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Kubuntu

      @@ -150,7 +145,7 @@

      Kubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Lubuntu

      @@ -196,7 +191,7 @@

      Lubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Budgie

      @@ -205,7 +200,7 @@

      Ubuntu Budgie

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customisable.

    Get Ubuntu Budgie
    • Join the Ubuntu Budgie community ›
      • @@ -243,7 +238,7 @@

      Ubuntu Budgie

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Cinnamon

      @@ -251,7 +246,7 @@

      Ubuntu Cinnamon

    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    +

    Ubuntu Cinnamon combines Ubuntu with the Cinnamon desktop, built upon GNOME 2 to provide a traditionally modern experience. It is made for all home users alike, with intuitive software, and a simpler, customisable desktop suited with many personalization options and addons for some extra spice.

    Get Ubuntu Cinnamon
    • Join the Ubuntu Cinnamon community ›
      • @@ -289,7 +284,7 @@

      Ubuntu Cinnamon

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Kylin

      @@ -335,7 +330,7 @@

      Ubuntu Kylin

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu MATE

      @@ -381,7 +376,7 @@

      Ubuntu MATE

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Studio

      @@ -427,7 +422,7 @@

      Ubuntu Studio

      height="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Unity

      @@ -473,7 +468,7 @@

      Ubuntu Unity

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Xubuntu

      From b8120bc343fa180f5d2bbb32ca51b95af684ac76 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:19:01 +0100 Subject: [PATCH 49/72] Aply page revamp --- templates/desktop/organisations.html | 122 +++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 16 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 2fdbe5b3929..46a4856ce76 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -4,29 +4,119 @@ {% block meta_description %}Ubuntu Desktop combines enterprise-grade support, security and functionality with the best of open source.{% endblock %} {% block meta_copydoc %}https://docs.google.com/document/d/1RuxCA6GYh9UriNv26HCZP9UHo4b4_9fYaaMtGQuH_xc/edit#{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock %} + {% block content %} -
      -
      -
      -

      Bring Ubuntu to your
      organisation

      -

      - Ubuntu Desktop combines enterprise-grade support, security
      and functionality with the best of open source. -

      -

      Contact us

      -

      Secure open-source with Ubuntu Pro ›

      -

      Download the datasheet

      +
      +
      +
      +
      +
      +

      Bring Ubuntu to your organisation

      +

      Ubuntu Desktop combines enterprise-grade support, security
      and functionality with the best of open source.

      +
      +
      +

      + Contact us + Download the datasheet + Secure open-source with Ubuntu Pro › +

      +
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/f29015c6-image-laptop.png", +
      +
      + +
      +
      +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/5cdf69d6-Ubuntu+Pro.svg", alt="", - width="750", - height="484", + width="225", + height="58", hi_def=True, - loading="auto" + loading="lazy" ) | safe }}
      +
      +

      Secure enterprise management with Ubuntu Pro Desktop

      +
      +
      +
      +
      +
      +
      +
      +

      Secure open source stack

      +
      +
      +

      Receive 10 years of security patches for Ubuntu LTS releases with Expanded Security Maintenance (ESM) and coverage for over 23,000 packages in the Ubuntu Universe repository. Minimise downtime with Kernel Livepatch.

      +
      + Learn more about Ubuntu Pro › +
      +
      +
      +
      +
      +

      Landscape fleet management

      +
      +
      +

      Software updates, configuration management, policy compliance, and permission control for your entire physical and virtual fleet. Landscape is easy to use and smoothly integrates with other tooling through a robust API.

      +
      + Learn more about Landscape › +
      +
      +
      +
      +
      +

      Advanced Active Directory policies

      +
      +
      +

      Increase your management capabilities with full Group Policy Object support, remote script execution and privilege management.

      +
      + Learn more about Active Directory integration › +
      +
      +
      +
      +
      +

      Compliance, certification and hardening

      +
      +
      +

      Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

      +
      + Learn more about Ubuntu's security practices › +
      +
      +
      +
      +
      +

      Weekday or 24/7 support

      +
      +
      +

      Advanced support customers get direct 24/7 access to our enterprise open source support team through our web portal, knowledge base or via phone.

      +
      + Contact us +
      +
      +
      +
      +
      + +
      +
      +
      +
      +

      Adopting a secure enterprise
      Linux descktop

      +
      +
      +

      Learn more about how you can adopt Linux securely for development teams in a Windows-centric organisation, without compromising on manageability and compliance.

      +
      + Download our guide +
      From 57d03433b786617d30dd60f520fe9a0f3056d03c Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 18:11:12 +0100 Subject: [PATCH 50/72] Finish applying refresh --- templates/desktop/organisations.html | 767 +++++++++------------------ 1 file changed, 243 insertions(+), 524 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 46a4856ce76..e9cf15dbc75 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -8,7 +8,7 @@ {% block content %}
      -
      +
      @@ -23,7 +23,7 @@

      Bring Ubuntu to your organisation

      -
      +
      @@ -48,7 +48,7 @@

      Secure enterprise management with Ubuntu Pro Desktop

      -
      +

      Secure open source stack

      @@ -59,7 +59,7 @@

      Secure open source stack

      -
      +

      Landscape fleet management

      @@ -70,7 +70,7 @@

      Landscape fleet management

      -
      +

      Advanced Active Directory policies

      @@ -81,7 +81,7 @@

      Advanced Active Directory policies

      -
      +

      Compliance, certification and hardening

      @@ -92,7 +92,7 @@

      Compliance, certification and hardening

      -
      +

      Weekday or 24/7 support

      @@ -110,7 +110,7 @@

      Weekday or 24/7 support

      -

      Adopting a secure enterprise
      Linux descktop

      +

      Adopting a secure enterprise
      Linux desktop

      Learn more about how you can adopt Linux securely for development teams in a Windows-centric organisation, without compromising on manageability and compliance.

      @@ -120,103 +120,27 @@

      Adopting a secure enterprise
      Linux descktop

      -
      -
      -
      -

      Secure enterprise management with Ubuntu Pro Desktop

      -
      -
      -
      -
      -

      Secure open-source stack

      -
      -

      - Receive 10 years of security patches for Ubuntu LTS releases with Expanded Security Maintenance (ESM) and coverage for over 23,000 packages in the Ubuntu Universe repository. Minimise downtime with Kernel Livepatch. -

      -

      - - Learn more about Ubuntu Pro - -

      -
      -
      -

      Landscape Fleet Management

      -
      -

      - Software updates, configuration management, policy compliance, and permission control for your entire physical and virtual fleet. Landscape is easy to use and smoothly integrates with other tooling through a robust API. -

      -

      - - Learn more about Landscape - -

      -
      -
      -

      Advanced Active Directory Policies

      -
      -

      - Increase your management capabilities with full Group Policy Object support, remote script execution and privilege management. -

      -

      - - Learn more about Active
      Directory integration -       -

      -
      -
      -

      Compliance, certification and hardening

      -
      -

      - Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available. -

      -

      - - Learn more about Ubuntu's security practices - -

      -
      -
      -

      Certified hardware

      -
      -

      - Ubuntu Desktop is certified across a wide range of laptops, desktops, and workstations, including the HP Z series and Dell XPS and Precision lines. -

      -

      - - Learn more about Ubuntu certified hardware - -

      +
      +
      +
      +
      +

      High performance
      on your choice of hardware

      -
      -

      Weekday or 24/7 Support

      -
      -

      - Advanced support customers get direct 24/7 access to our enterprise open source support team through our web portal, knowledge base or via phone. -

      -

      - - Contact us - -

      +
      +

      To offer the best performance on Ubuntu, manufacturers are pre-loading devices with an Ubuntu certified image. Canonical is committed to working closely with the world’s leading manufacturers to optimise and certify Ubuntu on their laptops and PCs.

      + Learn more about Ubuntu certified hardware ›
      -
      - -
      -
      -

      Seamless operations on your choice of hardware

      -

      To offer the best performance on Ubuntu, manufacturers are pre-loading devices with an Ubuntu certified image. Canonical is committed to working closely with the world's leading manufacturers to optimise and certify Ubuntu on their laptops and PCs.

      -

      Visit our partners page to find out more ›

      -
      -
      +
      - {{ image ( - url="https://assets.ubuntu.com/v1/11814428-hp-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/a5bec84b-hp-logo.png", alt="Hewlett Packard", - width="288", - height="288", + width="159", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -224,11 +148,12 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/c70b529e-lenovo-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/3b24973b-lenovo-logo.png", alt="Lenovo", - width="288", - height="288", + width="169", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -236,32 +161,25 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/987acdaa-dell-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/25514caf-dell-logo.svg", alt="Dell", - width="288", - height="288", + width="71", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe }}
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/6079d02b-amd-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/1c926673-amd-xilinx-logo.png", alt="AMD", - width="288", - height="288", + width="247", + height="558", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -269,23 +187,25 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/67f81bfe-intel-new-logo.png", - alt="Intel", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} + {{ + image ( + url="https://assets.ubuntu.com/v1/834d57ab-intel-logo.png", + alt="Intel", + width="149", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/711be910-arm-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/d9d05f49-arm-logo.png", alt="ARM", - width="288", - height="288", + width="183", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -293,11 +213,12 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/cd765ccc-nvidia-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/5ac7ab41-nvidia-logo.png", alt="Nvidia", - width="288", - height="288", + width="369", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -309,349 +230,124 @@

      Seamless operations on your choice of hardware

      -
      +
      -
      -
      -
      -

      Ubuntu delivers the best
      of open source

      -
      -
      -

      Drive innovation in high-growth areas such as data science and machine learning with support for the latest libraries and apps in addition to critical workflow tools like Multipass, Juju, LXD and MicroK8s.

      -
      -
      -
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/be56a944-tensor-flow-logo.png", - alt="TensorFlow", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/96c4727f-OpenCV-logo.png", - alt="OpenCV", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/5154773b-docker-logo-horizontal.png", - alt="Docker", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/94ae6189-edgexfoundry-logo.png", - alt="EdgeX Foundry", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/a20afc7d-kubeflow-logo.png", - alt="Kubeflow", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/835a5d08-Juju.png", - alt="Canonical Juju", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/75145268-acrn-logo.png", - alt="Acrn", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/eac2a3ad-openvino-logo.png", - alt="OpenVINO", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/1d3e5eaf-flutter-logo.png", - alt="Flutter", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/49e6dfc2-ros-logo.png", - alt="ROS", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/a984834a-LXD.png", - alt="Canonical LXD", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/d60029cc-pytorch-logo.png", - alt="Pytorch", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/1ad80137-Multipass.png", - alt="Canonical Multipass", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/083fd46b-open-v-switch.png", - alt="Open vSwitch", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/3f49251c-MicroK8s.png", - alt="Canonical MicroK8s", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      -
      -
      + {{ image ( + url="https://assets.ubuntu.com/v1/1819c545-woman-working.jpg", + alt="", + width="2464", + height="1052", + hi_def=True, + loading="lazy" + ) | safe + }}
      -
      -
      -
      - -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/750a8ab6-ubuntu-for-datascience.svg", - alt="Ubuntu for datascience", - width="538", - height="133", - hi_def=True, - loading="lazy" - ) | safe - }} -
      -
      -

      Ubuntu for Data Science

      -

      Develop AI models on high-end Ubuntu workstations. Train on racks of bare-metal or public clouds with hardware acceleration. Deploy to cloud, edge and IoT. All on Ubuntu.

      -

      How Ubuntu enables AI innovation

      -
      -
      +
      -
      - -

      Developers and data science teams use the Ubuntu platform to support their most important work. Our collaboration with Canonical enables industry innovators to get AI-powered insights from their data faster.

      - Manuvir Das — NVIDIA, Head of Enterprise Computing -
      -
      -
      - -
      -
      -
      - -
      -
      -

      Write once and deploy anywhere

      -

      Using Ubuntu Desktop provides a common platform for development, test, and production environments.

      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/c1a2b136-Screenshot+from+2022-04-12+16-20-18.png", - alt="", - width="650", - height="169", - hi_def=True, - loading="lazy" - ) | safe - }} -
      +

      Endorsed by partners and customers

      -
      -
      -

      Ubuntu in the cloud

      -

      Canonical fully supports public clouds and provides its own solutions for private cloud implementation and management, as well as workload orchestration in hybrid cloud and multicloud environments.

      -

      Ubuntu on cloud

      +
      +
      +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/ed098196-nvidia.png", + alt="", + width="110", + height="41", + hi_def=True, + loading="lazy" + ) | safe + }} +
      -
      - {{ - image( - url="https://assets.ubuntu.com/v1/ab87e245-Private-v-Public-Mulit-Cloud.svg", - alt="Private vs public cloud", - width="250", - height="214", - hi_def=True, - loading="auto", - ) | safe - }} +
      +
      +

      + “Developers and data science teams use the Ubuntu platform to support their most important work. Our collaboration with Canonical enables industry innovators to get AI-powered insights from their data faster”. +

      +
      +
      +
      +
      +

      Manuvir Das

      +
      +
      +

      NVIDIA, Head of Enterprise Computing

      +
      +
      -
      -
      -

      Easily manage your IT estate

      -
      -
      -
      -

      Landscape

      -

      Lower the complexity and cost of running a Linux desktop estate using Landscape, Canonical's systems management tool for monitoring, managing, patching and compliance reporting on all your Ubuntu desktops. Included in an Ubuntu Pro Desktop subscription.

      -

      Learn more about Landscape

      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/990093e1-cn-home-landscape.png", - alt="", - width="515", - height="255", - hi_def=True, - loading="lazy" - ) | safe - }} -
      +
      +
      +
      +

      Seamless integration with your existing infrastructure

      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/e7bcb9fa-4b9bad4c100c73cc2c1c839f3eb5ec03_active-directory-logo.png", - alt="", - width="400", - height="99", - hi_def=True, - loading="lazy" - ) | safe - }} -
      -
      -

      Active Directory

      -

      Integrating Ubuntu Desktop into an existing Active Directory architecture can be an automated and effortless process when using System Security Services Daemon (SSSD). GPO is available by default to manage desktop settings and Ubuntu Pro users receive access to additional Active Directory policies like remote script execution and privilege management.

      -

      ADSys documentation

      -

      Integrating Ubuntu Desktop with Active Directory

      +
      +
      +
      +
      +

      Advanced Active Directory policies

      +
      +
      +

      System Security Services Daemon (SSSD) and GPO are available by default to manage desktop settings. Ubuntu Pro users receive access to advanced policies like remote script execution and privilege management.

      +
      +

      + Integrating Ubuntu Desktop with Active Directory › + ADSys documentation › +

      +
      +
      +
      +
      +
      +

      Supported by key Microsoft tools

      +
      +
      +

      Microsoft Intune on Ubuntu Desktop enables custom policy compliance and gated access to corporate resources via the Microsoft Edge browser. Ubuntu also supports critical business and administration applications such as Powershell and Microsoft Teams.

      +
      + Watch our webinar › +
      +
      +
      +
      +
      +

      Ubuntu on Windows Subsystem for Linux

      +
      +
      +

      Windows Subsystem for Linux (WSL) gives Windows developers a full Ubuntu terminal experience and easy access to cutting edge open source tools. IT administrators can leverage Ubuntu Pro to remotely manage and secure their developer instances.

      +
      + Learn more about Ubuntu on WSL › +
      +
      -
      - {% include "shared/_pro_strip.html" %} -
      -

      For more information, download our whitepaper:

      -

      - Adopting a secure enterprise Linux desktop -

      -

      More details and pricing ›

      -
      -
      -
      -
      -
      + +
      +
      +
      +

      Virtual desktops, powered by AWS

      +
      +

      Ubuntu Desktop on Amazon WorkSpaces offers developers an optimised Ubuntu Desktop environment to rapidly build, test and deploy code — spinning up and tearing down instances as required.

      IT organisations benefit from rapid deployment, configuration and scalability for their managed Ubuntu Desktops whilst their applications and data remain secured in the AWS cloud, even when their developers are working remotely.

      -

      - Find out more about Ubuntu WorkSpaces › -

      -
      -
      - {{ image ( +
      + Find out more about Ubuntu WorkSpaces › + {{ + image ( url="https://assets.ubuntu.com/v1/55bb92be-aws_workspaces.png", alt="", - width="400", - height="143", + width="603", + height="215", hi_def=True, loading="lazy" ) | safe @@ -660,84 +356,107 @@

      Virtual desktops, powered by AWS

      -
      -
      -

      Read more about Ubuntu Desktop in organisations

      +
      +
      +
      +
      +

      Day zero support with Ubuntu
      Desktop Enterprise Services

      +
      +
      +

      Designed to help your developers get up and running on Ubuntu as quickly as possible. Canonical engineers partner with you to deliver a solution tailored to your needs, including:

      +
      +
        +
      • Customised image creation
        • +
      • Post-deployment automation
        • +
      • Active Directory integration
        • +
      • Security configuration
        • +
      • Landscape deployment and registration
        • +
      +
      + Learn more about our enterprise services +
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/3769b4a7-webinar-icon.svg", - alt="", - width="88", - height="72", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Webinar

      +
      + +
      +
      +
      +
      +

      Read more about Ubuntu
      Desktop in organisations

      +
      +
      +
      +
      +

      Webinars

      +
      +
      +
      -

      Unleashing Z Workstations by HP Powered by Ubuntu

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/b061c401-White+paper.svg", - alt="", - width="171", - height="150", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Whitepaper

      +
      +
      +
      +
      +
      +
      +

      Whitepapers

      +
      +
      +
      -

      Ubuntu Desktop for the enterprise

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/b061c401-White+paper.svg", - alt="", - width="171", - height="150", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Whitepaper

      -
      +
      +
      + +
      +
      +
      +
      +
      +

      Latest Ubuntu Desktop news from our blog ›

      -

      How to increase developer productivity with Ubuntu Desktop

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/df54bb6a-document-open-icon.svg", - alt="", - width="32", - height="28", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Blog

      -
      +
      +
      -

      Planning phased Ubuntu 22.04 Enterprise Desktop upgrades with Landscape

      +
      +

      Explore all

      + +
      + + + {% endblock content %} From c54c99aa7eadd7ae35864e3166d6bd5da8847356 Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 7 Feb 2024 13:00:12 +0100 Subject: [PATCH 51/72] WD-8434 - reverse changes on thank-you page --- templates/download/desktop/thank-you.html | 79 ++++++++++++----------- 1 file changed, 42 insertions(+), 37 deletions(-) diff --git a/templates/download/desktop/thank-you.html b/templates/download/desktop/thank-you.html index 2926be3f31e..2e85d33b36f 100644 --- a/templates/download/desktop/thank-you.html +++ b/templates/download/desktop/thank-you.html @@ -50,47 +50,52 @@

      Thank you for your contribution

      -

      Newsletter signup

      +

      Sign up for our newsletter

      Get the latest Ubuntu news and updates in your inbox.

      -
      -
      - -
      -
      + +
    • +
      • +

    • By submitting this form, I confirm that I have read and agree to Canonical's Privacy Policy.

      -
      • - -
      - - - - - - - - - - - - - - - - -
      + href="/legal/data-privacy/contact">Canonical's Privacy Notice and Privacy Policy.

      + +
    +
    + + + + + + + + + + + + + + +
    @@ -326,4 +331,4 @@

    Follow our blog for the lat {% endif %} -{% endblock footer_extra %} +{% endblock footer_extra %} \ No newline at end of file From 363a854968267425f1b7b4681a1e4897ed9e0c65 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 7 Feb 2024 13:03:40 +0100 Subject: [PATCH 52/72] Apply review suggestions --- templates/desktop/organisations.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index e9cf15dbc75..3a4e2daa9eb 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -176,10 +176,10 @@

    High performance
    on your choice of hardware

    {{ image ( - url="https://assets.ubuntu.com/v1/1c926673-amd-xilinx-logo.png", + url="https://assets.ubuntu.com/v1/dac5c9d7-amd-logo.png", alt="AMD", - width="247", - height="558", + width="186", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -382,12 +382,12 @@

    Day zero support with Ubuntu
    Desktop Enterprise Services

    -

    Read more about Ubuntu
    Desktop in organisations

    +

    Learn more about Ubuntu
    Desktop in organisations

    -

    Webinars

    +

    Webinars

      @@ -403,7 +403,7 @@

      Webinars

      -

      Whitepapers

      +

      Whitepapers

        From 93847158ad78d9914b8a85ff3b45e3bb77d08b8d Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Wed, 7 Feb 2024 13:11:26 +0100 Subject: [PATCH 53/72] WD-8434 - remove redundant heading --- templates/blog/newsletter-form.html | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/blog/newsletter-form.html b/templates/blog/newsletter-form.html index 3f7221cef97..08ecc978a91 100644 --- a/templates/blog/newsletter-form.html +++ b/templates/blog/newsletter-form.html @@ -5,7 +5,6 @@
        Newsletter signup
        -

        Newsletter signup

        Get the latest Ubuntu news and updates in your inbox.

    -
    -
    -

    Security updates

    -

    Annual device fee covers app store services and over-the-air (OTA) updates, with 10 year expanded security maintenance for kernel, Ubuntu OS and your pre-installed applications. Get updates as frequently as you need them.

    -

    Please note that pricing below is tiered, and each tier is charged separately.

    -
    - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Number of devices, fromNumber of devices, to1 year6 months3 months1 month1 week48 hours24 hours6 hours
    020$0.00$0.00$0.00$0.00$0.00$0.00$0.00$0.00
    211,000$3.19$4.90$7.63$12.00$18.99$30.17$48.07$76.70
    1,0012,500$2.18$3.29$5.05$7.87$12.38$19.59$31.14$49.61
    2,5016,500$1.53$2.24$3.38$5.20$8.11$12.76$20.21$32.13
    6,50115,000$1.11$1.57$2.31$3.48$5.36$8.36$13.16$20.85
    15,00140,000$0.84$1.14$1.61$2.37$3.58$5.52$8.62$13.58
    40,00195,000$0.67$0.86$1.16$1.65$2.43$3.68$5.68$8.88
    95,001250,000$0.56$0.68$0.88$1.19$1.69$2.50$3.79$5.86
    250,001615,000$0.48$0.56$0.69$0.89$1.22$1.74$2.57$3.90
    615,0011,500,000$0.44$0.49$0.57$0.70$0.91$1.25$1.78$2.64
    1,500,0014,000,000$0.41$0.44$0.49$0.58$0.71$0.93$1.27$1.83
    4,000,0019,500,000$0.39$0.41$0.44$0.50$0.58$0.72$0.95$1.30
    - -

    Annual price per device based on device volume and update period

    - -

    Emergency updates are always available, regardless of the contracted update frequency. The free tier enables you to ship Ubuntu Core free of charge and receive unscheduled updates when bandwidth allows, or on-demand for emergencies.

    -

    For the first 20 devices, you can test Ubuntu Core free of charge and receive unscheduled updates.

    -

    Regardless of the contracted update frequency, you can always perform an on-demand (emergency) update for an additional fee, anytime you need it. The cost of an emergency update is dependent on the device volume.

    -
    -
    -
    - -

    Ubuntu device support for manufacturers

    @@ -373,7 +191,7 @@

    Access Canonical engineering support for customer devic

    -
    +

    Canonical Embedding programme

    @@ -394,7 +212,7 @@

    Are your devices running Ubuntu Desktop or Server?

    -{% with colour="white", bordered="false" %}{% include "shared/_call-sales.html" %}{% endwith %} +{% with colour="light", bordered="false" %}{% include "shared/_call-sales.html" %}{% endwith %}
    From 509d48595b0182514a11af002603e0c9c79946d3 Mon Sep 17 00:00:00 2001 From: Carlos Wu Date: Tue, 6 Feb 2024 09:49:52 +0000 Subject: [PATCH 59/72] Move WSL page to desktop/wsle --- redirects.yaml | 2 + templates/desktop/wsl.html | 229 ++++++++++++++++++++ templates/{ => desktop}/wsl/contact-us.html | 0 templates/desktop/wsl/index.html | 229 ++++++++++++++++++++ templates/{ => desktop}/wsl/thank-you.html | 0 5 files changed, 460 insertions(+) create mode 100644 templates/desktop/wsl.html rename templates/{ => desktop}/wsl/contact-us.html (100%) create mode 100644 templates/desktop/wsl/index.html rename templates/{ => desktop}/wsl/thank-you.html (100%) diff --git a/redirects.yaml b/redirects.yaml index 997bd428be5..6d051778599 100644 --- a/redirects.yaml +++ b/redirects.yaml @@ -1031,3 +1031,5 @@ pricing/desktops: "/pricing/desktop" # Documentation pages (coming from discourse) server/docs/virtualization-introduction: /server/docs/introduction-to-virtualization + +wsl/?: "/desktop/wsl" \ No newline at end of file diff --git a/templates/desktop/wsl.html b/templates/desktop/wsl.html new file mode 100644 index 00000000000..85ea82cf755 --- /dev/null +++ b/templates/desktop/wsl.html @@ -0,0 +1,229 @@ +{% extends 'base_index.html' %} + +{% block meta_copydoc %}https://docs.google.com/document/d/1M7e2B08GgPA7K6Wx0ThE6s9_xQINM0MSkarfdKUTEYI/edit#{% endblock meta_copydoc %} + +{% block title %}WSL{% endblock %} + +{% block meta_description %}Access the Ubuntu terminal on Windows with WSL. Develop cross-platform applications and manage IT infrastructure without leaving Windows.{% endblock %} + +{% block body_class %}is-paper{% endblock body_class %} + +{% block content %} + +
    +
    +
    +

    The full Ubuntu experience, now available on Windows

    +
    +
    +
    +

    Access the power of a full Ubuntu terminal environment on Windows with Windows Subsystem for Linux (WSL).

    +

    Streamline web application development, leverage cutting-edge AI/ML tooling, develop cross-platform applications and manage IT infrastructure without leaving Windows.

    +
    +
    + Download from the Microsoft Store + Looking for support? Contact us › +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/a815b856-Screenshot 2024-01-26 114801.png", + alt="Terminal window running Ubuntu on WSL on top of the Windows 11 desktop", + width="2560", + height="1440", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    + +
    +
    +
    +

    Develop with the best of both worlds

    +
    +
    +
    +
    +
    +
    +

    The freedom of Ubuntu

    +
    +
    +

    Run your choice of Linux text editors, including vim, emacs, and nano. Install applications, compilers and libraries from the Ubuntu repository, securely maintained by Canonical.

    +
    +
    +
    +
    +
    +

    Highly performant AI/ML

    +
    +
    +

    Ubuntu is the target platform for all major open source AI/ML frameworks. NVIDIA Data Science Stack lets you maximise the performance of your Data Science and Machine Learning projects on top of native Windows NVIDIA drivers.

    +
    +
    +
    +
    +
    +

    Fully flexible web applications

    +
    +
    +

    Build, test, and deploy Kubernetes clusters on Windows. Develop in WSL using native Windows IDEs including VS Code and IntelliJ. Use containers to improve your workflow and benefit from full NodeJS and Ruby support.

    +
    +
    +
    +
    +
    +

    Ideal for cross-platform development

    +
    +
    +

    Create and test your CI/CD pipelines locally on an Ubuntu WSL instance. When ready, publish to a cloud production environment running Ubuntu VMs. Develop and test graphical Linux applications using WSLg and development frameworks like Flutter or React Native.

    +
    +
    +
    +
    +
    +

    Critical tools for security specialists

    +
    +
    +

    Leverage Linux security tools to test and harden your network. Achieve the same first-class, out-of-the-box, compliant security that is synonymous with Ubuntu.

    +
    +
    +
    +
    +
    +

    Mixed IT infrastructure management

    +
    +
    +

    From the same workstation, manage mixed Linux and Windows infrastructure both on-prem and across public clouds.

    +
    +
    +
    +
    +
    + +
    +
    +
    +

    Get started with Ubuntu WSL today

    +
    +
    +
    +
    + +
    +

    + Windows Subsystem for Linux (WSL) - Make an awesome Linux environment directly on Windows +

    +
    +
    +
    + +
    +

    + Ubuntu Summit 2022 | The Windows Subsystem for Linux WSL Latest updates and future improvements +

    +
    +
    +
    + +
    +

    + Ubuntu on WSL | An FAQ for Data Scientists and Developers +

    +
    +
    +
    + +
    +

    + WWSL: Partnering with Canonical to support systemd +

    +
    +
    +
    + +
    +
    +
    +
    +

    Resources

    +
    +
    +
    +
    +

    Tutorials

    +
    +
    + +
    +
    +
    +
    +
    +

    Documentation

    +
    +
    + +
    +
    +
    +
    +
    +

    Contact us

    +
    +
    +

    If you have further questions around Ubuntu on WSL or want to share your experiences, join the conversation on the Ubuntu Discourse.

    +

    If you want to hear more about the benefits of securing Ubuntu on WSL at your organisation, please get in touch.

    +
    +
    +
    +
    +
    + + + + + + +
    +
    +{% endblock %} diff --git a/templates/wsl/contact-us.html b/templates/desktop/wsl/contact-us.html similarity index 100% rename from templates/wsl/contact-us.html rename to templates/desktop/wsl/contact-us.html diff --git a/templates/desktop/wsl/index.html b/templates/desktop/wsl/index.html new file mode 100644 index 00000000000..93c16fa3a68 --- /dev/null +++ b/templates/desktop/wsl/index.html @@ -0,0 +1,229 @@ +{% extends 'base_index.html' %} + +{% block meta_copydoc %}https://docs.google.com/document/d/1M7e2B08GgPA7K6Wx0ThE6s9_xQINM0MSkarfdKUTEYI/edit#{% endblock meta_copydoc %} + +{% block title %}WSL{% endblock %} + +{% block meta_description %}Access the Ubuntu terminal on Windows with WSL. Develop cross-platform applications and manage IT infrastructure without leaving Windows.{% endblock %} + +{% block body_class %}is-paper{% endblock body_class %} + +{% block content %} + +
    +
    +
    +

    The full Ubuntu experience, now available on Windows

    +
    +
    +
    +

    Access the power of a full Ubuntu terminal environment on Windows with Windows Subsystem for Linux (WSL).

    +

    Streamline web application development, leverage cutting-edge AI/ML tooling, develop cross-platform applications and manage IT infrastructure without leaving Windows.

    +
    +
    + Download from the Microsoft Store + Looking for support? Contact us › +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/a815b856-Screenshot 2024-01-26 114801.png", + alt="Terminal window running Ubuntu on WSL on top of the Windows 11 desktop", + width="2560", + height="1440", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    + +
    +
    +
    +

    Develop with the best of both worlds

    +
    +
    +
    +
    +
    +
    +

    The freedom of Ubuntu

    +
    +
    +

    Run your choice of Linux text editors, including vim, emacs, and nano. Install applications, compilers and libraries from the Ubuntu repository, securely maintained by Canonical.

    +
    +
    +
    +
    +
    +

    Highly performant AI/ML

    +
    +
    +

    Ubuntu is the target platform for all major open source AI/ML frameworks. NVIDIA Data Science Stack lets you maximise the performance of your Data Science and Machine Learning projects on top of native Windows NVIDIA drivers.

    +
    +
    +
    +
    +
    +

    Fully flexible web applications

    +
    +
    +

    Build, test, and deploy Kubernetes clusters on Windows. Develop in WSL using native Windows IDEs including VS Code and IntelliJ. Use containers to improve your workflow and benefit from full NodeJS and Ruby support.

    +
    +
    +
    +
    +
    +

    Ideal for cross-platform development

    +
    +
    +

    Create and test your CI/CD pipelines locally on an Ubuntu WSL instance. When ready, publish to a cloud production environment running Ubuntu VMs. Develop and test graphical Linux applications using WSLg and development frameworks like Flutter or React Native.

    +
    +
    +
    +
    +
    +

    Critical tools for security specialists

    +
    +
    +

    Leverage Linux security tools to test and harden your network. Achieve the same first-class, out-of-the-box, compliant security that is synonymous with Ubuntu.

    +
    +
    +
    +
    +
    +

    Mixed IT infrastructure management

    +
    +
    +

    From the same workstation, manage mixed Linux and Windows infrastructure both on-prem and across public clouds.

    +
    +
    +
    +
    +
    + +
    +
    +
    +

    Get started with Ubuntu WSL today

    +
    +
    +
    +
    + +
    +

    + Windows Subsystem for Linux (WSL) - Make an awesome Linux environment directly on Windows +

    +
    +
    +
    + +
    +

    + Ubuntu Summit 2022 | The Windows Subsystem for Linux WSL Latest updates and future improvements +

    +
    +
    +
    + +
    +

    + Ubuntu on WSL | An FAQ for Data Scientists and Developers +

    +
    +
    +
    + +
    +

    + WWSL: Partnering with Canonical to support systemd +

    +
    +
    +
    + +
    +
    +
    +
    +

    Resources

    +
    +
    +
    +
    +

    Tutorials

    +
    +
    + +
    +
    +
    +
    +
    +

    Documentation

    +
    +
    + +
    +
    +
    +
    +
    +

    Contact us

    +
    +
    +

    If you have further questions around Ubuntu on WSL or want to share your experiences, join the conversation on the Ubuntu Discourse.

    +

    If you want to hear more about the benefits of securing Ubuntu on WSL at your organisation, please get in touch.

    +
    +
    +
    +
    +
    + + + + + + +
    +
    +{% endblock %} diff --git a/templates/wsl/thank-you.html b/templates/desktop/wsl/thank-you.html similarity index 100% rename from templates/wsl/thank-you.html rename to templates/desktop/wsl/thank-you.html From 87e4a2ecb3985b315b9754fa10a0af843cc149fd Mon Sep 17 00:00:00 2001 From: yelyzaveta Date: Thu, 8 Feb 2024 10:04:14 +0100 Subject: [PATCH 60/72] WD-8434 - banner text update --- templates/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/templates/base.html b/templates/templates/base.html index 745ca212429..a37e1d8cf59 100644 --- a/templates/templates/base.html +++ b/templates/templates/base.html @@ -109,7 +109,7 @@
    -

    Thank you for signing up for our newsletter!
    In these regular emails you will find the latest updates from Ubuntu and upcoming events where you can meet our team.Close

    +

    Thank you for signing up for our newsletter!
    In these regular emails you will find the latest updates about Ubuntu and upcoming events where you can meet our team.Close

    From d4f8d3f16f0586404af4ae8316c16ff07cd4ff6d Mon Sep 17 00:00:00 2001 From: l Date: Thu, 8 Feb 2024 11:24:23 +0000 Subject: [PATCH 61/72] visual qa --- templates/desktop/organisations.html | 52 ++++++++++++++++------------ 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 3a4e2daa9eb..9011088eda3 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -7,20 +7,26 @@ {% block body_class %}is-paper{% endblock %} {% block content %} -
    -
    +
    +
    -
    -
    -

    Bring Ubuntu to your organisation

    +
    +
    +
    +
    +

    Bring Ubuntu to your organisation

    +
    +
    +

    Ubuntu Desktop combines enterprise-grade support, security
    and functionality with the best of open source.

    +
    +

    + Contact us + Download the datasheet + Secure open‑source with Ubuntu Pro › +

    +
    -
    -

    - Contact us - Download the datasheet - Secure open-source with Ubuntu Pro › -

    @@ -29,7 +35,7 @@

    Bring Ubuntu to your organisation

    -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/5cdf69d6-Ubuntu+Pro.svg", @@ -292,10 +298,10 @@

    Seamless integration with your existing infrastructure

    -
    +

    Advanced Active Directory policies

    -
    +

    System Security Services Daemon (SSSD) and GPO are available by default to manage desktop settings. Ubuntu Pro users receive access to advanced policies like remote script execution and privilege management.

    @@ -306,10 +312,10 @@

    Advanced Active Directory policies

    -
    +

    Supported by key Microsoft tools

    -
    +

    Microsoft Intune on Ubuntu Desktop enables custom policy compliance and gated access to corporate resources via the Microsoft Edge browser. Ubuntu also supports critical business and administration applications such as Powershell and Microsoft Teams.

    Watch our webinar › @@ -317,10 +323,10 @@

    Supported by key Microsoft tools

    -
    -

    Ubuntu on Windows Subsystem for Linux

    +
    +

    Ubuntu on Windows Subsystem for Linux

    -
    +

    Windows Subsystem for Linux (WSL) gives Windows developers a full Ubuntu terminal experience and easy access to cutting edge open source tools. IT administrators can leverage Ubuntu Pro to remotely manage and secure their developer instances.

    Learn more about Ubuntu on WSL › @@ -419,17 +425,17 @@

    Whitepapers

    -
    +
    -
    +

    Latest Ubuntu Desktop news from our blog ›

    -
    +
    -
    +

    Explore all

    From 7caf93db8844cc3256d85067943f88ed3f5d68b7 Mon Sep 17 00:00:00 2001 From: Peter French Date: Thu, 8 Feb 2024 12:34:43 +0100 Subject: [PATCH 62/72] Refresh /server/hyperscale (#13521) * Refresh /server/hyperscale * Responsiveness tweeks * Refresh /server page * Responsive adjustments * Apply changes from ux&design review * Apply changes from design review * Fix merge errors * small fixes, adding an iso illustration to the hero * Fix footer * Add illustration * change hyperscale photo * tiny fixes (#13533) Co-authored-by: l * Minor alignment adjustments * Remove excess padding * Left align logo links --------- Co-authored-by: l --- static/sass/styles.scss | 2 + templates/server/hyperscale.html | 426 ++++++++++------ templates/server/index.html | 495 ++++++++++++------- templates/server/partial/_server-footer.html | 64 +++ 4 files changed, 637 insertions(+), 350 deletions(-) create mode 100644 templates/server/partial/_server-footer.html diff --git a/static/sass/styles.scss b/static/sass/styles.scss index a339a4d821d..ef789a517fa 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -428,6 +428,7 @@ summary { } } } + .bg-light { background-color: $color-light; } @@ -459,6 +460,7 @@ summary { } } } + .subscribe-section { @media (min-width: $breakpoint-medium) { margin-left: 4rem !important; diff --git a/templates/server/hyperscale.html b/templates/server/hyperscale.html index e27dcefefed..aa5cf441b68 100755 --- a/templates/server/hyperscale.html +++ b/templates/server/hyperscale.html @@ -1,232 +1,336 @@ {% extends "server/base_server.html" %} - {% block title %}Ubuntu Server and hyperscale | Server{% endblock %} {% block meta_description %}Unlock the promise of new extreme low-energy server technology{% endblock %} {% block meta_copydoc %}https://docs.google.com/document/d/1f56CCzH519lIVa4KvxDt0QpxYFMK-bMdVlKo4TvPSIk/edit{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock body_class %} + {% block content %} -
    -
    -
    +
    +
    +

    Ubuntu leads in hyperscale

    -

    Ubuntu is the hyperscale OS, natively powering scale-out workloads on a new wave of low-cost, ultra-dense hardware based on x86 and Arm processors.

    -

    Download Ubuntu Server

    -

    Download Ubuntu for ARM ›

    +
    +
    +

    Ubuntu is the hyperscale OS, natively powering scale-out workloads on a new wave of low-cost, ultra-dense hardware based on x86 and ARM processors.

    +
    +

    + Download Ubuntu Server + Download Ubuntu for ARM › +

    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/4679027f-hyperscale.png", + alt="hyperscale", + width="600", + hi_def=True, + ) | safe + }} +
    -
    -
    -
    +
    +
    +
    +

    Welcome to hyperscale, the future of the datacentre

    +
    +

    Computing in the 21st century will be done at an unprecedented scale, connecting people across the continents to a vast network of business, social and entertainment services.

    Providing compute capacity at that magnitude is today's top infrastructure challenge. That challenge is being taken on by a new wave of ultra-dense hardware, combined with software designed to natively scale out.

    -

    Tomorrow's servers will be built upon multiple architectures, including Intel x86 and ARM, and will be connected into datacentre-wide clusters via flexible, high-speed fabrics. At the heart of these clusters lies Ubuntu Server, the OS leading the cloud computing revolution.

    -
    -
    -

    Ubuntu Server for hyperscale

    -
    - -
    -

    Ubuntu Server embraces the scale-out philosophy and comes out of the box with tools that make deploying a complex network of services as easy as drawing up a diagram and pressing "go".

    - -

    Ubuntu works seamlessly across x86 and ARM. And it comes with all the leading open source and commercial workloads built in, including Apache Hadoop, Inktank Ceph, 10gen MongoDB and many others.

    +
    +
    +
    +
    +

    Ubuntu Server for hyperscale

    +
    +
    +

    Ubuntu Server embraces the scale-out philosophy and comes out of the box with tools that make deploying a complex network of services as easy as drawing up a diagram and pressing “go”.

    +

    Ubuntu works seamlessly across x86 and ARM. And it comes with all the leading open source and commercial workloads built in, including Apache Hadoop, Inktank Ceph, 10gen MongoDB and many others.

    +
    +
    -
    -

    -

    Here's why Ubuntu is the best answer to the scale-out challenge:

    -
      -
    • Scale-out at the core: Ubuntu Server supports the scale-out compute model and provides tools which make it simple to manage the entire cluster.
      • -
    • No end-user licence fee: Ubuntu is offered free to end-users. Adding 100 more nodes shouldn't require you to pay another 100 times for the OS!
      • -
    • Partners: Canonical has a global program with SoC vendors and OEMs to ensure that platforms are enabled and certified to run Ubuntu.
      • -
    • Seamless platform support: Ubuntu Server runs exactly the same on every enabled architecture, be it x86, ARM or PowerPC; with the same applications and tools.
      • -
    • Commercially supported: Canonical backs its free OS commitment with Ubuntu Advantage including commercial support, systems management and access to top experts.
      • -
    -

    Find out more about plans and pricing ›

    +
    +
    +
    +
    +

    Here's why Ubuntu is the best answer to the scale-out challenge:

    +
    +
    +
      +
    • Scale-out at the core: Ubuntu Server supports the scale-out compute model and provides tools which make it simple to manage the entire cluster.
      • +
    • No end-user licence fee: Ubuntu is offered free to end-users. Adding 100 more nodes shouldn't require you to pay another 100 times for the OS!
      • +
    • Partners: Canonical has a global program with SoC vendors and OEMs to ensure that platforms are enabled and certified to run Ubuntu.
      • +
    • Seamless platform support: Ubuntu Server runs exactly the same on every enabled architecture, be it x86, ARM or PowerPC; with the same applications and tools.
      • +
    • Commercially supported: Canonical backs its free OS commitment with Ubuntu Pro including commercial support, systems management and access to top experts.
      • +
    +
    + Find out more about plans and pricing › +
    -
    +
    -
    -

    A new wave of workloads demand breakthrough efficiencies in density, energy, and operational costs which can be scaled to a customer's IT environment

    - Paul Santeler, VP & GM, Hyperscale Business Unit, HP -
    +

    Endorsed by partners and customers

    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/c9a2aab2-logo-hp.svg", + alt="Hewlett Packard", + width="70", + height="70", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +
    +
    +

    + “A new wave of workloads demand breakthrough efficiencies in density, energy, and operational costs which can be scaled to a customer's IT environment” +

    +
    +
    +
    +
    +

    Paul Santeler

    +
    +
    +

    VP & GM, Hyperscale Business Unit, HP

    +
    +
    +
    -
    -
    -
    +
    +
    +
    +

    Canonical's long-term commitment

    +
    +

    Canonical's first investment in hyperscale dates back to 2008. We invested early in at scale management tools like Landscape and Juju, supporting the management of machines and services at scale through enterprise-class automation.

    -

    Canonical is also a pioneer with ARM Servers, building the first commercial general-purpose ARM Linux OS in 2007 and the first ARM-based Server OS in 2009. We founded Linaro along with Arm in 2010.

    +

    Canonical is also a pioneer with ARM Servers, building the first commercial general-purpose ARM Linux OS in 2007 and the first ARM-based Server OS in 2009. We founded Linaro along with ARM in 2010.

    Ubuntu now runs on every significant ARM platform deployed in the datacentre, including the recently-announced Baidu storage cluster.

    -
    -
    -

    The complete solution for hyperscale

    -
    - -
    -
    -

    Workload-level orchestration with Juju

    -

    Canonical's Juju framework goes beyond traditional orchestration systems to create a new paradigm in workload deployment.

    -

    Juju decouples services deployed onto the cluster from the nodes running them, and makes the deployment of the individual service easy.

    -

    Juju also supports deployment to cloud services like Amazon EC2 and Rackspace Cloud, and includes charms for open source workloads and key server ISV products.

    -

    Get more details on Juju here

    -
    -
    -

    Bare metal provisioning with MAAS

    -

    With their unique architecture, hyperscale servers need to be provisioned through scalable automation. Canonical's Metal as a Service (MAAS) addresses the problem of deploying hundreds of OS instances to a cluster of nodes:

    -

    MAAS provides a flexible mechanism to automatically detect, provision and configure individual nodes with Ubuntu server without any complex or manual configuration

    -

    Learn more about MAAS ›

    -
    -
    -
    - -
    -
    -
    -

    Deployment-time workload acceleration

    -

    Hyperscale systems with Juju and MAAS can provide nodes optimised to specific applications, including crypto, vector compute and transcoding.

    +
    +
    +
    +
    +

    The complete solution
    for hyperscale

    -
    -

    Landscape

    -

    Ubuntu's systems management tool supports management of ARM devices on equal footing alongside your x86 infrastructure.

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

    Workload-level orchestration with Juju

    +

    Canonical's Juju framework goes beyond traditional orchestration systems to create a new paradigm in workload deployment.

    +

    Juju decouples services deployed onto the cluster from the nodes running them, and makes the deployment of the individual service easy.

    +

    Juju also supports deployment to cloud services like Amazon EC2 and Rackspace Cloud, and includes charms for open source workloads and key server ISV products.

    +
    + Learn more about Juju › +
    + +
    +

    Bare-metal provisioning with MAAS

    +

    With their unique architecture, hyperscale servers need to be provisioned through scalable automation. Canonical's Metal As A Service (MAAS) addresses the problem of deploying hundreds of OS instances to a cluster of nodes:

    +

    MAAS provides a flexible mechanism to automatically detect, provision and configure individual nodes with Ubuntu server without any complex or manual configuration.

    +

    +
    + Learn more about MAAS › +
    +
    -
    -

    x86 and ARM support

    -

    With Ubuntu, general-purpose hyperscale clusters may be deployed with a combination of Xeon or Opteron-class x86, low-power x86 and ARM nodes.

    +
    +
    +
    +
    +
    +
    +

    Deployment-time workload acceleration

    +

    Hyperscale systems with Juju and MAAS can provide nodes optimised to specific applications, including crypto, vector compute and transcoding.

    +
    +
    +

    Machine management
    with Landscape

    +

    Ubuntu's systems management tool supports management of ARM devices on equal footing alongside your x86 infrastructure.

    +
    + Learn more about Landscape › +
    +
    +

    x86 and ARM support

    +

    With Ubuntu, general-purpose hyperscale clusters may be deployed with a combination of Xeon or Opteron-class x86, low-power x86 and ARM nodes.

    +
    +
    -
    -
    -
    -

    Your roadmap for hyperscale success

    -

    Canonical offers a range of services tailored to the needs of SoC and OEM partners as well as end users deploying hyperscale clusters.

    +
    +
    +
    +
    +

    Your roadmap for
    hyperscale success

    +
    +
    +

    Canonical offers a range of services tailored to the needs of SoC and OEM partners as well as end users deploying hyperscale clusters.

    +
    + Contact us about hyperscale ›
    -
    -
    -
    -

    SoC partners

    -

    Canonical offers hardware enablement services to ensure that new System On Chip (SoC) silicon is tightly integrated and tuned with Ubuntu, and a certification program to give OEMs and end users the highest level of confidence that the complete system, including chip, enclosure and OS work together in the most optimal way.

    +
    +
    +
    +
    +
    +

    SoC partners

    +
    +
    +

    Canonical offers hardware enablement services to ensure that new System On Chip (SoC) silicon is tightly integrated and tuned with Ubuntu, and a certification program to give OEMs and end users the highest level of confidence that the complete system, including chip, enclosure and OS work together in the most optimal way.

    +
    -
    -

    OEM and product developers

    -

    Canonical offers a range of engineering services to all companies within the value chain developing boards, sub-systems, appliances and complete server suites to ensure that systems are fully certified to meet the rigorous demands of the hyperscale datacentre.

    +
    +
    +
    +

    OEM and product developers

    +
    +
    +

    Canonical offers a range of engineering services to all companies within the value chain developing boards, sub-systems, appliances and complete server suites to ensure that systems are fully certified to meet the rigorous demands of the hyperscale datacentre.

    +
    -
    -

    End users

    -

    Canonical, together with OEM and ODM partners, delivers critical support and services to ensure customers can realise the full benefits of hyperscale technology.

    +
    +
    +
    +

    End-users

    +
    +
    +

    Canonical, together with OEM and ODM partners, delivers critical support and services to ensure customers can realise the full benefits of hyperscale technology.

    +
    -

    Contact us about hyperscale ›

    + {{ image ( + url="https://assets.ubuntu.com/v1/8253ee4b-AdobeStock_201641700%201.jpg", + alt="", + width="2464", + height="1053", + hi_def=True, + loading="lazy" + ) | safe + }}
    -
    -
    +
    +
    +

    Hyperscale partners

    - -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/f38c9ed1-hpe_pri_grn_pos_rgb.svg", - alt="Hewlett Packard Enterprise", - width="200", - height="133", - hi_def=True, - loading="lazy", - ) | safe - }} +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/0ad256cf-hpe_pri_grn_pos_rgb.png", + alt="Hewlett Packard Enterprise", + width="153", + height="64", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +

    Canonical has been involved in the development of Moonshot, Hewlett Packard Enterprise's hyperscale platform, from its inception. Ubuntu is the only OS that supports the full range of HP Moonshot x86 and ARM Systems, announced by HP in April 2013, providing scale out innovation at speed.

    +
    -
    -

    Canonical has been involved in the development of Moonshot, Hewlett Packard Enterprise's hyperscale platform, from its inception. Ubuntu is the only OS that supports the full range of HP Moonshot x86 and ARM Systems, announced by HP in April 2013, providing scale out innovation at speed.

    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/4efbd291-Arm_logo_blue_cropped.svg", - alt="Arm", - width="150", - height="45", - hi_def=True, - loading="lazy", - ) | safe - }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/7b6a888b-arm-logo.png", + alt="Arm", + width="90", + height="27", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +

    ARM and Canonical have worked in close collaboration for a number of years to ensure that datacentres running advanced workloads such as distributed data processing or cloud infrastructure, run best on Ubuntu.

    +
    -
    -

    Arm and Canonical have worked in close collaboration for a number of years to ensure that datacentres running advanced workloads such as distributed data processing or cloud infrastructure, run best on Ubuntu.

    -
    -
    - -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/d0e5bf77-partners-logo-cavium.png", - alt="Cavium", - width="150", - height="34", - hi_def=True, - loading="lazy", - ) | safe - }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/d0e5bf77-partners-logo-cavium.png", + alt="Cavium", + width="150", + height="34", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +

    Cavium is a provider of highly integrated semiconductor processors that enable intelligent networking, communications, storage, video and security applications within enterprise, datacentre, broadband/consumer, and access and service provider equipment.

    +
    -
    -

    Cavium is a provider of highly integrated semiconductor processors that enable intelligent networking, communications, storage, video and security applications within enterprise, datacentre, broadband/consumer, and access and service provider equipment.

    -
    - -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/ca664713-partners-logo-apm.svg", - alt="Applied Micro Circuits Corporation", - width="150", - height="50", - hi_def=True, - loading="lazy", - ) | safe - }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/ca664713-partners-logo-apm.svg", + alt="Applied Micro", + width="162", + height="54", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +

    Applied Micro Circuits Corporation is a global leader in computing and connectivity solutions for next-generation cloud infrastructure and data centers. AppliedMicro delivers silicon solutions that dramatically lower total cost of ownership.

    +
    -
    -
    -

    Applied Micro Circuits Corporation is a global leader in computing and connectivity solutions for next-generation cloud infrastructure and data centers. AppliedMicro delivers silicon solutions that dramatically lower total cost of ownership.

    -{% with first_item="_server_download", second_item="_server_contact_us", third_item="_cloud_further_reading" %}{% include "shared/contextual_footers/_contextual_footer.html" %}{% endwith %} +{% include "server/partial/_server-footer.html" %} + +
    - - {% endblock content %} diff --git a/templates/server/index.html b/templates/server/index.html index 67c1db0bc86..8cba8062b80 100755 --- a/templates/server/index.html +++ b/templates/server/index.html @@ -1,85 +1,69 @@ {% extends "server/base_server.html" %} {% block title %}Ubuntu Server - for scale out workloads{% endblock %} - {% block meta_description %}Secure, fast and economically scalable, Ubuntu helps you make the most of your infrastructure. Whether you want to deploy a cloud or a web farm, Ubuntu Server supports the most popular hardware and software.{% endblock %} - {% block meta_copydoc %}https://docs.google.com/document/d/1vxLhtbjgPs9PCNEhr7fbhEoErCPMXYFfU4UTKH7Kbq4/edit{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock body_class %} + {% block content %} -
    -
    -
    -

    Scale out with Ubuntu Server

    -

    Ubuntu Server brings economic and technical scalability to your datacentre, public or private. Whether you want to deploy an OpenStack cloud, a - Kubernetes cluster or a 50,000-node render farm, Ubuntu Server delivers the best value scale-out performance available.

    -

    - Download Ubuntu Server -

    +
    +
    +
    +

    Scale out with Ubuntu Server

    -
    - {{ image( - url="https://assets.ubuntu.com/v1/55eda3ae-Servers+-white.svg", - alt="", - width="350", - height="121", - hi_def=True, - loading="auto", - ) | safe - }} +
    +

    Ubuntu Server brings economic and technical scalability to your data centre, public or private cloud. Whether you want to deploy an OpenStack cloud, a Kubernetes cluster or a 50,000-node render farm, Ubuntu Server delivers the best value scale-out performance available.

    + Download Ubuntu Server
    -
    - -
    -
    -

    What's new in Ubuntu Server {{ releases.lts.short_version }} LTS

    -
      -
    • Supported by Canonical for 10 years until 2032
      • -
    • Cloud images for AWS, Azure and GCP with hardening, compliance programmes, Kernel Livepatch and more with Ubuntu Pro
      • -
    • Kafka, Grafana and Loki joined the growing portfolio of trusted OCI images, Ubuntu-based and maintained by Canonical
      • -
    • OpenSSL 3.0 for modern, general-purpose cryptography and secure communication
      • -
    • Native host and guest drivers for NVIDIA virtual GPU (vGPU) software 14
      • -
    • Network acceleration improvements with SmartNIC support in Netplan
      • -
    • General support for GlusterFS, FRRouting and realmd/adcli under the Ubuntu main component
      • -
    • Runs on all major architectures: x86-64, ARM v7, ARM64, POWER9/POWER10, IBM zSystems and LinuxONE (s390x) and RISC-V
      • -
    • The latest long-term Linux 5.15 kernel for the recent hardware and security updates
      • -
    • Updates to QEMU (v6.2), libvirt (v8.0), PHP (v8.1), Ruby (v3.0), GCC (V11.2), Python (v3.10.1), MySQL (v8.0.28), OpenLDAP (v.2.5.11), Samba 4.15.5
      • +
      + {{ image ( + url="https://assets.ubuntu.com/v1/e55cc8c0-wide-server.png", + alt="", + width="4096", + height="1377", + hi_def=True, + loading="auto" + ) | safe + }}
      -
      -

      Read more in the release notes ›

      -
      -
    +
    -
    -
    -

    Performance and versatility

    -

    Agile, secure, deploy-anywhere technology for fast-moving companies

    -
    -
    -
    -

    It doesn't matter whether you want to deploy a NoSQL database, web farm or cloud. Certified by leading hardware OEMs and with comprehensive deployment - tools, so you can get the most from your infrastructure.

    +
    +
    +
    +
    +

    Performance and versatility

    -
    -

    Our regular release cycle means access to the latest and most performant open source. A lean initial installation along with integrated deployment and - application modelling technologies make Ubuntu Server a great solution for simple deployment and management at scale.

    +
    +

    Agile, secure, deploy-anywhere technology for fast-moving companies

    +

    It doesn't matter whether you want to deploy a NoSQL database, web farm or cloud. Certified by leading hardware OEMs and with comprehensive deployment tools, so you can get the most from your infrastructure.

    +

    Our regular release cycle means access to the latest and most performant open source. A lean initial installation along with integrated deployment and application modelling technologies make Ubuntu Server a great solution for simple deployment and management at scale.

    -
    +
    -
    +
    +
    +
    +
    +

    Works with all your hardware

    +
    +
    +

    Explore all certified hardware partners ›

    +
    +
    -

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/c70b529e-lenovo-logo.png", + url="https://assets.ubuntu.com/v1/a34e318a-lenovo-logo.svg", alt="Lenovo", - width="288", - height="288", + width="105", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -88,10 +72,10 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/987acdaa-dell-logo.png", + url="https://assets.ubuntu.com/v1/fe17c507-dell-logo.svg", alt="Dell", - width="288", - height="288", + width="71", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -100,9 +84,9 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/5588e80d-ibm-logo.png", + url="https://assets.ubuntu.com/v1/c8792945-ibm-logo.png", alt="IBM", - width="288", + width="141", height="288", hi_def=True, loading="lazy", @@ -112,10 +96,10 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/a9b3cc95-hpe.png", - alt="Hewlett Packard", - width="288", - height="288", + url="https://assets.ubuntu.com/v1/136e7089-hp-enterprise-logo.svg", + alt="Hewlett Packard Enterprise", + width="118", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -124,9 +108,9 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/67f81bfe-intel-new-logo.png", + url="https://assets.ubuntu.com/v1/834d57ab-intel-logo.png", alt="Intel", - width="288", + width="149", height="288", hi_def=True, loading="lazy", @@ -136,9 +120,9 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/7eebe11c-cisco-logo.png", + url="https://assets.ubuntu.com/v1/3d30864c-cisco-logo.png", alt="Cisco", - width="288", + width="174", height="288", hi_def=True, loading="lazy", @@ -148,10 +132,10 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/6079d02b-amd-logo.png", + url="https://assets.ubuntu.com/v1/dac5c9d7-amd-logo.png", alt="AMD", - width="288", - height="288", + width="186", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -160,10 +144,10 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/711be910-arm-logo.png", - alt="ARM", - width="288", - height="288", + url="https://assets.ubuntu.com/v1/d9d05f49-arm-logo.png", + alt="Arm", + width="183", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -172,7 +156,20 @@

    Works with all your hardware and software

    -

    View all certified hardware partners ›

    +
    +
    + +
    +
    +
    +
    +

    Works with all your software

    +
    +
    +

    Explore all certified software partners ›

    +
    +
    +
    @@ -189,10 +186,10 @@

    Works with all your hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/f0089726-openstack-logo.png", - alt="OpenStack", - width="288", - height="288", + url="https://assets.ubuntu.com/v1/4648a4a4-openstack-logo.png", + alt="Openstack", + width="509", + height="384", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -225,147 +222,267 @@

    Works with all your hardware and software

    -

    - View all certified software partners › -

    -
    +
    + +
    +
    +
    +
    +

    A release schedule
    you can depend on

    +
    +
    +

    Stay up-to-date with regular updates and upgrades

    +

    Long-term support (LTS) releases of Ubuntu Server receive standard security updates for around 2,500 packages in the Ubuntu Main repository for five years by default. Every six months, interim releases bring new features, while hardware enablement updates add support for the latest machines to all supported LTS releases.

    +

    Ubuntu Pro subscriptions expands security maintenance to over 30,000 packages for 10 years and provides optional, enterprise-grade phone and ticket support by Canonical.

    +
    +
    +
    -{% include "shared/_release_schedule.html" %} -
    +
    +
    +
    +

    Security support for Ubuntu releases

    +
    -
    -

    Infrastructure and applications foundation

    -

    From public clouds to data centres to devices

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     ReleasedEnd of LifeExpanded security maintenance
    Ubuntu 22.04 LTSApril 2022April 2027
    Ubuntu 21.10October 2021July 2022
    Ubuntu 21.04April 2021January 2022
    Ubuntu 20.10October 2020July 2021
    Ubuntu 20.04 LTSApril 2020April 2025April 2030
    Ubuntu 19.10October 2019July 2020
    Ubuntu 19.04April 2019January 2020
    Ubuntu 18.10October 2018July 2019
    Ubuntu 18.04 LTSApril 2018April 2023April 2028
    Ubuntu 16.04 LTSApril 2016April 2021April 2024
    Ubuntu 14.04 LTSApril 2014April 2019April 2022
    Ubuntu 12.04 LTSApril 2012April 2017April 2019
    Ubuntu 10.04 LTSApril 2010April 2015
    +
    +
    +
    + + + +
    +
    +
    +
    +

    Infrastructure
    and applications foundation

    +
    +
    +

    From public clouds to data centres to devices

    Ubuntu is the most popular guest operating system on public clouds, the foundation for private cloud implementation and the platform of choice of developers according to the 2020 HackerEarth Developer Survey.

    -

    - Watch a webinar - “From VMware to Open Source” › -

    +
    + Watch a webinar - “From VMware to Open Source” ›
    -
    +
    -
    -
    -
    -
    -
    +
    +
    +
    +

    Use it with other Canonical products

    +
    +
    +
    +
    +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/6405175c-Canonical+Juju+dark+text.svg", - alt="", - width="300", - height="65", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img"}, + url="https://assets.ubuntu.com/v1/ef4ac9e1-juju-tagged-logo.png", + alt="Juju", + width="60", + height="32", + hi_def=False, + loading="lazy" ) | safe }} -

    Multi-cloud orchestration

    -

    With the option of a command line or browser-based interface, Juju enables you to design and deploy entire workloads in just a few clicks. It works - on public clouds like AWS and Microsoft Azure, private clouds built on OpenStack and even directly on bare metal, via MAAS.

    -

    - Learn more about Juju › -

    +
    +

    Multi-cloud orchestration

    +

    With the option of a command line or browser-based interface, Juju enables you to design and deploy entire workloads in just a few clicks. It works on public clouds like AWS and Microsoft Azure, private clouds built on OpenStack and even directly on bare metal, via MAAS.

    +
    + Learn more about Juju › +
    -
    -
    -
    - {{ image( - url="https://assets.ubuntu.com/v1/477f8662-maas-logo-long.svg", - alt="", - width="175", - height="34", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img"}, +
    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/444371de-maas-tagged-logo.png", + alt="Maas", + width="79", + height="32", + hi_def=False, + loading="lazy" ) | safe }} -

    MAAS — bare metal provisioning

    -

    MAAS is a time-saving provisioning system that makes it quick and easy to set up the physical hardware to deploy complex services, like Ubuntu's - OpenStack cloud infrastructure. Just plug in your servers, connect them to the network and let MAAS do the rest.

    -

    - Learn more about MAAS › -

    +
    +

    Bare metal provisioning

    +

    MAAS is a time-saving provisioning system that makes it quick and easy to set up the physical hardware to deploy complex services, like Ubuntu's OpenStack cloud infrastructure. Just plug in your servers, connect them to the network and let MAAS do the rest.

    +
    + Learn more about MAAS › +
    -
    -
    -
    - {{ image( - url="https://assets.ubuntu.com/v1/52b3819e-lxd-logo-long.svg", +
    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/e3805af7-lxd-tagged-logo.png", alt="LXD", - width="157", - height="34", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img"}, + width="61", + height="32", + hi_def=False, + loading="lazy" ) | safe }} -

    LXD — machine containers

    -

    Economics are directly tied to compute density. LXD, the Linux container hypervisor, merges the speed and density of containers with the - manageability and security of traditional virtual machines.

    -

    - Learn more about LXD › -

    +
    +

    Machine containers

    +

    Economics are directly tied to compute density. LXD, the Linux container hypervisor, merges the speed and density of containers with the manageability and security of traditional virtual machines.

    +
    + Learn more about LXD › +
    -
    +
    -
    -
    -

    Ubuntu Pro

    +
    +
    +
    +
    +

    Ubuntu Pro

    +
    +
    +

    Ubuntu Pro offers a single, per-node packaging of the most comprehensive software, hardening and security in the industry. With the Base OS, OpenStack, Kubernetes and Applications security maintanance included, Ubuntu Pro delivers everything you need to future-proof your data centre.

    +

    Furthermore, you can add support for the Base OS, Infrastructure and Applications.

    +
    + Learn more about Canonical support › +
    -
    -
    -

    Ubuntu Pro offers a single, per-node packaging of the most comprehensive software, hardening and security in the industry. - With the Base OS, OpenStack, Kubernetes and Applications security maintanance included, Ubuntu Pro delivers everything you need to future-proof your data centre.

    -

    Furthermore, you can add support for the Base OS, Infrastructure and Applications.

    -

    Learn more about Canonical support ›

    +
    + +
    +
    +
    +
    +

    Get in touch

    -
    -
    -

    Get in touch

    -

    Speak to our technical support team about your support requirements.

    -

    Contact us

    -
    +
    +

    Speak to our technical support team about your support requirements.

    +
    + Contact us
    -
    +
    -
    -
    -
    -

    A thriving community

    -

    Exchange expertise and ideas with thousands of other IT professionals.

    -

    Want to talk to other Ubuntu users straightaway? Share ideas and get advice and help from our large, active community of IT professionals. As a - community, we set high standards for friendliness and tolerance, we welcome your questions and contributions!

    -

    - Join the community › -

    +
    +
    +
    +
    +

    A thriving community

    -
    - {{ image( - url="https://assets.ubuntu.com/v1/5552afb7-community-support.svg", - alt="", - width="150", - height="150", - hi_def=True, - loading="lazy", - attrs={"class": "u-hide--small"}, - ) | safe - }} +
    +

    Exchange expertise and ideas with thousands of other IT professionals.

    +

    Want to talk to other Ubuntu users straightaway? Share ideas and get advice and help from our large, active community of IT professionals. As a community, we set high standards for friendliness and tolerance, we welcome your questions and contributions!

    +
    + Join the community ›
    -
    +
    -{% with first_item="_server_download", second_item="_server_contact_us", third_item="_cloud_further_reading" %}{% include -"shared/contextual_footers/_contextual_footer.html" %}{% endwith %} +{% include "server/partial/_server-footer.html" %}
    +
    +
    +
    +

    Get started today

    +
    +
    +
    +
    +
    +

    Download

    +
    +
    +

    Whether you want to configure a simple file server or build a fifty thousand-node cloud, you can rely on Ubuntu Server and its five years of guaranteed free upgrades.

    +
    + Get Ubuntu Server +
    +
    +
    +
    +
    +

    Ubuntu Pro for business

    +
    +
    +

    Get professional support for Ubuntu Server from Canonical.

    +
    +

    + Buy Ubuntu Pro + Get in touch › +

    +
    +
    +
    +
    +
    +

    Further reading

    +
    +
    +
      +
      • +
    +
    + + +
    +
    +
    +
    + + + From 98b7aec83d3d5dd84b8c46053126d8e48e94346d Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Thu, 8 Feb 2024 13:19:26 +0100 Subject: [PATCH 63/72] Created a latest news partial and applied the same medium screen layout for relevant section across the bubble --- templates/desktop/developers.html | 49 ++--------------- templates/desktop/flavours.html | 53 +++---------------- templates/desktop/organisations.html | 43 +-------------- .../desktop/partial/_desktop-latest-news.html | 40 ++++++++++++++ 4 files changed, 54 insertions(+), 131 deletions(-) create mode 100644 templates/desktop/partial/_desktop-latest-news.html diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index b454ec5dfd6..6ba185976f8 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -560,10 +560,10 @@

    Free for personal use
    on up to five machines

    Get started today

    -
    +
    -
    +

    Download and install

    @@ -574,7 +574,7 @@

    Download and install

    -
    +

    Buy it pre-installed

    @@ -585,7 +585,7 @@

    Buy it pre-installed

    -
    +

    Join our community

    @@ -611,46 +611,7 @@

    Join our community

    -
    -
    -
    -
    -
    -

    Latest Ubuntu Desktop news
    from our blog ›

    -
    -
    -
    -
    -
    -
    -

    Explore all

    -
    -
    - - -
    - - - +{% include "desktop/partial/_desktop-latest-news.html" %} diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index a511476c76f..02eba9567bf 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -508,21 +508,21 @@

    More ways to experience Ubuntu

    -
    -
    +
    +

    Ubuntu-based variants

    -
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    -
    +
    +

    Looking for Ubuntu?

    -
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    Download now

    @@ -531,45 +531,6 @@

    Looking for Ubuntu?

    -
    -
    -
    -
    -
    -

    Latest Ubuntu Desktop news from our blog ›

    -
    -
    -
    -
    -
    -
    -

    Explore all

    -
    -
    - - -
    - - - +{% include "desktop/partial/_desktop-latest-news.html" %} {% endblock content %} diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 9011088eda3..9da36a2248c 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -350,7 +350,7 @@

    Virtual desktops, powered by AWS

    Find out more about Ubuntu WorkSpaces › {{ image ( - url="https://assets.ubuntu.com/v1/55bb92be-aws_workspaces.png", + url="https://assets.ubuntu.com/v1/1624c0a0-55bb92be-aws_workspaces.png.png", alt="", width="603", height="215", @@ -424,45 +424,6 @@

    Whitepapers

    -
    -
    -
    -
    -
    -

    Latest Ubuntu Desktop news from our blog ›

    -
    -
    -
    -
    -
    -
    -

    Explore all

    -
    -
    - - -
    - - - +{% include "desktop/partial/_desktop-latest-news.html" %} {% endblock content %} diff --git a/templates/desktop/partial/_desktop-latest-news.html b/templates/desktop/partial/_desktop-latest-news.html new file mode 100644 index 00000000000..47f939184a4 --- /dev/null +++ b/templates/desktop/partial/_desktop-latest-news.html @@ -0,0 +1,40 @@ +
    +
    +
    +
    +
    +

    Latest Ubuntu Desktop news from our blog ›

    +
    +
    +
    +
    +
    +
    +

    Explore all

    +
    +
    + + +
    + + + \ No newline at end of file From 6c8a16efbaae49d4ce0e7f64b0e2ff249493ca62 Mon Sep 17 00:00:00 2001 From: l Date: Thu, 8 Feb 2024 16:42:27 +0000 Subject: [PATCH 64/72] medium breakpoint fixes --- templates/desktop/wsl.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/templates/desktop/wsl.html b/templates/desktop/wsl.html index 85ea82cf755..d01d0b52351 100644 --- a/templates/desktop/wsl.html +++ b/templates/desktop/wsl.html @@ -11,18 +11,18 @@ {% block content %}
    -
    -
    -

    The full Ubuntu experience, now available on Windows

    +
    +
    +

    The full Ubuntu experience, now available on Windows

    -
    +

    Access the power of a full Ubuntu terminal environment on Windows with Windows Subsystem for Linux (WSL).

    Streamline web application development, leverage cutting-edge AI/ML tooling, develop cross-platform applications and manage IT infrastructure without leaving Windows.

    Download from the Microsoft Store - Looking for support? Contact us › + Looking for support? Contact us ›
    @@ -147,16 +147,16 @@

    -
    -
    +
    +

    Resources

    -
    +
    -
    +

    Tutorials

    -
    +
    -
    +

    Documentation

    -
    +
    -
    +
    -
    +

    Contact us

    -
    +

    If you have further questions around Ubuntu on WSL or want to share your experiences, join the conversation on the Ubuntu Discourse.

    If you want to hear more about the benefits of securing Ubuntu on WSL at your organisation, please get in touch.

    From 758181438c4244ebf55d8f85ac80d14dd13e7f20 Mon Sep 17 00:00:00 2001 From: Carlos Wu Date: Thu, 8 Feb 2024 17:56:22 +0100 Subject: [PATCH 65/72] Add WSL to desktop navigation --- navigation.yaml | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/navigation.yaml b/navigation.yaml index 4d8488ca6af..30a5b2ea767 100644 --- a/navigation.yaml +++ b/navigation.yaml @@ -280,6 +280,8 @@ desktop: path: /desktop/partners - title: Flavours path: /desktop/flavours + - title: WSL + path: /desktop/wsl core: title: Ubuntu Core @@ -647,10 +649,3 @@ landscape: - title: Log in to Landscape path: https://landscape.canonical.com/login/authenticate -wsl: - title: WSL - path: /wsl - - children: - - title: Overview - path: /wsl From f26634c5d46e460b689ebb351226d9c95d3582ec Mon Sep 17 00:00:00 2001 From: Liza Date: Fri, 9 Feb 2024 09:06:21 +0200 Subject: [PATCH 66/72] Update templates/blog/newsletter-form.html Co-authored-by: MariaPaula Trujillo --- templates/blog/newsletter-form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/blog/newsletter-form.html b/templates/blog/newsletter-form.html index c1a5afd1e14..fa045ebc9b2 100644 --- a/templates/blog/newsletter-form.html +++ b/templates/blog/newsletter-form.html @@ -28,7 +28,7 @@
    Newsletter signup
    - + Date: Fri, 9 Feb 2024 09:06:40 +0200 Subject: [PATCH 67/72] Update templates/blog/newsletter-form.html Co-authored-by: MariaPaula Trujillo --- templates/blog/newsletter-form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/blog/newsletter-form.html b/templates/blog/newsletter-form.html index fa045ebc9b2..d2e48479ef5 100644 --- a/templates/blog/newsletter-form.html +++ b/templates/blog/newsletter-form.html @@ -4,7 +4,7 @@
    Newsletter signup
    - +

    Get the latest Ubuntu news and updates in your inbox.

    -

    Ubuntu Desktop combines enterprise-grade support, security
    and functionality with the best of open source.

    +

    Ubuntu Desktop combines enterprise-grade support, security
    and functionality with the best of open source.

    Contact us Download the datasheet - Secure open‑source with Ubuntu Pro › + Secure open source with Ubuntu Pro ›

    @@ -372,7 +372,7 @@

    Day zero support with Ubuntu
    Desktop Enterprise Services

    Designed to help your developers get up and running on Ubuntu as quickly as possible. Canonical engineers partner with you to deliver a solution tailored to your needs, including:

      -
    • Customised image creation
      • +
    • Custom image creation
    • Post-deployment automation
    • Active Directory integration
    • Security configuration
      • From a297c732a948070b8c4d2d3d8dbd4d6c376f1a6f Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 9 Feb 2024 10:22:40 +0100 Subject: [PATCH 69/72] Apply updated links --- templates/desktop/organisations.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 23c97ededc8..e715eb34f5e 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -92,7 +92,7 @@

      Advanced Active Directory policies

      Compliance, certification and hardening

    -

    Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

    +

    Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

    Learn more about Ubuntu's security practices ›
    From 0261cfdcc1f9d73b0ff57e0ed67fa100c8cc623c Mon Sep 17 00:00:00 2001 From: Pete Date: Fri, 9 Feb 2024 13:27:50 +0100 Subject: [PATCH 70/72] Fix linting errors --- static/js/src/release-chart-old.js | 2 +- static/js/src/release-chart.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/static/js/src/release-chart-old.js b/static/js/src/release-chart-old.js index 5f426a60057..e7b411805ac 100644 --- a/static/js/src/release-chart-old.js +++ b/static/js/src/release-chart-old.js @@ -440,7 +440,7 @@ export function createChartWithTitles( if (!taskTypesTitle || !taskVersionsTitle) return; // build regular chart - createChart(chartSelector, taskTypes, taskStatus, tasks, taskVersions); + createReleaseChartOld(chartSelector, taskTypes, taskStatus, tasks, taskVersions); // adjust chart height to fit titles margin.left = calculateYAxisWidth(taskTypes); diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 10478f79050..ca1cf10caa9 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -305,7 +305,7 @@ function addXAxisVerticalLines(svg, height, margin) { * * Builds key for supplied chart based on task status */ -function buildChartKey(chartSelector, taskStatus) { +function buildChartKey(svg, chartSelector, taskStatus) { var taskStatusKeys = Object.keys(taskStatus); var rectDimensions = 25; var rowHeight = rectDimensions + 5; @@ -314,7 +314,7 @@ function buildChartKey(chartSelector, taskStatus) { var containerWidth = document.querySelector(chartSelector).clientWidth; var numberOfExtraLines = - getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + getMaxNumberOfLines(svg, taskStatusKeys, containerWidth) - 1; var extraChartHeight = numberOfExtraLines * 9; var chartKey = d3 @@ -363,7 +363,7 @@ function buildChartKey(chartSelector, taskStatus) { * Find the max number of lines that any given text will occupy from * a list of texts, based on a given container width */ -function getMaxNumberOfLines(textList, width) { +function getMaxNumberOfLines(svg, textList, width) { var tempSvg = (svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" @@ -412,7 +412,7 @@ function wrapText(text, width) { x = text.attr("x"), y = text.attr("y"), dy = 0; - tspan = text + var tspan = text .text(null) .append("tspan") .attr("x", x) @@ -611,7 +611,7 @@ export function createReleaseChart( addXAxisVerticalLines(svg, height, margin); addYAxisHorizontalLines(svg, yAxis, width, margin); cleanUpChart(svg); - buildChartKey(keyAttachmentSelector, taskStatus); + buildChartKey(svg, keyAttachmentSelector, taskStatus); highlightChartRow(svg, y, highlightVersion); } From 90b465950381e632d8af646c15e78b785ef707c4 Mon Sep 17 00:00:00 2001 From: Peter French Date: Fri, 9 Feb 2024 13:28:18 +0100 Subject: [PATCH 71/72] Open target meganav dropdown based on url hash on load (#13546) * Open target meganav dropdown based on url hash on load * Better error handling * Make linty happy * Make it work on mobile * Fix bug on mobile height not being applied when navigation is opened via a hash link * Fix mobile bug --- static/js/src/navigation.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js index 71e046aadae..95725674954 100644 --- a/static/js/src/navigation.js +++ b/static/js/src/navigation.js @@ -18,9 +18,18 @@ let dropdowns = []; const mainList = document.querySelector( "nav.p-navigation__nav > .p-navigation__items" ); +// Get the navigations initial height for use in 'updateWindowHeight' +const navEle = document.querySelector(".p-navigation__nav"); +const originalMaxHeight = navEle.style.maxHeight; navigation.classList.add("js-enabled"); nav.classList.remove("u-hide"); +document.addEventListener("DOMContentLoaded", () => { + setUpGlobalNav(); +}); +window.addEventListener("load", () => { + handleUrlHash(); +}); //Helper functions @@ -69,7 +78,6 @@ mainList.addEventListener("click", function (e) { } }); -window.addEventListener("load", closeAll); let wasBelowSpecificWidth = window.innerWidth < MOBILE_VIEW_BREAKPOINT; window.addEventListener("resize", function () { // Only closeAll if the resize event crosses the MOBILE_VIEW_BREAKPOINT threshold @@ -139,6 +147,21 @@ function updateUrlHash(id, open) { } } +function handleUrlHash() { + const targetId = window.location.hash; + const targetDropdown = targetId ? navigation.querySelector(targetId) : null; + if (targetDropdown) { + const currViewportWidth = window.innerWidth; + const isMobile = currViewportWidth < MOBILE_VIEW_BREAKPOINT; + if (isMobile) { + const menuToggle = navigation.querySelector(".js-menu-button"); + menuToggle?.click(); + } + fetchDropdown("/templates/meganav/" + targetDropdown.id, targetDropdown.id); + handleDropdownClick(targetDropdown); + } +} + function goBackOneLevel(e, backButton) { e.preventDefault(); const target = backButton.parentNode.parentNode; @@ -314,8 +337,6 @@ function getUrlBarHeight(element) { } // Handles mobile navigation height taking up veiwport space -const navEle = document.querySelector(".p-navigation__nav"); -const originalMaxHeight = navEle.style.maxHeight; function updateWindowHeight() { navEle.style.maxHeight = originalMaxHeight; const isInDropdownList = mainList.classList.contains("is-active"); @@ -754,9 +775,6 @@ function setUpGlobalNav() { dropdown.prepend(backButton); }); } -document.addEventListener("DOMContentLoaded", () => { - setUpGlobalNav(); -}); // Initiate login var accountContainer = document.querySelector(".js-account"); From 186050b7888db38c16b6a1c59f87142622a73765 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 9 Feb 2024 13:39:43 +0100 Subject: [PATCH 72/72] Run prettier --- static/js/src/release-chart-old.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/static/js/src/release-chart-old.js b/static/js/src/release-chart-old.js index e7b411805ac..7fbaf8e8f50 100644 --- a/static/js/src/release-chart-old.js +++ b/static/js/src/release-chart-old.js @@ -440,7 +440,13 @@ export function createChartWithTitles( if (!taskTypesTitle || !taskVersionsTitle) return; // build regular chart - createReleaseChartOld(chartSelector, taskTypes, taskStatus, tasks, taskVersions); + createReleaseChartOld( + chartSelector, + taskTypes, + taskStatus, + tasks, + taskVersions + ); // adjust chart height to fit titles margin.left = calculateYAxisWidth(taskTypes);