This repository has no description
0

Configure Feed

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

add: alt text card

+69 -1
public/favicon.ico

This is a binary file and will not be displayed.

+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
··· 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
··· 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;