LightNews — News, ranked by scholars

Reposted by Accessabilly

@a11yawareness.bsky.social

Did you know each emoji has a coded description that gets read aloud by screen readers? This demo by Alexa Heinrich shows what happens when a screen reader encounters a post that uses an emoji to function as a bullet point.

www.youtube.com/watch?v=MSMs...

Taylor Nation Emoji Bullet Point Tweet

Demonstration of what a tweet with emoji used as bullet points sounds like when read by a screen reader. The tweet also uses a "show more" cut, which isn't accessible when the tweet is seen in the…

www.youtube.com

October 4, 2026 at 4:52 PM

Reposted by Accessabilly

Bruce Lawson

@brucel.bsky.social

"Companies don’t push apps because installing one improves your spiritual wellbeing." webdesignerdepot.com/nobody-wants...

Nobody Wants Your Damn App

Nobody wants another app cluttering their phone—so why does every website keep begging us to install one? The web already perfected the experience: click, load, done. Maybe it’s time we stopped trying...

webdesignerdepot.com

September 29, 2026 at 10:49 AM

Reposted by Accessabilly

Manuel Matuzović

@matuzo.at

I'm speaking live right now!

www.youtube.com/live/h3JhFyO...

Manuel Matuzović / 19½ Things You Didn’t Know about Accessibility in HTML and CSS #id24 2026

YouTube video by Inclusive Design 24 #id24

www.youtube.com

September 24, 2026 at 4:01 AM

Reposted by Accessabilly

Vale

@vale.rocks

Sometimes you look at an old HTML document and see some weird tags and snippets from bygone eras.

I've complied many legacy HTML bits I've noticed and documented what they were and why there were present. Many of them are rather obscure.

Satisfy your curiosity: vale.rocks/posts/html-r...

Antiquated HTML Snippets and Artefacts

Overviews of the very many snippets of code that were once commonly included on websites to address specific cases with certain technologies, browsers, operating systems, or extensions. Fragments dating back to the days of Internet Explorer and Netscape, to more modern bits that are nonetheless obsolete.

vale.rocks

September 8, 2026 at 5:13 AM

Reposted by Accessabilly

xirclebox

@xirclebox.com

Screen Reader User Survey #11

webaim.org/projects/scr...

#Accessibility #AssistiveTech #ScreenReader

@webaim.bsky.social

WebAIM: Screen Reader User Survey #11

webaim.org

August 7, 2026 at 11:59 AM

Accessabilly

@accessabilly.bsky.social

Interesting read! Things you might not have on your radar while checking awesome new CSS features. 😎

Manuel Matuzović @matuzo.at · Jun 24

I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by @patrickbrosset.com at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default.

matuzo.at/blog/2026/gr...

Your Grid Lanes will likely fail WCAG 2.4.3 - Manuel Matuzovic

I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.

matuzo.at

June 25, 2026 at 7:01 AM

Reposted by Accessabilly

Manuel Matuzović

@matuzo.at

I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by @patrickbrosset.com at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default.

matuzo.at/blog/2026/gr...

Your Grid Lanes will likely fail WCAG 2.4.3 - Manuel Matuzovic

I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.

matuzo.at

June 24, 2026 at 7:04 AM

Reposted by Accessabilly

deconspray

@deconspray.bsky.social

axe and Lighthouse catch issues, not experiences. Great insights from David Mello on smarter Playwright a11y testing.

www.davidmello.com/s...

#Accessibility #A11y #Playwright #WebAccessibility #SoftwareTesting #InclusiveDesign #QA #WCAG #DevOps #AutomationTesting

Playwright Accessibility Testing: What axe and Lighthouse Miss

axe and Lighthouse miss 60–70% of WCAG violations. Learn the limitations of automated accessibility testing and how to write smarter Playwright tests.

www.davidmello.com

June 6, 2026 at 4:20 PM

Accessabilly

@accessabilly.bsky.social

A very helpful article on lists and ARIA by @scottohara.me:
www.scottohara.me/blog/2018/05...
👍

...and a great CodePen demonstrating how to keep ordered lists machine-readable even without visible counters:
codepen.io/scottohara/p...
😎

ARIA Lists | scottohara.me

www.scottohara.me

May 27, 2026 at 10:54 AM

Reposted by Accessabilly

Todd

@toddl.dev

No stopping now, we are close to the end goal. Shares are always welcomed and thank you to those that have donated and reposted. gofund.me/ef06d9d56

Donate to Fundraiser for Paula Johnson's Medical & Recovery Fund, organized by Todd Libby

My name is Todd Libby, and I am starting this on the behalf of my… Todd Libby needs your support for Fundraiser for Paula Johnson's Medical & Recovery Fund

gofund.me

May 23, 2026 at 7:07 PM

Accessabilly

@accessabilly.bsky.social

My grandfather, a manufacturer in postwar Germany, hired a blind man to work at his telephone exchange - a remarkably progressive step for the time. The man proved to be his most accurate and reliable employee, staying until retirement. 🤝

As things come full circle, I’m proud of my grandfather...

April 27, 2026 at 6:11 PM

Reposted by Accessabilly

Sara Soueidan

@sarasoueidan.com

The latest Firefox stable release includes some superb additions like #CSS color-mix() accepting multiple color values, light-dark() accepting image values, ariaNotify, sizes=auto on images, and more: developer.mozilla.org/en-US/docs/M...

"None of these are baseline yet, so check MDN for support."

Firefox 150 release notes for developers (Stable) - Mozilla | MDN

This article provides information about the changes in Firefox 150 that affect developers. Firefox 150 was released on April 21, 2026.

developer.mozilla.org

April 21, 2026 at 11:10 AM

Accessabilly

@accessabilly.bsky.social

@carlomasala1.bsky.social Rügen - der weiche Unterleib der NATO! Ich brech ab! 👏

April 20, 2026 at 4:32 PM

Accessabilly

@accessabilly.bsky.social

Now we're talking!

"...the industry pretends the problem is about awareness.

It isn’t about awareness. It’s about who’s writing the front-end code, and whether they’re qualified to write it."

I couldn't agree more, @gbbns.co!
gbbns.co/journal/acce...

The Accessibility Problem Isn't Design. It's Engineering. | gbbns.co

Accessibility failures aren't design oversights — they're engineering failures. The full-stack hiring trend, AI-generated code with no context, and a compliance-first mentality have combined to create...

gbbns.co

April 13, 2026 at 1:11 PM

Reposted by Accessabilly

Socket

@socket.dev

🚨 Active supply chain attack on [email protected]. The latest version pulls in [email protected] -- a brand-new package that didn't exist before today.

We're still investigating. If you use axios, pin your version and audit your lockfile. socket.dev/blog/axios-n...

Supply Chain Attack on Axios Pulls Malicious Dependency from...

A supply chain attack on Axios introduced a malicious dependency, [email protected], published minutes earlier and absent from the project’s GitHu...

socket.dev

March 31, 2026 at 3:14 AM

Reposted by Accessabilly

Erik Kroes 👀

@erikkroes.bsky.social

Don't use role="progressbar" for multi-step forms.

The spec says: "A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action."

Use an OL and aria-current. role="progressbar" sends the wrong message.

A stepper or multi-step form from the documentation of material design.

March 25, 2026 at 3:43 PM

Accessabilly

@accessabilly.bsky.social

Oh wow, this is cool! Check it out

Todd @toddl.dev · Mar 16

It's done, it's live, it's a work in progress. basketbuddyapp.netlify.app

March 17, 2026 at 12:54 PM

Accessabilly

@accessabilly.bsky.social

Typo of the day:

Love-Region instead of Live-Region

😍

March 10, 2026 at 2:19 PM

Reposted by Accessabilly

Todd

@toddl.dev

New update and it’s been overdue that I get back on this. $2,400 to goal. gofund.me/33ce7c781

Donate to Fundraiser for Paula Johnson's Medical & Recovery Fund, organized by Todd Libby

My name is Todd Libby, and I am starting this on the behalf of my… Todd Libby needs your support for Fundraiser for Paula Johnson's Medical & Recovery Fund

gofund.me

March 5, 2026 at 1:03 AM

Reposted by Accessabilly

Vivaldi Browser

@vivaldi.com

It costs $0.00 to uninstall that Big Tech browser you’ve always used and switch to a European browser that has no AI and doesn’t collect your data. 🫶🏻

March 4, 2026 at 8:02 PM

Accessabilly

@accessabilly.bsky.social

🇩🇪 Ohrfutter! 🎧 Ein neuer Podcast zur Barrierefreiheit. Noch nicht reingehört, könnte spannend sein.

www.bfit-bund.de/SharedDocs/K...

Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik - Aktuelles - Unlimited – der neue BFIT-Podcast für digitale Barrierefreiheit

Zum Internationalen Tag der Menschen mit Behinderungen am 3. Dezember 2025 startet ein neues Angebot der BFIT-Bund: Unlimited – der Podcast für digitale Barrierefreiheit.

www.bfit-bund.de

December 3, 2025 at 10:49 AM

Accessabilly

@accessabilly.bsky.social

O most gracious Lord of HTML, how cometh it that mine ears have not yet heard of ? 🧐<br><br><a href="https://htmhell.dev/adventcalendar/2025/2/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">htmhell.dev/adventcalend...</a><br><br>By my troth, I do hereby commend unto thee the most infernal Advent Calendar of Sir <a href="https://bsky.app/profile/did:plc:77nhxdei7vwjw5qdipxazguw" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@matuzo.at</a>, named HTML Hell! ☠️</div> <a href="https://htmhell.dev/adventcalendar/2025/2/" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link"> <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreihhnnfzigthfhr7kfnbszcd3gj24vquhtzcdepmawfz3ntmu4ws6u" class="w-full h-40 object-cover" loading="lazy"> <div class="p-2"> <div class="text-sm font-semibold truncate">Using the Ancient Evils for Debugging - HTMHell</div> <div class="text-xs text-gray-500 truncate">A collection of bad practices in HTML, copied from real websites.</div> </div> <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg> <span class="truncate">htmhell.dev</span> </div> </a> <div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]"> <span>December 3, 2025 at 6:33 AM</span> </div> <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div> <div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions"> <div class="flex items-center justify-between w-[300px] pr-4 no-card-link"> <div class="hidden" data-post-text-uri="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m72tlldbq22l"> O most gracious Lord of HTML, how cometh it that mine ears have not yet heard of <plaintext>? 🧐<br><br><a href="https://htmhell.dev/adventcalendar/2025/2/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">htmhell.dev/adventcalend...</a><br><br>By my troth, I do hereby commend unto thee the most infernal Advent Calendar of Sir <a href="https://bsky.app/profile/did:plc:77nhxdei7vwjw5qdipxazguw" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@matuzo.at</a>, named HTML Hell! ☠️ </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link" data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" data-bluesky-interactions-reply-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m72tlldbq22l" data-bluesky-interactions-reply-cid-param="bafyreidlqg7setxef6eviphofjd7ujav2iz35j3qdhvohvzo36lgfaib4i" data-bluesky-interactions-reply-root-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m72tlldbq22l" data-bluesky-interactions-reply-root-cid-param="bafyreidlqg7setxef6eviphofjd7ujav2iz35j3qdhvohvzo36lgfaib4i" data-bluesky-interactions-reply-author-name-param="Accessabilly " data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreifilbrmxks2amq5wqjhud55wby46u73bk5kjorkx2ztuaplpfrrlu" data-bluesky-interactions-post-path-param="/bsky/accessabilly.bsky.social/post/3m72tlldbq22l" title="Reply" style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-repost-menu" data-bluesky-repost-menu-uri-value="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m72tlldbq22l" data-bluesky-repost-menu-cid-value="bafyreidlqg7setxef6eviphofjd7ujav2iz35j3qdhvohvzo36lgfaib4i" data-bluesky-repost-menu-repost-uri-value="" data-bluesky-repost-menu-is-reposted-value="false" data-bluesky-repost-menu-author-handle-value="accessabilly.bsky.social" data-bluesky-repost-menu-post-text-value="O most gracious Lord of HTML, how cometh it that mine ears have not yet heard of <plaintext>? 🧐 htmhell.dev/adventcalend... By my troth, I do hereby commend unto thee the most infernal Advent Calendar of Sir @matuzo.at, named HTML Hell! ☠️" style="pointer-events:auto; cursor:pointer;"> <button type="button" class="flex items-center gap-1 hover:text-black " data-action="click->bluesky-repost-menu#toggleMenu" data-bluesky-interactions-target="repostButton" title="Repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span data-bluesky-interactions-target="repostCount">1</span> </button> <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Undo repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <span>Quote post</span> </button> </div> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link " data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike" data-bluesky-interactions-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m72tlldbq22l" data-bluesky-interactions-cid-param="bafyreidlqg7setxef6eviphofjd7ujav2iz35j3qdhvohvzo36lgfaib4i" data-bluesky-interactions-like-uri-param="" data-bluesky-interactions-target="likeButton" title="Like"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg> <span data-bluesky-interactions-target="likeCount">4</span> </button> </div> <div class="flex items-center gap-4 text-gray-500"> <button type="button" class="flex items-center hover:text-black no-card-link" data-controller="share" data-share-url-value="https://www.lightnews.app/bsky/accessabilly.bsky.social/post/3m72tlldbq22l" data-share-title-value="Accessabilly on LightNews" data-share-text-value="O most gracious Lord of HTML, how cometh it that mine ears have not yet heard of <plaintext>? 🧐 htmhell.dev/adventcalend... By my troth, I d…" data-action="click->share#shareSystem" title="Share" style="pointer-events:auto; cursor:pointer;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-options" data-bluesky-options-text-value="O most gracious Lord of HTML, how cometh it that mine ears have not yet heard of <plaintext>? 🧐 htmhell.dev/adventcalend... By my troth, I do hereby commend unto thee the most infernal Advent Calendar of Sir @matuzo.at, named HTML Hell! ☠️" data-bluesky-options-author-handle-value="accessabilly.bsky.social" data-bluesky-options-author-did-value="did:plc:bcguxnsen6zgljhzbxy4epa2" data-bluesky-options-muted-value="false" data-bluesky-options-blocking-uri-value="" data-bluesky-options-own-value="false" data-bluesky-options-delete-url-value="" data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'> <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg> </span> <span>Translate</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg> </span> <span>Copy post text</span> </button> <div class="border-t border-white/10"></div> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg> </span> <span data-bluesky-options-target="muteLabel">Mute account</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg> </span> <span data-bluesky-options-target="blockLabel">Block account</span> </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Prevent navigation when clicking in avatar column area - must run in capture phase before global handler // Only initialize once to avoid duplicate listeners if (!window._avatarColumnNoNavInitialized) { window._avatarColumnNoNavInitialized = true; document.addEventListener('click', function(ev) { try { // Check if target itself has the class OR is inside an element with that class var avatarColumn = (ev.target.classList && ev.target.classList.contains('avatar-column-no-nav')) || (ev.target.closest && ev.target.closest('.avatar-column-no-nav')); if (avatarColumn) { // Only allow navigation if clicking directly on the avatar link itself var isAvatarLink = ev.target.tagName === 'A' && ev.target.href && ev.target.href.indexOf('/author') !== -1; if (!isAvatarLink) { ev.stopPropagation(); ev.stopImmediatePropagation(); ev.preventDefault(); return false; } } } catch(e) {} }, true); // Capture phase - runs BEFORE other handlers } </script> <div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/accessabilly.bsky.social/post/3m6mm2iapos2v" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }"> <div class="px-4 py-3"> <div class="flex items-start gap-4"> <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="no-card-link inline-block flex-shrink-0" aria-label="Accessabilly " style="align-self: flex-start;"> <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreifilbrmxks2amq5wqjhud55wby46u73bk5kjorkx2ztuaplpfrrlu" alt="accessabilly.bsky.social" class="w-10 h-10 rounded-full relative z-10" loading="lazy"> </a> </div> <div class="flex-1 min-w-0 -mt-0.5"> <div> <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="truncate hover:underline text-black no-card-link">Accessabilly </a> </div> <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="hover:underline text-gray-500 no-card-link">@accessabilly.bsky.social</a> </div> </div> <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Interesting stuff coming up:<br><br><a href="https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">blogs.windows.com/msedgedev/20...</a></div> <a href="https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link"> <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreieisqenekwedfe6eawyeag5vrxnlkr4ul6cywo2fhlj3nt76irvli" class="w-full h-40 object-cover" loading="lazy"> <div class="p-2"> <div class="text-sm font-semibold truncate">Creating a more accessible web with Aria Notify</div> <div class="text-xs text-gray-500 truncate">We're excited to announce the availability, as a developer and origin trial, of ARIA Notify, a new API that's designed to make web content</div> </div> <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg> <span class="truncate">blogs.windows.com</span> </div> </a> <div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]"> <span>November 27, 2025 at 2:41 PM</span> </div> <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div> <div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions"> <div class="flex items-center justify-between w-[300px] pr-4 no-card-link"> <div class="hidden" data-post-text-uri="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m6mm2iapos2v"> Interesting stuff coming up:<br><br><a href="https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">blogs.windows.com/msedgedev/20...</a> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link" data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" data-bluesky-interactions-reply-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m6mm2iapos2v" data-bluesky-interactions-reply-cid-param="bafyreia4snyl5pqpjllmvsgwgezuvtrxnigt2tiuoxt43ppwzpsje2kmje" data-bluesky-interactions-reply-root-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m6mm2iapos2v" data-bluesky-interactions-reply-root-cid-param="bafyreia4snyl5pqpjllmvsgwgezuvtrxnigt2tiuoxt43ppwzpsje2kmje" data-bluesky-interactions-reply-author-name-param="Accessabilly " data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreifilbrmxks2amq5wqjhud55wby46u73bk5kjorkx2ztuaplpfrrlu" data-bluesky-interactions-post-path-param="/bsky/accessabilly.bsky.social/post/3m6mm2iapos2v" title="Reply" style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-repost-menu" data-bluesky-repost-menu-uri-value="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m6mm2iapos2v" data-bluesky-repost-menu-cid-value="bafyreia4snyl5pqpjllmvsgwgezuvtrxnigt2tiuoxt43ppwzpsje2kmje" data-bluesky-repost-menu-repost-uri-value="" data-bluesky-repost-menu-is-reposted-value="false" data-bluesky-repost-menu-author-handle-value="accessabilly.bsky.social" data-bluesky-repost-menu-post-text-value="Interesting stuff coming up: blogs.windows.com/msedgedev/20..." style="pointer-events:auto; cursor:pointer;"> <button type="button" class="flex items-center gap-1 hover:text-black " data-action="click->bluesky-repost-menu#toggleMenu" data-bluesky-interactions-target="repostButton" title="Repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> </button> <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Undo repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <span>Quote post</span> </button> </div> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link " data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike" data-bluesky-interactions-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m6mm2iapos2v" data-bluesky-interactions-cid-param="bafyreia4snyl5pqpjllmvsgwgezuvtrxnigt2tiuoxt43ppwzpsje2kmje" data-bluesky-interactions-like-uri-param="" data-bluesky-interactions-target="likeButton" title="Like"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg> <span data-bluesky-interactions-target="likeCount">1</span> </button> </div> <div class="flex items-center gap-4 text-gray-500"> <button type="button" class="flex items-center hover:text-black no-card-link" data-controller="share" data-share-url-value="https://www.lightnews.app/bsky/accessabilly.bsky.social/post/3m6mm2iapos2v" data-share-title-value="Accessabilly on LightNews" data-share-text-value="Interesting stuff coming up: blogs.windows.com/msedgedev/20..." data-action="click->share#shareSystem" title="Share" style="pointer-events:auto; cursor:pointer;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-options" data-bluesky-options-text-value="Interesting stuff coming up: blogs.windows.com/msedgedev/20..." data-bluesky-options-author-handle-value="accessabilly.bsky.social" data-bluesky-options-author-did-value="did:plc:bcguxnsen6zgljhzbxy4epa2" data-bluesky-options-muted-value="false" data-bluesky-options-blocking-uri-value="" data-bluesky-options-own-value="false" data-bluesky-options-delete-url-value="" data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'> <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg> </span> <span>Translate</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg> </span> <span>Copy post text</span> </button> <div class="border-t border-white/10"></div> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg> </span> <span data-bluesky-options-target="muteLabel">Mute account</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg> </span> <span data-bluesky-options-target="blockLabel">Block account</span> </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Prevent navigation when clicking in avatar column area - must run in capture phase before global handler // Only initialize once to avoid duplicate listeners if (!window._avatarColumnNoNavInitialized) { window._avatarColumnNoNavInitialized = true; document.addEventListener('click', function(ev) { try { // Check if target itself has the class OR is inside an element with that class var avatarColumn = (ev.target.classList && ev.target.classList.contains('avatar-column-no-nav')) || (ev.target.closest && ev.target.closest('.avatar-column-no-nav')); if (avatarColumn) { // Only allow navigation if clicking directly on the avatar link itself var isAvatarLink = ev.target.tagName === 'A' && ev.target.href && ev.target.href.indexOf('/author') !== -1; if (!isAvatarLink) { ev.stopPropagation(); ev.stopImmediatePropagation(); ev.preventDefault(); return false; } } } catch(e) {} }, true); // Capture phase - runs BEFORE other handlers } </script> <div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/deconspray.bsky.social/post/3m5qpmjwqyf24" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }"> <div class="px-4 py-3"> <div class="mb-1 sm:mb-2 ml-6 text-sm font-semibold text-gray-500 flex items-center gap-1"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Reposted by Accessabilly </span> </div> <div class="flex items-start gap-4"> <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }"> <a href="/author?bsky_handle=deconspray.bsky.social" class="no-card-link inline-block flex-shrink-0" aria-label="deconspray" style="align-self: flex-start;"> <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:oxsah26zog3bsd77uvlacjlp/bafkreidwrpesz4gefch7v74gsrjflqt5nzy2rngovf73me6dzlx57pkfmi" alt="deconspray.bsky.social" class="w-10 h-10 rounded-full relative z-10" loading="lazy"> </a> </div> <div class="flex-1 min-w-0 -mt-0.5"> <div> <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1"> <a href="/author?bsky_handle=deconspray.bsky.social" class="truncate hover:underline text-black no-card-link">deconspray</a> </div> <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate"> <a href="/author?bsky_handle=deconspray.bsky.social" class="hover:underline text-gray-500 no-card-link">@deconspray.bsky.social</a> </div> </div> <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Flashing content faster than 3x per second can exclude users. My latest piece outlines practical steps to meet “Three Flashes” and build safer, inclusive experiences. What’s your approach? <br><br><a href="https://buff.ly/wU8Ge4T" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">buff.ly/wU8Ge4T</a> <br><br><a href="/hashtag/DigitalAccessibility" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#DigitalAccessibility</a> <a href="/hashtag/InclusiveDesign" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#InclusiveDesign</a> <a href="/hashtag/WCAG" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#WCAG</a> <a href="/hashtag/WebStandards" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#WebStandards</a> <a href="/hashtag/A11y" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#A11y</a></div> <a href="https://buff.ly/wU8Ge4T" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link"> <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oxsah26zog3bsd77uvlacjlp/bafkreiancfrefiuwzo3pau2nydkcvtxvnmzqu66tllyvqlzlg4fzwj7wzm" class="w-full h-40 object-cover" loading="lazy"> <div class="p-2"> <div class="text-sm font-semibold truncate">Testing Methods: Three Flashes</div> <div class="text-xs text-gray-500 truncate">Testing WCAG 2.3.2 Three Flashes is most effective using a hybrid approach. Automated scans provide broad coverage, AI detects subtle flashes, and manual testing ensures real-user accuracy, creating safer, inclusive digital experiences.</div> </div> <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg> <span class="truncate">buff.ly</span> </div> </a> <div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]"> <span>November 16, 2025 at 12:30 PM</span> </div> <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div> <div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions"> <div class="flex items-center justify-between w-[300px] pr-4 no-card-link"> <div class="hidden" data-post-text-uri="at://did:plc:oxsah26zog3bsd77uvlacjlp/app.bsky.feed.post/3m5qpmjwqyf24"> Flashing content faster than 3x per second can exclude users. My latest piece outlines practical steps to meet “Three Flashes” and build safer, inclusive experiences. What’s your approach? <br><br><a href="https://buff.ly/wU8Ge4T" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">buff.ly/wU8Ge4T</a> <br><br><a href="/hashtag/DigitalAccessibility" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#DigitalAccessibility</a> <a href="/hashtag/InclusiveDesign" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#InclusiveDesign</a> <a href="/hashtag/WCAG" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#WCAG</a> <a href="/hashtag/WebStandards" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#WebStandards</a> <a href="/hashtag/A11y" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#A11y</a> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link" data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" data-bluesky-interactions-reply-uri-param="at://did:plc:oxsah26zog3bsd77uvlacjlp/app.bsky.feed.post/3m5qpmjwqyf24" data-bluesky-interactions-reply-cid-param="bafyreia5c73vsz4mueohgi4d5gdamhnanjiqwzjryi733btc5bxi44lu3u" data-bluesky-interactions-reply-root-uri-param="at://did:plc:oxsah26zog3bsd77uvlacjlp/app.bsky.feed.post/3m5qpmjwqyf24" data-bluesky-interactions-reply-root-cid-param="bafyreia5c73vsz4mueohgi4d5gdamhnanjiqwzjryi733btc5bxi44lu3u" data-bluesky-interactions-reply-author-name-param="deconspray" data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:oxsah26zog3bsd77uvlacjlp/bafkreidwrpesz4gefch7v74gsrjflqt5nzy2rngovf73me6dzlx57pkfmi" data-bluesky-interactions-post-path-param="/bsky/deconspray.bsky.social/post/3m5qpmjwqyf24" title="Reply" style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-repost-menu" data-bluesky-repost-menu-uri-value="at://did:plc:oxsah26zog3bsd77uvlacjlp/app.bsky.feed.post/3m5qpmjwqyf24" data-bluesky-repost-menu-cid-value="bafyreia5c73vsz4mueohgi4d5gdamhnanjiqwzjryi733btc5bxi44lu3u" data-bluesky-repost-menu-repost-uri-value="" data-bluesky-repost-menu-is-reposted-value="false" data-bluesky-repost-menu-author-handle-value="deconspray.bsky.social" data-bluesky-repost-menu-post-text-value="Flashing content faster than 3x per second can exclude users. My latest piece outlines practical steps to meet “Three Flashes” and build safer, inclusive experiences. What’s your approach? buff.ly/wU8Ge4T #DigitalAccessibility #InclusiveDesign #WCAG #WebStandards #A11y" style="pointer-events:auto; cursor:pointer;"> <button type="button" class="flex items-center gap-1 hover:text-black " data-action="click->bluesky-repost-menu#toggleMenu" data-bluesky-interactions-target="repostButton" title="Repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span data-bluesky-interactions-target="repostCount">1</span> </button> <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Undo repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <span>Quote post</span> </button> </div> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link " data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike" data-bluesky-interactions-uri-param="at://did:plc:oxsah26zog3bsd77uvlacjlp/app.bsky.feed.post/3m5qpmjwqyf24" data-bluesky-interactions-cid-param="bafyreia5c73vsz4mueohgi4d5gdamhnanjiqwzjryi733btc5bxi44lu3u" data-bluesky-interactions-like-uri-param="" data-bluesky-interactions-target="likeButton" title="Like"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg> </button> </div> <div class="flex items-center gap-4 text-gray-500"> <button type="button" class="flex items-center hover:text-black no-card-link" data-controller="share" data-share-url-value="https://www.lightnews.app/bsky/deconspray.bsky.social/post/3m5qpmjwqyf24" data-share-title-value="deconspray on LightNews" data-share-text-value="Flashing content faster than 3x per second can exclude users. My latest piece outlines practical steps to meet “Three Flashes” and build saf…" data-action="click->share#shareSystem" title="Share" style="pointer-events:auto; cursor:pointer;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-options" data-bluesky-options-text-value="Flashing content faster than 3x per second can exclude users. My latest piece outlines practical steps to meet “Three Flashes” and build safer, inclusive experiences. What’s your approach? buff.ly/wU8Ge4T #DigitalAccessibility #InclusiveDesign #WCAG #WebStandards #A11y" data-bluesky-options-author-handle-value="deconspray.bsky.social" data-bluesky-options-author-did-value="did:plc:oxsah26zog3bsd77uvlacjlp" data-bluesky-options-muted-value="false" data-bluesky-options-blocking-uri-value="" data-bluesky-options-own-value="false" data-bluesky-options-delete-url-value="" data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'> <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg> </span> <span>Translate</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg> </span> <span>Copy post text</span> </button> <div class="border-t border-white/10"></div> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg> </span> <span data-bluesky-options-target="muteLabel">Mute account</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg> </span> <span data-bluesky-options-target="blockLabel">Block account</span> </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Prevent navigation when clicking in avatar column area - must run in capture phase before global handler // Only initialize once to avoid duplicate listeners if (!window._avatarColumnNoNavInitialized) { window._avatarColumnNoNavInitialized = true; document.addEventListener('click', function(ev) { try { // Check if target itself has the class OR is inside an element with that class var avatarColumn = (ev.target.classList && ev.target.classList.contains('avatar-column-no-nav')) || (ev.target.closest && ev.target.closest('.avatar-column-no-nav')); if (avatarColumn) { // Only allow navigation if clicking directly on the avatar link itself var isAvatarLink = ev.target.tagName === 'A' && ev.target.href && ev.target.href.indexOf('/author') !== -1; if (!isAvatarLink) { ev.stopPropagation(); ev.stopImmediatePropagation(); ev.preventDefault(); return false; } } } catch(e) {} }, true); // Capture phase - runs BEFORE other handlers } </script> <div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/accessabilly.bsky.social/post/3m4fephtoe22n" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }"> <div class="px-4 py-3"> <div class="flex items-start gap-4"> <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="no-card-link inline-block flex-shrink-0" aria-label="Accessabilly " style="align-self: flex-start;"> <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreifilbrmxks2amq5wqjhud55wby46u73bk5kjorkx2ztuaplpfrrlu" alt="accessabilly.bsky.social" class="w-10 h-10 rounded-full relative z-10" loading="lazy"> </a> </div> <div class="flex-1 min-w-0 -mt-0.5"> <div> <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="truncate hover:underline text-black no-card-link">Accessabilly </a> </div> <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate"> <a href="/author?bsky_handle=accessabilly.bsky.social" class="hover:underline text-gray-500 no-card-link">@accessabilly.bsky.social</a> </div> </div> <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">How do you describe the accessibility profession?<br><br>"A spoilsport for developers that wants to be a mentor." 😍</div> <div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]"> <span>October 30, 2025 at 6:50 AM</span> </div> <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div> <div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions"> <div class="flex items-center justify-between w-[300px] pr-4 no-card-link"> <div class="hidden" data-post-text-uri="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m4fephtoe22n"> How do you describe the accessibility profession?<br><br>"A spoilsport for developers that wants to be a mentor." 😍 </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link" data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" data-bluesky-interactions-reply-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m4fephtoe22n" data-bluesky-interactions-reply-cid-param="bafyreih7eyn2tvizvedglwgbhrz5lkmb6td4vzfag6gza7ty2dv44rbfta" data-bluesky-interactions-reply-root-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m4fephtoe22n" data-bluesky-interactions-reply-root-cid-param="bafyreih7eyn2tvizvedglwgbhrz5lkmb6td4vzfag6gza7ty2dv44rbfta" data-bluesky-interactions-reply-author-name-param="Accessabilly " data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:bcguxnsen6zgljhzbxy4epa2/bafkreifilbrmxks2amq5wqjhud55wby46u73bk5kjorkx2ztuaplpfrrlu" data-bluesky-interactions-post-path-param="/bsky/accessabilly.bsky.social/post/3m4fephtoe22n" title="Reply" style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-repost-menu" data-bluesky-repost-menu-uri-value="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m4fephtoe22n" data-bluesky-repost-menu-cid-value="bafyreih7eyn2tvizvedglwgbhrz5lkmb6td4vzfag6gza7ty2dv44rbfta" data-bluesky-repost-menu-repost-uri-value="" data-bluesky-repost-menu-is-reposted-value="false" data-bluesky-repost-menu-author-handle-value="accessabilly.bsky.social" data-bluesky-repost-menu-post-text-value="How do you describe the accessibility profession? "A spoilsport for developers that wants to be a mentor." 😍" style="pointer-events:auto; cursor:pointer;"> <button type="button" class="flex items-center gap-1 hover:text-black " data-action="click->bluesky-repost-menu#toggleMenu" data-bluesky-interactions-target="repostButton" title="Repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> </button> <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Undo repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <span>Repost</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <span>Quote post</span> </button> </div> </div> <button type="button" class="flex items-center gap-1 hover:text-black no-card-link " data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike" data-bluesky-interactions-uri-param="at://did:plc:bcguxnsen6zgljhzbxy4epa2/app.bsky.feed.post/3m4fephtoe22n" data-bluesky-interactions-cid-param="bafyreih7eyn2tvizvedglwgbhrz5lkmb6td4vzfag6gza7ty2dv44rbfta" data-bluesky-interactions-like-uri-param="" data-bluesky-interactions-target="likeButton" title="Like"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg> </button> </div> <div class="flex items-center gap-4 text-gray-500"> <button type="button" class="flex items-center hover:text-black no-card-link" data-controller="share" data-share-url-value="https://www.lightnews.app/bsky/accessabilly.bsky.social/post/3m4fephtoe22n" data-share-title-value="Accessabilly on LightNews" data-share-text-value="How do you describe the accessibility profession? "A spoilsport for developers that wants to be a mentor." 😍" data-action="click->share#shareSystem" title="Share" style="pointer-events:auto; cursor:pointer;"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> </button> <div class="relative no-card-link" data-controller="bluesky-options" data-bluesky-options-text-value="How do you describe the accessibility profession? "A spoilsport for developers that wants to be a mentor." 😍" data-bluesky-options-author-handle-value="accessabilly.bsky.social" data-bluesky-options-author-did-value="did:plc:bcguxnsen6zgljhzbxy4epa2" data-bluesky-options-muted-value="false" data-bluesky-options-blocking-uri-value="" data-bluesky-options-own-value="false" data-bluesky-options-delete-url-value="" data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'> <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options"> <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu"> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg> </span> <span>Translate</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg> </span> <span>Copy post text</span> </button> <div class="border-t border-white/10"></div> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg> </span> <span data-bluesky-options-target="muteLabel">Mute account</span> </button> <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount"> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg> </span> <span data-bluesky-options-target="blockLabel">Block account</span> </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Prevent navigation when clicking in avatar column area - must run in capture phase before global handler // Only initialize once to avoid duplicate listeners if (!window._avatarColumnNoNavInitialized) { window._avatarColumnNoNavInitialized = true; document.addEventListener('click', function(ev) { try { // Check if target itself has the class OR is inside an element with that class var avatarColumn = (ev.target.classList && ev.target.classList.contains('avatar-column-no-nav')) || (ev.target.closest && ev.target.closest('.avatar-column-no-nav')); if (avatarColumn) { // Only allow navigation if clicking directly on the avatar link itself var isAvatarLink = ev.target.tagName === 'A' && ev.target.href && ev.target.href.indexOf('/author') !== -1; if (!isAvatarLink) { ev.stopPropagation(); ev.stopImmediatePropagation(); ev.preventDefault(); return false; } } } catch(e) {} }, true); // Capture phase - runs BEFORE other handlers } </script> </div> </div> </div> </main>  </div> <div class="hidden md:block"></div> </div>  <div id="cta-footer" class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-black border-t border-gray-200 dark:border-gray-700"> <div class="px-2 pt-3 pb-5"> <div class="flex items-center justify-between gap-3">  <div class="flex items-center gap-2 flex-1 min-w-0"> <a class="inline-flex items-center gap-2" aria-label="LightNews" data-apply-edition="1" href="/"> <img alt="LightNews" class="logo-light h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-light-333069a8.png" /> <img alt="LightNews" class="logo-dark h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" /> <span class="text-base font-semibold text-gray-900 dark:text-white truncate brand-text">LightNews</span> </a> </div>  <div class="flex items-center gap-2 flex-shrink-0"> <button type="button" data-action="click->auth-modal#openSignup" class="btn btn-primary btn-sm whitespace-nowrap">Create account</button> <button type="button" data-action="click->auth-modal#openSignin" class="btn btn-light btn-sm whitespace-nowrap">Sign in</button> </div> </div> </div> </div>  <style> @media (max-width: 767px) { body { padding-bottom: 6.5rem; } } /* Hard guarantee: footer is visible on mobile widths */ @media (max-width: 1023px) { #cta-footer { display: block !important; } } </style>  <div id="signin-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signinModal"> <div class="flex min-h-screen items-center justify-center p-4">  <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>  <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">  <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"> <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button>  <div class="flex justify-center mb-6"> <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" /> <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" /> </div>  <h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign in to LightNews</h2>  <div class="space-y-3 mb-6">  <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/> <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> </svg> Continue with Google </a>  <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/> </svg> Continue with Apple </a>  <button type="button" class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" data-action="click->auth-modal#close click->bluesky-auth#handleSignIn"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/> </svg> Continue with Bluesky </button> </div>  <div class="relative my-6"> <div class="absolute inset-0 flex items-center"> <div class="w-full border-t border-gray-300 dark:border-gray-700"></div> </div> <div class="relative flex justify-center"> <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span> </div> </div>  <form class="space-y-4" action="/auth/email/signin" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="d_jpkye2fzwkodE4kkBxJ0euyhaKJK_H1mVBbsYpnJ3TBvmZG7OJ_FjbiUETHmTOmQrh-bLum4utJVmEPcg5cg" autocomplete="off" /> <div> <label for="signin-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label> <input type="email" name="email" id="signin-email" placeholder="name@domain.com" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <div> <label for="signin-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label> <input type="password" name="password" id="signin-password" placeholder="Your password" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <button type="submit" class="w-full btn btn-primary py-3 font-semibold"> Sign in </button> </form> <div class="mt-3 text-center"> <a class="text-sm text-blue-600 dark:text-blue-400 hover:underline" href="/auth/email/forgot_password">Forgot password?</a> </div>  <div class="mt-8 text-center"> <p class="text-gray-600 dark:text-gray-400 mb-2">Don't have an account?</p> <button data-action="click->auth-modal#switchToSignup" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors"> Sign up for LightNews </button> </div> </div> </div> </div>  <div id="signup-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signupModal"> <div class="flex min-h-screen items-center justify-center p-4">  <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>  <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">  <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"> <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button>  <div class="flex justify-center mb-6"> <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" /> <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" /> </div>  <h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign up to start reading</h2>  <div class="space-y-3 mb-6">  <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/> <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> </svg> Sign up with Google </a>  <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/> </svg> Sign up with Apple </a>  <button type="button" class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" data-action="click->auth-modal#close click->bluesky-auth#handleCreateAccount"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/> </svg> Sign up with Bluesky </button> </div>  <div class="relative my-6"> <div class="absolute inset-0 flex items-center"> <div class="w-full border-t border-gray-300 dark:border-gray-700"></div> </div> <div class="relative flex justify-center"> <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span> </div> </div>  <form class="space-y-4" action="/auth/email/signup" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="_qbxw26DNP-Bu1BbiHlaat4PjGggj-EHVpas42rPs6KYgDk1vX_vg4hdzrHym0PkZRVdERxdrAWvzae9yJ7CWg" autocomplete="off" /> <div> <label for="signup-name" class="block text-black dark:text-white font-semibold text-sm mb-2">Name</label> <input type="text" name="display_name" id="signup-name" placeholder="Your name" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <div> <label for="signup-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label> <input type="email" name="email" id="signup-email" placeholder="name@domain.com" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <div> <label for="signup-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label> <input type="password" name="password" id="signup-password" placeholder="At least 8 characters" minlength="8" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <div> <label for="signup-password-confirmation" class="block text-black dark:text-white font-semibold text-sm mb-2">Confirm password</label> <input type="password" name="password_confirmation" id="signup-password-confirmation" placeholder="Repeat your password" minlength="8" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" /> </div> <button type="submit" class="w-full btn btn-primary py-3 font-semibold"> Create account </button> </form>  <div class="mt-8 text-center"> <p class="text-gray-600 dark:text-gray-400 mb-2">Already have an account?</p> <button data-action="click->auth-modal#switchToSignin" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors"> Sign in </button> </div> </div> </div> </div> <div data-controller="modal" data-reply-modal="true" id="global-reply-modal" data-viewer-avatar-url="" data-viewer-display-name=""> <div class="hidden fixed inset-0 z-50 overflow-y-auto" data-modal-target="panel" data-viewer-avatar-url="" data-viewer-display-name=""> <div class="flex min-h-screen items-start justify-center pt-4 md:pt-20">  <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->modal#close"></div>  <div class="relative bg-[#1e3a5f] rounded-2xl w-full max-w-xl mx-4 shadow-2xl" data-action="click->modal#stop">  <div class="flex items-center justify-between px-4 py-3 border-b border-gray-600"> <button type="button" class="text-blue-400 text-base font-medium" data-action="click->modal#close">Cancel</button> <button type="button" id="modal-reply-submit" class="px-5 py-1.5 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"> Reply </button> </div>  <div class="px-4 py-3 border-b border-gray-600 modal-reply-preview"> <div class="flex items-start gap-3"> <img src="" alt="" class="modal-reply-author-avatar w-10 h-10 rounded-full flex-shrink-0 hidden"> <div class="modal-reply-author-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0"></div> <div class="flex-1 min-w-0"> <div class="font-semibold text-white text-base modal-reply-author-name"> </div> <div class="text-gray-300 text-sm line-clamp-3 modal-reply-post-text"> </div> </div> </div> </div>  <div class="px-4 py-3"> <div class="flex items-start gap-3"> <img src="" alt="You" class="modal-viewer-avatar w-10 h-10 rounded-full flex-shrink-0 hidden"> <div class="modal-viewer-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0 "></div> <div class="flex-1 min-w-0"> <textarea id="modal-reply-text" placeholder="Write your reply" rows="8" maxlength="300" class="w-full px-0 py-2 bg-transparent text-white text-base placeholder-gray-400 resize-none focus:outline-none border-0" data-reply-uri="" data-reply-cid="" data-root-uri="" data-root-cid="" data-mode="reply" data-embed="" ></textarea> </div> </div>  <div class="modal-quote-preview hidden mt-3 p-3 border border-gray-600 rounded-xl bg-[#152642]"> <div class="flex items-start gap-3"> <img src="" alt="" class="modal-quote-author-avatar w-8 h-8 rounded-full flex-shrink-0 hidden"> <div class="modal-quote-author-avatar-placeholder w-8 h-8 rounded-full bg-gray-400 flex-shrink-0"></div> <div class="flex-1 min-w-0"> <div class="font-semibold text-white text-sm modal-quote-author-name"></div> <div class="text-gray-300 text-sm mt-1 modal-quote-post-text"></div> </div> </div> </div> <input type="file" id="modal-attachment-input" accept="image/*" class="hidden" multiple> <div id="modal-attachment-preview" class="mt-3 hidden"> <div class="flex flex-wrap gap-3" id="modal-attachment-preview-list"></div> </div> </div>  <div class="px-4 py-3 border-t border-gray-600 flex items-center justify-between"> <div class="flex items-center gap-3"> <button type="button" class="text-blue-500 hover:text-blue-400" id="modal-attachment-button"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> </button> <button type="button" class="text-blue-500 hover:text-blue-400" id="modal-gif-button"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><text x="3" y="18" font-family="Arial" font-size="14" font-weight="bold">GIF</text></svg> </button> </div> <div class="flex items-center gap-3 text-sm"> <span class="text-blue-400">English</span> <span class="text-gray-400" id="modal-reply-count">300</span> </div> </div> </div> </div> </div> </div> <script> (function(){ function setupReplyModal(){ var textarea = document.getElementById('modal-reply-text'); var submitBtn = document.getElementById('modal-reply-submit'); var countEl = document.getElementById('modal-reply-count'); var attachmentButton = document.getElementById('modal-attachment-button'); var gifButton = document.getElementById('modal-gif-button'); var attachmentInput = document.getElementById('modal-attachment-input'); var attachmentPreview = document.getElementById('modal-attachment-preview'); var attachmentList = document.getElementById('modal-attachment-preview-list'); if (!textarea || !submitBtn || !countEl) { return; } if (textarea.dataset.replyModalBound === '1') { return; } textarea.dataset.replyModalBound = '1'; var attachments = []; var currentEmbed = null; var isUploadingAttachment = false; var MAX_ATTACHMENTS = 4; function updateCount(){ var length = textarea.value.length; var remaining = 300 - length; countEl.textContent = remaining.toString(); countEl.classList.toggle('text-red-400', remaining < 0); countEl.classList.toggle('text-gray-400', remaining >= 0); submitBtn.disabled = ((length === 0) && attachments.length === 0) || length > 300; } function updateEmbedPayload() { if (!attachments.length) { currentEmbed = null; textarea.removeAttribute('data-embed'); return; } currentEmbed = { "$type": "app.bsky.embed.images", "images": attachments.map(function(item){ return { "alt": item.alt || 'Image', "image": item.blob }; }) }; textarea.dataset.embed = JSON.stringify(currentEmbed); } function refreshAttachmentPreview() { if (!attachmentList || !attachmentPreview) { return; } attachmentList.innerHTML = ''; attachments.forEach(function(item, index){ var wrapper = document.createElement('div'); wrapper.className = 'relative w-20 h-20 rounded-xl overflow-hidden'; var img = document.createElement('img'); img.src = item.previewUrl; img.alt = item.alt || 'Attachment'; img.className = 'object-cover w-full h-full'; wrapper.appendChild(img); var removeBtn = document.createElement('button'); removeBtn.type = 'button'; removeBtn.className = 'absolute top-1 right-1 bg-black/70 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs'; removeBtn.innerHTML = '×'; removeBtn.addEventListener('click', function(){ removeAttachment(index); }); wrapper.appendChild(removeBtn); attachmentList.appendChild(wrapper); }); if (attachments.length) { attachmentPreview.classList.remove('hidden'); } else { attachmentPreview.classList.add('hidden'); } if (attachmentButton) { attachmentButton.disabled = attachments.length >= MAX_ATTACHMENTS || isUploadingAttachment; attachmentButton.classList.toggle('opacity-50', attachmentButton.disabled); attachmentButton.classList.toggle('pointer-events-none', attachmentButton.disabled); } if (gifButton) { gifButton.disabled = attachments.length >= MAX_ATTACHMENTS || isUploadingAttachment; gifButton.classList.toggle('opacity-50', gifButton.disabled); gifButton.classList.toggle('pointer-events-none', gifButton.disabled); } updateCount(); } function removeAttachment(index) { if (index < 0 || index >= attachments.length) { return; } var removed = attachments.splice(index, 1)[0]; if (removed && removed.previewUrl) { try { URL.revokeObjectURL(removed.previewUrl); } catch (_) {} } updateEmbedPayload(); refreshAttachmentPreview(); } function setAttachmentUploading(state) { isUploadingAttachment = state; refreshAttachmentPreview(); } async function uploadFile(file) { if (!file || !attachmentInput) { return; } if (!file.type.match(/^image\//)) { alert('Only image uploads are supported right now.'); return; } if (attachments.length >= MAX_ATTACHMENTS) { alert('You can attach up to ' + MAX_ATTACHMENTS + ' images.'); return; } if (file.size > 976 * 1024) { alert('Images must be 976KB or smaller.'); return; } setAttachmentUploading(true); var formData = new FormData(); formData.append('file', file); formData.append('alt', file.name || 'Image'); try { var response = await fetch('/api/bluesky/uploads', { method: 'POST', headers: { 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') || {}).content || '', 'Accept': 'application/json' }, credentials: 'same-origin', body: formData }); if (!response.ok) { var errorText = await response.text(); var message = 'Upload failed'; try { var parsed = JSON.parse(errorText); message = parsed.error || message; } catch (_) { if (errorText && errorText.length < 200) { message = errorText; } } throw new Error(message); } var data = await response.json(); if (!data || !data.success || !data.blob) { throw new Error((data && data.error) || 'Upload failed'); } var previewUrl = URL.createObjectURL(file); attachments.push({ blob: data.blob, alt: data.alt || file.name || 'Image', previewUrl: previewUrl }); updateEmbedPayload(); refreshAttachmentPreview(); } catch (error) { console.error('Attachment upload error:', error); alert(error && error.message ? error.message : 'Unable to upload image right now.'); } finally { setAttachmentUploading(false); if (attachmentInput) { attachmentInput.value = ''; } } } function handleFileSelection(files) { if (!files || !files.length) { return; } var remaining = MAX_ATTACHMENTS - attachments.length; Array.from(files).slice(0, remaining).forEach(function(file){ uploadFile(file); }); } if (attachmentButton && attachmentInput) { attachmentButton.addEventListener('click', function(e){ e.preventDefault(); if (isUploadingAttachment || attachments.length >= MAX_ATTACHMENTS) { return; } attachmentInput.setAttribute('accept', 'image/*'); attachmentInput.click(); }); } if (gifButton && attachmentInput) { gifButton.addEventListener('click', function(e){ e.preventDefault(); if (isUploadingAttachment || attachments.length >= MAX_ATTACHMENTS) { return; } attachmentInput.setAttribute('accept', 'image/gif'); attachmentInput.click(); }); } if (attachmentInput) { attachmentInput.addEventListener('change', function(e){ handleFileSelection(e.target.files); }); } refreshAttachmentPreview(); textarea.addEventListener('input', updateCount); updateCount(); submitBtn.addEventListener('click', async function(e){ e.preventDefault(); var text = textarea.value.trim(); if ((text.length === 0 && attachments.length === 0) || text.length > 300) { return; } var replyUri = textarea.dataset.replyUri; var replyCid = textarea.dataset.replyCid; var rootUri = textarea.dataset.rootUri; var rootCid = textarea.dataset.rootCid; var mode = textarea.dataset.mode || 'reply'; if (mode === 'reply' && (!replyUri || !replyCid)) { return; } submitBtn.disabled = true; var originalText = submitBtn.textContent; submitBtn.textContent = mode === 'post' ? 'Posting...' : 'Replying...'; try { var endpoint, payload; if (mode === 'post') { endpoint = '/api/bluesky/posts'; payload = { text: text }; } else { endpoint = '/api/bluesky/replies'; payload = { text: text, reply_to_uri: replyUri, reply_to_cid: replyCid, root_uri: rootUri, root_cid: rootCid }; } // Attach quote embed if present (for quote posts) - check first var quoteEmbed = textarea.dataset.quoteEmbed; if (quoteEmbed && mode === 'post' && !currentEmbed) { try { payload.embed = JSON.parse(quoteEmbed); console.log('Added quote embed:', payload.embed); } catch (e) { console.error('Failed to parse quote embed', e); } } // Attach image embed if present (overrides quote for now) if (currentEmbed) { payload.embed = currentEmbed; console.log('Added image embed:', payload.embed); } console.log('Submitting payload:', JSON.stringify(payload).substring(0, 300)); var response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') || {}).content || '' }, credentials: 'same-origin', body: JSON.stringify(payload) }); console.log('Reply response status:', response.status); if (!response.ok) { var errorText = await response.text(); var errorMessage = 'Network error. Please try again.'; var settingsUrl = null; try { var errorData = JSON.parse(errorText); errorMessage = errorData.error || errorMessage; settingsUrl = errorData.settings_url || null; } catch (e2) { if (errorText && errorText.length < 200) { errorMessage = errorText; } else { errorMessage = 'HTTP ' + response.status + ': ' + response.statusText; } } console.error('Error response:', response.status, errorMessage); if (response.status === 401 && settingsUrl) { if (confirm(errorMessage + '\n\nWould you like to go to Settings now?')) { window.location.href = settingsUrl; return; } } else { alert(errorMessage); } submitBtn.disabled = false; submitBtn.textContent = originalText; return; } var data = await response.json(); console.log('Reply response data:', data); if (data.success) { window.location.reload(); } else { alert(data.error || (mode === 'post' ? 'Failed to create post' : 'Failed to post reply')); submitBtn.disabled = false; submitBtn.textContent = originalText; } } catch (error) { console.error('Reply error:', error); alert(error && error.message ? error.message : 'Network error. Please try again.'); submitBtn.disabled = false; submitBtn.textContent = originalText; } }); } function openReplyIfRequested(){ try{ var qs = new URLSearchParams(window.location.search); if(qs.get('reply') === '1'){ var panel = document.querySelector('[data-modal-target="panel"]'); if(panel){ panel.classList.remove('hidden'); document.documentElement.classList.add('overflow-hidden'); document.body.classList.add('overflow-hidden'); var ta = document.getElementById('modal-reply-text'); if(ta){ ta.focus(); } } } }catch(e){} } function initReplyModal(){ setupReplyModal(); openReplyIfRequested(); } document.addEventListener('turbo:load', function(){ setTimeout(initReplyModal, 0); }); if (document.readyState === 'complete' || document.readyState === 'interactive') { setTimeout(initReplyModal, 0); } else { document.addEventListener('DOMContentLoaded', initReplyModal); } })(); </script> <script> // Sanitize any legacy nav=1 param from links and the current URL document.addEventListener('click', function(ev){ try{ var a = ev.target.closest && ev.target.closest('a'); if(!a) return; var url = new URL(a.href, location.origin); if(url.searchParams.has('nav')){ url.searchParams.delete('nav'); a.setAttribute('href', url.pathname + (url.searchParams.toString() ? ('?' + url.searchParams.toString()) : '') + url.hash); } }catch(e){} }, true); document.addEventListener('turbo:load', function(){ try{ var url = new URL(location.href); if(url.searchParams.has('nav')){ url.searchParams.delete('nav'); var cleaned = url.pathname + (url.searchParams.toString() ? ('?' + url.searchParams.toString()) : '') + url.hash; history.replaceState(null, '', cleaned); } }catch(e){} }); </script> <script> function loadTwitterEmbeds() { try { if (window.twttr && window.twttr.widgets) { window.twttr.widgets.load(); return true; } } catch(e) {} return false; } document.addEventListener("turbo:load", function() { if (!loadTwitterEmbeds()) { var tries = 0; var max = 10; (function retry(){ if (loadTwitterEmbeds() || ++tries > max) return; setTimeout(retry, 400); })(); } // Re-hydrate Bluesky embeds after Turbo navigation by reinjecting the script try { var s = document.createElement("script"); s.src = "https://embed.bsky.app/static/embed.js?ts=" + Date.now(); s.async = true; s.onload = function(){ try { s.remove(); } catch(_){} }; document.body.appendChild(s); } catch (e) {} }); </script> <script> // Decorate links to lists (home/sections) with stored edition at click time (web only) document.addEventListener('click', function(ev){ try{ var a = ev.target.closest && ev.target.closest('a[data-apply-edition="1"]'); if(!a) return; var pref = localStorage.getItem('preferredEdition'); if(pref && pref !== 'global'){ var url = new URL(a.href, location.origin); url.searchParams.set('edition', pref); if(pref === 'eu'){ url.searchParams.set('signal_scope', 'expanded'); } else { url.searchParams.delete('signal_scope'); } if (url.toString() !== a.href) { // Update href and let the browser/Turbo handle the navigation once a.setAttribute('href', url.pathname + '?' + url.searchParams.toString() + url.hash); } } else { var url2 = new URL(a.href, location.origin); if(url2.searchParams.has('edition') || url2.searchParams.has('signal_scope')){ url2.searchParams.delete('edition'); url2.searchParams.delete('signal_scope'); var newHref = url2.pathname + (url2.searchParams.toString() ? ('?' + url2.searchParams.toString()) : '') + url2.hash; a.setAttribute('href', newHref); } } }catch(e){} }, true); </script> <script> // Track last list path (home or sections) for back navigation on digest pages document.addEventListener('turbo:load', function(){ try{ var path = location.pathname; if(path === '/' || path.indexOf('/sections/') === 0){ var url = new URL(location.href); var stored = path + (url.searchParams.toString() ? ('?' + url.searchParams.toString()) : ''); sessionStorage.setItem('lastListPath', stored); sessionStorage.setItem('lastNonPost', stored); } else if(path === '/trending'){ sessionStorage.setItem('lastTrendingPath', '/trending'); sessionStorage.setItem('lastNonPost', '/trending'); } else if(path.indexOf('/digests/') === 0){ // Keep lastDigestPath fresh when on digest pages to avoid stale fallbacks sessionStorage.setItem('lastDigestPath', path + location.search); sessionStorage.setItem('lastNonPost', path + location.search); } }catch(e){} }); </script> <script> // Remove any l=... language parameter from digest links to unify cache keys document.addEventListener('click', function(ev){ try{ var a = ev.target.closest && ev.target.closest('a[href^="/digests/"]'); if(!a) return; var url = new URL(a.href, location.origin); if(url.searchParams.has('l')){ url.searchParams.delete('l'); var newHref = url.pathname + (url.searchParams.toString() ? ('?' + url.searchParams.toString()) : '') + url.hash; a.setAttribute('href', newHref); } }catch(e){} }, true); </script> <script> // Remember previous page before navigating to a local Bluesky post via anchor document.addEventListener('click', function(ev){ try{ var a = ev.target.closest && ev.target.closest('a[href^="/bsky/"]'); if(!a) return; var prev = location.pathname + location.search; sessionStorage.setItem('prevPage', prev); sessionStorage.setItem('lastPostPath', location.pathname); }catch(e){} }, true); </script> <script> // Remember previous page before navigating to an author profile document.addEventListener('click', function(ev){ try{ // Match both /author and /author/... and /author?... var a = ev.target.closest && (ev.target.closest('a[href^="/author/"]') || ev.target.closest('a[href^="/author"]')); if(!a) return; var prev = location.pathname + location.search; sessionStorage.setItem('prevPage', prev); if(location.pathname.indexOf('/author/') !== 0){ sessionStorage.setItem('lastNonAuthor', prev); } sessionStorage.setItem('entrySource','author'); }catch(e){} }, true); </script> <script> // Also sanitize card-clickable data-href: strip l=... if present document.addEventListener('click', function(ev){ try{ var card = ev.target.closest && ev.target.closest('.card-clickable'); if(!card) return; var href = (card.getAttribute('data-href') || '').trim(); if(!href) return; // Strip accidental wrapping quotes if((href[0]==='"' && href[href.length-1]==='"') || (href[0]==="'" && href[href.length-1]==="'")){ href = href.slice(1,-1); } var url = new URL(href, location.origin); if(url.searchParams.has('l')){ url.searchParams.delete('l'); var newHref = url.pathname + (url.searchParams.toString() ? ('?' + url.searchParams.toString()) : '') + url.hash; card.setAttribute('data-href', newHref); } // Navigate on card click unless clicking an inner actionable link var isInlineVideo = ev.target.closest && ev.target.closest('.inline-video'); // Tag nested-card navigations so back button can return to previous post instead of thread parent var inNested = ev.target.closest && ev.target.closest('.bsky-nested, .nested-bsky, .bluesky-nested'); // Don't navigate if clicking in avatar column area (left side of post with avatar and thread lines) // Check if target itself has the class OR is inside an element with that class var isAvatarColumn = (ev.target.classList && ev.target.classList.contains('avatar-column-no-nav')) || (ev.target.closest && ev.target.closest('.avatar-column-no-nav')); if(!ev.target.closest('.no-card-link') && !isInlineVideo && !isAvatarColumn){ ev.preventDefault(); var targetHref = (card.getAttribute('data-href') || href).trim(); if((targetHref[0]==='"' && targetHref[targetHref.length-1]==='"') || (targetHref[0]==="'" && targetHref[targetHref.length-1]==="'")){ targetHref = targetHref.slice(1,-1); } try{ // If navigating from a digest page to a post, remember this digest for back navigation if(location.pathname.indexOf('/digests/') === 0){ sessionStorage.setItem('lastDigestPath', location.pathname + location.search); sessionStorage.setItem('entrySource','digest'); } else if(location.pathname.indexOf('/bsky/') === 0){ // Navigating from a post to another post (e.g., reply): mark source as post sessionStorage.setItem('entrySource', inNested ? 'nested' : 'post'); } // Always remember the immediate previous page when going to a post if(targetHref.indexOf('/bsky/') === 0){ var prevp = location.pathname + location.search; sessionStorage.setItem('prevPage', prevp); sessionStorage.setItem('lastPostPath', location.pathname); } }catch(e){} if(window.Turbo && Turbo.visit){ Turbo.visit(targetHref); } else { window.location.href = targetHref; } } }catch(e){} }, true); </script> <script> // Keyboard activation for card-clickable elements document.addEventListener('keydown', function(ev){ try{ if(ev.key !== 'Enter' && ev.key !== ' ') return; var card = ev.target.closest && ev.target.closest('.card-clickable'); if(!card) return; var isInlineVideo = ev.target.closest && ev.target.closest('.inline-video'); if(isInlineVideo) return; var href = (card.getAttribute('data-href') || '').trim(); if(!href) return; if((href[0]==='"' && href[href.length-1]==='"') || (href[0]==="'" && href[href.length-1]==="'")){ href = href.slice(1,-1); } ev.preventDefault(); if(window.Turbo && Turbo.visit){ Turbo.visit(href); } else { window.location.href = href; } }catch(e){} }, true); </script> <script> // Sync stored edition from current URL on list pages (no navigation) // Only update when the URL explicitly includes an edition param; otherwise keep prior preference. document.addEventListener("turbo:load", function(){ try{ var onDigest = location.pathname.indexOf('/digests/') === 0; if(onDigest) return; var url = new URL(location.href); if(url.searchParams.has('edition')){ var ed = url.searchParams.get('edition'); localStorage.setItem('preferredEdition', (ed && ed !== 'global') ? ed : 'global'); } else if(url.searchParams.has('signal_scope')){ localStorage.setItem('preferredEdition', 'global'); } }catch(e){} }); </script> <div data-controller="modal" data-bluesky-auth-target="modal" id="bluesky-pds-modal"> <div class="hidden fixed inset-0 z-50 overflow-y-auto" data-modal-target="panel"> <div class="flex min-h-screen items-center justify-center p-4"> <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->modal#close"></div> <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl" data-action="click->modal#stop"> <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-black dark:hover:text-white transition" data-action="click->modal#close"> <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> <div class="flex justify-center mb-6"> <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" /> <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" /> </div> <h2 class="text-2xl font-bold text-center text-black dark:text-white mb-3">Connect Bluesky</h2> <p class="text-center text-sm text-gray-600 dark:text-gray-300 mb-6"> Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed. </p> <div class="mb-4 hidden text-sm text-red-500" data-bluesky-auth-target="error"></div> <form data-bluesky-auth-target="form" class="space-y-4" action="/auth/bluesky/pds_session" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="zvXHuc1PQmX5lSq-Y4aAmJop0rMlxAZmidn7VdrTWPTYUDi84JLpfj7Rn-5OXHy0xPRRhDFyl6gfLu1vc2LFMQ" autocomplete="off" /> <div> <label class="block text-sm font-semibold text-black dark:text-white mb-2" for="identifier">Handle or email</label> <input placeholder="@you.bsky.social" autocomplete="username" required="required" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" data-bluesky-auth-target="identifierInput" type="text" name="identifier" id="identifier" /> </div> <div> <label class="block text-sm font-semibold text-black dark:text-white mb-2" for="password">App password</label> <input placeholder="xxxx-xxxx-xxxx-xxxx" autocomplete="current-password" required="required" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" data-bluesky-auth-target="passwordInput" type="password" name="password" id="password" /> </div> <div class="hidden" data-bluesky-auth-target="tfaField"> <label class="block text-sm font-semibold text-black dark:text-white mb-2" for="auth_factor_token">2FA Code</label> <input placeholder="123456" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" data-bluesky-auth-target="tfaInput" type="text" name="auth_factor_token" id="auth_factor_token" /> </div> <button type="submit" class="w-full btn btn-primary py-3 font-semibold" data-bluesky-auth-target="submitButton"> Connect Bluesky </button> </form> <p class="mt-5 text-xs text-center text-gray-500 dark:text-gray-400"> Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one. </p> </div> </div> </div> </div>  <div id="bluesky-oauth-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-bluesky-auth-target="oauthModal"> <div class="flex min-h-screen items-center justify-center p-4">  <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->bluesky-auth#closeOAuthModal"></div>  <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl" data-action="click->bluesky-auth#stopPropagation">  <button data-action="click->bluesky-auth#closeOAuthModal" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"> <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button>  <div class="flex justify-center mb-6"> <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" /> <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" /> </div>  <h2 class="text-black dark:text-white text-3xl font-bold text-center mb-3">Connect with Bluesky</h2>  <p class="text-center text-base text-gray-600 dark:text-gray-300 mb-6"> Sign in with your Bluesky account to unlock posting, likes, and your Following feed. </p>  <div class="space-y-3">  <button type="button" data-action="click->bluesky-auth#handleSignIn" data-bluesky-auth-target="signinButton" class="bsky-signin-btn w-full flex items-center justify-center gap-3 px-6 py-3 bg-gray-600 hover:bg-gray-700 font-semibold rounded transition-colors border border-gray-600 text-white"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="color: #1185fe !important;"> <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/> </svg> <span>Sign in</span> </button>  <button type="button" data-action="click->bluesky-auth#handleCreateAccount" data-bluesky-auth-target="signupButton" class="bsky-signup-btn w-full flex items-center justify-center gap-3 px-6 py-3 bg-blue-600 hover:bg-blue-700 font-semibold rounded transition-colors border border-blue-600" style="color: #ffffff !important;"> <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="color: #ffffff !important;"> <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="currentColor"/> </svg> <span style="color: #ffffff !important;">Create an account</span> </button> </div> </div> </div> </div> <div data-controller="cookie-consent" data-turbo-permanent id="cookie-consent-banner"> <div data-cookie-consent-target="banner" class="hidden fixed bottom-0 inset-x-0 z-[9999] p-4 sm:p-6"> <div class="mx-auto max-w-3xl rounded-xl bg-white shadow-2xl ring-1 ring-gray-200 p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"> <div class="flex-1 text-sm text-gray-700 leading-relaxed"> We use cookies to analyze site traffic and improve your experience. You can accept or reject non-essential cookies. </div> <div class="flex gap-2 shrink-0 w-full sm:w-auto"> <button data-action="cookie-consent#reject" class="flex-1 sm:flex-none px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> Reject </button> <button data-action="cookie-consent#accept" class="flex-1 sm:flex-none px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition"> Accept </button> </div> </div> </div> </div> </body> </html>

Add to Home Screen

News, ranked by scholars