tangled
alpha
login
or
join now
margin.at
/
margin
89
fork
atom
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
89
fork
atom
overview
issues
4
pulls
1
pipelines
Enhance metadata caching in Card and Discover components
scanash.com
1 week ago
8fb241ed
bbb1e693
+39
-5
2 changed files
expand all
collapse all
unified
split
web
src
components
common
Card.tsx
views
core
Discover.tsx
+16
-1
web/src/components/common/Card.tsx
···
137
137
description?: string;
138
138
image?: string;
139
139
icon?: string;
140
140
-
} | null>(null);
140
140
+
} | null>(() => {
141
141
+
if (initialItem.motivation !== "bookmarking") return null;
142
142
+
const url = initialItem.target?.source || initialItem.source;
143
143
+
if (!url) return null;
144
144
+
try {
145
145
+
const cached = sessionStorage.getItem(`og:${url}`);
146
146
+
return cached ? JSON.parse(cached) : null;
147
147
+
} catch {
148
148
+
return null;
149
149
+
}
150
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
197
+
try {
198
198
+
sessionStorage.setItem(`og:${pageUrl}`, JSON.stringify(data));
199
199
+
} catch {
200
200
+
/* quota exceeded */
201
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
153
-
} | null>(null);
153
153
+
} | null>(() => {
154
154
+
try {
155
155
+
const cached = sessionStorage.getItem(`og:${doc.canonicalUrl}`);
156
156
+
return cached ? JSON.parse(cached) : null;
157
157
+
} catch {
158
158
+
return null;
159
159
+
}
160
160
+
});
154
161
155
162
useEffect(() => {
156
156
-
if (!doc.canonicalUrl) return;
163
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
159
-
.then((data) => data && setOgData(data))
166
166
+
.then((data) => {
167
167
+
if (data) {
168
168
+
setOgData(data);
169
169
+
try {
170
170
+
sessionStorage.setItem(
171
171
+
`og:${doc.canonicalUrl}`,
172
172
+
JSON.stringify(data),
173
173
+
);
174
174
+
} catch {
175
175
+
/* quota exceeded */
176
176
+
}
177
177
+
}
178
178
+
})
160
179
.catch(() => {});
161
161
-
}, [doc.canonicalUrl]);
180
180
+
}, [doc.canonicalUrl, ogData]);
162
181
163
182
const displayUrl = doc.canonicalUrl
164
183
.replace(/^https?:\/\//, "")