sybers.fr / leaflet
a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Squashed commit of the following:

commit 784209d91c91e46ef7c314c633d635278c97770f
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 18:23:18 2025 -0500

improve local upload logic

commit f16a14374a314101d82ea086a64d95183286d34a
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 17:36:45 2025 -0500

try splitting the url

commit 926e4a30953ee93b1f583c23ac0ceccd73570563
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 17:13:52 2025 -0500

use next/image and supabase transforms

commit 1398c2b7a8a0abf4c362e80bb9ab8684e7e5ab35
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 14:58:57 2025 -0500

pass url object

commit 55c21bf49450e368abe8455a78f2222f4f6ed171
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 14:48:42 2025 -0500

stop double image block creation

commit b1f10649beb4493eb95659b449029ed8321cb342
Author: Jared Pereira <jared@awarm.space>
Date: Fri Jan 24 14:39:53 2025 -0500

branch on "?local" in service worker

Jared Pereira e561aad8 0c5ff4c0

+35 -18
+25 -18
components/Blocks/ImageBlock.tsx
··· 4 4 import { Block, BlockProps } from "./Block"; 5 5 import { useUIState } from "src/useUIState"; 6 6 import { BlockImageSmall } from "components/Icons"; 7 + import Image from "next/image"; 7 8 import { v7 } from "uuid"; 8 9 import { useEntitySetContext } from "components/EntitySetProvider"; 9 10 import { generateKeyBetween } from "fractional-indexing"; 10 - import { addImage } from "src/utils/addImage"; 11 + import { addImage, localImages } from "src/utils/addImage"; 11 12 import { elementId } from "src/utils/elementId"; 12 13 import { useEffect } from "react"; 13 14 import { deleteBlock } from "./DeleteBlock"; ··· 91 92 ); 92 93 } 93 94 95 + let className = isSelected 96 + ? "block-border-selected !border-transparent " 97 + : "block-border !border-transparent"; 98 + let isLocalUpload = localImages.get(image.data.src); 94 99 return ( 95 100 <div className="relative group/image flex w-full justify-center"> 96 - <img 97 - loading="lazy" 98 - decoding="async" 99 - alt={""} 100 - src={ 101 - image?.data.local && image.data.local !== rep?.clientID 102 - ? image?.data.fallback 103 - : `${image?.data.src}${image?.data.local ? "?local" : ""}` 104 - } 105 - height={image?.data.height} 106 - width={image?.data.width} 107 - className={ 108 - isSelected 109 - ? "block-border-selected !border-transparent " 110 - : "block-border !border-transparent" 111 - } 112 - /> 101 + {isLocalUpload || image.data.local ? ( 102 + <img 103 + loading="lazy" 104 + decoding="async" 105 + alt={""} 106 + src={isLocalUpload ? image.data.src + "?local" : image.data.fallback} 107 + height={image?.data.height} 108 + width={image?.data.width} 109 + className={className} 110 + /> 111 + ) : ( 112 + <Image 113 + alt="" 114 + src={new URL(image.data.src).pathname.split("/").slice(5).join("/")} 115 + height={image?.data.height} 116 + width={image?.data.width} 117 + className={className} 118 + /> 119 + )} 113 120 </div> 114 121 ); 115 122 }
+3
next.config.js
··· 12 12 }, 13 13 pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"], 14 14 images: { 15 + loader: "custom", 16 + loaderFile: "./supabase/supabase-image-loader.js", 15 17 remotePatterns: [ 16 18 { protocol: "http", hostname: "127.0.0.1", port: "54321" }, 19 + { protocol: "https", hostname: "bdefzwcumgzjwllsnaej.supabase.co" }, 17 20 ], 18 21 }, 19 22 experimental: {
+2
src/utils/addImage.ts
··· 5 5 import { rgbaToDataURL, rgbaToThumbHash, thumbHashToDataURL } from "thumbhash"; 6 6 import { v7 } from "uuid"; 7 7 8 + export const localImages = new Map<string, boolean>(); 8 9 export async function addImage( 9 10 file: File, 10 11 rep: Replicache<ReplicacheMutators>, ··· 28 29 }, 29 30 }), 30 31 ); 32 + localImages.set(url, true); 31 33 32 34 let thumbhash = await getThumbHash(file); 33 35 if (navigator.serviceWorker)
+5
supabase/supabase-image-loader.js
··· 1 + const projectId = "bdefzwcumgzjwllsnaej"; // your supabase project id 2 + 3 + export default function supabaseLoader({ src, width, quality }) { 4 + return `https://${projectId}.supabase.co/storage/v1/render/image/public/${src}?width=${width}&quality=${quality || 75}`; 5 + }