@meowdown/embed 0.2.0 → 0.3.0

package/dist/x/index.js

@@ -259,14 +259,14 @@ function renderDate(post) {
 
 //#endregion
 //#region src/x/render-post.ts
-function renderBody(post, collapseBlankLines = false) {
+function renderBody(post) {
 	const permalink = getPermalink(post);
 	return el("p", {
 		"data-body": "",
 		dir: "auto",
 		lang: post.lang || void 0
 	}, el("span", { "data-text": "" }, post.body.map((segment) => {
-		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split(collapseBlankLines ? /\n+/ : "\n").map((line, index) => {
+		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split("\n").map((line, index) => {
 			return [index ? el("br", {}) : void 0, line];
 		});
 	})), post.truncated && permalink ? [" ", renderLink("Show more", permalink)] : void 0);
@@ -279,12 +279,12 @@ function renderQuoted(post, protocols) {
 	return el("article", {
 		"data-quoted": "",
 		"aria-label": "Quoted post"
-	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post, true), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
+	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
 }
 function renderPost(post, protocols = null) {
 	const reply = post.replyTo;
 	const replyUrl = reply && /^\w{1,15}$/.test(reply.handle) && /^\d+$/.test(reply.id) ? `https://x.com/${reply.handle}/status/${reply.id}` : void 0;
-	return el("article", {}, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post));
+	return el("article", {}, el("div", { "data-content": "" }, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post)), el("details", { "data-show-more": "" }, el("summary", {})));
 }
 
 //#endregion

package/dist/x/theme.css

@@ -33,6 +33,24 @@
   inherits: true;
 }
 
+@property --meowdown-embed-max-height {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --_overflowing {
+  syntax: '<integer>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes meowdown-embed-overflowing {
+  from,
+  to {
+    --_overflowing: 1;
+  }
+}
+
 /*
  * Hard reset. `all: revert` rolls every property on every box inside the card
  * back to the user-agent default, so a host rule on `p`, `a`, `img`,
@@ -58,6 +76,7 @@
   --_link: var(--meowdown-embed-link-color, #1d9bf0);
   --_tint: color-mix(in srgb, currentColor 5%, transparent);
   --_media-height: 7.5rem;
+  --_show-more-height: 2rem;
 
   display: block;
   /* As wide as the content, between 18rem and 28rem: a short text post stays
@@ -184,6 +203,111 @@
     color: inherit;
   }
 
+  /* Max height. The article is clipped to `--_body-limit`, the tallest
+   * article that keeps the card within `--meowdown-embed-max-height`. As a
+   * scroll container it has a scroll timeline only while the clip hides
+   * content, so the animation on that timeline sets `--_overflowing` exactly
+   * when the card is too tall. Then the article gives up one row, which the
+   * "Show more" toggle takes, so the whole card is exactly the limit. The
+   * toggle is anchored to the card's padding box, out of the article's clip.
+   * Browsers without scroll-driven animations show the whole card. */
+  & > article {
+    /* Room inside the clip for focus rings at the article's edges. */
+    --_clip-gutter: 4px;
+    --_body-limit: calc(
+      var(--meowdown-embed-max-height, 256px) - 2 * var(--meowdown-embed-padding, 1rem) - 2px + 2 *
+        var(--_clip-gutter)
+    );
+  }
+  & > article > [data-show-more] {
+    display: none;
+  }
+  & > article > [data-show-more] > summary {
+    display: block;
+    width: fit-content;
+    font-size: 0.9375em;
+    line-height: var(--_show-more-height);
+    color: var(--_link);
+    list-style: none;
+    cursor: pointer;
+  }
+  & > article > [data-show-more] > summary::-webkit-details-marker {
+    display: none;
+  }
+  & > article > [data-show-more] > summary::before {
+    content: 'Show more';
+  }
+  & > article > [data-show-more][open] > summary::before {
+    content: 'Show less';
+  }
+  & > article > [data-show-more] > summary:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  & > article > [data-show-more] > summary:focus-visible {
+    outline: 2px solid var(--_link);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  @supports (animation-timeline: scroll()) {
+    & > article {
+      max-height: calc(var(--_body-limit) - var(--_overflowing) * var(--_show-more-height));
+      overflow: hidden;
+      padding: var(--_clip-gutter);
+      margin: calc(-1 * var(--_clip-gutter));
+      margin-block-end: calc(var(--_overflowing) * var(--_show-more-height) - var(--_clip-gutter));
+      animation: meowdown-embed-overflowing linear both;
+      animation-timeline: scroll(self);
+    }
+    /* Opened, or holding keyboard focus that the clip could hide. */
+    & > article:has(> [data-show-more][open]),
+    & > article:has(:focus-visible:not(summary)) {
+      max-height: none;
+      overflow: visible;
+      margin-block-end: calc(-1 * var(--_clip-gutter));
+    }
+    @container style(--_overflowing: 1) {
+      /* On the content, not the article: a mask on the article would also
+       * hide the toggle below it. */
+      & > article > [data-content] {
+        mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+        mask-size: 100%
+          calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
+        mask-repeat: no-repeat;
+      }
+      & > article > [data-show-more] {
+        display: block;
+        position: absolute;
+        inset-inline-start: var(--meowdown-embed-padding, 1rem);
+        bottom: var(--meowdown-embed-padding, 1rem);
+      }
+    }
+    /* Opened, "Show less" sticks to the bottom of the scrollport until the
+     * card's end scrolls into view. */
+    & > article > [data-show-more][open] {
+      display: block;
+      position: sticky;
+      bottom: 0.75rem;
+      z-index: 1;
+      width: fit-content;
+      margin: 0.5rem auto 0;
+    }
+    & > article > [data-show-more][open] > summary {
+      padding: 0.375rem 0.875rem;
+      border: 1px solid var(--_hairline);
+      border-radius: 999px;
+      background: var(--meowdown-embed-background, Canvas);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+      font-size: 0.875em;
+      font-weight: 500;
+      line-height: normal;
+    }
+    & > article > [data-show-more][open] > summary:hover {
+      text-decoration: none;
+      background: color-mix(in srgb, var(--_link) 8%, var(--meowdown-embed-background, Canvas));
+    }
+  }
+
   /* Body */
   & [data-reply-to] {
     display: block;
@@ -353,11 +477,6 @@
     align-self: center;
   }
   & [data-quoted] [data-body] {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
     margin-block-start: 0.25rem;
     font-size: 0.9375em;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/embed",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",