Ricardo
12454749ad
27 issues fixed from multi-dimensional code review (4 Critical, 6 High, 11 Medium, 6 Low): Security (Critical): - Escape HTML in OAuth authorization page to prevent XSS (C1) - Add CSRF protection to OAuth authorize flow (C2) - Replace bypassable regex sanitizer with sanitize-html library (C3) - Enforce OAuth scopes on all Mastodon API routes (C4) Security (Medium/Low): - Fix SSRF via DNS resolution before private IP check (M1) - Add rate limiting to API, auth, and app registration endpoints (M2) - Validate redirect_uri on POST /oauth/authorize (M4) - Fix custom emoji URL injection with scheme validation + escaping (M5) - Remove data: scheme from allowed image sources (L6) - Add access token expiry (1hr) and refresh token rotation (90d) (M3) - Hash client secrets before storage (L3) Architecture: - Extract batch-broadcast.js — shared delivery logic (H1a) - Extract init-indexes.js — MongoDB index creation (H1b) - Extract syndicator.js — syndication logic (H1c) - Create federation-actions.js facade for controllers (M6) - index.js reduced from 1810 to ~1169 lines (35%) Performance: - Cache moderation data with 30s TTL + write invalidation (H6) - Increase inbox queue throughput to 10 items/sec (H5) - Make account enrichment non-blocking with fire-and-forget (H4) - Remove ephemeral getReplies/getLikes/getShares from ingest (M11) - Fix LRU caches to use true LRU eviction (L1) - Fix N+1 backfill queries with batch $in lookup (L2) UI/UX: - Split 3441-line reader.css into 15 feature-scoped files (H2) - Extract inline Alpine.js interaction component (H3) - Reduce sidebar navigation from 7 to 3 items (M7) - Add ARIA live regions for dynamic content updates (M8) - Extract shared CW/non-CW content partial (M9) - Document form handling pattern convention (M10) - Add accessible labels to functional emoji icons (L4) - Convert profile editor to Alpine.js (L5) Audit: documentation-central/audits/2026-03-24-activitypub-code-review.md Plan: documentation-central/plans/2026-03-24-activitypub-audit-fixes.md
378 lines
8.3 KiB
CSS
378 lines
8.3 KiB
CSS
/* ==========================================================================
|
|
Item Card — Base
|
|
========================================================================== */
|
|
|
|
.ap-card {
|
|
background: var(--color-offset);
|
|
border: var(--border-width-thin) solid var(--color-outline);
|
|
border-left: 3px solid var(--color-outline);
|
|
border-radius: var(--border-radius-small);
|
|
overflow: hidden;
|
|
padding: var(--space-m);
|
|
box-shadow: 0 1px 2px hsl(var(--tint-neutral) 10% / 0.04);
|
|
transition:
|
|
box-shadow 0.2s ease,
|
|
border-color 0.2s ease;
|
|
}
|
|
|
|
.ap-card:hover {
|
|
border-color: var(--color-outline-variant);
|
|
border-left-color: var(--color-outline-variant);
|
|
box-shadow: 0 2px 8px hsl(var(--tint-neutral) 10% / 0.08);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Item Card — Post Type Differentiation
|
|
========================================================================== */
|
|
|
|
/* Notes: default purple-ish accent (the most common type) */
|
|
.ap-card--note {
|
|
border-left-color: var(--color-purple45);
|
|
}
|
|
|
|
.ap-card--note:hover {
|
|
border-left-color: var(--color-purple45);
|
|
}
|
|
|
|
/* Articles: green accent (long-form content stands out) */
|
|
.ap-card--article {
|
|
border-left-color: var(--color-green50);
|
|
}
|
|
|
|
.ap-card--article:hover {
|
|
border-left-color: var(--color-green50);
|
|
}
|
|
|
|
/* Boosts: yellow accent (shared content) */
|
|
.ap-card--boost {
|
|
border-left-color: var(--color-yellow50);
|
|
}
|
|
|
|
.ap-card--boost:hover {
|
|
border-left-color: var(--color-yellow50);
|
|
}
|
|
|
|
/* Replies: blue accent (via primary color) */
|
|
.ap-card--reply {
|
|
border-left-color: var(--color-primary);
|
|
}
|
|
|
|
.ap-card--reply:hover {
|
|
border-left-color: var(--color-primary);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Boost Header
|
|
========================================================================== */
|
|
|
|
.ap-card__boost {
|
|
color: var(--color-on-offset);
|
|
font-size: var(--font-size-s);
|
|
margin-bottom: var(--space-s);
|
|
padding-bottom: var(--space-xs);
|
|
}
|
|
|
|
.ap-card__boost a {
|
|
color: var(--color-on-offset);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ap-card__boost a:hover {
|
|
color: var(--color-on-background);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Reply Context
|
|
========================================================================== */
|
|
|
|
.ap-card__reply-to {
|
|
color: var(--color-on-offset);
|
|
font-size: var(--font-size-s);
|
|
margin-bottom: var(--space-s);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ap-card__reply-to a {
|
|
color: var(--color-primary-on-background);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ap-card__reply-to a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Author Header
|
|
========================================================================== */
|
|
|
|
.ap-card__author {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: var(--space-s);
|
|
margin-bottom: var(--space-s);
|
|
}
|
|
|
|
.ap-card__avatar-wrap {
|
|
flex-shrink: 0;
|
|
height: 44px;
|
|
position: relative;
|
|
width: 44px;
|
|
}
|
|
|
|
.ap-card__avatar {
|
|
border: var(--border-width-thin) solid var(--color-outline);
|
|
border-radius: 50%;
|
|
height: 44px;
|
|
object-fit: cover;
|
|
width: 44px;
|
|
}
|
|
|
|
.ap-card__avatar-wrap > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ap-card__avatar--default {
|
|
align-items: center;
|
|
background: var(--color-offset-variant);
|
|
color: var(--color-on-offset);
|
|
display: inline-flex;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ap-card__author-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ap-card__author-name {
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ap-card__author-name a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ap-card__author-name a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.ap-card__bot-badge {
|
|
display: inline-block;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 0.15em 0.35em;
|
|
margin-left: 0.3em;
|
|
border: var(--border-width-thin) solid var(--color-on-offset);
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--color-on-offset);
|
|
vertical-align: middle;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.ap-card__author-handle {
|
|
color: var(--color-on-offset);
|
|
font-size: var(--font-size-s);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ap-card__timestamp {
|
|
color: var(--color-on-offset);
|
|
flex-shrink: 0;
|
|
font-size: var(--font-size-s);
|
|
}
|
|
|
|
.ap-card__edited {
|
|
font-size: var(--font-size-xs);
|
|
margin-left: 0.2em;
|
|
}
|
|
|
|
.ap-card__visibility {
|
|
font-size: var(--font-size-xs);
|
|
margin-left: 0.3em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ap-card__timestamp-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.ap-card__timestamp-link:hover {
|
|
text-decoration: underline;
|
|
color: var(--color-primary-on-background);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Post Title (Articles)
|
|
========================================================================== */
|
|
|
|
.ap-card__title {
|
|
font-size: var(--font-size-l);
|
|
font-weight: 600;
|
|
line-height: var(--line-height-tight);
|
|
margin-bottom: var(--space-s);
|
|
}
|
|
|
|
.ap-card__title a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ap-card__title a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Content
|
|
========================================================================== */
|
|
|
|
.ap-card__content {
|
|
color: var(--color-on-background);
|
|
line-height: calc(4 / 3 * 1em);
|
|
margin-bottom: var(--space-s);
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.ap-card__content a {
|
|
color: var(--color-primary-on-background);
|
|
}
|
|
|
|
.ap-card__content p {
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
|
|
.ap-card__content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ap-card__content blockquote {
|
|
border-left: var(--border-width-thickest) solid var(--color-outline);
|
|
margin: var(--space-s) 0;
|
|
padding-left: var(--space-m);
|
|
}
|
|
|
|
.ap-card__content pre {
|
|
background: var(--color-offset-variant);
|
|
border-radius: var(--border-radius-small);
|
|
overflow-x: auto;
|
|
padding: var(--space-s);
|
|
}
|
|
|
|
.ap-card__content code {
|
|
background: var(--color-offset-variant);
|
|
border-radius: var(--border-radius-small);
|
|
font-size: 0.9em;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
.ap-card__content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.ap-card__content img {
|
|
border-radius: var(--border-radius-small);
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* @mentions — keep inline, style as subtle links */
|
|
.ap-card__content .h-card {
|
|
display: inline;
|
|
}
|
|
|
|
.ap-card__content .h-card a,
|
|
.ap-card__content a.u-url.mention {
|
|
display: inline;
|
|
color: var(--color-on-offset);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ap-card__content .h-card a span,
|
|
.ap-card__content a.u-url.mention span {
|
|
display: inline;
|
|
}
|
|
|
|
.ap-card__content .h-card a:hover,
|
|
.ap-card__content a.u-url.mention:hover {
|
|
color: var(--color-primary-on-background);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Hashtag mentions — keep inline, subtle styling */
|
|
.ap-card__content a.mention.hashtag {
|
|
display: inline;
|
|
color: var(--color-on-offset);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ap-card__content a.mention.hashtag span {
|
|
display: inline;
|
|
}
|
|
|
|
.ap-card__content a.mention.hashtag:hover {
|
|
color: var(--color-primary-on-background);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Mastodon's invisible/ellipsis spans for long URLs */
|
|
.ap-card__content .invisible {
|
|
display: none;
|
|
}
|
|
|
|
.ap-card__content .ellipsis::after {
|
|
content: "…";
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Content Warning
|
|
========================================================================== */
|
|
|
|
.ap-card__cw {
|
|
margin-bottom: var(--space-s);
|
|
}
|
|
|
|
.ap-card__cw-toggle {
|
|
background: var(--color-offset-variant);
|
|
border: var(--border-width-thin) solid var(--color-outline);
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--color-on-background);
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: var(--font-size-s);
|
|
padding: var(--space-s) var(--space-m);
|
|
text-align: left;
|
|
transition: background 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.ap-card__cw-toggle:hover {
|
|
background: var(--color-offset-variant-darker);
|
|
}
|