grok-digest 0.2.0 → 0.3.1

package/BOT.md

@@ -0,0 +1,196 @@
+# Grok Digest: the bot's manual
+
+You keep a Grok Digest site. Its owner shares X posts with you. You turn each post into one entry in `data/bookmarks.json` and push it to `main`. GitHub Actions then rebuilds the page, where the owner reads the summaries and comes back to old bookmarks in a daily review.
+
+The owner saves posts to read them later and then forgets them. Everything you write exists to make a post worth coming back to: a headline that says what it's about, a summary, the key points, and one thing to try.
+
+This file ships with the `grok-digest` package. After `bun install`, the copy at `node_modules/grok-digest/BOT.md` matches the version the site builds with, so read that copy when this one and the installed one differ.
+
+## The site repository
+
+| Path                           | What it is                                                                | You                     |
+| ------------------------------ | ------------------------------------------------------------------------- | ----------------------- |
+| `data/bookmarks.json`          | The bookmarks, one object per post.                                       | Add, edit, remove       |
+| `data/processed.json`          | Ids of the shares you have handled, such as email message ids.            | Add one id per share    |
+| `data/removed.json`            | Status ids of bookmarks the owner asked you to remove.                    | Add an id when removing |
+| `package.json`, `bun.lock`     | Depend on `grok-digest`. Every deploy takes the newest release by itself. | Never commit changes    |
+| `.github/workflows/deploy.yml` | Validates the data, builds the page, and publishes it to GitHub Pages.    | Never change            |
+
+`processed.json` and `removed.json` are JSON arrays of non-empty strings. The page reads only `bookmarks.json`.
+
+## Set up a checkout
+
+```sh
+bun install
+bun update grok-digest
+bun run validate
+```
+
+`bun update grok-digest` gives you the release the next deploy will use. It changes `bun.lock`; leave that change out of your commits.
+
+## Save a shared post
+
+1. If the share's id is already in `data/processed.json`, stop. You have handled it.
+2. Find the post's status id: the number at the end of its URL.
+3. If that id is in `data/removed.json`, the owner removed it. Do not add it again; add the share's id to `processed.json` and stop.
+4. If that id is already in `data/bookmarks.json`, do not add a second entry. Add the share's id to `processed.json` and stop.
+5. Read the post. If the author continues it as a thread (it says 🧵 or "1/", or the author replies to themselves to go on), read the whole thread. Follow every link in it to the page it really lands on.
+6. Write the entry described below and append it to the array in `data/bookmarks.json`.
+7. Add the share's id to `data/processed.json`.
+8. If any entry's author name contains `(sample)`, delete those entries. They are the template's placeholders.
+9. Run `bun run validate` and fix the entry until it passes.
+10. Commit with the message `Save bookmark (@handle)`, using the post author's handle, and push to `main`.
+
+## The entry
+
+```json
+{
+  "id": "2110149626133438732",
+  "url": "https://x.com/poteto/status/2110149626133438732",
+  "author": { "name": "lauren", "handle": "poteto" },
+  "posted_at": "2026-10-13T23:24:10.000Z",
+  "saved_at": "2026-10-15T11:21:40+09:00",
+  "topic": "ai-agents",
+  "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.",
+  "key_points": [
+    "Agents imitate existing code, so stale workaround comments spread like weeds.",
+    "Keep only comments that must exist, such as browser-quirk explanations."
+  ],
+  "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" }
+  ]
+}
+```
+
+Write every field, in this order. The build rejects an entry with a missing field or a field not listed here. `text` and `action` may be empty strings, and `key_points`, `links`, and `media` may be empty arrays. Entries saved before `media` existed have no `media` field; that is valid, and you don't need to add one.
+
+### id
+
+The post's status id as a string, the number at the end of its URL. It must be unique in the file.
+
+### url
+
+The post's `https` link on `x.com` or `twitter.com`. A `www.` or `mobile.` prefix is allowed.
+
+### author
+
+`name` is the display name. `handle` is the X handle without `@`: 1 to 15 letters, digits, or underscores.
+
+### posted_at
+
+When the author published the post, not when you received it. Write a date and time with an offset, such as `2026-10-13T23:24:10.000Z`. A date alone, such as `2026-10-13`, is also accepted.
+
+If you can't read the time from the post, work it out from the status id: milliseconds since the Unix epoch = (id >> 22) + 1288834974657.
+
+### saved_at
+
+When you received the share: the current date and time as you handle it. Write it once and never change it, even when you edit the entry later.
+
+It must be a date and time with an offset, such as `2026-10-15T11:21:40+09:00`, or UTC with `Z`. A date alone is rejected. Use the owner's local offset when you know it. The daily review counts days in the owner's time zone, so the right offset keeps "Saved yesterday" true around midnight.
+
+### topic
+
+One of these ids:
+
+| Topic id            | Label on the page   |
+| ------------------- | ------------------- |
+| `ai-agents`         | AI agents           |
+| `models-releases`   | Models & releases   |
+| `dev-tools`         | Dev tools           |
+| `startups-business` | Startups & business |
+| `japan-tech`        | Japan tech          |
+| `design`            | Design              |
+| `other`             | Other               |
+
+### shelf_life
+
+`news` when the post's value fades within weeks: launches, releases, announcements, funding, events, outages, drama. `evergreen` when it stays useful: ideas, techniques, how-tos, prompts, tools worth adopting later, essays. If a launch post also teaches how to use the thing, choose `evergreen`.
+
+The daily review brings `news` back only the day after it was saved and a week later. `evergreen` comes back a day, a week, a month, and three months later, and on the same date in later years.
+
+### tldr
+
+A headline of at most 12 words that says what the reader gets from the post. It is the card's title and the feed item's title.
+
+- Say the concrete thing: "Bun 1.4 ships a built-in Postgres client", not "Interesting news about Bun".
+- Plain text: no emoji, hashtags, @handles, quotes, or final period.
+- Don't start with the author's name; the card shows it.
+- Use the language of `summary`. Don't repeat `summary` or its first sentence.
+
+### summary
+
+One or two sentences on what the post says and why it matters. For a thread, summarize the whole thread.
+
+### text
+
+The post's own words, copied exactly as posted, with its line breaks. For a thread, the author's posts in order, separated by a blank line. Keep a `t.co` line that stands for an image or video as it is; the image itself goes in `media`. Write `""` when the post has no text.
+
+Keep it complete. Most AI assistants can't open x.com, so when the owner copies a bookmark into one, this text is all it gets of the post.
+
+### key_points
+
+The takeaways, one short sentence each, usually two to four. Say what the post teaches, not what it covers: "Agents imitate existing code, so stale comments spread", not "The thread explains how comments spread". Write `[]` when there is nothing beyond the summary.
+
+### action
+
+One sentence on the most useful thing the owner could do because of the post: a command to run, a tool or prompt to try, a setting to change. It shows under the card's title even when the card is collapsed.
+
+- Start with a verb, and be specific enough to do without opening the post.
+- When the post includes a prompt, command, or snippet, base the action on it.
+- At most about 25 words, in the language of `summary`.
+- Write `""` when there is honestly nothing to do, such as news, an opinion, or a joke. Never invent busywork.
+
+### links
+
+Every link in the post and its thread, followed to where it really lands. Expand `t.co` links.
+
+- `url`: the final `https` address without tracking parameters such as `utm_*`. Skip links that are not `https`.
+- `title`: the page's own title, cut to about 8 words, or a plain description such as `GitHub repo: example/pstack`.
+- Leave out links to the post itself, to the author's profile, and to the post's images or videos.
+- Write `[]` when there are none.
+
+### media
+
+The images in the post and its thread, in thread order, so the card can show them. 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 `""`.
+- 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.
+
+Images never go in `links`, and `text` keeps the post's exact words, including any `t.co` lines that stood for the images.
+
+## Change or remove a bookmark
+
+To change one, edit its fields in place. Keep `id` and `saved_at`. Commit with `Update bookmark (@handle)`.
+
+To remove one, delete its entry from `data/bookmarks.json` and add its id to `data/removed.json`, so a later share of the same post doesn't bring it back. Commit with `Remove bookmark (@handle)`.
+
+Run `bun run validate` before every commit.
+
+## When validation fails
+
+`bun run validate` names the file, the problem, and where it is:
+
+```text
+data/bookmarks.json is invalid:
+✖ Invalid option: expected one of "news"|"evergreen"
+  → at [3].shelf_life
+```
+
+`[3]` is the entry's position in the array, counting from 0. Fix the field and run it again. A deploy with invalid data fails, and the page that was live stays live, so never push data that fails validation.
+
+## A daily digest (optional routine)
+
+If the owner wants a nudge to come back, run this every morning:
+
+1. Read `data/bookmarks.json` from the site repository.
+2. Using today's date in the owner's time zone, pick up to 3 bookmarks: first any `evergreen` bookmark saved exactly 1, 7, 30 or 90 days ago or on today's date in an earlier year, and any `news` bookmark saved 1 or 7 days ago; then fill the rest with bookmarks saved at least a day ago that you have not sent in the last 14 days. Skip anything saved today. Send nothing if nothing qualifies.
+3. For each, send the `tldr`, why it is back ("Saved a week ago"), the `action` as "Try: …" when it is not empty, and a link to `<site>/#b-<id>`.
+4. End with a link to `<site>/?view=today`, where `<site>` is the page's address.

package/README.md

@@ -2,6 +2,8 @@
 
 `grok-digest` renders a Grok Digest site: X bookmarks summarized by Grok, searchable, sorted by topic, with one RSS feed per topic. A site repository holds only its `data/` files, a `package.json`, and a deploy workflow. The page, the feeds, and the schema come from this package.
 
+[`BOT.md`](BOT.md) is the manual for the Grok bot that writes a site's data: what to do with a shared post, every field of an entry, and how to change or remove one. It ships in the package, so `node_modules/grok-digest/BOT.md` always matches the installed version.
+
 Every deploy installs the newest `grok-digest`, so a release reaches each site the next time its Grok bot pushes a bookmark.
 
 ## Set up a site
@@ -61,13 +63,13 @@ The site needs no Astro config. The package depends on the Astro version it was
 import { SCHEMA_VERSION, bookmarkSchema, parseBookmarks, TOPICS } from "grok-digest/schema";
 ```
 
-`SCHEMA_VERSION` is `1`. The JSON files have no version field. A `bookmarks.json` that already validates is version 1. `posted_at` with milliseconds and a `Z` offset, as the bot writes it, is version 1.
+`SCHEMA_VERSION` is `1`. The JSON files have no version field. A `bookmarks.json` that already validates is version 1. `posted_at` with milliseconds and a `Z` offset, as the bot writes it, is version 1. The optional `media` field, a post's images, is part of version 1 too: a bookmark without it parses with `media` set to `[]`.
 
-| File                  | Version 1 shape                                                        |
-| --------------------- | ---------------------------------------------------------------------- |
-| `data/bookmarks.json` | Array of bookmark objects. The field table is in `template/README.md`. |
-| `data/processed.json` | Array of non-empty id strings. Optional. The page does not read it.    |
-| `data/removed.json`   | Same shape as `processed.json`. Optional. The page does not read it.   |
+| File                  | Version 1 shape                                                      |
+| --------------------- | -------------------------------------------------------------------- |
+| `data/bookmarks.json` | Array of bookmark objects. Every field is described in `BOT.md`.     |
+| `data/processed.json` | Array of non-empty id strings. Optional. The page does not read it.  |
+| `data/removed.json`   | Same shape as `processed.json`. Optional. The page does not read it. |
 
 Every site takes every release, so every release reads every data file an earlier release accepted. The policy is in `MIGRATION.md`.
 

package/dist/assets/app-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="gs" cx="30%" cy="22%" r="85%"><stop offset="0" stop-color="#fffdf9"/><stop offset=".55" stop-color="#ece5da"/><stop offset="1" stop-color="#bfb5a8"/></radialGradient>
+<linearGradient id="bgs" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3a332e"/><stop offset="1" stop-color="#1f1b18"/></linearGradient>
+<linearGradient id="ams" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f0b45e"/><stop offset="1" stop-color="#d9913a"/></linearGradient></defs><rect width="100" height="100" fill="url(#bgs)"/>
+<circle cx="50" cy="64" r="31" fill="url(#gs)"/>
+<ellipse cx="46" cy="52" rx="4" ry="7.5" transform="rotate(14 46 52)" fill="#2b2622"/><ellipse cx="61" cy="49" rx="4" ry="7.5" transform="rotate(14 61 49)" fill="#2b2622"/>
+<rect x="8" y="62" width="84" height="60" rx="11" fill="#e8a54b"/>
+<rect x="20" y="74" width="40" height="5" rx="2.5" fill="#2b2622" opacity=".35"/>
+<rect x="20" y="84" width="28" height="5" rx="2.5" fill="#2b2622" opacity=".35"/>
+<path d="M68 62 h10 v16 l-5 -3.5 l-5 3.5z" fill="#2b2622"/></svg>

package/dist/assets/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#2b2622"/><path d="M10 7h12v18l-6-4.5L10 25z" fill="#f6f1ea"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><clipPath id="tile"><rect width="32" height="32" rx="7"/></clipPath></defs><g clip-path="url(#tile)"><rect width="32" height="32" fill="#2b2622"/><circle cx="16" cy="20.5" r="10.5" fill="#f6f1ea"/><ellipse cx="14.4" cy="16.4" rx="1.5" ry="2.6" transform="rotate(14 14.4 16.4)" fill="#2b2622"/><ellipse cx="19.4" cy="15.4" rx="1.5" ry="2.6" transform="rotate(14 19.4 15.4)" fill="#2b2622"/><rect x="2" y="20" width="28" height="16" rx="3.5" fill="#e8a54b"/></g></svg>

package/dist/components/BookmarkCard.astro

@@ -1,9 +1,11 @@
 ---
-import { ArrowUpRightIcon, CheckIcon, ChevronDownIcon } from "lucide-react";
+import { ArrowUpRightIcon, CheckIcon, ChevronDownIcon, CopyIcon, LinkIcon, ZapIcon } from "lucide-react";
 import { Badge } from "./ui/badge";
 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 { TOPIC_LABELS } from "../lib/topics";
 
 type Props = {
@@ -11,15 +13,18 @@ type Props = {
 };
 
 const { bookmark } = Astro.props;
-const { id, url, author, postedAt, savedAt, topic, tldr, summary, text, keyPoints } = bookmark;
+const { id, url, author, postedAt, savedAt, topic, shelfLife, tldr, summary, text, 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);
 ---
 
-<li id={`b-${id}`} data-bookmark-id={id} data-url={url} class="group/bookmark scroll-mt-6">
-  <Card className="gap-0 py-0 shadow-xs ring-foreground/8 [--card-spacing:--spacing(5)] has-[summary:focus-visible]:ring-2 has-[summary:focus-visible]:ring-ring sm:[--card-spacing:--spacing(6)]">
+<li id={`b-${id}`} data-bookmark-id={id} data-url={url} data-topic={topic} class="group/bookmark scroll-mt-6">
+  <Card className="relative gap-0 py-0 shadow-xs before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-topic before:transition-opacity group-data-[done]/bookmark:before:opacity-55 ring-foreground/8 [--card-spacing:--spacing(5)] has-[summary:focus-visible]:ring-2 has-[summary:focus-visible]:ring-ring sm:[--card-spacing:--spacing(6)]">
     <details open class="group/details transition-opacity group-data-[done]/bookmark:opacity-55">
       <summary class="flex cursor-pointer list-none flex-col gap-2 px-(--card-spacing) pt-(--card-spacing) pb-4 outline-none [&::-webkit-details-marker]:hidden">
         <span class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1 text-sm">
@@ -36,11 +41,7 @@ const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
             )}
           </span>
         </span>
-        <span
-          data-review-reason
-          class="text-xs font-medium tracking-wide text-muted-foreground uppercase"
-          hidden
-        ></span>
+        <span data-review-reason class="text-xs font-medium tracking-wide text-brand-ink uppercase" hidden></span>
         <span class="flex items-start justify-between gap-3">
           <h2 class="font-heading text-xl leading-snug font-semibold text-balance text-foreground sm:text-[1.375rem]">
             {tldr}
@@ -50,6 +51,14 @@ const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
             aria-hidden="true"
           />
         </span>
+        {action !== "" && (
+          <span class="flex items-start gap-2 rounded-lg bg-brand-soft px-3 py-2 text-sm leading-relaxed text-foreground">
+            <ZapIcon className="mt-1 size-3.5 shrink-0 fill-brand text-brand-ink" aria-hidden="true" />
+            <span class="text-pretty">
+              <span class="font-medium text-brand-ink">Try:</span> {action}
+            </span>
+          </span>
+        )}
       </summary>
 
       <div class="flex flex-col gap-4 px-(--card-spacing) pb-4">
@@ -61,20 +70,88 @@ const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
             ))}
           </ul>
         )}
-        {text !== "" && (
+        {links.length > 0 && (
+          <ul class="flex flex-col gap-1.5 text-sm" aria-label="Links in the post">
+            {links.map((link) => (
+              <li>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="group/link inline-flex items-baseline gap-2 rounded-sm focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+                >
+                  <LinkIcon className="size-3.5 shrink-0 translate-y-0.5 text-muted-foreground" aria-hidden="true" />
+                  <span class="text-pretty text-foreground underline decoration-border underline-offset-4 transition-colors group-hover/link:decoration-brand">
+                    {link.title}
+                  </span>
+                  <span class="shrink-0 text-xs text-muted-foreground">{hostOf(link.url)}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+        {(text !== "" || images.length > 0) && (
           <figure class="border-t border-border pt-4">
             <figcaption class="mb-2 text-xs font-medium text-muted-foreground">Original post</figcaption>
-            <blockquote class="text-sm leading-relaxed whitespace-pre-wrap text-pretty text-foreground/80">
-              {text}
-            </blockquote>
+            {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>
+            )}
           </figure>
         )}
       </div>
     </details>
 
-    <div class="flex items-center justify-between gap-3 px-(--card-spacing) pb-(--card-spacing)">
-      <Badge variant="secondary">{TOPIC_LABELS[topic]}</Badge>
-      <div class="flex items-center gap-4">
+    <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-(--card-spacing) pb-(--card-spacing)">
+      <div class="flex flex-wrap items-center gap-1.5">
+        <Badge className="bg-topic-soft text-topic">{TOPIC_LABELS[topic]}</Badge>
+        {shelfLife === "news" && (
+          <Badge variant="outline" className="border-brand/60 text-brand-ink">
+            News
+          </Badge>
+        )}
+      </div>
+      <div class="ml-auto flex items-center gap-3">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          data-copy={copyText(bookmark)}
+          title="Copy for an AI assistant (c)"
+          className="rounded-full"
+        >
+          <CopyIcon className="group-data-[copied]/button:hidden" aria-hidden="true" />
+          <CheckIcon className="hidden group-data-[copied]/button:block" aria-hidden="true" />
+          <span data-copy-label aria-live="polite">
+            Copy
+          </span>
+        </Button>
         <Button
           type="button"
           variant="outline"
@@ -82,7 +159,7 @@ const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
           data-done-toggle
           aria-pressed="false"
           title="Mark done (e)"
-          className="rounded-full aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground dark:aria-pressed:bg-primary dark:aria-pressed:hover:bg-primary/80"
+          className="rounded-full aria-pressed:border-done aria-pressed:bg-done aria-pressed:text-done-foreground aria-pressed:hover:bg-done/85 aria-pressed:hover:text-done-foreground dark:aria-pressed:border-done dark:aria-pressed:bg-done dark:aria-pressed:hover:bg-done/85"
         >
           <CheckIcon aria-hidden="true" />
           Done
@@ -91,7 +168,7 @@ const postedOtherDay = isoDay(postedAt) !== isoDay(savedAt);
           href={url}
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1 rounded-sm text-sm font-medium text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+          class="inline-flex items-center gap-1 rounded-sm text-sm font-medium whitespace-nowrap text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-brand focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
         >
           Open on X<ArrowUpRightIcon className="size-3.5" aria-hidden="true" />
         </a>

package/dist/components/BookmarkControls.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronsDownUpIcon, ChevronsUpDownIcon, SearchIcon } from "lucide-react";
+import { cn } from "cn";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
@@ -63,8 +64,8 @@ function linkedCard() {
     const target = window.location.hash.slice(1);
     return target === "" ? null : document.querySelector(`[data-bookmark-id][id="${CSS.escape(target)}"]`);
 }
-function initialFilter() {
-    const filter = parseFilter(window.location.search);
+function initialFilter(reviewIsEmpty) {
+    const filter = parseFilter(window.location.search, { reviewIsEmpty });
     return linkedCard() === null ? filter : { ...filter, view: "all" };
 }
 function cards() {
@@ -76,13 +77,34 @@ function focusCard(card) {
     card.querySelector("summary")?.focus({ preventScroll: true });
     card.scrollIntoView({ block: "start" });
 }
+const COPY_LABEL = "Copy";
+const COPY_RESET_MS = 2000;
+const copyResets = new WeakMap();
+function showCopyResult(button, copied) {
+    const label = button.querySelector("[data-copy-label]");
+    if (label !== null)
+        label.textContent = copied ? "Copied" : "Couldn't copy";
+    button.toggleAttribute("data-copied", copied);
+    clearTimeout(copyResets.get(button));
+    copyResets.set(button, setTimeout(() => {
+        if (label !== null)
+            label.textContent = COPY_LABEL;
+        button.removeAttribute("data-copied");
+    }, COPY_RESET_MS));
+}
+function copyFrom(button) {
+    if (button === null || button === undefined)
+        return;
+    navigator.clipboard.writeText(button.dataset["copy"] ?? "").then(() => showCopyResult(button, true), () => showCopyResult(button, false));
+}
 function plural(count, noun) {
     return `${count} ${count === 1 ? noun : `${noun}s`}`;
 }
 export function BookmarkControls({ entries }) {
-    const [filter, setFilter] = useState(initialFilter);
-    const [done, setDone] = useState(storedDone);
     const [review] = useState(() => todaysReview(entries, storedDone()));
+    const reviewIsEmpty = review.length === 0;
+    const [filter, setFilter] = useState(() => initialFilter(reviewIsEmpty));
+    const [done, setDone] = useState(storedDone);
     const [collapsed, setCollapsed] = useState(() => readStored(COLLAPSED_KEY) === true);
     const searchRef = useRef(null);
     const { query, topic, view } = filter;
@@ -124,11 +146,11 @@ export function BookmarkControls({ entries }) {
         writeStored(DONE_KEY, [...done]);
     }, [done]);
     useEffect(() => {
-        const next = `${window.location.pathname}${filterSearch(filter)}${window.location.hash}`;
+        const next = `${window.location.pathname}${filterSearch(filter, { reviewIsEmpty })}${window.location.hash}`;
         const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
         if (current !== next)
             window.history.replaceState(null, "", next);
-    }, [filter]);
+    }, [filter, reviewIsEmpty]);
     useEffect(() => {
         document.querySelector("[data-bookmark-list]")?.toggleAttribute("data-ready", true);
         const linked = linkedCard();
@@ -148,6 +170,7 @@ export function BookmarkControls({ entries }) {
         const onClick = (event) => {
             if (!(event.target instanceof Element))
                 return;
+            copyFrom(event.target.closest("[data-copy]"));
             const card = event.target.closest("[data-done-toggle]")?.closest("[data-bookmark-id]");
             if (card !== null && card !== undefined)
                 toggleDone(card);
@@ -181,6 +204,9 @@ export function BookmarkControls({ entries }) {
                     });
                     break;
                 }
+                case "c":
+                    copyFrom(current?.querySelector("[data-copy]"));
+                    break;
                 case "o": {
                     const url = current?.dataset["url"];
                     if (url !== undefined)
@@ -203,7 +229,7 @@ export function BookmarkControls({ entries }) {
         };
     }, []);
     const update = (change) => setFilter((previous) => ({ ...previous, ...change }));
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, type: "search", value: query, onChange: (event) => update({ query: event.target.value }), placeholder: "Search all bookmarks", "aria-label": "Search bookmarks", className: "h-10 rounded-full bg-card pl-9 dark:bg-card" })] }), _jsx("fieldset", { "aria-label": "Choose a view", className: "flex w-fit min-w-0 flex-wrap gap-1 rounded-full bg-muted p-1", children: VIEWS.map((v) => (_jsxs("button", { type: "button", "aria-pressed": view === v && !searching, onClick: () => update({ view: v, query: "" }), className: "inline-flex h-8 items-center gap-1.5 rounded-full px-3.5 text-sm font-medium text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-pressed:bg-card aria-pressed:text-foreground aria-pressed:shadow-xs", children: [VIEW_LABELS[v], _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: counts[v] })] }, v))) }), _jsxs("fieldset", { "aria-label": "Filter by topic", className: "flex min-w-0 flex-wrap gap-2", children: [_jsx(TopicChip, { label: "All topics", pressed: topic === null, onClick: () => update({ topic: null }) }), topicsInUse.map((t) => (_jsx(TopicChip, { label: TOPIC_LABELS[t], pressed: topic === t, onClick: () => update({ topic: topic === t ? null : t }) }, t)))] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [_jsx("p", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: _jsx(Status, { view: view, searching: searching, visible: visible.size, reviewed: reviewedCount, reviewSize: review.length, inbox: counts.inbox }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("p", { className: "hidden text-xs text-muted-foreground sm:block", children: [_jsx("kbd", { children: "j" }), "/", _jsx("kbd", { children: "k" }), " move \u00B7 ", _jsx("kbd", { children: "e" }), " done \u00B7 ", _jsx("kbd", { children: "o" }), " open \u00B7 ", _jsx("kbd", { children: "/" }), " search"] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setCollapsed(!collapsed), children: [collapsed ? _jsx(ChevronsUpDownIcon, { "aria-hidden": "true" }) : _jsx(ChevronsDownUpIcon, { "aria-hidden": "true" }), collapsed ? "Expand all" : "Collapse all"] })] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, type: "search", value: query, onChange: (event) => update({ query: event.target.value }), placeholder: "Search all bookmarks", "aria-label": "Search bookmarks", className: "h-10 rounded-full bg-card pl-9 dark:bg-card" })] }), _jsx("fieldset", { "aria-label": "Choose a view", className: "flex w-fit min-w-0 flex-wrap gap-1 rounded-full bg-muted p-1", children: VIEWS.map((v) => (_jsxs("button", { type: "button", "aria-pressed": view === v && !searching, onClick: () => update({ view: v, query: "" }), className: "inline-flex h-8 items-center gap-1.5 rounded-full px-3.5 text-sm font-medium text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-pressed:bg-card aria-pressed:text-foreground aria-pressed:shadow-xs", children: [VIEW_LABELS[v], _jsx("span", { className: "text-xs text-muted-foreground tabular-nums in-aria-pressed:font-semibold in-aria-pressed:text-brand-ink", children: counts[v] })] }, v))) }), _jsxs("fieldset", { "aria-label": "Filter by topic", className: "flex min-w-0 flex-wrap gap-2", children: [_jsx(TopicChip, { label: "All topics", pressed: topic === null, onClick: () => update({ topic: null }) }), topicsInUse.map((t) => (_jsx(TopicChip, { topic: t, label: TOPIC_LABELS[t], pressed: topic === t, onClick: () => update({ topic: topic === t ? null : t }) }, t)))] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [_jsx("p", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: _jsx(Status, { view: view, searching: searching, visible: visible.size, reviewed: reviewedCount, reviewSize: review.length, inbox: counts.inbox }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("p", { className: "hidden text-xs text-muted-foreground sm:block", children: [_jsx("kbd", { children: "j" }), "/", _jsx("kbd", { children: "k" }), " move \u00B7 ", _jsx("kbd", { children: "e" }), " done \u00B7 ", _jsx("kbd", { children: "c" }), " copy \u00B7 ", _jsx("kbd", { children: "o" }), " open \u00B7 ", _jsx("kbd", { children: "/" }), " ", "search"] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setCollapsed(!collapsed), children: [collapsed ? _jsx(ChevronsUpDownIcon, { "aria-hidden": "true" }) : _jsx(ChevronsDownUpIcon, { "aria-hidden": "true" }), collapsed ? "Expand all" : "Collapse all"] })] })] })] }));
 }
 function Status({ view, searching, visible, reviewed, reviewSize, inbox, }) {
     if (searching)
@@ -221,6 +247,6 @@ function Status({ view, searching, visible, reviewed, reviewSize, inbox, }) {
         return "Nothing marked done yet.";
     return plural(visible, "bookmark");
 }
-function TopicChip({ label, pressed, onClick }) {
-    return (_jsx(Button, { type: "button", size: "sm", variant: pressed ? "default" : "outline", "aria-pressed": pressed, onClick: onClick, className: "rounded-full px-3", children: label }));
+function TopicChip({ topic, label, pressed, onClick, }) {
+    return (_jsxs(Button, { type: "button", size: "sm", variant: pressed ? "default" : "outline", "aria-pressed": pressed, onClick: onClick, "data-topic": topic, className: cn("rounded-full px-3", topic !== undefined && pressed && "bg-topic text-topic-foreground hover:bg-topic/85"), children: [topic !== undefined && (_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-topic group-aria-pressed/button:bg-current" })), label] }));
 }

package/dist/index.js

@@ -13,6 +13,8 @@ const ROUTES = [
     { pattern: "/rss/[topic].xml", entrypoint: `pages/rss/[topic].xml${SCRIPT_EXTENSION}` },
     { pattern: "/favicon.svg", entrypoint: `routes/favicon.svg${SCRIPT_EXTENSION}` },
     { pattern: "/robots.txt", entrypoint: `routes/robots.txt${SCRIPT_EXTENSION}` },
+    { pattern: "/manifest.webmanifest", entrypoint: `routes/manifest.webmanifest${SCRIPT_EXTENSION}` },
+    { pattern: "/icon-[size].png", entrypoint: `routes/icon-[size].png${SCRIPT_EXTENSION}` },
 ];
 const RENDERER_PACKAGES = ["@astrojs/react", "react", "react-dom"];
 const PACKAGE_ENTRY = fileURLToPath(import.meta.url);

package/dist/layouts/Layout.astro

@@ -9,7 +9,8 @@ type Props = {
 };
 
 const { title, description, feedHref } = Astro.props;
-const favicon = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/favicon.svg`;
+const root = import.meta.env.BASE_URL.replace(/\/$/, "");
+const favicon = `${root}/favicon.svg`;
 ---
 
 <!doctype html>
@@ -22,6 +23,11 @@ const favicon = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/favicon.svg`;
     <meta name="description" content={description} />
     <meta name="color-scheme" content="light dark" />
     <link rel="icon" type="image/svg+xml" href={favicon} />
+    <link rel="manifest" href={`${root}/manifest.webmanifest`} />
+    <link rel="apple-touch-icon" href={`${root}/icon-180.png`} />
+    <meta name="apple-mobile-web-app-title" content="Grok Digest" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9f6f1" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#151311" />
     {feedHref && <link rel="alternate" type="application/rss+xml" title="Bookmarks" href={feedHref} />}
     <title>{title}</title>
     <script is:inline define:vars={{ storageKey: THEME_STORAGE_KEY, darkQuery: DARK_QUERY }}>

package/dist/lib/bookmarks.d.ts

@@ -18,11 +18,25 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
         design: "design";
         other: "other";
     }>;
+    shelf_life: z.ZodEnum<{
+        news: "news";
+        evergreen: "evergreen";
+    }>;
     tldr: z.ZodString;
     summary: z.ZodString;
     text: z.ZodString;
     key_points: z.ZodArray<z.ZodString>;
+    action: z.ZodString;
+    links: z.ZodArray<z.ZodObject<{
+        title: z.ZodString;
+        url: z.ZodURL;
+    }, z.core.$strict>>;
+    media: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        url: z.ZodURL;
+        alt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>>;
 }, z.core.$strict>, z.ZodTransform<{
+    shelfLife: "news" | "evergreen";
     postedAt: Date;
     savedAt: Date;
     keyPoints: string[];
@@ -36,6 +50,15 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
     tldr: string;
     summary: string;
     text: string;
+    action: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    media: {
+        url: string;
+        alt?: string | undefined;
+    }[];
 }, {
     id: string;
     url: string;
@@ -46,10 +69,20 @@ export declare const bookmarkSchema: z.ZodPipe<z.ZodObject<{
     posted_at: string;
     saved_at: string;
     topic: "ai-agents" | "models-releases" | "dev-tools" | "startups-business" | "japan-tech" | "design" | "other";
+    shelf_life: "news" | "evergreen";
     tldr: string;
     summary: string;
     text: string;
     key_points: string[];
+    action: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    media: {
+        url: string;
+        alt?: string | undefined;
+    }[];
 }>>;
 export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     id: z.ZodString;
@@ -69,11 +102,25 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
         design: "design";
         other: "other";
     }>;
+    shelf_life: z.ZodEnum<{
+        news: "news";
+        evergreen: "evergreen";
+    }>;
     tldr: z.ZodString;
     summary: z.ZodString;
     text: z.ZodString;
     key_points: z.ZodArray<z.ZodString>;
+    action: z.ZodString;
+    links: z.ZodArray<z.ZodObject<{
+        title: z.ZodString;
+        url: z.ZodURL;
+    }, z.core.$strict>>;
+    media: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        url: z.ZodURL;
+        alt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>>;
 }, z.core.$strict>, z.ZodTransform<{
+    shelfLife: "news" | "evergreen";
     postedAt: Date;
     savedAt: Date;
     keyPoints: string[];
@@ -87,6 +134,15 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     tldr: string;
     summary: string;
     text: string;
+    action: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    media: {
+        url: string;
+        alt?: string | undefined;
+    }[];
 }, {
     id: string;
     url: string;
@@ -97,10 +153,20 @@ export declare const bookmarksFileSchema: z.ZodArray<z.ZodPipe<z.ZodObject<{
     posted_at: string;
     saved_at: string;
     topic: "ai-agents" | "models-releases" | "dev-tools" | "startups-business" | "japan-tech" | "design" | "other";
+    shelf_life: "news" | "evergreen";
     tldr: string;
     summary: string;
     text: string;
     key_points: string[];
+    action: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    media: {
+        url: string;
+        alt?: string | undefined;
+    }[];
 }>>>;
 export declare const stateFileSchema: z.ZodArray<z.ZodString>;
 export type BookmarkFileEntry = z.input<typeof bookmarkSchema>;

package/dist/lib/bookmarks.js

@@ -3,8 +3,10 @@ import { TOPICS } from "./topics.js";
 export const SCHEMA_VERSION = 1;
 const X_HOSTNAME = /^(www\.|mobile\.)?(x|twitter)\.com$/;
 const X_HANDLE = /^[A-Za-z0-9_]{1,15}$/;
+const X_MEDIA_HOSTNAME = /^pbs\.twimg\.com$/;
 const nonEmpty = z.string().trim().min(1);
 const instant = z.iso.datetime({ offset: true });
+const SHELF_LIVES = ["news", "evergreen"];
 export const bookmarkSchema = z
     .strictObject({
     id: nonEmpty,
@@ -20,13 +22,20 @@ export const bookmarkSchema = z
     posted_at: z.union([z.iso.date(), instant]),
     saved_at: instant,
     topic: z.enum(TOPICS),
+    shelf_life: z.enum(SHELF_LIVES),
     tldr: nonEmpty,
     summary: nonEmpty,
     text: z.string().trim(),
     key_points: z.array(nonEmpty),
+    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() }))
+        .default([]),
 })
-    .transform(({ posted_at, saved_at, key_points, ...rest }) => ({
+    .transform(({ posted_at, saved_at, shelf_life, key_points, ...rest }) => ({
     ...rest,
+    shelfLife: shelf_life,
     postedAt: new Date(posted_at),
     savedAt: new Date(saved_at),
     keyPoints: key_points,

package/dist/lib/copy.d.ts

@@ -0,0 +1,2 @@
+import type { Bookmark } from "./bookmarks.ts";
+export declare function copyText({ url, author, postedAt, tldr, summary, text, media, keyPoints, action, links, }: Bookmark): string;

package/dist/lib/copy.js

@@ -0,0 +1,24 @@
+const dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium", timeZone: "UTC" });
+function quote(text) {
+    return text
+        .split("\n")
+        .map((line) => (line.trim() === "" ? ">" : `> ${line}`))
+        .join("\n");
+}
+function list(heading, items) {
+    return items.length === 0 ? "" : [`${heading}:`, ...items.map((item) => `- ${item}`)].join("\n");
+}
+export function copyText({ url, author, postedAt, tldr, summary, text, media, keyPoints, action, links, }) {
+    return [
+        "A post I saved from X:",
+        `**${tldr}**\n${author.name} (@${author.handle}) · posted ${dateFormat.format(postedAt)} · ${url}`,
+        text === "" ? "" : quote(text),
+        list("Images", media.map((image) => (image.alt === undefined ? image.url : `${image.alt}: ${image.url}`))),
+        `Summary: ${summary}`,
+        list("Key points", keyPoints),
+        action === "" ? "" : `Try: ${action}`,
+        list("Links", links.map((link) => `${link.title}: ${link.url}`)),
+    ]
+        .filter((section) => section !== "")
+        .join("\n\n");
+}

package/dist/lib/feed.js

@@ -1,4 +1,5 @@
 import { isTopic } from "./filter.js";
+import { imagesWithAlt } from "./media.js";
 import { TOPIC_LABELS } from "./topics.js";
 const LOCAL_ORIGIN = "http://localhost:4321";
 export function feedOrigin(site) {
@@ -25,11 +26,17 @@ export function topicFromParam(value) {
     return value;
 }
 function feedItem(bookmark, page) {
-    const { author, tldr, summary, text, keyPoints, topic, url, savedAt, id } = bookmark;
+    const { author, tldr, summary, text, keyPoints, action, links, topic, url, savedAt, id } = bookmark;
     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>`)
+        .join("");
+    const linkItems = links
+        .map((outbound) => `<li><a href="${escapeHtml(outbound.url)}">${escapeHtml(outbound.title)}</a></li>`)
+        .join("");
     return {
         title: tldr,
         link: link.href,
@@ -37,8 +44,11 @@ function feedItem(bookmark, page) {
         content: [
             `<p>${escapeHtml(author.name)} (@${escapeHtml(author.handle)})</p>`,
             `<p>${escapeHtml(summary)}</p>`,
+            action === "" ? "" : `<p>Try: ${escapeHtml(action)}</p>`,
             points === "" ? "" : `<ul>${points}</ul>`,
+            linkItems === "" ? "" : `<ul>${linkItems}</ul>`,
             quote,
+            images,
             `<p><a href="${escapeHtml(url)}">Open on X</a></p>`,
         ]
             .filter((part) => part !== "")

package/dist/lib/filter.d.ts

@@ -6,6 +6,10 @@ export type Filter = {
     topic: Topic | null;
     view: View;
 };
+type Defaults = {
+    reviewIsEmpty?: boolean;
+};
 export declare function isTopic(value: string | null | undefined): value is Topic;
-export declare function parseFilter(search: string): Filter;
-export declare function filterSearch({ query, topic, view }: Filter): string;
+export declare function parseFilter(search: string, defaults?: Defaults): Filter;
+export declare function filterSearch({ query, topic, view }: Filter, defaults?: Defaults): string;
+export {};

package/dist/lib/filter.js

@@ -1,30 +1,32 @@
 import { TOPICS } from "./topics.js";
 export const VIEWS = ["today", "inbox", "done", "all"];
-const DEFAULT_VIEW = "today";
+function defaultView({ reviewIsEmpty = false }) {
+    return reviewIsEmpty ? "inbox" : "today";
+}
 export function isTopic(value) {
     return TOPICS.some((topic) => topic === value);
 }
 function isView(value) {
     return VIEWS.some((view) => view === value);
 }
-export function parseFilter(search) {
+export function parseFilter(search, defaults = {}) {
     const params = new URLSearchParams(search);
     const topic = params.get("topic");
     const view = params.get("view");
     return {
         query: params.get("q") ?? "",
         topic: isTopic(topic) ? topic : null,
-        view: isView(view) ? view : DEFAULT_VIEW,
+        view: isView(view) ? view : defaultView(defaults),
     };
 }
-export function filterSearch({ query, topic, view }) {
+export function filterSearch({ query, topic, view }, defaults = {}) {
     const params = new URLSearchParams();
     const trimmed = query.trim();
     if (trimmed !== "")
         params.set("q", trimmed);
     if (topic !== null)
         params.set("topic", topic);
-    if (view !== DEFAULT_VIEW)
+    if (view !== defaultView(defaults))
         params.set("view", view);
     const search = params.toString();
     return search === "" ? "" : `?${search}`;

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

@@ -1,4 +1,5 @@
 export declare const bookmarks: {
+    shelfLife: "news" | "evergreen";
     postedAt: Date;
     savedAt: Date;
     keyPoints: string[];
@@ -12,4 +13,13 @@ export declare const bookmarks: {
     tldr: string;
     summary: string;
     text: string;
+    action: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    media: {
+        url: string;
+        alt?: string | undefined;
+    }[];
 }[];

package/dist/lib/media.d.ts

@@ -0,0 +1,5 @@
+import type { Bookmark } from "./bookmarks.ts";
+export declare function imagesWithAlt({ author, media }: Bookmark): {
+    url: string;
+    alt: string;
+}[];

package/dist/lib/media.js

@@ -0,0 +1,7 @@
+export function imagesWithAlt({ author, media }) {
+    const position = (index) => (media.length === 1 ? "" : ` ${index + 1} of ${media.length}`);
+    return media.map(({ url, alt }, index) => ({
+        url,
+        alt: alt ?? `Image${position(index)} from the post by @${author.handle}`,
+    }));
+}

package/dist/lib/review.d.ts

@@ -6,6 +6,7 @@ export type ReviewPick = {
 type Saved = {
     id: string;
     savedAt: Date;
+    shelfLife: "news" | "evergreen";
 };
 export declare function localDay(date: Date, timeZone?: string): string;
 export declare function dailyReview({ bookmarks, done, today, timeZone, }: {

package/dist/lib/review.js

@@ -5,6 +5,7 @@ const REVIEW_AGES = new Map([
     [30, "Saved a month ago"],
     [90, "Saved 3 months ago"],
 ]);
+const NEWS_AGES = new Set([1, 7]);
 const BACKLOG_REASON = "From your backlog";
 const DAY_MS = 86_400_000;
 export function localDay(date, timeZone) {
@@ -30,10 +31,16 @@ function hash(text) {
 export function dailyReview({ bookmarks, done, today, timeZone, }) {
     const candidates = bookmarks
         .filter(({ id }) => !done.has(id))
-        .map(({ id, savedAt }) => {
+        .map(({ id, savedAt, shelfLife }) => {
         const saved = localDay(savedAt, timeZone);
         const age = daysBetween(saved, today);
-        return { id, age, reason: REVIEW_AGES.get(age) ?? anniversaryReason(saved, today) };
+        const news = shelfLife === "news";
+        const reason = news
+            ? NEWS_AGES.has(age)
+                ? REVIEW_AGES.get(age)
+                : undefined
+            : (REVIEW_AGES.get(age) ?? anniversaryReason(saved, today));
+        return { id, age, news, reason };
     })
         .filter(({ age }) => age >= 1);
     const due = candidates
@@ -42,7 +49,7 @@ export function dailyReview({ bookmarks, done, today, timeZone, }) {
         .slice(0, REVIEW_SIZE)
         .map(({ id, reason }) => ({ id, reason }));
     const backlog = candidates
-        .filter(({ reason }) => reason === undefined)
+        .filter(({ news, reason }) => !news && reason === undefined)
         .toSorted((a, b) => hash(`${today}:${a.id}`) - hash(`${today}:${b.id}`))
         .slice(0, REVIEW_SIZE - due.length)
         .map(({ id }) => ({ id, reason: BACKLOG_REASON }));

package/dist/lib/search.d.ts

@@ -5,6 +5,7 @@ export type SearchEntry = {
     id: string;
     topic: Topic;
     savedAt: Date;
+    shelfLife: Bookmark["shelfLife"];
     text: string;
 };
 export declare function toSearchEntry(bookmark: Bookmark): SearchEntry;

package/dist/lib/search.js

@@ -3,12 +3,23 @@ function normalize(text) {
     return text.normalize("NFKC").toLowerCase();
 }
 export function toSearchEntry(bookmark) {
-    const { id, topic, savedAt, author, tldr, summary, text, keyPoints } = bookmark;
+    const { id, topic, savedAt, shelfLife, author, tldr, summary, text, keyPoints, action, links } = bookmark;
     return {
         id,
         topic,
         savedAt,
-        text: normalize([author.name, `@${author.handle}`, TOPIC_LABELS[topic], tldr, summary, text, ...keyPoints].join("\n")),
+        shelfLife,
+        text: normalize([
+            author.name,
+            `@${author.handle}`,
+            TOPIC_LABELS[topic],
+            tldr,
+            summary,
+            text,
+            ...keyPoints,
+            action,
+            ...links.map(({ title }) => title),
+        ].join("\n")),
     };
 }
 const IN_VIEW = {

package/dist/pages/index.astro

@@ -47,11 +47,11 @@ const designFeedHref = `${base}rss/design.xml`;
 
     <footer class="flex flex-col gap-2 border-t py-8 text-sm text-muted-foreground">
       <p>
-        <a class="underline decoration-border underline-offset-4 hover:decoration-current" href={feedHref}>
+        <a class="underline decoration-border underline-offset-4 hover:decoration-brand" href={feedHref}>
           Follow new bookmarks
         </a>{" "}
         in a feed reader. Each topic has its own feed, such as{" "}
-        <a class="underline decoration-border underline-offset-4 hover:decoration-current" href={designFeedHref}>
+        <a class="underline decoration-border underline-offset-4 hover:decoration-brand" href={designFeedHref}>
           Design
         </a>
         .

package/dist/routes/icon-[size].png.d.ts

@@ -0,0 +1,10 @@
+export declare const getStaticPaths: () => {
+    params: {
+        size: string;
+    };
+}[];
+export declare const GET: ({ params }: {
+    params: {
+        size?: string;
+    };
+}) => Response;

package/dist/routes/icon-[size].png.js

@@ -0,0 +1,10 @@
+import icon180 from "../assets/icon-180.png?inline";
+import icon192 from "../assets/icon-192.png?inline";
+import icon512 from "../assets/icon-512.png?inline";
+const ICONS = { "180": icon180, "192": icon192, "512": icon512 };
+export const getStaticPaths = () => Object.keys(ICONS).map((size) => ({ params: { size } }));
+export const GET = ({ params }) => {
+    const dataUrl = ICONS[params.size ?? ""] ?? "";
+    const bytes = Buffer.from(dataUrl.slice(dataUrl.indexOf(",") + 1), "base64");
+    return new Response(bytes, { headers: { "Content-Type": "image/png" } });
+};

package/dist/routes/manifest.webmanifest.d.ts

@@ -0,0 +1 @@
+export declare const GET: () => Response;

package/dist/routes/manifest.webmanifest.js

@@ -0,0 +1,14 @@
+const manifest = {
+    name: "Grok Digest",
+    short_name: "Digest",
+    start_url: "./",
+    scope: "./",
+    display: "standalone",
+    background_color: "#f9f6f1",
+    theme_color: "#f9f6f1",
+    icons: [
+        { src: "icon-192.png", sizes: "192x192", type: "image/png", purpose: "any maskable" },
+        { src: "icon-512.png", sizes: "512x512", type: "image/png", purpose: "any maskable" },
+    ],
+};
+export const GET = () => new Response(JSON.stringify(manifest), { headers: { "Content-Type": "application/manifest+json" } });

package/dist/styles/global.css

@@ -30,6 +30,14 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
+  --color-brand: var(--brand);
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-soft: var(--brand-soft);
+  --color-done: var(--done);
+  --color-done-foreground: var(--done-foreground);
+  --color-topic: var(--topic);
+  --color-topic-soft: var(--topic-soft);
+  --color-topic-foreground: var(--topic-foreground);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -57,8 +65,13 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.9 0.01 80);
   --input: oklch(0.88 0.01 80);
-  --ring: oklch(0.65 0.02 70);
+  --ring: oklch(0.76 0.15 70);
   --radius: 0.625rem;
+  --brand: oklch(0.76 0.15 70);
+  --brand-ink: oklch(0.5 0.11 60);
+  --brand-soft: oklch(0.955 0.04 85);
+  --done: oklch(0.52 0.12 155);
+  --done-foreground: oklch(0.985 0.004 85);
 }
 
 .dark {
@@ -79,7 +92,48 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 9%);
   --input: oklch(1 0 0 / 14%);
-  --ring: oklch(0.6 0.015 70);
+  --ring: oklch(0.78 0.14 72);
+  --brand: oklch(0.78 0.14 72);
+  --brand-ink: oklch(0.82 0.12 78);
+  --brand-soft: oklch(0.28 0.04 72);
+  --done: oklch(0.76 0.13 155);
+  --done-foreground: oklch(0.2 0.008 60);
+}
+
+[data-topic] {
+  --topic-chroma: 1;
+  --topic: oklch(0.5 calc(0.11 * var(--topic-chroma)) var(--topic-hue));
+  --topic-soft: oklch(0.95 calc(0.025 * var(--topic-chroma)) var(--topic-hue));
+  --topic-foreground: oklch(0.985 0.004 85);
+}
+
+.dark [data-topic] {
+  --topic: oklch(0.8 calc(0.1 * var(--topic-chroma)) var(--topic-hue));
+  --topic-soft: oklch(0.3 calc(0.045 * var(--topic-chroma)) var(--topic-hue));
+  --topic-foreground: oklch(0.2 0.008 60);
+}
+
+[data-topic="ai-agents"] {
+  --topic-hue: 295;
+}
+[data-topic="models-releases"] {
+  --topic-hue: 250;
+}
+[data-topic="dev-tools"] {
+  --topic-hue: 195;
+}
+[data-topic="startups-business"] {
+  --topic-hue: 120;
+}
+[data-topic="japan-tech"] {
+  --topic-hue: 20;
+}
+[data-topic="design"] {
+  --topic-hue: 340;
+}
+[data-topic="other"] {
+  --topic-hue: 70;
+  --topic-chroma: 0.15;
 }
 
 @layer base {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grok-digest",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Astro integration that renders a Grok Digest site: X bookmarks summarized by Grok, searchable, sorted by topic, with RSS feeds.",
   "keywords": [
     "astro",
@@ -20,6 +20,7 @@
   },
   "files": [
     "dist",
+    "BOT.md",
     "LICENSE-THIRD-PARTY"
   ],
   "type": "module",