This repository has no description
add: alt text card
author
damedotblog
date
(Jan 21, 2025, 1:56 PM -0500)
commit
fd8718c8
fd8718c866a9c4529ca98bc634a14859a12fd77b
parent
a42dc3dc
a42dc3dc3c56949bbd5bffeaace411dfae12a543
+69
-1
public/favicon.ico
public/favicon.ico
This is a binary file and will not be displayed.
+11
src/accountData.js
+11
src/accountData.js
···
609
609
rec.value.embed.images.some((image) => image.alt && image.alt.trim())
610
610
);
611
611
});
612
+
// Compute the count of image posts (with alt text) that are replies.
613
+
const imagePostsReplies = filterRecords(postsRecords, (rec) => {
614
+
// Check that the post has the image embed type and alt text...
615
+
const isImagePostWithAlt = rec.value.embed &&
616
+
rec.value.embed["$type"] === "app.bsky.embed.images" &&
617
+
rec.value.embed.images &&
618
+
rec.value.embed.images.some((img) => img.alt && img.alt.trim());
619
+
// ...and that it is a reply (i.e. the record has a reply property).
620
+
return isImagePostWithAlt && rec.value.reply;
621
+
});
612
622
const imagePostsNoAltText = postsWithImages - imagePostsAltText;
613
623
const altTextPercentage = postsWithImages ? imagePostsAltText / postsWithImages : 0;
614
624
const postsWithOnlyText = filterRecords(
···
669
679
imagePostsAltText: roundToTwo(imagePostsAltText),
670
680
imagePostsNoAltText: roundToTwo(imagePostsNoAltText),
671
681
altTextPercentage: roundToTwo(altTextPercentage),
682
+
imagePostsReplies: roundToTwo(imagePostsReplies.length),
672
683
postsWithOnlyText: roundToTwo(postsWithOnlyText),
673
684
textPostsPerDay: ageInDays ? roundToTwo(postsWithOnlyText / ageInDays) : 0,
674
685
postsWithMentions: roundToTwo(postsWithMentions),
+13
-1
src/components/UserProfile/UserProfile.js
+13
-1
src/components/UserProfile/UserProfile.js
···
324
324
ageInDays,
325
325
serviceEndpoint,
326
326
pdsType,
327
+
postsWithImages,
328
+
imagePostsAltText,
329
+
imagePostsNoAltText,
330
+
altTextPercentage,
331
+
imagePostsReplies,
327
332
} = accountData;
328
333
329
334
return (
···
360
365
361
366
<div key="alttextcard" className="grid-item">
362
367
<Card title="Alt Text">
363
-
<AltTextCard profile={profile} />
368
+
<AltTextCard
369
+
postsWithImages={postsWithImages}
370
+
imagePostsPerDay={imagePostsPerDay}
371
+
imagePostsAltText={imagePostsAltText}
372
+
imagePostsNoAltText={imagePostsNoAltText}
373
+
altTextPercentage={altTextPercentage}
374
+
imagePostsReplies={imagePostsReplies}
375
+
/>
364
376
</Card>
365
377
</div>
366
378
+45
src/components/UserProfile/components/AltTextCard.js
+45
src/components/UserProfile/components/AltTextCard.js
···
1
+
import React from "react";
2
+
import "./AltTextCard.css"; // Optional: add specific styles for AltTextCard
3
+
4
+
const AltTextCard = ({
5
+
postsWithImages = 0,
6
+
imagePostsPerDay = 0,
7
+
imagePostsAltText = 0,
8
+
imagePostsNoAltText = 0,
9
+
altTextPercentage = 0,
10
+
imagePostsReplies = 0
11
+
}) => {
12
+
return (
13
+
<div className="alt-text-card">
14
+
<h2>Alt Text Statistics</h2>
15
+
<ul>
16
+
<li>
17
+
<strong>Posts with Images:</strong>{" "}
18
+
{Number(postsWithImages).toFixed(2)}
19
+
</li>
20
+
<li>
21
+
<strong>Image Posts per Day:</strong>{" "}
22
+
{Number(imagePostsPerDay).toFixed(2)}
23
+
</li>
24
+
<li>
25
+
<strong>Image Posts with Alt Text:</strong>{" "}
26
+
{Number(imagePostsAltText).toFixed(2)}
27
+
</li>
28
+
<li>
29
+
<strong>Image Posts without Alt Text:</strong>{" "}
30
+
{Number(imagePostsNoAltText).toFixed(2)}
31
+
</li>
32
+
<li>
33
+
<strong>Alt Text Percentage:</strong>{" "}
34
+
{(Number(altTextPercentage) * 100).toFixed(2)}%
35
+
</li>
36
+
<li>
37
+
<strong>Image Posts (Replies):</strong>{" "}
38
+
{Number(imagePostsReplies).toFixed(2)}
39
+
</li>
40
+
</ul>
41
+
</div>
42
+
);
43
+
};
44
+
45
+
export default AltTextCard;