Merge d66c6c0 into 2f7d0d4

site/_components/banner-interstitial.njk

@@ -18,7 +18,7 @@
 #}-->
 {% from 'icon.njk' import icon %} {% macro bannerInterstitial(content, microcopy) %}
 <article class="banner-interstitial {{'banner-interstitial--no-cta' if not content.cta}}">
- <div class="banner-interstitial__inner {{'theme theme__' + content.theme.theme if content.theme}}">
+ <div class="banner-interstitial__inner {% if content.theme.theme %}theme theme__{{content.theme.theme}}{% elif content.tag %}background-color--{{content.normalizedTag}}{% endif %}">
  <div class="banner-interstitial__content">
  <div class="banner-interstitial__text">
  <small class="banner-interstitial__eyebrow type--h2">{{microcopy.featured.eyebrow}}</small>
@@ -27,17 +27,19 @@
  <a href="{{content.cta.url}}" class="cta cta--transparent banner-interstitial__cta"> {{content.cta.text}} </a>
  </div>
  <div class="banner-interstitial__image-wrapper">
- {% if content.theme.background %} {% if content.theme.background.top %}
+ {% if content.media.image %}
+ <img class="banner-interstitial--image" src="{{content.media.image}}" alt="{{content.media.alt}}" />
+ {% endif %} {% if content.theme %} {% if content.theme.background %} {% if content.theme.background.top %}
  <picture>
  <source media="(min-width: 720px)" srcset="{{content.theme.background.top}}" />
  <img class="banner-interstitial--background-pattern" src="{{content.theme.background.bottom}}" alt="" />
  </picture>
  {% else %}
  <img class="banner-interstitial--background-pattern" src="{{content.theme.background}}" alt="" />
- {% endif %} {% else %}
+ {% endif %} {% endif %} {% else %}
  <picture>
- <source media="(min-width: 720px)" srcset="ix:https://landings/news/top/banner-{{tagSlug}}.svg" />
- <img class="banner-interstitial--background-pattern" src="ix:https://landings/news/banner-{{tagSlug}}.svg" alt="" />
+ <source media="(min-width: 871px)" srcset="ix:https://landings/news/top/banner-{{content.normalizedTag}}.svg" />
+ <img class="banner-interstitial--background-pattern" src="ix:https://landings/news/banner-{{content.normalizedTag}}.svg" alt="" />
  </picture>
  {% endif %}
  </div>

site/_components/hero-article.njk

@@ -55,12 +55,12 @@
  </picture>
  {% else %}
  <img class="hero-article__images--background-pattern" src="{{theme.background}}" alt="" />
- {% endif %} {% elif section == 'posts' %}
+ {% endif %} {% elif section == 'posts' and not theme %}
  <picture>
  <source media="(min-width: 871px)" srcset="ix:https://landings/{{ parent.url }}/top/banner-{{tagSlug}}.svg" />
  <img class="hero-article__images--background-pattern" src="ix:https://landings/{{ parent.url }}/banner-{{tagSlug}}.svg" alt="" />
  </picture>
- {% else %}
+ {% elif not theme %}
  <img class="hero-article__images--background-pattern" src="ix:https://landings/{{ parent.url }}/banner-{{tagSlug}}.svg" alt="" />
  {% endif %}
  </div>

site/_components/hero.njk

@@ -29,14 +29,14 @@
  <div class="hero__images">
  {% if content.media.image %}
  <img class="hero__images--image" src="{{content.media.image}}" alt="{{content.media.alt}}" />
- {% endif %} {% if content.theme.background %} {% if content.theme.background.top %}
+ {% endif %} {% if content.theme %} {% if content.theme.background %} {% if content.theme.background.top %}
  <picture>
  <source media="(min-width: 871px)" srcset="{{content.theme.background.top}}" />
  <img class="hero__images--background-pattern" src="{{content.theme.background.bottom}}" alt="" />
  </picture>
  {% else %}
  <img class="hero__images--background-pattern" src="{{content.theme.background}}" alt="" />
- {% endif %} {% else %}
+ {% endif %} {% endif %} {% else %}
  <picture>
  <source media="(min-width: 871px)" srcset="ix:https://landings/news/top/banner-{{tagSlug}}.svg" />
  <img class="hero-article__images--background-pattern" src="ix:https://landings/news/banner-{{tagSlug}}.svg" alt="" />

site/_data/contributors.js

@@ -450,6 +450,16 @@ const contributors = {
  title: 'Engineering Manager',
  },
  },
+ chrisdemiris: {
+ name: {
+ given: 'Chris',
+ family: 'Demiris',
+ },
+ work: {
+ company: 'Luma Touch LLC',
+ title: 'Director of Engineering',
+ },
+ },
 };
 
 module.exports = () => contributors; // By making this a function, it'll force Eleventy to reevaluate it every time it gets recompiled

site/en/_data/home.yml

@@ -71,22 +71,23 @@ stats:
  heading: Grow in good company.
  subtitle: Keep your app—and your audience—growing, across the Chrome OS community.
  items:
- - stat: +270%
- desc: Desktop PWA installs, YoY
+ - stat: 270M
+ desc: Active Android users on ChromeOS, tablets, and foldables
  modifiers:
  shape: semicircle
  scale: full
  footnote: 1
- - stat: +50%
- desc: Chromebook users engaging with Android apps, YoY
- modifiers:
- shape: circle
- footnote: 2
  - stat: 50M
  desc: Students and educators using Chromebooks worldwide
  modifiers:
  shape: triangle
  scale: half
+
+ footnote: 2
+ - stat: +270%
+ desc: Desktop PWA installs, YoY
+ modifiers:
+ shape: circle
  footnote: 3
 caseStudies:
  title: Get inspired.
@@ -200,7 +201,7 @@ videos:
  heading: h2
 footnotes:
  notes:
- - Google Internal Data, Feb 1 2021 to Feb 1 2022.
- - Google Internal Data, 2020-2021.
+ - Google Internal Data, Q1 2022.
  - Google Internal Data, January 2022.
+ - Google Internal Data, Feb 1 2021 to Feb 1 2022.
  variant: landing

site/en/posts/announcing-lumafusion-beta-for-chromeos.md

@@ -0,0 +1,29 @@
+---
+title: Announcing LumaFusion Beta for ChromeOS
+metadesc: We're very excited today to announce the open beta of LumaFusion for ChromeOS and Android!
+tags:
+ - announcement
+ - android
+hero:
+ youtube: azWiCUPPThk
+ alt: Video showing a video being edited in LumaFusion on a Chromebook
+theme:
+ theme: lumafusion
+featured:
+ images:
+ - image: ix:https://posts/announcing-lumafusion-beta-for-chromeos/LumaFusionHero.png
+ alt: Chromebook running LumaFusion Beta
+authors:
+ - chrisdemiris
+date: 2022-10-24
+---
+
+We're very excited today to announce the open beta of LumaFusion for ChromeOS and Android! This is an important milestone in our long-held goal of bringing professional and accessible video editing and effects to an incredibly wide range of content creators around the world.
+
+Developing LumaFusion for ChromeOS and Android devices presented us with new opportunities. The development team built LumaFusion for ChromeOS from the ground up, taking great strides to recreate the signature LumaFusion experience and ensure users enjoy the same workflow on any device they choose. We think Chromebooks are a natural fit for LumaFusion because they’re easy to set up and are always ready to use with great battery life and no long boot up or update times. We think our users will love the flexibility and power their large screens and both touch and keyboard interfaces will bring to how they work. That same ease of use and complete control has always been a hallmark of LumaFusion.
+
+When creating LumaFusion for ChromeOS and Android, one of our biggest challenges was developing the engine to playback and export the multitrack video and audio compositions that LumaFusion makes possible. After multiple iterations, our team created an engine that directly manages multiple [`MediaCodec`s](https://developer.android.com/reference/kotlin/android/media/MediaCodec) with a central clock to manage synchronization between various video and audio sources, and an [OpenGLES](https://developer.android.com/develop/ui/views/graphics/opengl) renderer that composites multiple video sources, still images, and rendered titles into output frames. The result? They perfectly reproduced dozens of video filters as OpenGLES shaders for ChromeOS and Android.
+
+During the development process, we collaborated with ChromeOS and Android to help provide the best performance possible. The learning went both ways and other developers should benefit from platform improvements made to improve the resource intensive task of multi-track asset manipulation in Android.
+
+The LumaFusion open beta is available now in the Google Play Store; we’d love for you to try it out and share your feedback. Stay tuned for even more on this exciting new chapter for ChromeOS and LumaFusion.

site/sass/components/_banner-interstitial.scss

@@ -46,7 +46,7 @@
  &__eyebrow,
  &__title,
  &__copy {
- color: var(--white);
+ color: inherit;
  }
 
  &__copy {
@@ -59,12 +59,17 @@
  }
 
  &__cta {
+ border-color: currentColor;
+ color: inherit;
  display: inline-flex;
  margin-top: 1.75rem;
  }
 
  &__image-wrapper {
+ height: 100%;
  max-width: pxRem(746px);
+ overflow: hidden;
+ position: relative;
  // Stretch image wrapper outside of the banner's wrapper.
  width: math.percentage(math.div(456px, 327px));
 
@@ -81,4 +86,23 @@
  &__image {
  object-fit: cover;
  }
+
+ &--image {
+ float: right;
+ max-height: 100%;
+ position: relative;
+ width: auto;
+ z-index: 1;
+ }
+
+ &--background-pattern {
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ z-index: 0;
+
+ @include mq($break-2-col) {
+ height: 100%;
+ }
+ }
 }

site/sass/components/_themes.scss

@@ -23,4 +23,12 @@
  --hero-theme-background: var(--green-700);
  --hero-theme-cta-background: transparent;
  }
+
+ &__lumafusion {
+ --hero-theme-color: var(--white);
+ --hero-theme-background: var(--blue-850);
+ --hero-theme-cta-background: transparent;
+
+ background-image: radial-gradient(circle farthest-corner at 97% 97%, var(--blue-200) 175px, transparent 175px), radial-gradient(circle farthest-corner at calc(97% + 53px) calc(97% + 53px), var(--blue-300) 250px, transparent 250px);
+ }
 }

site/sass/style.scss

@@ -35,7 +35,6 @@
 @import 'components/pre';
 @import 'components/body';
 @import 'components/cta';
-@import 'components/background-color';
 @import 'components/switch';
 @import 'components/card';
 @import 'components/back-to-top';
@@ -97,6 +96,7 @@
 @import 'components/stories-card';
 
 // Component themes
+@import 'components/background-color';
 @import 'components/themes';
 
 // Page Layouts