diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js index b8b9608b4..a0d5c9cc9 100644 --- a/landing/app-landing.react.js +++ b/landing/app-landing.react.js @@ -1,25 +1,25 @@ // @flow import * as React from 'react'; -import { assetMetaData } from './asset-meta-data.js'; +import { imageAssetMetaData } from './asset-meta-data.js'; import HeroContent from './hero-content.react.js'; import css from './landing.css'; import Picture from './Picture.react.js'; -import usePreloadAssets from './use-pre-load-assets.react.js'; +import usePreloadImageAssets from './use-pre-load-image-assets.react.js'; function AppLanding(): React.Node { - usePreloadAssets(assetMetaData); - const [hero] = assetMetaData; + usePreloadImageAssets(imageAssetMetaData); + const [hero] = imageAssetMetaData; return (
); } export default AppLanding; diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js index c8f0e1d9b..0cead5fcd 100644 --- a/landing/asset-meta-data.js +++ b/landing/asset-meta-data.js @@ -1,24 +1,24 @@ // @flow import css from './landing.css'; -export type Asset = { +export type ImageAsset = { +alt: string, +url: string, +title: string, +description: string, +imageStyle: string, +infoStyle: string, }; export const assetsCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net'; -export const assetMetaData = [ +export const imageAssetMetaData = [ { alt: 'a mobile phone screen highlighting chat and DAO voting', url: `${assetsCacheURLPrefix}/Header`, imageStyle: css.heroImage, infoStyle: css.heroInfo, title: 'Header', description: '', }, ]; diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js index 0e2e18736..340a07806 100644 --- a/landing/hero-content.react.js +++ b/landing/hero-content.react.js @@ -1,36 +1,36 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; -import { assetMetaData } from './asset-meta-data.js'; +import { imageAssetMetaData } from './asset-meta-data.js'; import css from './hero-content.css'; import SubscriptionForm from './subscription-form.react.js'; import typography from './typography.css'; function HeroContent(): React.Node { - const [hero] = assetMetaData; + const [hero] = imageAssetMetaData; const headerClassName = classNames([typography.display3, css.header]); const subheaderClassName = classNames([ typography.subheading2, css.subHeader, ]); return (

Comm is an encrypted messaging app for communities

We extend Signal’s model of E2E encryption with personal servers to enable richer functionality.

); } export default HeroContent; diff --git a/landing/use-pre-load-assets.react.js b/landing/use-pre-load-image-assets.react.js similarity index 81% rename from landing/use-pre-load-assets.react.js rename to landing/use-pre-load-image-assets.react.js index 2dba88cf0..b633df588 100644 --- a/landing/use-pre-load-assets.react.js +++ b/landing/use-pre-load-image-assets.react.js @@ -1,32 +1,32 @@ // @flow import * as React from 'react'; -import { type Asset } from './asset-meta-data.js'; +import { type ImageAsset } from './asset-meta-data.js'; -function usePreloadAssets(assets: Asset[]) { +function usePreloadImageAssets(assets: ImageAsset[]) { React.useEffect(() => { const testWEBP = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'; const testImg = new Image(); // preload webp if supported testImg.onload = () => { for (const { url } of assets) { const image = new Image(); image.src = `${url}.webp`; } }; // preload png if webp not supported testImg.onerror = () => { for (const { url } of assets) { const image = new Image(); image.src = `${url}.png`; } }; testImg.src = `data:image/webp;base64,${testWEBP}`; }, [assets]); } -export default usePreloadAssets; +export default usePreloadImageAssets;