496 lines
16 KiB
JavaScript
496 lines
16 KiB
JavaScript
import React from "react";
|
|
import { css } from "@emotion/react";
|
|
import {
|
|
AspectRatio,
|
|
Box,
|
|
Button,
|
|
Center,
|
|
Flex,
|
|
FormControl,
|
|
FormErrorMessage,
|
|
FormLabel,
|
|
Grid,
|
|
Input,
|
|
InputGroup,
|
|
InputRightElement,
|
|
Popover,
|
|
PopoverArrow,
|
|
PopoverBody,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Tab,
|
|
TabList,
|
|
TabPanel,
|
|
TabPanels,
|
|
Tabs,
|
|
Textarea,
|
|
useClipboard,
|
|
useColorModeValue,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
|
|
import { ErrorMessage, Heading1, Heading2, usePageTitle } from "./util";
|
|
import { CheckIcon, WarningIcon } from "@chakra-ui/icons";
|
|
|
|
function OutfitUrlsPage() {
|
|
usePageTitle("Changing our outfit URLs");
|
|
|
|
return (
|
|
<>
|
|
<Heading1 marginBottom="4">Changing our outfit URLs</Heading1>
|
|
<VStack
|
|
spacing="4"
|
|
alignItems="flex-start"
|
|
css={css`
|
|
max-width: 800px;
|
|
|
|
p {
|
|
margin-bottom: 1em;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
h2,
|
|
h3 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
`}
|
|
>
|
|
<section>
|
|
<p>
|
|
Hi, friends! Sorry for the trouble 😓 In short, by switching to the
|
|
new outfit URLs below, we'll decrease our hosting costs by
|
|
$20/month! 🙏
|
|
</p>
|
|
<p>
|
|
This change applies to <strong>image embeds</strong>, for{" "}
|
|
<code>img</code> tags in your lookups and petpages. Other kinds of
|
|
outfit links will stay the same!
|
|
</p>
|
|
<OutfitUrlConverter />
|
|
</section>
|
|
<Box height="2" />
|
|
<section>
|
|
<Heading2>The history</Heading2>
|
|
<p>
|
|
When we started hosting outfit images back in 2012, we didn't know a
|
|
lot about web infrastructure, and we weren't thinking a lot about
|
|
permanent URLs 😅 We uploaded images directly to{" "}
|
|
<a href="https://aws.amazon.com/s3/">Amazon S3</a>, and gave you
|
|
Amazon's URL for them, at <code>amazonaws.com</code>.
|
|
</p>
|
|
<p>
|
|
Since then, we've grown a lot, and our Amazon costs have increased a
|
|
lot too! These days, it costs about $35/month to serve outfit images
|
|
from S3—and $20 of that is just to <em>store</em> our millions of
|
|
outfit images, including the ones nobody visits 😅
|
|
</p>
|
|
<p>
|
|
So, we've moved our apps to a new, more cost-efficient way to share
|
|
outfit images! It's decreased those costs by a lot! But, until we
|
|
delete the old images from Amazon S3 altogether, we're essentially
|
|
paying $20/month <em>just</em> to support the old{" "}
|
|
<code>amazonaws.com</code> URLs.
|
|
</p>
|
|
<p>
|
|
I looked hard for a way to redirect the old Amazon URLs to our new
|
|
service, but it seems to not be possible. And it seems like
|
|
$20/month could be better spent another way, especially when we
|
|
think about hosting these images long-term 😖
|
|
</p>
|
|
<p>
|
|
We haven't removed these images from Amazon yet, so old image URLs
|
|
will continue to work until <strong>at least August 1, 2021</strong>
|
|
! Then, we'll replace the old images with a short message and a link
|
|
to this page, so it's easy to learn what happened and fix things up.
|
|
</p>
|
|
<p>
|
|
I'm truly sorry for breaking some of the lookups and petpages out
|
|
there, and I hope this tool helps folks migrate to the new version
|
|
quickly and easily! 🙏
|
|
</p>
|
|
<p>
|
|
Thanks again everyone for your constant support, we appreciate you
|
|
so so much!! 💖 And please let me know at{" "}
|
|
<a href="mailto:matchu@openneo.net">matchu@openneo.net</a> with any
|
|
thoughts you have—it's always great to hear from you, and it always
|
|
make things better 💕
|
|
</p>
|
|
</section>
|
|
</VStack>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function OutfitUrlConverter() {
|
|
return (
|
|
<Tabs>
|
|
<TabList>
|
|
<Tab>Convert an image</Tab>
|
|
<Tab>Convert a lookup/petpage</Tab>
|
|
</TabList>
|
|
<TabPanels>
|
|
<TabPanel>
|
|
<SingleImageConverter />
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<BulkImageConverter />
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
function SingleImageConverter() {
|
|
const [inputUrl, setInputUrl] = React.useState("");
|
|
|
|
let outputUrl;
|
|
let parseError;
|
|
try {
|
|
outputUrl = convertS3OutfitUrl(inputUrl);
|
|
} catch (e) {
|
|
parseError = e;
|
|
}
|
|
|
|
const isAlreadyConverted = parseError instanceof UrlAlreadyConvertedError;
|
|
const isInvalid = parseError && !isAlreadyConverted;
|
|
if (isAlreadyConverted) {
|
|
outputUrl = inputUrl;
|
|
}
|
|
|
|
const previewImageUrl = isAlreadyConverted
|
|
? buildNewOutfitUrl({ outfitId: parseError.outfitId, size: 300 })
|
|
: outputUrl?.endsWith("png")
|
|
? outputUrl
|
|
: null;
|
|
|
|
const previewBackground = useColorModeValue("gray.200", "whiteAlpha.300");
|
|
const { onCopy, hasCopied } = useClipboard(outputUrl);
|
|
|
|
return (
|
|
<Grid
|
|
templateAreas={{
|
|
base: `
|
|
"input"
|
|
"output"
|
|
"preview"
|
|
`,
|
|
md: `
|
|
"preview input"
|
|
"preview output"
|
|
`,
|
|
}}
|
|
templateColumns={{ base: "auto", md: "auto 1fr" }}
|
|
columnGap="4"
|
|
rowGap="2"
|
|
justifyItems="center"
|
|
>
|
|
<FormControl gridArea="input" isInvalid={isInvalid}>
|
|
<FormLabel fontWeight="bold">Enter an outfit image URL</FormLabel>
|
|
<Input
|
|
placeholder="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/789/preview.png"
|
|
value={inputUrl}
|
|
onChange={(e) => setInputUrl(e.target.value)}
|
|
/>
|
|
<FormErrorMessage>{parseError?.message || null}</FormErrorMessage>
|
|
</FormControl>
|
|
<FormControl gridArea="output">
|
|
<Grid
|
|
templateAreas={{
|
|
base: `
|
|
"header"
|
|
"input"
|
|
"status"
|
|
`,
|
|
md: `
|
|
"header status"
|
|
"input input"
|
|
`,
|
|
}}
|
|
alignItems="center"
|
|
rowGap="2"
|
|
>
|
|
<FormLabel gridArea="header" fontSize="sm" margin="0">
|
|
Then, use this new URL in your layouts instead:
|
|
</FormLabel>
|
|
<InputGroup gridArea="input" size="sm">
|
|
<Input
|
|
placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/600.png"
|
|
isReadOnly
|
|
value={outputUrl || ""}
|
|
/>
|
|
{outputUrl && (
|
|
<InputRightElement width="4rem" paddingRight="1">
|
|
<Button
|
|
height="calc(100% - .5rem)"
|
|
size="xs"
|
|
minWidth="100%"
|
|
onClick={onCopy}
|
|
>
|
|
{hasCopied ? "Copied!" : "Copy"}
|
|
</Button>
|
|
</InputRightElement>
|
|
)}
|
|
</InputGroup>
|
|
<Box gridArea="status" textAlign="right" justifySelf="end">
|
|
{isAlreadyConverted && (
|
|
<Flex alignItems="center" fontSize="sm" opacity="0.8">
|
|
<CheckIcon marginRight="1.5" />
|
|
<Box>{parseError.message}</Box>
|
|
</Flex>
|
|
)}
|
|
</Box>
|
|
</Grid>
|
|
</FormControl>
|
|
<AspectRatio
|
|
gridArea="preview"
|
|
width={{ base: "100%", md: "150px" }}
|
|
maxWidth={{ base: "300px", md: "150px" }}
|
|
maxHeight={{ base: "300px", md: "150px" }}
|
|
ratio={1}
|
|
background={previewBackground}
|
|
borderRadius="md"
|
|
boxShadow="sm"
|
|
marginTop={{ base: "4", md: "0" }}
|
|
overflow="hidden"
|
|
>
|
|
<Center>
|
|
{previewImageUrl && (
|
|
<Box
|
|
as="img"
|
|
src={previewImageUrl}
|
|
alt="Outfit image preview"
|
|
maxWidth="100%"
|
|
maxHeight="100%"
|
|
sx={{
|
|
// Don't let alt text flash in while loading
|
|
"&:-moz-loading": {
|
|
visibility: "hidden",
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
</Center>
|
|
</AspectRatio>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function BulkImageConverter() {
|
|
const [inputHtml, setInputHtml] = React.useState("");
|
|
|
|
const { outputHtml, numReplacements } = React.useMemo(
|
|
() =>
|
|
inputHtml
|
|
? replaceS3OutfitUrlsInHtml(inputHtml)
|
|
: { outputHtml: "", numReplacements: 0 },
|
|
[inputHtml]
|
|
);
|
|
|
|
const { onCopy, hasCopied } = useClipboard(outputHtml);
|
|
|
|
return (
|
|
<Grid
|
|
templateAreas={`
|
|
"input"
|
|
"output"
|
|
`}
|
|
rowGap="4"
|
|
>
|
|
<FormControl gridArea="input">
|
|
<FormLabel fontWeight="bold">Enter your lookup/petpage HTML</FormLabel>
|
|
<Textarea
|
|
fontFamily="monospace"
|
|
fontSize="xs"
|
|
placeholder={`<table> <!-- Example input, paste your HTML here! -->
|
|
<tr>
|
|
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/700/preview.png"></td>
|
|
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/701/preview.png"></td>
|
|
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/702/preview.png"></td>
|
|
...`}
|
|
value={inputHtml}
|
|
onChange={(e) => setInputHtml(e.target.value)}
|
|
/>
|
|
</FormControl>
|
|
<FormControl gridArea="output">
|
|
<Grid
|
|
templateAreas={{
|
|
base: `
|
|
"header"
|
|
"textarea"
|
|
"status"
|
|
`,
|
|
md: `
|
|
"header status"
|
|
"textarea textarea"
|
|
`,
|
|
}}
|
|
alignItems="center"
|
|
rowGap="2"
|
|
>
|
|
<Flex gridArea="header" alignItems="center">
|
|
<FormLabel fontSize="sm" margin="0">
|
|
Then, use this new HTML for your page instead:
|
|
</FormLabel>
|
|
<Box width="2" flex={{ base: "1 0 auto", sm: "0 0 auto" }} />
|
|
{outputHtml && (
|
|
<Button size="xs" onClick={onCopy}>
|
|
<Grid templateAreas="the-area">
|
|
<Box gridArea="the-area">
|
|
{hasCopied ? "Copied!" : "Copy"}
|
|
</Box>
|
|
{/* This invisible "Copied!" enforces a min size for the button
|
|
* content, so that the button never changes size. */}
|
|
<Box gridArea="the-area" aria-hidden visibility="hidden">
|
|
Copied!
|
|
</Box>
|
|
</Grid>
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
<Textarea
|
|
gridArea="textarea"
|
|
isReadOnly
|
|
fontFamily="monospace"
|
|
fontSize="xs"
|
|
placeholder={`<table> <!-- Example output, your new HTML will appear here! -->
|
|
<tr>
|
|
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456700/v/1234/600.png"></td>
|
|
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456701/v/5678/600.png"></td>
|
|
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456702/v/9012/600.png"></td>
|
|
...`}
|
|
value={outputHtml}
|
|
/>
|
|
<Box gridArea="status" textAlign="right" justifySelf="end">
|
|
{outputHtml && numReplacements === 0 ? (
|
|
<Popover trigger="hover">
|
|
<PopoverTrigger>
|
|
<Flex
|
|
as={ErrorMessage}
|
|
alignItems="center"
|
|
fontSize="sm"
|
|
tabIndex="0"
|
|
borderRadius="md"
|
|
paddingX="2"
|
|
marginRight="-2"
|
|
_focus={{ outline: "0", boxShadow: "outline" }}
|
|
>
|
|
<WarningIcon marginRight="1.5" />
|
|
<Box>No outfit image URLs found</Box>
|
|
</Flex>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<PopoverArrow />
|
|
<PopoverBody>
|
|
<Box fontSize="xs" textAlign="center">
|
|
<b>Make sure they're in the right format:</b>
|
|
<br />
|
|
https://openneo-uploads.s3.amazonaws.com/outfits/123/456/789/preview.png
|
|
<br />
|
|
<br />
|
|
<b>
|
|
If they're already in the new format, then you're
|
|
already done!
|
|
</b>{" "}
|
|
The new format is:
|
|
<br />
|
|
https://impress-outfit-images.openneo.net/outfits/123456789/v/1020304050/600.png
|
|
</Box>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
) : outputHtml ? (
|
|
<Flex alignItems="center" fontSize="sm" opacity="0.8">
|
|
<CheckIcon marginRight="1.5" />
|
|
<Box>Converted {numReplacements} outfit images!</Box>
|
|
</Flex>
|
|
) : null}
|
|
</Box>
|
|
</Grid>
|
|
</FormControl>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
// These patterns have the same content, but different boundary conditions and
|
|
// flags. EXACT is for checking a single string for an exact match, GLOBAL is
|
|
// for finding multiple matches in large text.
|
|
const S3_OUTFIT_URL_EXACT_PATTERN = /^https?:\/\/openneo-uploads\.s3\.amazonaws\.com\/outfits\/([0-9]{3})\/([0-9]{3})\/([0-9]{3})\/(preview|medium_preview|small_preview)\.png$/;
|
|
const S3_OUTFIT_URL_GLOBAL_PATTERN = /https?:\/\/openneo-uploads\.s3\.amazonaws\.com\/outfits\/([0-9]{3})\/([0-9]{3})\/([0-9]{3})\/(preview|medium_preview|small_preview)\.png/g;
|
|
const OUTFIT_PAGE_URL_EXACT_PATTERN = /^https?:\/\/impress(-2020)?\.openneo\.net\/outfits\/([0-9]+)(\?.*)?$/;
|
|
const CONVERTED_OUTFIT_URL_EXACT_PATTERN = /^https?:\/\/impress-outfit-images\.openneo\.net\/outfits\/([0-9]+)\/(150|300|600)\.png$/;
|
|
const S3_FILENAMES_TO_SIZES = {
|
|
preview: 600,
|
|
medium_preview: 300,
|
|
small_preview: 150,
|
|
};
|
|
|
|
function parseS3OutfitUrl(url) {
|
|
if (!url) {
|
|
return null;
|
|
}
|
|
|
|
const outfitPageMatch = url.match(OUTFIT_PAGE_URL_EXACT_PATTERN);
|
|
if (outfitPageMatch) {
|
|
throw new UrlAlreadyConvertedError(
|
|
`Outfit page links don't need to change!`,
|
|
outfitPageMatch[2]
|
|
);
|
|
}
|
|
|
|
const convertedImageMatch = url.match(CONVERTED_OUTFIT_URL_EXACT_PATTERN);
|
|
if (convertedImageMatch) {
|
|
throw new UrlAlreadyConvertedError(
|
|
`This URL is already in the new format!`,
|
|
convertedImageMatch[1]
|
|
);
|
|
}
|
|
|
|
const match = url.match(S3_OUTFIT_URL_EXACT_PATTERN);
|
|
if (!match) {
|
|
throw new Error(
|
|
`This URL didn't match the expected pattern. Make sure it's formatted like this: https://openneo-uploads.s3.amazonaws.com/outfits/123/456/789/preview.png`
|
|
);
|
|
}
|
|
|
|
// Convert ID to number to remove leading 0s, then convert back to string for
|
|
// consistency with how we handle outfit IDs in this app.
|
|
const outfitId = String(Number(`${match[1]}${match[2]}${match[3]}`));
|
|
const size = S3_FILENAMES_TO_SIZES[match[4]];
|
|
|
|
return { outfitId, size };
|
|
}
|
|
|
|
function buildNewOutfitUrl({ outfitId, size }) {
|
|
return `https://impress-outfit-images.openneo.net/outfits/${outfitId}/${size}.png`;
|
|
}
|
|
|
|
function convertS3OutfitUrl(url) {
|
|
const parsedUrl = parseS3OutfitUrl(url);
|
|
if (!parsedUrl) {
|
|
return null;
|
|
}
|
|
|
|
return buildNewOutfitUrl(parsedUrl);
|
|
}
|
|
|
|
function replaceS3OutfitUrlsInHtml(html) {
|
|
// Use the `replace` method to scan the HTML for matches, and count the
|
|
// replacements as we go!
|
|
let numReplacements = 0;
|
|
const outputHtml = html.replace(S3_OUTFIT_URL_GLOBAL_PATTERN, (match) => {
|
|
numReplacements++;
|
|
return convertS3OutfitUrl(match);
|
|
});
|
|
|
|
return { outputHtml, numReplacements };
|
|
}
|
|
|
|
class UrlAlreadyConvertedError extends Error {
|
|
constructor(message, outfitId) {
|
|
super(message);
|
|
this.outfitId = outfitId;
|
|
}
|
|
}
|
|
|
|
export default OutfitUrlsPage;
|