@rmdes/indiekit-endpoint-activitypub 3.8.7 → 3.9.0

package/assets/css/base.css

@@ -0,0 +1,144 @@
+/**
+ * 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);
+}

package/assets/css/card.css

@@ -0,0 +1,377 @@
+/* ==========================================================================
+   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);
+}

package/assets/css/compose.css

@@ -0,0 +1,169 @@
+/* ==========================================================================
+   Compose Form
+   ========================================================================== */
+
+.ap-compose__context {
+  background: var(--color-offset);
+  border-left: var(--border-width-thickest) solid var(--color-primary);
+  border-radius: var(--border-radius-small);
+  margin-bottom: var(--space-m);
+  padding: var(--space-m);
+}
+
+.ap-compose__context-label {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  margin-bottom: var(--space-xs);
+}
+
+.ap-compose__context-author a {
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.ap-compose__context-text {
+  border: 0;
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-loose);
+  margin: var(--space-xs) 0;
+  padding: 0;
+}
+
+.ap-compose__context-link {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-compose__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+}
+
+.ap-compose__editor {
+  position: relative;
+}
+
+.ap-compose__textarea {
+  background: var(--color-background);
+  border: var(--border-width-thick) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-background);
+  font-family: inherit;
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-prose);
+  padding: var(--space-s);
+  resize: vertical;
+  width: 100%;
+}
+
+.ap-compose__textarea:focus {
+  border-color: var(--color-primary);
+  outline: var(--border-width-thick) solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.ap-compose__cw {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.ap-compose__cw-toggle {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-s);
+  color: var(--color-on-offset);
+}
+
+.ap-compose__cw-input {
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  background: var(--color-offset);
+  color: var(--color-on-background);
+  font: inherit;
+  font-size: var(--font-size-s);
+  padding: var(--space-s);
+  width: 100%;
+}
+
+.ap-compose__cw-input:focus {
+  border-color: var(--color-primary);
+  outline: none;
+}
+
+.ap-compose__visibility {
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-s) var(--space-m);
+  padding: var(--space-m);
+}
+
+.ap-compose__visibility legend {
+  font-weight: 600;
+}
+
+.ap-compose__visibility-option {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-s);
+}
+
+.ap-compose__syndication {
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-m);
+}
+
+.ap-compose__syndication legend {
+  font-weight: 600;
+}
+
+.ap-compose__syndication-target {
+  cursor: pointer;
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.ap-compose__actions {
+  align-items: center;
+  display: flex;
+  gap: var(--space-m);
+}
+
+.ap-compose__submit {
+  background: var(--color-primary);
+  border: 0;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary, var(--color-neutral99));
+  cursor: pointer;
+  font-size: var(--font-size-m);
+  font-weight: 600;
+  padding: var(--space-s) var(--space-l);
+}
+
+.ap-compose__submit:hover {
+  opacity: 0.9;
+}
+
+.ap-compose__cancel {
+  color: var(--color-on-offset);
+  text-decoration: none;
+}
+
+.ap-compose__cancel:hover {
+  color: var(--color-on-background);
+  text-decoration: underline;
+}