grok-digest 0.3.1 → 0.3.2

package/BOT.md

@@ -54,7 +54,7 @@ bun run validate
   "shelf_life": "evergreen",
   "tldr": "Stale workaround comments spread because coding agents copy them",
   "summary": "Argues you should delete most code comments, because coding agents copy existing workaround comments and spread hacks through the codebase.",
-  "text": "ban and delete most if not all code comments!\n\nagents love copying what already exists.",
+  "text": "ban and delete most if not all code comments!\n\nagents love copying what already exists. https://t.co/Xq7mPLe0Ab",
   "key_points": [
     "Agents imitate existing code, so stale workaround comments spread like weeds.",
     "Keep only comments that must exist, such as browser-quirk explanations."
@@ -62,7 +62,11 @@ bun run validate
   "action": "Have an agent run /no-comments on one repo and sort each comment into refactor or delete.",
   "links": [{ "title": "pstack: the /no-comments skill", "url": "https://github.com/example/pstack" }],
   "media": [
-    { "url": "https://pbs.twimg.com/media/G3xAmPLeAAAbCdE.jpg", "alt": "A diff that deletes a workaround comment" }
+    {
+      "url": "https://pbs.twimg.com/media/G3xAmPLeAAAbCdE.jpg",
+      "alt": "A diff that deletes a workaround comment",
+      "link": "https://t.co/Xq7mPLe0Ab"
+    }
   ]
 }
 ```
@@ -156,10 +160,11 @@ Every link in the post and its thread, followed to where it really lands. Expand
 
 ### media
 
-The images in the post and its thread, in thread order, so the card can show them. One object per photo:
+The images in the post and its thread, in thread order, so the card can show each one with the post it came from. One object per photo:
 
 - `url`: the image's `https://pbs.twimg.com/` address, such as `https://pbs.twimg.com/media/G3xAmPLeAAAbCdE.jpg`. A `?format=jpg&name=large` query is fine. Never a `t.co` link or an `x.com/…/photo/1` page; the build rejects any other host.
 - `alt`: the author's alt text for the image when it has one, otherwise a few words on what it shows. Leave `alt` out rather than writing `""`.
+- `link`: the short link that stands for the image in `text`, copied exactly as it appears there, such as `https://t.co/Xq7mPLe0Ab` or `pic.x.com/Xq7mPLe0Ab`. X gives all the photos of one post a single link, so photos from the same post share it. The card shows the images where that link is and hides the link. The build rejects a `link` that is not in `text`. Leave `link` out only when `text` has no link for the image; the card then shows it after the post.
 - For a video or GIF, add its poster image (the `pbs.twimg.com` thumbnail X shows before it plays) when you can find it. Skip it otherwise.
 - Don't add link-preview cards or the author's profile picture.
 - Write `[]` when the post has no images.

package/dist/components/BookmarkCard.astro

@@ -5,7 +5,7 @@ import { Button } from "./ui/button";
 import { Card } from "./ui/card";
 import type { Bookmark } from "../lib/bookmarks";
 import { copyText } from "../lib/copy";
-import { imagesWithAlt } from "../lib/media";
+import { postParts } from "../lib/media";
 import { TOPIC_LABELS } from "../lib/topics";
 
 type Props = {
@@ -13,14 +13,13 @@ type Props = {
 };
 
 const { bookmark } = Astro.props;
-const { id, url, author, postedAt, savedAt, topic, shelfLife, tldr, summary, text, keyPoints, action, links } =
-  bookmark;
+const { id, url, author, postedAt, savedAt, topic, shelfLife, tldr, summary, keyPoints, action, links } = bookmark;
 
 const dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium", timeZone: "UTC" });
 const isoDay = (date: Date) => date.toISOString().slice(0, 10);
 const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
 const hostOf = (link: string) => new URL(link).hostname.replace(/^www\./, "");
-const images = imagesWithAlt(bookmark);
+const post = postParts(bookmark);
 ---
 
 <li id={`b-${id}`} data-bookmark-id={id} data-url={url} data-topic={topic} class="group/bookmark scroll-mt-6">
@@ -90,39 +89,44 @@ const images = imagesWithAlt(bookmark);
             ))}
           </ul>
         )}
-        {(text !== "" || images.length > 0) && (
+        {post.length > 0 && (
           <figure class="border-t border-border pt-4">
             <figcaption class="mb-2 text-xs font-medium text-muted-foreground">Original post</figcaption>
-            {text !== "" && (
-              <blockquote class="text-sm leading-relaxed whitespace-pre-wrap text-pretty text-foreground/80">
-                {text}
-              </blockquote>
-            )}
-            {images.length > 0 && (
-              <ul
-                class:list={["grid max-w-md gap-2", { "grid-cols-2": images.length > 1, "mt-3": text !== "" }]}
-                aria-label="Images in the post"
-              >
-                {images.map((image, index) => (
-                  <li class:list={{ "col-span-2": index === 0 && images.length > 1 && images.length % 2 === 1 }}>
-                    <a
-                      href={image.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="block overflow-hidden rounded-lg border border-border bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
-                    >
-                      <img
-                        src={image.url}
-                        alt={image.alt}
-                        loading="lazy"
-                        decoding="async"
-                        class="aspect-video w-full object-cover"
-                      />
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            )}
+            <blockquote class="flex flex-col gap-3 text-sm leading-relaxed text-pretty text-foreground/80">
+              {post.map((part) =>
+                part.kind === "text" ? (
+                  <p class="whitespace-pre-wrap">{part.text}</p>
+                ) : (
+                  <ul
+                    class:list={["grid max-w-md gap-2", { "grid-cols-2": part.images.length > 1 }]}
+                    aria-label="Images in the post"
+                  >
+                    {part.images.map((image, index) => (
+                      <li
+                        class:list={{
+                          "col-span-2": index === 0 && part.images.length > 1 && part.images.length % 2 === 1,
+                        }}
+                      >
+                        <a
+                          href={image.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="block overflow-hidden rounded-lg border border-border bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+                        >
+                          <img
+                            src={image.url}
+                            alt={image.alt}
+                            loading="lazy"
+                            decoding="async"
+                            class="aspect-video w-full object-cover"
+                          />
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                ),
+              )}
+            </blockquote>
           </figure>
         )}
       </div>

package/dist/lib/bookmarks.d.ts

@@ -34,6 +34,7 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
     media: z.ZodDefault<z.ZodArray<z.ZodObject<{
         url: z.ZodURL;
         alt: z.ZodOptional<z.ZodString>;
+        link: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>>>;
 }, z.core.$strict>, z.ZodTransform<{
     shelfLife: "news" | "evergreen";
@@ -58,6 +59,7 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
     media: {
         url: string;
         alt?: string | undefined;
+        link?: string | undefined;
     }[];
 }, {
     id: string;
@@ -82,6 +84,7 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
     media: {
         url: string;
         alt?: string | undefined;
+        link?: string | undefined;
     }[];
 }>>;
 export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
@@ -118,6 +121,7 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     media: z.ZodDefault<z.ZodArray<z.ZodObject<{
         url: z.ZodURL;
         alt: z.ZodOptional<z.ZodString>;
+        link: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>>>;
 }, z.core.$strict>, z.ZodTransform<{
     shelfLife: "news" | "evergreen";
@@ -142,6 +146,7 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     media: {
         url: string;
         alt?: string | undefined;
+        link?: string | undefined;
     }[];
 }, {
     id: string;
@@ -166,6 +171,7 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     media: {
         url: string;
         alt?: string | undefined;
+        link?: string | undefined;
     }[];
 }>>>;
 export declare const stateFileSchema: z.ZodArray<z.ZodString>;

package/dist/lib/bookmarks.js

@@ -30,8 +30,19 @@ export const bookmarkSchema = z
     action: z.string().trim(),
     links: z.array(z.strictObject({ title: nonEmpty, url: z.url({ protocol: /^https$/ }) })),
     media: z
-        .array(z.strictObject({ url: z.url({ protocol: /^https$/, hostname: X_MEDIA_HOSTNAME }), alt: nonEmpty.optional() }))
+        .array(z.strictObject({
+        url: z.url({ protocol: /^https$/, hostname: X_MEDIA_HOSTNAME }),
+        alt: nonEmpty.optional(),
+        link: nonEmpty.optional(),
+    }))
         .default([]),
+})
+    .superRefine(({ text, media }, ctx) => {
+    media.forEach(({ link }, index) => {
+        if (link !== undefined && !text.includes(link)) {
+            ctx.addIssue({ code: "custom", path: ["media", index, "link"], message: `"${link}" is not in text` });
+        }
+    });
 })
     .transform(({ posted_at, saved_at, shelf_life, key_points, ...rest }) => ({
     ...rest,

package/dist/lib/feed.js

@@ -1,5 +1,5 @@
 import { isTopic } from "./filter.js";
-import { imagesWithAlt } from "./media.js";
+import { postParts } from "./media.js";
 import { TOPIC_LABELS } from "./topics.js";
 const LOCAL_ORIGIN = "http://localhost:4321";
 export function feedOrigin(site) {
@@ -30,9 +30,10 @@ function feedItem(bookmark, page) {
     const link = new URL(page.href);
     link.hash = `b-${id}`;
     const points = keyPoints.map((point) => `<li>${escapeHtml(point)}</li>`).join("");
-    const quote = text === "" ? "" : `<blockquote><p>${escapeHtml(text)}</p></blockquote>`;
-    const images = imagesWithAlt(bookmark)
-        .map((image) => `<p><img src="${escapeHtml(image.url)}" alt="${escapeHtml(image.alt)}"></p>`)
+    const quoted = postParts(bookmark)
+        .flatMap((part) => part.kind === "text"
+        ? [`<p>${escapeHtml(part.text)}</p>`]
+        : part.images.map((image) => `<p><img src="${escapeHtml(image.url)}" alt="${escapeHtml(image.alt)}"></p>`))
         .join("");
     const linkItems = links
         .map((outbound) => `<li><a href="${escapeHtml(outbound.url)}">${escapeHtml(outbound.title)}</a></li>`)
@@ -47,8 +48,7 @@ function feedItem(bookmark, page) {
             action === "" ? "" : `<p>Try: ${escapeHtml(action)}</p>`,
             points === "" ? "" : `<ul>${points}</ul>`,
             linkItems === "" ? "" : `<ul>${linkItems}</ul>`,
-            quote,
-            images,
+            quoted === "" ? "" : `<blockquote>${quoted}</blockquote>`,
             `<p><a href="${escapeHtml(url)}">Open on X</a></p>`,
         ]
             .filter((part) => part !== "")

package/dist/lib/load-bookmarks.d.ts

@@ -21,5 +21,6 @@ export declare const bookmarks: {
     media: {
         url: string;
         alt?: string | undefined;
+        link?: string | undefined;
     }[];
 }[];

package/dist/lib/media.d.ts

@@ -1,5 +1,14 @@
 import type { Bookmark } from "./bookmarks.ts";
-export declare function imagesWithAlt({ author, media }: Bookmark): {
+type Image = {
     url: string;
     alt: string;
-}[];
+};
+type PostPart = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "images";
+    images: Image[];
+};
+export declare function postParts({ author, text, media }: Bookmark): PostPart[];
+export {};

package/dist/lib/media.js

@@ -1,7 +1,22 @@
-export function imagesWithAlt({ author, media }) {
+export function postParts({ author, text, media }) {
     const position = (index) => (media.length === 1 ? "" : ` ${index + 1} of ${media.length}`);
-    return media.map(({ url, alt }, index) => ({
+    const images = media.map(({ url, alt, link }, index) => ({
         url,
         alt: alt ?? `Image${position(index)} from the post by @${author.handle}`,
+        link,
     }));
+    const imagesFor = (link) => ({
+        kind: "images",
+        images: images.filter((image) => image.link === link).map(({ url, alt }) => ({ url, alt })),
+    });
+    const links = [...new Set(images.flatMap(({ link }) => (link === undefined ? [] : [link])))].toSorted((a, b) => text.indexOf(a) - text.indexOf(b));
+    const parts = [];
+    let rest = text;
+    for (const link of links) {
+        const at = rest.indexOf(link);
+        parts.push({ kind: "text", text: rest.slice(0, at).trim() }, imagesFor(link));
+        rest = rest.slice(at + link.length);
+    }
+    parts.push({ kind: "text", text: rest.trim() }, imagesFor(undefined));
+    return parts.filter((part) => (part.kind === "text" ? part.text !== "" : part.images.length > 0));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grok-digest",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Astro integration that renders a Grok Digest site: X bookmarks summarized by Grok, searchable, sorted by topic, with RSS feeds.",
   "keywords": [
     "astro",