(READ ONLY) Margin is an open annotation layer for 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
+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
+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?:\/\//, "")