]> xenbits.xensource.com Git - www-xenproject-org.git/commitdiff
fix
authorArnaud Guéras <arnaudgs@gmail.com>
Tue, 19 Nov 2024 09:44:56 +0000 (10:44 +0100)
committerArnaud Guéras <arnaudgs@gmail.com>
Tue, 19 Nov 2024 09:44:56 +0000 (10:44 +0100)
Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
22 files changed:
content/_index.md
content/projects/hypervisor.md
content/projects/xcp-ng.md
content/resources/mailing-lists.md
content/resources/matrix.md
hugo_stats.json
stories/AllComponents.stories.js
stories/molecules/Card.stories.js
themes/xen-project/assets/css/components/box-resources.scss
themes/xen-project/assets/css/footer.scss
themes/xen-project/assets/css/header/header-desktop.scss
themes/xen-project/assets/css/header/header-mobile.scss
themes/xen-project/assets/css/molecules/buttons.scss
themes/xen-project/assets/css/molecules/card.scss
themes/xen-project/assets/css/molecules/hero-block.scss
themes/xen-project/assets/css/typography.scss
themes/xen-project/assets/js/carousel.js
themes/xen-project/layouts/partials/card.html
themes/xen-project/layouts/partials/layout/link-item.html
themes/xen-project/layouts/partials/media-block.html
themes/xen-project/layouts/shortcodes/media-block.html
themes/xen-project/layouts/shortcodes/row-from-list.html

index 6f29c8a03926e2f41475e7ca6a9c3889f53bc9cd..5dbcfd5ebbcd03628763e13e6d438845b52eb345 100644 (file)
@@ -8,8 +8,9 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor,
   {{<media-block
     class="hero-block"
     label="A Linux Foundation Project"
-    title="Bring the power of open virtualization everywhere."
+    title="Bring the power of **open virtualization** everywhere."
     titleLevel="1"
+    titleClass="title-with-gradient-underline"
     media="/img/flatline/screen-with-xen-logo.webp"
     alt="Illustration of a computer monitor displaying bar charts with Xen Project Logo"
     mediaPosition="right"
index 4d53739a94ccd360e0088122e4570260543eee28..bb975695bbac39b037fe38e53f56f9bdc274a555 100644 (file)
@@ -116,6 +116,7 @@ aside:
     title="Versatile Open-Source Virtualization"
     media="/img/flatline/data-center.svg"
     alt="Illustration of a person managing server racks, representing data management and server maintenance."
+    animate="true"
   >}}
 The Xen Project hypervisor is an open-source type-1 or baremetal hypervisor, which makes it possible to run many instances of an operating system or indeed different operating systems in parallel on a single machine (or host). The Xen Project hypervisor is the only type-1 hypervisor that is available as open source. It is used as the basis for a number of different commercial and open source applications, such as: server virtualization, Infrastructure as a Service (IaaS), desktop virtualization, security applications, embedded and hardware appliances. The Xen Project hypervisor is powering the largest clouds in production today.
 {{</media-block>}}
@@ -146,6 +147,7 @@ The Xen Project hypervisor is an open-source type-1 or baremetal hypervisor, whi
     title="History"
     media="/img/flatline/timeline.svg"
     alt="Illustration of a timeline with milestones for the years 2012, 2018, 2020, and 2024, representing project progress and development."
+    animate="true"
   >}}
 The Xen Project hypervisor is developed by a worldwide community of individuals, researchers and employees of companies and that follow the Xen Project Governance process. The project is supported by the Xen Project Advisory Board made up of project member companies that fund the Xen Project. You can find a contribution breakdowns under Contribution Acknowledgments.
 {{</media-block>}}
index 24b86750cfc8f00f291c5ee8b594041d2c537d0b..1eb63b0d67dd162317c4d81804be7e8c47218256 100644 (file)
@@ -13,26 +13,26 @@ aside:
     type: resource
     items: 
       - name: Downloads
-        url: "https://xcp-ng.org/#easy-to-install"
+        link: "https://xcp-ng.org/#easy-to-install"
       - name: Docs
-        url: "https://github.com/xcp-ng/xcp/wiki"
+        link: "https://github.com/xcp-ng/xcp/wiki"
       - name: Forums
-        url: "https://xcp-ng.org/forum/"
+        link: "https://xcp-ng.org/forum/"
       - name: "IRC: #xcp-ng"
-        url: "/help/irc/"
+        link: "/help/irc/"
       - name: Report a Bug
-        url: "https://github.com/xcp-ng/xcp/issues"
+        link: "https://github.com/xcp-ng/xcp/issues"
   - name: Developers
     type: resource
     items:
       - name: Developer Forum
-        url: "https://xcp-ng.org/forum/category/7/development"
+        link: "https://xcp-ng.org/forum/category/7/development"
       - name: "IRC: #xcp-ng-dev"
-        url: "/help/irc/"
+        link: "/help/irc/"
       - name: Browse Git
-        url: "https://github.com/xcp-ng"
+        link: "https://github.com/xcp-ng"
       - name: Dev Docs
-        url: "https://github.com/xcp-ng/xcp/wiki#development"
+        link: "https://github.com/xcp-ng/xcp/wiki#development"
   - name: Team
     type: members-list
     items:
index 59090e7dba0f24db85ae76bcc75c4a8af12925d7..20ca45825ae50f83b06a9d75e17d83e67a2c35c6 100644 (file)
@@ -50,7 +50,7 @@ Xen Project mailing lists have a web as well as an email interface.
 ## General
 {{</md>}}
 
-{{<row-from-list component="card" component-class="card--bg" cols="3">}} 
+{{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="3">}} 
 - title: XEN-ANNOUNCE@
   tags:
     - Mailing list
@@ -112,7 +112,7 @@ Xen Project mailing lists have a web as well as an email interface.
 ### Xen Project Hypervisor
 {{</md>}}
 
-{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}} 
+{{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="3" class="mg-t-md">}} 
 - title: XEN-DEVEL@
   tags:
     - Mailing list
@@ -138,7 +138,7 @@ Xen Project mailing lists have a web as well as an email interface.
   {{<md>}}
   ### Mirage OS
   {{</md>}}
-  {{<row-from-list component="card" component-class="card--bg" cols="1" class="mg-t-md">}} 
+  {{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="1" class="mg-t-md">}} 
   - title: MIRAGEOS-DEVEL@
     tags:
       - Mailing list
@@ -153,7 +153,7 @@ Xen Project mailing lists have a web as well as an email interface.
   {{<md>}}
   ### Unikraft
   {{</md>}}
-  {{<row-from-list component="card" component-class="card--bg" cols="1"  class="mg-t-md">}} 
+  {{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="1"  class="mg-t-md">}} 
   - title: MINIOS-DEVEL@ (INCLUDES UNIKRAFT DEVELOPMENT) 
     tags:
       - Mailing list
@@ -169,7 +169,7 @@ Xen Project mailing lists have a web as well as an email interface.
   {{<md>}}
   ### XAPI
   {{</md>}}
-  {{<row-from-list component="card" component-class="card--bg" cols="1"  class="mg-t-md">}} 
+  {{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="1"  class="mg-t-md">}} 
   - title: XEN-API@
     tags:
       - Mailing list
@@ -187,7 +187,7 @@ Xen Project mailing lists have a web as well as an email interface.
 {{<md>}}
 ### XCP-ng
 {{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}} 
+{{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="3" class="mg-t-md">}} 
 - title: XCP-NG FORUMS
   tags:
     - Forum
@@ -218,7 +218,7 @@ Xen Project mailing lists have a web as well as an email interface.
 {{<md class="mg-t-md">}}
 ### Windows PV Drivers
 {{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}} 
+{{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="3" class="mg-t-md">}} 
 - title: WIN-PV-DEVEL@
   tags:
     - Mailing list
@@ -234,7 +234,7 @@ Xen Project mailing lists have a web as well as an email interface.
 ## Advisory board
 {{</md>}}
 
-{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-v-md">}} 
+{{<row-from-list component="card" component-class="card--bg" titleLevel="2" cols="3" class="mg-v-md">}} 
 - title: PREDISCLOSURE-APPLICATIONS@
   tags:
     - Mailing list
index a763116ea2b9e922b0095b1045d86e7ad725ca71..a060e8a72ce206b6369303aea86471a04cd1081c 100644 (file)
@@ -16,7 +16,7 @@ menus:
 ## Xen Project Matrix
 {{</md>}}
 
-{{<row-from-list component="card" component-class="card--bg" cols="3">}}  
+{{<row-from-list component="card" component-class="card--bg" cols="3" title-level="2">}}  
 - title: XenProject
   tags:
     - Matrix
@@ -43,7 +43,7 @@ menus:
 ## Projects
 {{</md>}}
 
-{{<row-from-list component="card" component-class="card--bg" cols="3">}} 
+{{<row-from-list component="card" component-class="card--bg" cols="3" titleLevel="2">}} 
 - title: XCP-ng
   tags:
     - Discord
index fc9f22d5e2498ee20c9e8f7118b9ebde44750d4a..033b4359fceff648b71617551ba5ab8662795cc1 100644 (file)
       "socials-footer",
       "tag",
       "title-external-link",
+      "title-with-gradient-underline",
       "txt-c",
       "vertical-lists",
       "video-container",
index 7ed60e86949e126877b0106d721967f1ff1f20f8..292dc27b2022d94ed06eff2e1b28255a8d5a3339 100644 (file)
@@ -1,6 +1,8 @@
 import { html } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
+const DEFAULT_COLUMNS = 3;
+
 const storiesList = [
   {
     group: "Molecules",
@@ -23,13 +25,23 @@ async function loadStories() {
 }
 
 const AllComponentsTemplate = (args, { loaded: { stories } }) => {
-  let columns = 1; // Default number of columns
+  let columns = DEFAULT_COLUMNS;
+  let zoom = 1;
 
   const updateColumns = (event) => {
     columns = event.target.value;
     document.querySelector(".component-grid").style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
   };
 
+  const updateZoom = (event) => {
+    zoom = event.target.value;
+    document.querySelectorAll(".component-content").forEach((el) => {
+      el.style.transform = `scale(${zoom})`;
+      el.style.width = `${100 / zoom}%`;
+      el.style.height = `${100 / zoom}%`;
+    });
+  };
+
   const scaleContent = (element) => {
     const parent = element.parentElement;
     const scale = Math.min(parent.clientWidth / element.scrollWidth, parent.clientHeight / element.scrollHeight);
@@ -98,16 +110,34 @@ const AllComponentsTemplate = (args, { loaded: { stories } }) => {
         display: flex;
         align-items: center;
         justify-content: center;
-        overflow: hidden;
         flex-direction: column;
         gap: 12px;
         padding: 20px;
+        transform-origin: top left;
+        width: 100%;
+        height: 100%;
+      }
+      .controls {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 20px;
+      }
+      .control-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
       }
     </style>
     <h1>All Components</h1>
-    <div>
-      <label for="columns">Columns:</label>
-      <input id="columns" type="range" min="1" max="6" value="${columns}" @input="${updateColumns}" />
+    <div class="controls">
+      <div class="control-group">
+        <label for="columns">Columns:</label>
+        <input id="columns" type="range" min="1" max="6" value="${columns}" @input="${updateColumns}" />
+      </div>
+      <div class="control-group">
+        <label for="zoom">Zoom:</label>
+        <input id="zoom" type="range" min="0.1" max="2" step="0.1" value="${zoom}" @input="${updateZoom}" />
+      </div>
     </div>
     ${stories.map((group) => {
       return html`
index 2d988b7100be7b01f61a28d1ff6222902d82dfb7..4e245e872e7a2e3889046c180716a28507c06b62 100644 (file)
@@ -17,11 +17,6 @@ export default {
         }
       }, 1000);
     </script>
-    <style>
-      .card {
-        min-height: 350px;
-      }
-    </style>
     <div class="card " id="card">
       <div class="label">Card</div>
       <div class="tags">
index 0705680c955069bdb1c1f8113733953fdd28887b..fd9a56ecb7e2c46d52cfc54db9f78ccf947ccaaf 100644 (file)
       margin: var(--sp-xs) 0;
     }
 
-    a {
-      text-decoration: none;
+    // a {
+    //   text-decoration: none;
 
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+    //   &:hover {
+    //     text-decoration: underline;
+    //   }
+    // }
   }
 }
index c34d00d74c557e902759f977f12cb27286aa3946..1273e98224e2b615f43bd9c27b1ae41b74aeb2a2 100644 (file)
       --icon-left: 0;
       vertical-align: middle;
       line-height: 1;
-    }
-    a:hover {
-      --icon-left: 0.6em;
-      text-decoration: underline;
+      text-decoration: none !important;
       &::before {
         right: 1.6em;
       }
     }
+    a:hover {
+      --icon-left: 0.6em;
+      text-decoration: none;
+    }
 
     a:active {
       --icon-left: 0.9em;
index b0077c6277b4f30e01ca530dd8ad48c261b10c3c..14e253f415efb7c86ba1de38d723404b7bec357b 100644 (file)
 
       a {
         color: var(--header-color-link);
-        font-weight: 500;
-        text-decoration: none;
+        // font-weight: 500;
+        // text-decoration: none;
 
         &:hover {
           color: var(--header-color-link-hover);
index 75234d9ae61e3d270d8af4294dbd40d89ee56f92..1251ddd53045981550ab69377f9c75941611cbc4 100644 (file)
     display: block;
   }
 }
+
+.header .menu a {
+  @extend .btn;
+  @extend .btn-tertiary;
+  --icon-width: 0.8em;
+  --icon-margin: 0em;
+  --padding: 0em;
+
+  font-size: 1em;
+  &::before {
+    right: calc(var(--icon-left) + var(--icon-width) + var(--icon-margin) + 0.2em + var(--padding));
+  }
+}
index e40f3f89b9166be0cae94ff011eaf8145c4a5f4a..cb4fb2d3c4763b15b1b9030f0b3873e41203b2ed 100644 (file)
@@ -38,7 +38,8 @@
     padding: 0.75rem 1.5rem;
   }
 
-  &::after {
+  &-primary::after,
+  &-secondary::after {
     --space: 0.375rem;
     content: "";
     position: absolute;
@@ -51,7 +52,8 @@
   }
 
   // button icon
-  .fas {
+  .fas,
+  &-tertiary::after {
     transform: translateX(var(--icon-left));
     transition: transform 0.3s ease-in-out;
     display: inline-block;
     --icon-left: 0.3em;
   }
 
-  // &:has(.fas):hover {
-  // --left-padding: 0.7em;
-  // }
-
   &:active,
   &.active {
     --color-primary: var(--color-active);
   }
 
   &-tertiary {
+    --padding: 2px;
     position: relative;
-    padding: 2px;
+    padding: var(--padding);
     background-color: transparent;
     border: none;
 
       transform: scaleX(0);
       height: 2px;
       bottom: 0;
-      left: 0;
-      right: 0;
+      left: var(--padding);
+      right: var(--padding);
       background-color: currentColor;
       transition: transform 0.25s ease-out;
       transform-origin: bottom left;
     }
 
     &:has(.fas)::before {
-      right: calc(var(--icon-left) + var(--icon-width) + var(--icon-margin) + 0.2em);
+      right: calc(var(--icon-left) + var(--icon-width) + var(--icon-margin) + 0.2em + var(--padding));
     }
 
     &:hover::before {
index 7aeffb2170bb4e7ed787383c9d01b21a06c05a80..2af6864730e1924f84eff0c34640990065ffd671 100644 (file)
     --card-tag-text-color: var(--color-action-text);
     --card-title-color: var(--color-action-text);
     --card-title-weight: 500;
+    box-shadow: none;
   }
 
   &--bg-white {
index b43a07ae257520b455ea4cb58e490ba36f8a3f70..9062d0c2185bc23e7258fd3d94adcb70ca979c39 100644 (file)
     font-size: var(--title-font-size);
   }
 }
+
+.title-with-gradient-underline {
+  strong {
+    display: block;
+    white-space: nowrap;
+    position: relative;
+
+    &::after {
+      display: block;
+      content: "";
+      position: absolute;
+      bottom: -0.04em;
+      left: 0;
+      right: 0;
+      height: 0.07em;
+      background: linear-gradient(90deg, #07c 0%, rgba(255, 255, 255, 0) 100%);
+    }
+  }
+}
index 21e05940b010aee17cd505d234bf63451320c60c..d48c217d86d3e0c63f33dadf69af6894c8efe8fc 100644 (file)
@@ -79,13 +79,13 @@ h1 {
   font-size: var(--font-size-h1);
   margin-top: var(--sp-md);
   margin-bottom: var(--sp-md);
-  font-weight: 700;
+  font-weight: 500;
   line-height: 119%;
   letter-spacing: -0.027em;
 }
 
 h2 {
-  font-weight: bold;
+  font-weight: 500;
   font-size: var(--font-size-h2);
   margin-top: 0.66em;
   margin-bottom: 0.66em;
index c500a05d96b7232325cb3d1f6298dccb7ff4bfb2..eac90c6e410fe9a583314433efa95944324d9850 100644 (file)
@@ -7,11 +7,19 @@
   const { debounce } = window.XenSiteUtils;
 
   const carousel = async (element) => {
+    const infiniteLoop = false;
+    const itemsBefore = 2;
+    const itemsAfter = 2;
+
     const carouselElement = element.querySelector(".carousel");
     let prev = element.querySelector(".prev");
     let next = element.querySelector(".next");
     let items = await waitForElements(carouselElement, itemSelector);
 
+    // add attributes to first and last items
+    items[0].dataset.first = true;
+    items[items.length - 1].dataset.last = true;
+
     const carouselClone = carouselElement.cloneNode(true);
     carouselClone.classList.add("carousel-clone");
     carouselClone.style.setProperty("position", "absolute");
@@ -23,6 +31,7 @@
     carouselClone.style.setProperty("pointer-events", "none");
     carouselClone.style.setProperty("visibility", "hidden");
     carouselClone.style.setProperty("height", "100");
+
     const getItemInformations = () => {
       carouselElement.before(carouselClone);
       carouselClone.style.setProperty("width", carouselElement.offsetWidth + "px");
     cloneItemsReverse(items, itemsAfter);
 
     const moveNext = function () {
+      if (
+        !infiniteLoop &&
+        element.querySelectorAll(itemSelector)[element.querySelectorAll(itemSelector).length - 1].dataset.last
+      )
+        return;
       let items = element.querySelectorAll(itemSelector);
       carouselElement.appendChild(items[0]);
     };
@@ -71,6 +85,8 @@
 
     const movePrev = function () {
       let items = element.querySelectorAll(itemSelector);
+      const item = items[itemsBefore];
+      if (!infiniteLoop && item.dataset.first) return;
       carouselElement.prepend(items[items.length - 1]);
     };
     prev.addEventListener("click", movePrev);
     carouselElement.addEventListener("touchend", (e) => {
       moveX = e.changedTouches[0].clientX - startX;
       if (Math.abs(moveX) > 50) {
-        // Seuil de 50px pour considérer comme un swipe
         if (moveX > 0) {
           movePrev();
         } else {
         }
       `);
 
-      const itemsBefore = 3;
-      const itemsAfter = 2;
-
       const carouselWidth = carouselElement.offsetWidth;
       const maxItems = Math.floor(carouselWidth / occupiedSpace) + 1 + itemsBefore + itemsAfter;
 
index e9869414ca7e00a7b169ddd3c44ed5a9019c5903..3794932cbd0d0a6cdadf14468d5cb442dcbdaecd 100644 (file)
   <div class="card__content">{{ .description | markdownify | safeHTML }}</div>
   {{ if .link }}
     <div class="card__actions">
-      <a href="{{ .link }}" class="join-button">
+      <a href="{{ .link }}" class="join-button btn btn-tertiary">
         {{ .linkText | default $defaultLinkText }} <i class="fas {{ .linkIcon | default $defaultIcon }}"></i>
       </a>
       {{ if .secondaryLink }}
-        <a href="{{ .secondaryLink }}" class="join-button">
+        <a href="{{ .secondaryLink }}" class="join-button btn btn-tertiary">
           {{ .secondaryLinkText | default $defaultLinkText }}
           <i class="fas {{ .secondaryLinkIcon | default $defaultIcon }}"></i>
         </a>
index 64880b77edd3f1ccdedac59e296b5c3aa5abb2ae..1cf4bb20a5a756bb9dbb34d39620f6484875416f 100644 (file)
@@ -1,6 +1,10 @@
 <li>
   {{ if .link }}
-    <a href="{{ .link }}" {{ if and (not (hasPrefix .link "/")) (not (hasPrefix .link "./")) }}target="_blank"{{ end }}>
+    <a
+      href="{{ .link }}"
+      {{ if and (not (hasPrefix .link "/")) (not (hasPrefix .link "./")) }}target="_blank"{{ end }}
+      class="btn btn-tertiary"
+    >
       {{ .name | markdownify }}
       {{ if .icon }}
         <i class="{{ .icon }}"></i>
index 0dbf9423c3973ffbaf179f2698b08424b732f850..2d3277248fd4ad08d8528b24062a0c307508387c 100644 (file)
@@ -28,7 +28,7 @@
       <div class="media-block__label">{{ .Label }}</div>
     {{ end }}
     {{ if .Title }}
-      <h{{ $titleLevel }} class="media-block__title">{{ $title | safeHTML }}</h{{ $titleLevel }}>
+      <h{{ $titleLevel }} class="media-block__title {{ .TitleClass }}">{{ $title | safeHTML }}</h{{ $titleLevel }}>
     {{ end }}
     <div class="media-block__text">
       {{ .Content  | safeHTML }}
index b1c911ae05a7ba009fa31060b2b35fa864165895..5afb1510cc23194008494c9dbe44453d75c4af9d 100644 (file)
@@ -7,6 +7,7 @@
 {{ $mobileMediaPosition := .Get "mobileMediaPosition" | default "left" }}
 {{ $title := .Get "title" | default "" }}
 {{ $titleLevel := .Get "titleLevel" | default "2" }}
+{{ $titleClass := .Get "titleClass" | default "" }}
 {{ $class := .Get "class" | default "" }}
 {{ $animate := .Get "animate" | default "false" }}
 
@@ -21,6 +22,7 @@
   "Site" .Site
   "Title" $title
   "TitleLevel" $titleLevel
+  "TitleClass" $titleClass
   "Class" $class
   "Animate" $animate
   )
index bec88a843b0c4c13ae6cf62df8ea4c15359918b9..d51fb01779ca0401455d8f43c1e4848470cc7c98 100644 (file)
@@ -3,6 +3,7 @@
 {{ $class := .Get "class" }}
 {{ $yamlData := .Inner | unmarshal }}
 {{ $componentClass := .Get "component-class" }}
+{{ $titleLevel := .Get "titleLevel" }}
 
 
 <div
@@ -10,6 +11,6 @@
   {{ if $cols }}style="--cols: {{ $cols }};"{{ end }}
 >
   {{ range $yamlData }}
-    {{ partial $component (merge . (dict "class" $componentClass)) }}
+    {{ partial $component (merge . (dict "class" $componentClass "titleLevel" $titleLevel)) }}
   {{ end }}
 </div>