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
description?: string;
138
image?: string;
139
icon?: string;
140
-
} | null>(null);
0
0
0
0
0
0
0
0
0
0
141
const [imgError, setImgError] = useState(false);
142
const [iconError, setIconError] = useState(false);
143
···
184
if (res.ok) {
185
const data = await res.json();
186
setOgData(data);
0
0
0
0
0
187
}
188
} catch (e) {
189
console.error("Failed to fetch metadata", e);
···
137
description?: string;
138
image?: string;
139
icon?: string;
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
+
});
151
const [imgError, setImgError] = useState(false);
152
const [iconError, setIconError] = useState(false);
153
···
194
if (res.ok) {
195
const data = await res.json();
196
setOgData(data);
197
+
try {
198
+
sessionStorage.setItem(`og:${pageUrl}`, JSON.stringify(data));
199
+
} catch {
200
+
/* quota exceeded */
201
+
}
202
}
203
} catch (e) {
204
console.error("Failed to fetch metadata", e);
+23
-4
web/src/views/core/Discover.tsx
···
150
description?: string;
151
image?: string;
152
icon?: string;
153
-
} | null>(null);
0
0
0
0
0
0
0
154
155
useEffect(() => {
156
-
if (!doc.canonicalUrl) return;
157
fetch(`/api/url-metadata?url=${encodeURIComponent(doc.canonicalUrl)}`)
158
.then((res) => (res.ok ? res.json() : null))
159
-
.then((data) => data && setOgData(data))
0
0
0
0
0
0
0
0
0
0
0
0
160
.catch(() => {});
161
-
}, [doc.canonicalUrl]);
162
163
const displayUrl = doc.canonicalUrl
164
.replace(/^https?:\/\//, "")
···
150
description?: string;
151
image?: string;
152
icon?: string;
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
+
});
161
162
useEffect(() => {
163
+
if (!doc.canonicalUrl || ogData) return;
164
fetch(`/api/url-metadata?url=${encodeURIComponent(doc.canonicalUrl)}`)
165
.then((res) => (res.ok ? res.json() : null))
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
+
})
179
.catch(() => {});
180
+
}, [doc.canonicalUrl, ogData]);
181
182
const displayUrl = doc.canonicalUrl
183
.replace(/^https?:\/\//, "")