mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 17:49:52 +00:00
a3b341f813
* Paste button * Logo and animated blobs * Predictable initial blob position * Initial blob shape * Update canvas on resize if not updating every frame * lol * Get styles from CSS * Background blobs * Fade into the center * Get initial focus * Pause time while page is hidden * Footer * Optimise amount of initial CSS * More CSS optimisation * Install button * Home page with demo loading * Tweak size * Replace thumbnails * Responsive demo section * Responsive main section * Remove debug stuff * Fix prerender SVG size * Changes from feedback * Blob nudges (#872) * more smaller blobs * less blobs that are practically invisible * more dynamic speed range and stronger gravity * Reverting resize observer change The content rect is different to getBoundingClientRect Co-authored-by: Adam Argyle <atom@argyleink.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
/**
|
|
* Copyright 2020 Google Inc. All Rights Reserved.
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
import { h, FunctionalComponent } from 'preact';
|
|
|
|
import baseCss from 'css:./base.css';
|
|
import initialCss from 'initial-css:';
|
|
import { allSrc } from 'client-bundle:client/initial-app';
|
|
import favicon from 'url:static-build/assets/favicon.ico';
|
|
import { escapeStyleScriptContent } from 'static-build/utils';
|
|
import Intro from 'shared/prerendered-app/Intro';
|
|
|
|
interface Props {}
|
|
|
|
const Index: FunctionalComponent<Props> = () => (
|
|
<html lang="en">
|
|
<head>
|
|
<title>Squoosh</title>
|
|
<meta
|
|
name="description"
|
|
content="Compress and compare images with different codecs, right in your browser"
|
|
/>
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
|
/>
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<link rel="shortcut icon" href={favicon} />
|
|
<meta name="theme-color" content="#f78f21" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<style
|
|
dangerouslySetInnerHTML={{ __html: escapeStyleScriptContent(baseCss) }}
|
|
/>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: escapeStyleScriptContent(initialCss),
|
|
}}
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<Intro />
|
|
</div>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: escapeStyleScriptContent(allSrc),
|
|
}}
|
|
/>
|
|
</body>
|
|
</html>
|
|
);
|
|
|
|
export default Index;
|