Files
indiekit-endpoint-activitypub/assets/css/base.css
Ricardo 12454749ad fix: comprehensive security, performance, and architecture audit fixes
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
2026-03-25 07:41:20 +01:00

145 lines
3.4 KiB
CSS

/**
* ActivityPub Reader Styles
* Card-based layout inspired by Phanpy/Elk
* Uses Indiekit CSS custom properties for automatic dark mode support
*/
/* ==========================================================================
Breadcrumb Navigation
========================================================================== */
.ap-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-m);
font-size: var(--font-size-s);
color: var(--color-on-offset);
}
.ap-breadcrumb a {
color: var(--color-primary-on-background);
text-decoration: none;
}
.ap-breadcrumb a:hover {
text-decoration: underline;
}
.ap-breadcrumb__separator {
color: var(--color-on-offset);
}
.ap-breadcrumb__current {
color: var(--color-on-background);
font-weight: 600;
}
/* ==========================================================================
Fediverse Lookup
========================================================================== */
.ap-lookup {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-m);
}
.ap-lookup__input {
border: var(--border-width-thin) solid var(--color-outline);
border-radius: var(--border-radius-small);
background: var(--color-offset);
box-sizing: border-box;
color: var(--color-on-background);
font-family: inherit;
font-size: var(--font-size-m);
padding: var(--space-s) var(--space-m);
width: 100%;
}
.ap-lookup__input::placeholder {
color: var(--color-on-offset);
}
.ap-lookup__input:focus {
outline: 2px solid var(--color-primary);
outline-offset: -1px;
border-color: var(--color-primary);
}
.ap-lookup__btn {
padding: var(--space-s) var(--space-m);
border: var(--border-width-thin) solid var(--color-primary);
border-radius: var(--border-radius-small);
background: var(--color-primary);
color: var(--color-on-primary);
font-size: var(--font-size-m);
font-family: inherit;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.ap-lookup__btn:hover {
opacity: 0.9;
}
/* ==========================================================================
Tab Navigation
========================================================================== */
.ap-tabs {
border-bottom: var(--border-width-thin) solid var(--color-outline);
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-m);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ap-tab {
border-bottom: var(--border-width-thick) solid transparent;
color: var(--color-on-offset);
font-size: var(--font-size-m);
padding: var(--space-s) var(--space-m);
text-decoration: none;
transition:
color 0.2s ease,
border-color 0.2s ease;
white-space: nowrap;
}
.ap-tab:hover {
color: var(--color-on-background);
}
.ap-tab--active {
border-bottom-color: var(--color-primary);
color: var(--color-primary-on-background);
font-weight: 600;
}
.ap-tab__count {
background: var(--color-offset-variant);
border-radius: var(--border-radius-large);
font-size: var(--font-size-xs);
font-weight: 600;
margin-left: var(--space-xs);
padding: 1px 6px;
}
.ap-tab--active .ap-tab__count {
background: var(--color-primary);
color: var(--color-on-primary, var(--color-neutral99));
}
/* ==========================================================================
Timeline Layout
========================================================================== */
.ap-timeline {
display: flex;
flex-direction: column;
gap: var(--space-m);
}