[website] SEO and load time optimization (#648)

compositor_api/src/types/component.rs

@@ -39,13 +39,13 @@ pub struct View {
     /// Width of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub width: Option<f32>,
     /// Height of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub height: Option<f32>,
 
@@ -129,13 +129,13 @@ pub struct Rescaler {
     /// Width of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub width: Option<f32>,
     /// Height of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub height: Option<f32>,
 
@@ -352,13 +352,13 @@ pub struct Tiles {
     /// Width of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub width: Option<f32>,
     /// Height of a component in pixels. Exact behavior might be different based on the parent
     /// component:
     /// - If the parent component is a layout, check sections "Absolute positioning" and "Static
-    /// positioning" of that component.
+    ///   positioning" of that component.
     /// - If the parent component is not a layout, then this field is required.
     pub height: Option<f32>,
 

docs/docusaurus.config.ts

@@ -3,7 +3,7 @@ import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'Live Compositor',
+  title: 'LiveCompositor',
   favicon: 'img/favicon.png',
 
   // Set the production url of your site here
@@ -65,6 +65,25 @@ const config: Config = {
   ],
 
   themeConfig: {
+    metadata: [
+      { name: 'description', content: 'Real-time, low latency, programmable video & audio mixer' },
+      { name: 'keywords', content: 'video, audio, mixing, real-time, live' },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: 'LiveCompositor' },
+      {
+        name: 'twitter:description',
+        content: 'Real-time, low latency, programmable video & audio mixer',
+      },
+      { name: 'twitter:site', content: 'ElixirMembrane' },
+      { name: 'og:type', content: 'website' },
+      { name: 'og:image', content: 'https://compositor.live/img/logo.webp' },
+      { name: 'og:title', content: 'LiveCompositor' },
+      {
+        name: 'og:description',
+        content: 'Real-time, low latency, programmable video & audio mixer',
+      },
+      { name: 'og:url', content: 'https://compositor.live/' },
+    ],
     colorMode: {
       defaultMode: 'dark',
     },

docs/index.d.ts

@@ -1,4 +1,2 @@
-declare module '*.png';
 declare module '*.svg';
-declare module '*.jpeg';
-declare module '*.jpg';
+declare module '*.webp';

docs/pages/api/components/WebView.md

@@ -4,7 +4,7 @@ hide_table_of_contents: true
 title: WebView
 ---
 
-[<span class="badge badge--info">Required feature: web_renderer</span>](../../deployment/overview.md#web-renderer-support)
+[<span className="badge badge--info">Required feature: web_renderer</span>](../../deployment/overview.md#web-renderer-support)
 
 import Docs from "@site/pages/api/generated/component-WebView.md"
 

docs/src/css/custom.css

@@ -14,6 +14,9 @@
   --ifm-color-primary-lighter: #8080f9;
   --ifm-color-primary-lightest: #a5abfc;
   --ifm-code-font-size: 95%;
+  --ifm-h1-font-size: 2.25rem;
+  --ifm-h2-font-size: 2rem;
+  --ifm-h3-font-size: 1.5rem;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 

docs/src/pages/index.tsx

@@ -5,7 +5,6 @@ import { GiFeather, GiBattery100, GiSpeedometer } from 'react-icons/gi';
 import { IoCloudOffline } from 'react-icons/io5';
 import { MdAudiotrack, MdLiveTv } from 'react-icons/md';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 
@@ -14,12 +13,12 @@ import { PropsWithChildren } from 'react';
 import { IconContext, IconType } from 'react-icons';
 import MembraneLogo from '@site/static/img/membrane-logo.svg';
 import SwmLogo from '@site/static/img/swm-logo.svg';
-import ComposingImg from '@site/static/img/how_it_works.png';
+import ComposingImg from '@site/static/img/how_it_works.webp';
 import WebGpuLogoDark from '@site/static/img/webgpu-dark.svg';
 import WebGpuLogoLight from '@site/static/img/webgpu-light.svg';
-import VideoConferencingImg from '@site/static/img/videoconferencing.jpg';
-import StreamingImg from '@site/static/img/streaming.jpg';
-import BroadcastingImg from '@site/static/img/broadcasting.jpg';
+import VideoConferencingImg from '@site/static/img/videoconferencing.webp';
+import StreamingImg from '@site/static/img/streaming.webp';
+import BroadcastingImg from '@site/static/img/broadcasting.webp';
 import { useColorMode } from '@docusaurus/theme-common';
 import TypewriterComponent from 'typewriter-effect';
 import ExampleScene from '../components/example_scene';
@@ -85,7 +84,7 @@ function HomepageHeader() {
               autoPlay
               muted
               src="/video/showcase.mp4"
-              poster="/img/showcase_poster.jpg"
+              poster="/img/showcase_poster.webp"
               style={{ width: '100%', display: 'block' }}
             />
           </div>
@@ -98,7 +97,7 @@ function HomepageHeader() {
 function HowItWorks() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         How it works?
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -123,7 +122,7 @@ function HowItWorks() {
 function UseCases() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Use cases
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -156,7 +155,7 @@ function UseCaseCard(props: UseCaseCardProps) {
   return (
     <div className={clsx('card', styles.card, styles.hoverPrimary)}>
       <div className="text--primary">
-        <Heading as="h2" style={{ textAlign: 'center', margin: 0 }}>
+        <Heading as="h3" style={{ textAlign: 'center', margin: 0 }}>
           {props.title}
         </Heading>
       </div>
@@ -173,7 +172,7 @@ function UseCaseCard(props: UseCaseCardProps) {
 function VisionCards() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Vision
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -216,7 +215,7 @@ function VisionCard(props: PropsWithChildren<VisionCardProps>) {
         <Icon className={styles.icon} />
       </div>
       <div className="card__header">
-        <Heading as="h2" style={{ textAlign: 'center' }}>
+        <Heading as="h3" style={{ textAlign: 'center' }}>
           {props.title}
         </Heading>
       </div>
@@ -234,7 +233,7 @@ type FeatureProps = {
 function Feature(props: PropsWithChildren<FeatureProps>) {
   const text = (
     <div className="col">
-      <Heading as="h2" className="margin-top--sm">
+      <Heading as="h3" className="margin-top--sm">
         {props.text}
       </Heading>
       <p>{props.secondaryText}</p>
@@ -263,7 +262,7 @@ function Features() {
 
   return (
     <div className="container margin-top--lg margin-bottom--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Capabilities
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>Simple, powerful, fast. Pick three.</p>
@@ -426,7 +425,7 @@ function MembranePlugin() {
 function Usage() {
   return (
     <div className="container">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Usage
       </Heading>
       <StandaloneSever />
@@ -439,7 +438,7 @@ function Usage() {
 function Licensing() {
   return (
     <div className="container margin-top--lg margin-bottom--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Licensing
       </Heading>
       <div className="card container">
@@ -495,7 +494,7 @@ function ContactUs() {
           <SwmLogo width={220} className="margin--lg" style={{ alignSelf: 'center' }} />
           <div className="col">
             <div className="card__header margin-top--md">
-              <Heading as="h1">
+              <Heading as="h2">
                 <span className="text--primary">Contact</span> us
               </Heading>
             </div>
@@ -517,11 +516,8 @@ function ContactUs() {
 }
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout
-      title={siteConfig.title}
-      description="Tool for real-time video processing / transforming / composing">
+    <Layout>
       <HomepageHeader />
       <div className={styles.sectionSeparator} />
       <HowItWorks />

docs/static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+
+Sitemap: https://compositor.live/sitemap.xml

integration_tests/src/tests/push_input_before_start.rs

@@ -13,7 +13,7 @@ use crate::{
 ///
 /// Output:
 /// - Display entire input stream from the beginning (16 seconds). No black frames at the
-/// beginning. Starts with a green color.
+///   beginning. Starts with a green color.
 /// - Black screen for remaining 4 seconds.
 #[test]
 pub fn push_input_before_start_tcp() -> Result<()> {
@@ -98,7 +98,7 @@ pub fn push_input_before_start_tcp() -> Result<()> {
 ///
 /// Output:
 /// - Display entire input stream from the beginning (16 seconds). No black frames at the
-/// beginning. Starts with a green screen.
+///   beginning. Starts with a green screen.
 /// - Black screen for remaining 4 seconds.
 #[test]
 pub fn push_input_before_start_udp() -> Result<()> {
@@ -183,7 +183,7 @@ pub fn push_input_before_start_udp() -> Result<()> {
 ///
 /// Output:
 /// - Display input stream without initial 5 seconds from the beginning (11 seconds). Not black frames at the
-/// beginning. Starts with a red color. Initial 5 second of input stream is missing.
+///   beginning. Starts with a red color. Initial 5 second of input stream is missing.
 /// - Black screen for remaining 9 seconds.
 #[test]
 pub fn push_input_before_start_tcp_no_offset() -> Result<()> {
@@ -268,7 +268,7 @@ pub fn push_input_before_start_tcp_no_offset() -> Result<()> {
 ///
 /// Output:
 /// - Display entire input stream from the beginning (16 seconds). No black frames at the
-/// beginning. Starts with a red color. Initial 5 second of input stream is missing.
+///   beginning. Starts with a red color. Initial 5 second of input stream is missing.
 /// - Black screen for remaining 19 seconds.
 #[test]
 pub fn push_input_before_start_udp_no_offset() -> Result<()> {