(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
99
fork

Configure Feed

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

Enhance metadata caching in Card and Discover components

scanash00 8fb241ed bbb1e693

+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?:\/\//, "")