strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Size down images when not in Pro Mode

Browse Source
This commit is contained in:
Sam Becker 2023-09-25 18:37:48 -05:00
parent 4b0e211a54
commit 87122d69b3
14 changed files with 29 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@ -6,7 +6,7 @@ const STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(
const nextConfig = {
images: {
imageSizes: [200, 400, 1050, 1200],
imageSizes: [200, 400, 1050],
remotePatterns: [{
protocol: 'https',
hostname: `${STORE_ID}.public.blob.vercel-storage.com`,

4
src/app/(static)/home-image/route.tsx
View File

@ -9,7 +9,7 @@ import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export async function GET(request: Request) {
export async function GET() {
const [
photos,
headers,
@ -21,7 +21,7 @@ export async function GET(request: Request) {
const { width, height } = IMAGE_OG_SMALL_SIZE;
return new ImageResponse(
<HomeImageResponse {...{ photos, request, width, height }}/>,
<HomeImageResponse {...{ photos, width, height }}/>,
{ width, height, headers },
);
}

4
src/app/(static)/p/[photoId]/image/route.tsx
View File

@ -7,7 +7,7 @@ import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export async function GET(request: Request, context: any){
export async function GET(_request: Request, context: any){
const [
photo,
{ fontFamily, fonts },
@ -23,7 +23,7 @@ export async function GET(request: Request, context: any){
const { width, height } = IMAGE_OG_SIZE;
return new ImageResponse(
<PhotoImageResponse {...{ photo, request, width, height, fontFamily }} />,
<PhotoImageResponse {...{ photo, width, height, fontFamily }} />,
{ width, height, fonts, headers },
);
}

3
src/app/(static)/t/[tag]/image/route.tsx
View File

@ -10,7 +10,7 @@ import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export async function GET(request: Request, context: any) {
export async function GET(_request: Request, context: any) {
const tag = context.params.tag as string;
const [
@ -29,7 +29,6 @@ export async function GET(request: Request, context: any) {
<TagImageResponse {...{
tag,
photos,
request,
width,
height,
fontFamily,

3
src/app/(static)/template-image-tight/route.tsx
View File

@ -11,7 +11,7 @@ import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export async function GET(request: Request) {
export async function GET() {
const [
photos,
{ fontFamily, fonts },
@ -31,7 +31,6 @@ export async function GET(request: Request) {
(
<TemplateImageResponse {...{
photos,
request,
includeHeader: false,
outerMargin: 0,
width,

3
src/app/(static)/template-image/route.tsx
View File

@ -11,7 +11,7 @@ import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export async function GET(request: Request) {
export async function GET() {
const [
photos,
{ fontFamily, fonts },
@ -28,7 +28,6 @@ export async function GET(request: Request) {
(
<TemplateImageResponse {...{
photos,
request,
width,
height,
fontFamily,

6
src/photo/actions.ts
View File

@ -16,6 +16,8 @@ import {
revalidatePhotosAndBlobTag,
revalidatePhotosTag,
} from '@/cache';
import { IS_PRO_MODE } from '@/site/config';
import { getNextImageUrlForRequest } from '@/utility/image';
export async function createPhotoAction(formData: FormData) {
const photo = convertFormDataToPhoto(formData, true);
@ -23,6 +25,10 @@ export async function createPhotoAction(formData: FormData) {
const updatedUrl = await convertUploadToPhoto(
photo.url,
photo.id,
!IS_PRO_MODE
? getNextImageUrlForRequest(photo.url, 3840, 90)
: undefined,
!IS_PRO_MODE ? 'webp' : undefined,
);
if (updatedUrl) { photo.url = updatedUrl; }

3
src/photo/image-response/HomeImageResponse.tsx
View File

@ -4,12 +4,10 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
export default function HomeImageResponse({
photos,
request,
width,
height,
}: {
photos: Photo[]
request: Request
width: number
height: number
}) {
@ -18,7 +16,6 @@ export default function HomeImageResponse({
<ImagePhotoGrid
{...{
photos,
request,
width,
height,
}}

3
src/photo/image-response/PhotoImageResponse.tsx
View File

@ -8,13 +8,11 @@ import ImageContainer from './components/ImageContainer';
export default function PhotoImageResponse({
photo,
request,
width,
height,
fontFamily,
}: {
photo: Photo
request: Request
width: NextImageWidth
height: number
fontFamily: string
@ -23,7 +21,6 @@ export default function PhotoImageResponse({
<ImageContainer {...{ width, height }}>
<ImagePhotoGrid {...{
photos: [photo],
request,
width,
height,
imagePosition: 'top',

3
src/photo/image-response/TagImageResponse.tsx
View File

@ -7,14 +7,12 @@ import ImageContainer from './components/ImageContainer';
export default function TagImageResponse({
tag,
photos,
request,
width,
height,
fontFamily,
}: {
tag: string,
photos: Photo[]
request: Request
width: number
height: number
fontFamily: string
@ -28,7 +26,6 @@ export default function TagImageResponse({
<ImagePhotoGrid
{...{
photos,
request,
width,
height,
}}

3
src/photo/image-response/TemplateImageResponse.tsx
View File

@ -5,7 +5,6 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
export default function TemplateImageResponse({
photos,
request,
width,
height,
fontFamily,
@ -15,7 +14,6 @@ export default function TemplateImageResponse({
verticalOffset,
}: {
photos: Photo[]
request: Request
width: number
height: number
fontFamily: string
@ -91,7 +89,6 @@ export default function TemplateImageResponse({
}}>
<ImagePhotoGrid {...{
photos,
request,
width: innerWidth,
height: includeHeader
? height - 130 - outerMargin * 2

6
src/photo/image-response/components/ImagePhotoGrid.tsx
View File

@ -5,14 +5,12 @@ import { getNextImageUrlForRequest } from '@/utility/image';
export default function ImagePhotoGrid({
photos,
request,
width,
height,
imagePosition = 'center',
gap = 4,
}: {
photos: Photo[]
request: Request
width: number
height: number
imagePosition?: 'center' | 'top'
@ -24,7 +22,7 @@ export default function ImagePhotoGrid({
else if (photos.length >= 4) { count = 4; }
else if (photos.length >= 2) { count = 2; }
const imageQuality = count <= 2 ? 1050 : 400;
const nextImageWidth = count <= 2 ? 1050 : 640;
let rows = 1;
if (count > 12) { rows = 4; }
@ -57,7 +55,7 @@ export default function ImagePhotoGrid({
}}
>
<img {...{
src: getNextImageUrlForRequest(url, request, imageQuality),
src: getNextImageUrlForRequest(url, nextImageWidth),
style: {
width: '100%',
...imagePosition === 'center' && {

6
src/services/blob.ts
View File

@ -48,12 +48,14 @@ export const uploadPhotoFromClient = async (
export const convertUploadToPhoto = async (
uploadUrl: string,
photoId?: string,
resizeUrl?: string,
resizeExtension?: string
) => {
const file = await fetch(uploadUrl)
const file = await fetch(resizeUrl ?? uploadUrl)
.then((response) => response.blob());
const fileName = photoId ? `${PREFIX_PHOTO}-${photoId}` : `${PREFIX_PHOTO}`;
const fileExtension = getExtensionFromBlobUrl(uploadUrl);
const fileExtension = resizeExtension ?? getExtensionFromBlobUrl(uploadUrl);
if (file) {
const { url } = await put(

20
src/utility/image.ts
View File

@ -1,21 +1,19 @@
import { BASE_URL } from '@/site/config';
// Must be explicity defined next.config.js `imageSizes`
export type NextImageWidth = 200 | 400 | 1050 | 1200;
// or `deviceSizes` ([640, 750, 828, 1080, 1200, 1920, 2048, 3840])
export type NextImageWidth =
200 | 400 | 1050;
export type NextImageDeviceSize =
640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;
export const getNextImageUrlForRequest = (
imageUrl: string,
request: Request,
width: NextImageWidth,
width: NextImageWidth | NextImageDeviceSize,
quality = 75,
) => {
const protocol = (request.headers.get('x-forwarded-proto') || 'https')
.split(',')[0];
const url = new URL(`${BASE_URL}/_next/image`);
const host = (
request.headers.get('x-forwarded-host') ||
request.headers.get('host')
);
const url = new URL(`${protocol}://${host}/_next/image`);
url.searchParams.append('url', imageUrl);
url.searchParams.append('w', width.toString());
url.searchParams.append('q', quality.toString());