diff --git a/lib/as-text-plugin.js b/lib/as-text-plugin.js new file mode 100644 index 00000000..d5cc7da5 --- /dev/null +++ b/lib/as-text-plugin.js @@ -0,0 +1,38 @@ +/** + * 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 { promises as fs } from 'fs'; + +const prefix = 'as-text:'; + +export default function dataURLPlugin() { + return { + name: 'as-text-plugin', + async resolveId(id, importer) { + if (!id.startsWith(prefix)) return; + const realId = id.slice(prefix.length); + const resolveResult = await this.resolve(realId, importer); + if (!resolveResult) throw Error(`Cannot find ${realId} from ${importer}`); + return prefix + resolveResult.id; + }, + async load(id) { + if (!id.startsWith(prefix)) return; + + const realId = id.slice(prefix.length); + this.addWatchFile(realId); + + const source = await fs.readFile(realId, { encoding: 'utf-8' }); + + return `export default ${JSON.stringify(source)}`; + }, + }; +} diff --git a/missing-types.d.ts b/missing-types.d.ts index b13952e1..b100169d 100644 --- a/missing-types.d.ts +++ b/missing-types.d.ts @@ -49,6 +49,11 @@ declare module 'data-url-text:*' { export default url; } +declare module 'as-text:*' { + const text: string; + export default text; +} + declare module 'service-worker:*' { const url: string; export default url; diff --git a/rollup.config.js b/rollup.config.js index 394b4277..b77b04c8 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -32,6 +32,7 @@ import featurePlugin from './lib/feature-plugin'; import initialCssPlugin from './lib/initial-css-plugin'; import serviceWorkerPlugin from './lib/sw-plugin'; import dataURLPlugin from './lib/data-url-plugin'; +import asTextPlugin from './lib/as-text-plugin'; import entryDataPlugin, { fileNameToURL } from './lib/entry-data-plugin'; import dedent from 'dedent'; @@ -89,6 +90,7 @@ export default async function ({ watch }) { 'codecs', ]), urlPlugin(), + asTextPlugin(), dataURLPlugin(), cssPlugin(), ]; diff --git a/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg b/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg deleted file mode 100644 index a9aa929e..00000000 --- a/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg +++ /dev/null @@ -1 +0,0 @@ -Squoosh diff --git a/src/shared/prerendered-app/Intro/index.tsx b/src/shared/prerendered-app/Intro/index.tsx index 84c11e45..f114eef9 100644 --- a/src/shared/prerendered-app/Intro/index.tsx +++ b/src/shared/prerendered-app/Intro/index.tsx @@ -14,7 +14,7 @@ import smallSectionAsset from 'url:./imgs/info-content/small.svg'; import simpleSectionAsset from 'url:./imgs/info-content/simple.svg'; import secureSectionAsset from 'url:./imgs/info-content/secure.svg'; import logoIcon from 'url:./imgs/demos/icon-demo-logo.png'; -import logoWithText from 'data-url-text:./imgs/logo-with-text.svg'; +import logoSVGSource from 'as-text:./logo-svg-include.txt'; import * as style from './style.css'; import type SnackBarElement from 'shared/custom-els/snack-bar'; import 'shared/custom-els/snack-bar'; @@ -240,15 +240,10 @@ export default class Intro extends Component { class={style.blobCanvas} /> )} -

- Squoosh -

+

{showBlobSVG && ( Squoosh diff --git a/src/shared/prerendered-app/Intro/style.css b/src/shared/prerendered-app/Intro/style.css index 30154b00..411e5812 100644 --- a/src/shared/prerendered-app/Intro/style.css +++ b/src/shared/prerendered-app/Intro/style.css @@ -1,3 +1,11 @@ +/* Just the glyphs needed for the Squoosh logo */ +@font-face { + font-family: logofont; + font-weight: 700; + src: url(data:font/woff;base64,d09GMgABAAAAAASoAA4AAAAACOQAAARUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgnYcgXAGYABkEQwKhHiEFgsUAAE2AiQDJAQgBYJaByAbeQfIxId/N/1zb0JJk7qwVQyoSyhM6qJf2zN3wnP5MyX/c6mabKKFAVwk4QDd+3f7Z41FoYvttryoVK6NsWls0wJjfeO38YjNiCJjtHr/1Q8CwAqDCAUBr2QweT2PEoyA1elzSuDRPDnUg8D2odZuRPU0jvQhDaxz5rMh0dmYGFMJs4nu1qE+eGjM/weALmNBwUEBOxTgRXxFMYpg//e8Ci0oLAD5Z/l7jALyz0eIk0p5wwIKMGmoUVDk+I2Voc2UQOpf+V8SHykzsc2YglhhpAxij4qYCCDLLiZGpIxaxGLgdEfA8VXagNHBPOEGN4kdxIwSYCOPFjwtuDxUnqS+IGdGuWtrAgUsQYZRHpDu7Qiw6ukb7cWFrWzAQoFsxEIZPaFS7IAQDQ4cvEx4DjEL+W8XY9w93bi6CVjaTB8XOUO3aIVhv7jXI3UoIVGDVOAYRkFZmv6lSiyebcjPN+BqWJ91Zp43fwUwPxAfFchViYiY6etaTAWH6kKIhE7SgEaAL0DMDnZmf6FCMTrQj0EMY1SW726Rv5Tvki/Jp/KJfCwf5XNoQXWWGi/LsNXQcgvxSnnJ8wFi43KUbaZAdno0JKEudnYudkHOvy6ZysqvkYTtt8jiu2VxJhNZfP99YVuKLLnyTX7rdSy8cT5WkrBgNPL1AkqEuyzOB+WZxXf5LSMoLzmnXHS9/9b7ZNHk7wAjFqQ3hMZy/nbFtQXbNAIRWP4jQ8kUVX7FG8L2Y4VH4/QvOjyltORefuthLJSWBnyUZCKMQBfeEbbfP3h5MvqPEuA12/1Or4a5yB8MYpzmv+DgZ3O9ntK5NjZdTEis7owRG/urcsYir+4JU2+cUdUY36zxbeoo1RsaBsJTkP7a8gPKCq64OCyytqmvKXVZE5mtjskqTmWW8Y3ttF43lZujm57W5+dN63XTObm6qWl9XsDErwGiVhMg/hoY+GugqNEE6n4NxH280sBFFITFZA/oMqby8zKmB3TZMfnqDC5tyrRUm/F7gKhWB4i/Bfj/FiCq1QHi7/643nboYs9I1K/XB/n/4eH+8COPf1aYl6yOya4KiL8ypq8/Qso6O+HoL9pfsL/okJObGJlwoSkkBZds6wfb4pYDYzxCEjIL09ll83QG11IUGgUAAJrLVRQvuOTOlNTbpvzOCcwPZllp+cGK/bUffKT+wRxg/trKyDwPAmVzJTtUmnnR/Ca2bGU0B5hvtjI2u3ZLmoci/IQP0Fz40ipk0Hb402H4k7/hScuRQrJj7rXEg+BR85QaWsDzADqVUNUxBLbRYp0JnCMELkwBnsiOEWgYqDGjYaHCzRoFPPDyyy3gg68goh8DmMQQOtGODoxAhShEIBKx9DgD+tGPdvSgFSrkIAcitEolEz3oIVeRDxy+4lvVSiuGMEbLtUDr97BiNKIPw8hCvzLeYjOefMW4mq5hUSguFWNZnL3D6EQ/+tLPa3ktEYgO08G8O9bbQgkWAA==) + format('woff2'); +} + .intro { composes: abs-fill from global; -webkit-overflow-scrolling: touch; @@ -35,12 +43,12 @@ .logo-container { margin: 5rem 0 1rem; -} -.logo { - transform: translate(-1%, 0); - width: 189px; - height: auto; + & svg { + transform: translate(-1%, 0); + width: 189px; + height: auto; + } } .load-img {