Write on the margins of the internet. Powered by the AT Protocol. margin.at
extension web atproto comments

Enhance metadata caching in Card and Discover components

+39 -5
+16 -1
web/src/components/common/Card.tsx
··· 137 137 description?: string; 138 138 image?: string; 139 139 icon?: string; 140 - } | null>(null); 140 + } | null>(() => { 141 + if (initialItem.motivation !== "bookmarking") return null; 142 + const url = initialItem.target?.source || initialItem.source; 143 + if (!url) return null; 144 + try { 145 + const cached = sessionStorage.getItem(`og:${url}`); 146 + return cached ? JSON.parse(cached) : null; 147 + } catch { 148 + return null; 149 + } 150 + }); 141 151 const [imgError, setImgError] = useState(false); 142 152 const [iconError, setIconError] = useState(false); 143 153 ··· 184 194 if (res.ok) { 185 195 const data = await res.json(); 186 196 setOgData(data); 197 + try { 198 + sessionStorage.setItem(`og:${pageUrl}`, JSON.stringify(data)); 199 + } catch { 200 + /* quota exceeded */ 201 + } 187 202 } 188 203 } catch (e) { 189 204 console.error("Failed to fetch metadata", e);
+23 -4
web/src/views/core/Discover.tsx
··· 150 150 description?: string; 151 151 image?: string; 152 152 icon?: string; 153 - } | null>(null); 153 + } | null>(() => { 154 + try { 155 + const cached = sessionStorage.getItem(`og:${doc.canonicalUrl}`); 156 + return cached ? JSON.parse(cached) : null; 157 + } catch { 158 + return null; 159 + } 160 + }); 154 161 155 162 useEffect(() => { 156 - if (!doc.canonicalUrl) return; 163 + if (!doc.canonicalUrl || ogData) return; 157 164 fetch(`/api/url-metadata?url=${encodeURIComponent(doc.canonicalUrl)}`) 158 165 .then((res) => (res.ok ? res.json() : null)) 159 - .then((data) => data && setOgData(data)) 166 + .then((data) => { 167 + if (data) { 168 + setOgData(data); 169 + try { 170 + sessionStorage.setItem( 171 + `og:${doc.canonicalUrl}`, 172 + JSON.stringify(data), 173 + ); 174 + } catch { 175 + /* quota exceeded */ 176 + } 177 + } 178 + }) 160 179 .catch(() => {}); 161 - }, [doc.canonicalUrl]); 180 + }, [doc.canonicalUrl, ogData]); 162 181 163 182 const displayUrl = doc.canonicalUrl 164 183 .replace(/^https?:\/\//, "")