@jant/core 0.6.15 → 0.7.0

package/src/ui/pages/SmartCollectionPage.tsx

@@ -0,0 +1,434 @@
+/**
+ * Smart Collection Page
+ *
+ * The same shape as a collection page — title, description, thread count, feed
+ * link, timeline — minus the archive's chip bar. A collection page has no
+ * filter bar either, and this one is not a place to filter: the conditions are
+ * edited in a dialog.
+ *
+ * What marks it as smart is the funnel after the title, the same marker the
+ * directory puts on a smart row, and the same tooltip. The conditions
+ * themselves stand in for a description the owner has not written; once one is
+ * written, it takes the slot and the marker carries the signal alone.
+ */
+
+import { msg } from "@lingui/core/macro";
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/context.js";
+import type { SmartCollectionPageProps } from "../../types.js";
+import { getCollectionsDirectoryPath } from "../../lib/collection-paths.js";
+import { render as renderMarkdown } from "../../lib/markdown.js";
+import { formatPageLabel } from "../../lib/pagination.js";
+import { toPublicPath } from "../../lib/url.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
+import { getCollectionMutationLabels } from "../shared/collection-management-labels.js";
+import {
+  getSmartCollectionDialogLabels,
+  getSmartCollectionLabels,
+} from "../shared/smart-collection-labels.js";
+import { getIconSvg } from "../../lib/icons.js";
+import { Icon } from "../shared/Icon.js";
+import { NAVIGATION_SETTINGS_PATH } from "../../lib/settings-paths.js";
+
+const escapeJson = (data: unknown) =>
+  JSON.stringify(data).replace(/</g, "\\u003c");
+
+export const SmartCollectionPage: FC<SmartCollectionPageProps> = ({
+  smartCollection,
+  items,
+  totalThreadCount,
+  currentPage,
+  totalPages,
+  pagePath,
+  baseUrl,
+  currentSort,
+  defaultSort,
+  showRatingSort,
+  conditionSummary,
+  conditionHref,
+  isAuthenticated,
+  isInNavigation = false,
+  sitePathPrefix = "",
+  basePath = sitePathPrefix,
+  feedHref,
+}) => {
+  const { i18n } = useLingui();
+  const labels = getSmartCollectionLabels(i18n);
+  const mutationLabels = getCollectionMutationLabels(i18n);
+  const pageUrl = toPublicPath(pagePath, basePath);
+  const navigationSettingsUrl = toPublicPath(
+    NAVIGATION_SETTINGS_PATH,
+    sitePathPrefix,
+  );
+  const sortTriggerId = `smart-collection-sort-trigger-${smartCollection.id}`;
+  const sortPopoverId = `smart-collection-sort-popover-${smartCollection.id}`;
+  const pageLabel =
+    currentPage > 1 ? formatPageLabel(currentPage, totalPages) : null;
+
+  const sortOptions = [
+    {
+      value: "newest",
+      label: i18n._(
+        msg({
+          message: "Newest first",
+          comment: "@context: Collection sort order option",
+        }),
+      ),
+    },
+    {
+      value: "oldest",
+      label: i18n._(
+        msg({
+          message: "Oldest first",
+          comment: "@context: Collection sort order option",
+        }),
+      ),
+    },
+    ...(showRatingSort
+      ? [
+          {
+            value: "rating_desc",
+            label: i18n._(
+              msg({
+                message: "Highest rated",
+                comment: "@context: Collection sort order option",
+              }),
+            ),
+          },
+        ]
+      : []),
+  ] as const;
+  const currentSortLabel =
+    sortOptions.find((option) => option.value === currentSort)?.label ??
+    sortOptions[0].label;
+
+  return (
+    <div
+      class="py-6"
+      // The same page kind a theme already styles; the second attribute is the
+      // hook for anything that needs to tell the two apart.
+      data-page="collection"
+      data-smart-collection={smartCollection.slug}
+      data-collection-mode="smart"
+    >
+      <header class="collection-page-header">
+        <div class="collection-page-topbar">
+          {/* Only the return trip is left. A breadcrumb's last crumb named this
+              page, which the title one line below already does, word for
+              word — so the trail was two thirds repetition. */}
+          <a
+            class="collection-page-back"
+            href={toPublicPath(getCollectionsDirectoryPath(), basePath)}
+          >
+            <Icon name="arrow-left" class="collection-page-back-icon" />
+            {i18n._(
+              msg({
+                message: "Collections",
+                comment:
+                  "@context: Link back to the collections directory from a collection page",
+              }),
+            )}
+          </a>
+        </div>
+
+        <div class="collection-page-title-block">
+          <h1 class="collection-page-title">
+            <span>
+              {smartCollection.title}
+              {/* The marker every reader gets, in the same slot and the same
+                  words the directory uses: which kind of collection this is
+                  changes how an absence reads. Unlike the directory's — which
+                  sits inside the row's link and so cannot be one itself — this
+                  one carries the way to the archive, so a description written
+                  over the condition line does not take it away. */}
+              <a
+                href={toPublicPath(conditionHref, basePath)}
+                class="collection-page-smart-icon"
+                title={conditionSummary}
+                aria-label={conditionSummary}
+                dangerouslySetInnerHTML={{
+                  __html: getIconSvg("funnel", "icon-fine") ?? "",
+                }}
+              />
+            </span>
+          </h1>
+          {smartCollection.description ? (
+            <div
+              class="collection-page-description prose"
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdown(smartCollection.description, {
+                  namespace: smartCollection.id,
+                }),
+              }}
+            />
+          ) : (
+            /* Nothing written, so the conditions describe the page — and the
+               link is there for a reader who wants to narrow further, since
+               the archive already reads this vocabulary. */
+            <p class="collection-page-description smart-collection-conditions">
+              <a href={toPublicPath(conditionHref, basePath)}>
+                {conditionSummary}
+              </a>
+            </p>
+          )}
+        </div>
+
+        <div class="collection-page-subhead">
+          <div class="collection-page-meta-row">
+            <p class="collection-page-meta">
+              {totalThreadCount}{" "}
+              {totalThreadCount === 1
+                ? i18n._(
+                    msg({
+                      message: "thread",
+                      comment:
+                        "@context: Singular thread count label on collection detail page",
+                    }),
+                  )
+                : i18n._(
+                    msg({
+                      message: "threads",
+                      comment:
+                        "@context: Plural thread count label on collection detail page",
+                    }),
+                  )}
+              {pageLabel ? <span> / {pageLabel}</span> : null}
+              {feedHref ? (
+                <>
+                  {" "}
+                  <a
+                    href={toPublicPath(feedHref, basePath)}
+                    class="feed-link"
+                    title={i18n._(
+                      msg({
+                        message: "RSS feed",
+                        comment:
+                          "@context: Tooltip for the RSS feed link on a collection page",
+                      }),
+                    )}
+                    rel="noopener noreferrer"
+                  >
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html: getIconSvg("rss") ?? "",
+                      }}
+                    />
+                  </a>
+                </>
+              ) : null}
+            </p>
+            <span class="collection-page-meta-divider" aria-hidden="true">
+              &middot;
+            </span>
+            <div class="dropdown-menu collection-sort-menu">
+              <button
+                type="button"
+                id={sortTriggerId}
+                class="collection-sort-trigger"
+                aria-haspopup="menu"
+                aria-controls={sortPopoverId}
+                aria-expanded="false"
+              >
+                <span class="sr-only">
+                  {i18n._(
+                    msg({
+                      message: "Sort",
+                      comment:
+                        "@context: Sort menu label on collection detail page",
+                    }),
+                  )}
+                  :{" "}
+                </span>
+                <span>{currentSortLabel}</span>
+                <Icon name="chevron-down" size={14} />
+              </button>
+              <div
+                id={sortPopoverId}
+                class="collection-sort-popover"
+                data-popover
+                data-align="end"
+                aria-hidden="true"
+              >
+                <div
+                  class="collection-sort-options"
+                  role="menu"
+                  aria-labelledby={sortTriggerId}
+                  data-collection-sort-options
+                >
+                  {sortOptions.map((option) => (
+                    <a
+                      key={option.value}
+                      href={
+                        option.value === defaultSort
+                          ? pageUrl
+                          : `${pageUrl}?sort=${option.value}`
+                      }
+                      role="menuitem"
+                      class={`collection-sort-option ${
+                        option.value === currentSort
+                          ? "collection-sort-option-active"
+                          : ""
+                      }`}
+                      aria-current={
+                        option.value === currentSort ? "true" : undefined
+                      }
+                    >
+                      <span class="collection-sort-option-leading">
+                        <span>{option.label}</span>
+                      </span>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {isAuthenticated ? (
+            <div class="collection-page-owner-tools">
+              {/* The dialog is a Lit component and cannot reach the i18n
+                  catalogs, so the page that can open it carries its strings. */}
+              <div
+                hidden
+                data-smart-collection-dialog-labels={escapeJson(
+                  getSmartCollectionDialogLabels(i18n),
+                )}
+              />
+              <div
+                class="collection-page-manage"
+                data-smart-collection-page-actions
+                data-smart-collection-id={smartCollection.id}
+                data-collection-page-labels={escapeJson({
+                  ...mutationLabels,
+                  confirmDelete: labels.confirmDelete,
+                  deleteCollection: labels.deleteSmartCollection,
+                  deleted: i18n._(
+                    msg({
+                      message: "Smart collection deleted.",
+                      comment:
+                        "@context: Confirmation after deleting a smart collection",
+                    }),
+                  ),
+                })}
+                data-collection-in-navigation={String(isInNavigation)}
+                data-collection-page-redirect-url={toPublicPath(
+                  getCollectionsDirectoryPath(),
+                  basePath,
+                )}
+              >
+                <button
+                  type="button"
+                  class="collection-page-manage-trigger"
+                  aria-label={mutationLabels.moreActions}
+                  aria-expanded="false"
+                  aria-haspopup="menu"
+                  data-collection-page-action="toggle-menu"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <circle cx="5" cy="12" r="2" />
+                    <circle cx="12" cy="12" r="2" />
+                    <circle cx="19" cy="12" r="2" />
+                  </svg>
+                </button>
+
+                <div
+                  class="collections-page-menu"
+                  role="menu"
+                  data-collection-page-menu
+                  hidden
+                >
+                  {/* Opens the dialog rather than navigating: there is no
+                      editor page, so creating and editing are one surface. */}
+                  <button
+                    type="button"
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-action="edit"
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <Icon name="pencil" />
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.edit}
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-action="add-to-navigation"
+                    hidden={isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <Icon name="plus" />
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.addToNavigation}
+                    </span>
+                  </button>
+                  <a
+                    href={navigationSettingsUrl}
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-edit-navigation
+                    hidden={!isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <Icon name="list" />
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.editNavigation}
+                    </span>
+                  </a>
+                  <button
+                    type="button"
+                    class="collections-page-menu-item collections-page-menu-item-danger"
+                    role="menuitem"
+                    data-collection-page-action="delete"
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <Icon name="trash-2" />
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {labels.deleteSmartCollection}
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </header>
+
+      <main>
+        {items.length === 0 ? (
+          <p class="text-muted-foreground">{labels.emptyMatches}</p>
+        ) : (
+          <TimelineFeed
+            items={items}
+            baseUrl={baseUrl}
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        )}
+      </main>
+    </div>
+  );
+};

package/src/ui/pages/SubscribePage.tsx

@@ -0,0 +1,236 @@
+import type { FC } from "hono/jsx";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "../../i18n/context.js";
+import { getIconSvg } from "../../lib/icons.js";
+import { CopyField } from "../shared/CopyField.js";
+import { PaginatedPageHeader } from "../shared/PaginatedPageHeader.js";
+
+/** One feed offered on this page. */
+export interface SubscribeFeed {
+  /** What to call it, as the reader would ask for it. */
+  label: string;
+  /** Absolute address, for pasting into a reader. */
+  url: string;
+  /** One line on what this feed carries that the others do not. */
+  description: string;
+  /**
+   * The page whose posts this feed carries, linked from the label.
+   *
+   * Feeds live at `{page}/feed`, so each one has a page a reader can open to
+   * see exactly what they would be subscribing to. That page is the only
+   * honest preview — describing a feed in a sentence can only approximate it.
+   */
+  pageUrl: string;
+}
+
+export interface SubscribePageProps {
+  /**
+   * The feed to lead with — whichever `/feed` currently returns. Presented on
+   * its own because the page's job is to answer "which one do I use", and a
+   * menu of equals hands that question back to the reader.
+   */
+  mainFeed: SubscribeFeed;
+  /**
+   * The other two, at lower visual weight: the opposite end of the same list
+   * from the main feed, and the complete record.
+   */
+  otherFeeds: readonly SubscribeFeed[];
+}
+
+/**
+ * The page's measure.
+ *
+ * The addresses are copy fields — a read-only input with the button laid over
+ * its right edge — and the site's content column runs to 1088px. Left at full
+ * width the button sits some 700px from the address it copies, and three of
+ * them stacked read as a settings form. 576px holds a long site URL with a
+ * language prefix whole while keeping the button next to its address.
+ */
+const COLUMN_CLASS = "max-w-xl";
+
+/**
+ * How to follow this site.
+ *
+ * Every address here is rendered by the server. This page is its addresses —
+ * there is nothing else on it — so none of them may wait for JavaScript.
+ *
+ * @param props - The main feed and the two shown beneath it
+ * @returns The subscribe page content
+ */
+export const SubscribePage: FC<SubscribePageProps> = ({
+  mainFeed,
+  otherFeeds,
+}) => {
+  const { i18n } = useLingui();
+
+  const copyLabel = i18n._(
+    msg({
+      message: "Copy",
+      comment: "@context: Button that copies a feed address to the clipboard",
+    }),
+  );
+  const copiedMessage = i18n._(
+    msg({
+      message: "Feed URL copied.",
+      comment: "@context: Toast after copying a feed URL to the clipboard",
+    }),
+  );
+  // One string for all three rows: it explains the affordance, and the row's
+  // own description already names which page it opens.
+  const pageLinkTitle = i18n._(
+    msg({
+      message: "Open the page this feed carries",
+      comment:
+        "@context: Tooltip on the subscribe page feed names, which link to the page whose posts that feed carries",
+    }),
+  );
+  const failedMessage = i18n._(
+    msg({
+      message: "Could not copy. Select the address and copy it.",
+      comment:
+        "@context: Toast when the clipboard is unavailable, pointing at selecting the address by hand",
+    }),
+  );
+
+  return (
+    <div data-page="subscribe" class={COLUMN_CLASS}>
+      <PaginatedPageHeader
+        title={i18n._(
+          msg({
+            message: "Subscribe",
+            comment: "@context: Page title for the feed subscription page",
+          }),
+        )}
+        // The page is about feeds and carried no feed mark at all. It also
+        // ends by telling the reader to look for this glyph elsewhere, which
+        // only works once they have seen it here.
+        iconHtml={
+          getIconSvg("rss", "size-6 text-muted-foreground") ?? undefined
+        }
+        description={i18n._(
+          msg({
+            message:
+              "This site publishes Atom feeds. Copy one of these addresses into a feed reader.",
+            comment:
+              "@context: Subscribe page introduction, above the feed addresses. States the format the site serves, then the one action to take.",
+          }),
+        )}
+      />
+
+      <div class="card p-5">
+        <CopyField
+          label={mainFeed.label}
+          labelHref={mainFeed.pageUrl}
+          labelTitle={pageLinkTitle}
+          value={mainFeed.url}
+          description={mainFeed.description}
+          copyLabel={copyLabel}
+          copiedMessage={copiedMessage}
+          failedMessage={failedMessage}
+        />
+      </div>
+
+      <div class="mt-8 flex flex-col gap-5">
+        {otherFeeds.map((feed) => (
+          <CopyField
+            key={feed.url}
+            label={feed.label}
+            labelHref={feed.pageUrl}
+            labelTitle={pageLinkTitle}
+            value={feed.url}
+            description={feed.description}
+            copyLabel={copyLabel}
+            copiedMessage={copiedMessage}
+            failedMessage={failedMessage}
+          />
+        ))}
+      </div>
+
+      <p class="mt-8 flex items-start gap-2 text-sm text-muted-foreground">
+        {/* The specimen the sentence points at. Decorative — the sentence
+            names it, so a screen reader announcing the glyph twice would only
+            get in the way. */}
+        <span
+          class="mt-0.5 shrink-0 opacity-70"
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{
+            __html: getIconSvg("rss", "size-3.5") ?? "",
+          }}
+        />
+        <span>
+          {i18n._(
+            msg({
+              message:
+                "Collections and filtered archive views have their own feeds. Look for this icon on those pages.",
+              comment:
+                "@context: Subscribe page closing note, next to a small feed icon standing in for the ones on collection and archive pages",
+            }),
+          )}
+        </span>
+      </p>
+
+      {/* Last, under a rule: a reader who already keeps a feed reader never
+          has to read it, and one who does not can find it by its heading.
+          Naming specific readers was considered and dropped — the list would
+          be identical on every Jant site, which makes the software the one
+          endorsing them, and it would rot as readers shut down or change
+          hands. */}
+      <section class="mt-10 border-t pt-6">
+        <h2 class="text-base font-medium">
+          {i18n._(
+            msg({
+              message: "What a feed reader does",
+              comment:
+                "@context: Subscribe page heading over the explanation of feed readers, for readers who have not used one",
+            }),
+          )}
+        </h2>
+        <p class="mt-2 text-sm text-muted-foreground">
+          {i18n._(
+            msg({
+              message:
+                "A feed reader checks these addresses for new posts and collects them in one place. Most are an app on your phone or computer; some are a website you sign in to.",
+              comment:
+                "@context: Subscribe page explanation of what a feed reader is and where it runs",
+            }),
+          )}
+        </p>
+        <p class="mt-2 text-sm text-muted-foreground">
+          {i18n._(
+            msg({
+              message:
+                "Subscribing creates no account here. To stop, delete the address from your reader.",
+              comment:
+                "@context: Subscribe page note that subscribing is one-sided and how to undo it",
+            }),
+          )}
+        </p>
+        {/* The whole sentence is the link, so its accessible name describes
+            where it goes and no fragment has to be assembled around an anchor.
+            aboutfeeds.com is the one widely used vendor-neutral explainer
+            written for exactly this reader — someone who just met a feed
+            address. It does name a few readers, which is the point: a third
+            party can recommend them without every Jant site appearing to. If
+            it ever goes dark the two paragraphs above still stand on their
+            own. */}
+        <p class="mt-4 text-sm">
+          <a
+            href="https://aboutfeeds.com/"
+            class="underline decoration-1 underline-offset-4"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {i18n._(
+              msg({
+                message:
+                  "A longer introduction to feeds and readers, at aboutfeeds.com",
+                comment:
+                  "@context: Subscribe page link to the independent aboutfeeds.com explainer. The whole sentence is the link text.",
+              }),
+            )}
+          </a>
+        </p>
+      </section>
+    </div>
+  );
+};