@jant/core 0.6.1 → 0.6.3

package/src/services/site-admin.ts

@@ -1,4 +1,4 @@
-import { and, eq, sql } from "drizzle-orm";
+import { and, eq, inArray, sql } from "drizzle-orm";
 import {
   executeStatement,
   type Database,
@@ -87,6 +87,11 @@ export interface ManagedSiteMediaUsageResult {
   siteId: string;
 }
 
+export interface ManagedSitePostCountResult {
+  publishedPostCount: number;
+  siteId: string;
+}
+
 export interface ManagedSiteKeyAvailabilityResult {
   available: boolean;
   key: string;
@@ -114,6 +119,15 @@ export interface SiteAdminService {
   getManagedSiteMediaUsage(
     siteId: string,
   ): Promise<ManagedSiteMediaUsageResult>;
+  /**
+   * Batch published-post counts for hosted sites, keyed by site id. Used by the
+   * control-plane admin site list to show how much content each blog has.
+   * Unknown site ids resolve to a zero count instead of an error so a stale
+   * control-plane pointer never fails the whole lookup.
+   */
+  getManagedSitePostCounts(
+    siteIds: string[],
+  ): Promise<ManagedSitePostCountResult[]>;
   suspendManagedSite(siteId: string): Promise<Site>;
   resumeManagedSite(siteId: string): Promise<Site>;
   deleteManagedSite(
@@ -588,6 +602,40 @@ export function createSiteAdminService(
     };
   }
 
+  async function getManagedSitePostCounts(
+    siteIds: string[],
+  ): Promise<ManagedSitePostCountResult[]> {
+    const normalizedSiteIds = [
+      ...new Set(siteIds.map((siteId) => siteId.trim()).filter(Boolean)),
+    ];
+    if (normalizedSiteIds.length === 0) {
+      return [];
+    }
+
+    const rows = await db
+      .select({
+        publishedPostCount: sql<number>`cast(count(*) as integer)`,
+        siteId: posts.siteId,
+      })
+      .from(posts)
+      .where(
+        and(
+          inArray(posts.siteId, normalizedSiteIds),
+          eq(posts.status, "published"),
+        ),
+      )
+      .groupBy(posts.siteId);
+
+    const countBySiteId = new Map(
+      rows.map((row) => [row.siteId, Number(row.publishedPostCount ?? 0)]),
+    );
+
+    return normalizedSiteIds.map((siteId) => ({
+      publishedPostCount: countBySiteId.get(siteId) ?? 0,
+      siteId,
+    }));
+  }
+
   async function mutateSiteDomains(
     siteId: string,
     mutate: (targetDb: Database, normalizedSiteId: string) => Promise<void>,
@@ -637,6 +685,10 @@ export function createSiteAdminService(
       assertManagedSiteOperationsEnabled();
       return getManagedSiteMediaUsage(siteId);
     },
+    async getManagedSitePostCounts(siteIds) {
+      assertManagedSiteOperationsEnabled();
+      return getManagedSitePostCounts(siteIds);
+    },
     async exportManagedSite(siteId, deps) {
       assertManagedSiteOperationsEnabled();
       const normalizedSiteId = siteId.trim();

package/src/styles/site-media.css

@@ -79,6 +79,10 @@
   animation: lightbox-scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
+.media-lightbox-img-zoomable {
+  cursor: zoom-in;
+}
+
 .media-lightbox-img-scroll {
   width: min(100%, 44rem);
   max-width: none;
@@ -87,6 +91,10 @@
   margin: 0 auto;
 }
 
+.media-lightbox-img-zoomable.media-lightbox-img-scroll {
+  cursor: zoom-out;
+}
+
 .media-lightbox-close {
   position: fixed;
   top: 16px;
@@ -794,36 +802,74 @@ button.media-gallery-card {
   background: transparent;
 }
 
-/* --- Gallery horizontal scroll fade hints ------------------------------- */
+/* --- Gallery scroll arrows --------------------------------------------- */
 
 .media-gallery-scroll-wrap {
-  /* Default: no mask — full visibility */
-  --_fade: 1.5rem;
-  --_mask-left: black;
-  --_mask-right: black;
+  /* Positioning context for the prev/next scroll arrows. */
+  position: relative;
 }
+/* The strip is trackpad/touch-friendly, but a plain mouse has no visible way
+   to scroll it (the scrollbar is hidden). These buttons give mouse users an
+   affordance; they appear on hover over whichever side still has hidden
+   content. Keyboard users scroll the focusable strip with Arrow/Home/End keys
+   instead — wired up in media-scroll-hint.ts. */
 
-.media-gallery-scroll-wrap > [data-post-media] {
-  mask-image: linear-gradient(
-    to right,
-    var(--_mask-left) 0%,
-    black var(--_fade),
-    black calc(100% - var(--_fade)),
-    var(--_mask-right) 100%
-  );
-  -webkit-mask-image: linear-gradient(
-    to right,
-    var(--_mask-left) 0%,
-    black var(--_fade),
-    black calc(100% - var(--_fade)),
-    var(--_mask-right) 100%
-  );
+.media-gallery-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: #00000080;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.media-gallery-nav:hover {
+  background-color: #000000b3;
+}
+
+.media-gallery-nav svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.media-gallery-nav-prev {
+  left: 8px;
+}
+
+.media-gallery-nav-next {
+  right: 8px;
 }
 
-.media-gallery-scroll-wrap.can-scroll-start {
-  --_mask-left: transparent;
+/* Reveal only with a real mouse (not touch), and only for the side that can
+   actually scroll — mirrors the can-scroll-* state used by the edge fade. */
+@media (hover: hover) and (pointer: fine) {
+  .media-gallery-scroll-wrap.can-scroll-start:hover .media-gallery-nav-prev,
+  .media-gallery-scroll-wrap.can-scroll-end:hover .media-gallery-nav-next {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
-.media-gallery-scroll-wrap.can-scroll-end {
-  --_mask-right: transparent;
+/* Visible focus ring when a keyboard user tabs onto the scrollable strip. */
+.media-gallery-scroll-wrap > [data-post-media]:focus-visible {
+  outline: 2px solid var(--site-text-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
 }

package/src/styles/ui.css

@@ -611,12 +611,12 @@
   }
 
   .site-logo-avatar {
-    width: calc(var(--avatar-size) + 2px);
-    height: calc(var(--avatar-size) + 2px);
+    box-sizing: border-box;
+    width: calc(var(--avatar-size) + 4px);
+    height: calc(var(--avatar-size) + 4px);
     border-radius: var(--avatar-radius);
     object-fit: cover;
-    box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--site-divider) 82%, transparent);
+    border: 1px solid color-mix(in srgb, var(--site-divider) 82%, transparent);
   }
 
   .jant-brand-mark {
@@ -1115,6 +1115,10 @@
     flex: 1 1 18rem;
   }
 
+  .collections-page-heading .page-intro-title-row {
+    align-items: center;
+  }
+
   .collections-page-actions {
     display: flex;
     align-items: center;
@@ -1129,7 +1133,7 @@
   }
 
   .collections-page-action-group[data-collections-toolbar] {
-    gap: 0.2rem;
+    gap: 0.25rem;
   }
 
   .collections-page-toolbar-button {
@@ -1137,13 +1141,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    width: 2.25rem;
+    height: 2.25rem;
     padding: 0;
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: var(--foreground);
+    color: var(--site-text-secondary);
     cursor: pointer;
     transition:
       background-color 0.16s ease,
@@ -1152,41 +1156,15 @@
       border-color 0.16s ease;
   }
 
-  .collections-page-toolbar-button:hover {
-    background: color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-
-  .collections-page-toolbar-button:focus-visible {
-    outline: none;
-    background: color-mix(in srgb, var(--accent) 46%, transparent);
-    box-shadow: 0 0 0 3px
-      color-mix(in srgb, var(--site-accent) 12%, transparent);
-  }
-
-  .collections-page-more-btn {
-    min-width: 2.1rem;
-    width: 2.1rem;
-    height: 2.1rem;
-    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
-    background: color-mix(
-      in srgb,
-      var(--background) 90%,
-      var(--site-page-bg) 10%
-    );
-    color: var(--site-text-secondary);
-    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.26);
-  }
-
-  .collections-page-more-btn:hover,
-  .collections-page-more-btn[aria-expanded="true"] {
-    border-color: color-mix(in srgb, var(--site-accent) 18%, var(--border));
-    background: color-mix(in srgb, var(--accent) 34%, var(--background));
+  .collections-page-toolbar-button:hover,
+  .collections-page-toolbar-button[aria-expanded="true"] {
+    background: var(--accent);
     color: var(--foreground);
   }
 
-  .collections-page-more-btn:focus-visible {
+  .collections-page-toolbar-button:focus-visible {
     outline: none;
-    border-color: color-mix(in srgb, var(--site-accent) 26%, var(--border));
+    background: var(--accent);
     box-shadow: 0 0 0 3px
       color-mix(in srgb, var(--site-accent) 12%, transparent);
   }
@@ -1377,7 +1355,6 @@
     line-height: var(--collection-directory-title-line-height);
     letter-spacing: -0.02em;
     text-wrap: pretty;
-    user-select: all;
   }
 
   .collection-directory-title-marker {
@@ -2210,7 +2187,6 @@
 
   .feed-link-title-link {
     text-decoration: none;
-    user-select: all;
   }
 
   .feed-link-title-link:hover {
@@ -2228,10 +2204,6 @@
     text-wrap: pretty;
   }
 
-  .feed-note-title a {
-    user-select: all;
-  }
-
   .feed-continue-link {
     display: inline-block;
     margin-top: 0.5rem;
@@ -5267,11 +5239,16 @@
     flex-shrink: 0;
     gap: 4px;
     align-items: center;
-    margin-top: 12px;
-    padding-left: 2px;
+    padding: 4px 20px 6px;
     animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
+  @media (min-width: 700px) {
+    .compose-star-rating {
+      padding: 6px 24px 6px;
+    }
+  }
+
   .compose-star {
     border: none;
     background: transparent;
@@ -6997,10 +6974,15 @@
     opacity: 0.82;
   }
 
-  /* Single image: constrain to container width */
+  /* Single image: constrain to container width. min-width keeps the preview
+     wide enough for the remove button; a very long image overflows it and is
+     cropped from the top (object-fit: cover) instead of shrinking to a sliver. */
   .compose-attachment:only-child .compose-attachment-img {
     max-width: 100%;
     max-height: min(200px, 22dvh);
+    min-width: 48px;
+    object-fit: cover;
+    object-position: center top;
   }
 
   .compose-attachment:only-child .compose-attachment-preview-fallback {

package/src/ui/layouts/BaseLayout.tsx

@@ -19,7 +19,7 @@ import {
 } from "../../lib/asset-path.js";
 import { getJantIconHref } from "../../lib/jant-branding.js";
 import { getThemeBrowserColors, resolveBuiltinTheme } from "../../lib/theme.js";
-import { isFullUrl, toAbsoluteSiteUrl, toPublicPath } from "../../lib/url.js";
+import { toAbsoluteAssetUrl, toPublicPath } from "../../lib/url.js";
 import {
   CLIENT_AUTH_JS_FILE,
   CLIENT_CJK_CSS_FILE,
@@ -52,6 +52,26 @@ export interface BaseLayoutProps {
   faviconUrl?: string;
   faviconVersion?: string;
   socialImageUrl?: string;
+  /**
+   * Alt text describing an explicitly provided `socialImageUrl`. Ignored when
+   * the social image falls back to the site avatar or the Jant default.
+   */
+  socialImageAlt?: string;
+  /** Pixel width of an explicitly provided `socialImageUrl`, when known. */
+  socialImageWidth?: number;
+  /** Pixel height of an explicitly provided `socialImageUrl`, when known. */
+  socialImageHeight?: number;
+  /**
+   * JSON-LD structured data object (or array of objects) rendered as a
+   * `<script type="application/ld+json">`. Skipped when the page is noindex.
+   */
+  jsonLd?: unknown;
+  /** Open Graph object type. Defaults to "website". */
+  ogType?: "website" | "article";
+  /** ISO 8601 publish time, rendered as `article:published_time` for articles. */
+  articlePublishedTime?: string;
+  /** ISO 8601 modified time, rendered as `article:modified_time` for articles. */
+  articleModifiedTime?: string;
   /**
    * Absolute canonical URL for the current page. Rendered as
    * `<link rel="canonical">` when set. Use on pages whose primary content is
@@ -75,6 +95,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   faviconUrl,
   faviconVersion,
   socialImageUrl,
+  socialImageAlt,
+  socialImageWidth,
+  socialImageHeight,
+  jsonLd,
+  ogType,
+  articlePublishedTime,
+  articleModifiedTime,
   canonicalHref,
   noindex,
   isAuthenticated = false,
@@ -91,10 +118,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
 
   // Read favicon/noindex from appConfig when not provided as prop
   const appConfig = c ? c.get("appConfig") : undefined;
+  // Use `||` instead of `??` so empty strings (the unset state for
+  // `appConfig.siteAvatarUrl`) fall through to the Jant default; otherwise
+  // sites without a custom avatar render no og:image / twitter:image at all.
   const resolvedSocialImagePath =
-    socialImageUrl ??
-    faviconUrl ??
-    appConfig?.siteAvatarUrl ??
+    socialImageUrl ||
+    faviconUrl ||
+    appConfig?.siteAvatarUrl ||
     getJantIconHref("socialImage", appConfig?.sitePathPrefix || "");
   const resolvedFaviconVersion =
     faviconVersion ?? (appConfig?.faviconVersion || undefined);
@@ -179,16 +209,34 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           sitePathPrefix,
         )
       : toPublicPath("/apple-touch-icon.png", sitePathPrefix));
-  const socialImageHref =
-    resolvedSocialImagePath &&
-    (isFullUrl(resolvedSocialImagePath) ||
-    resolvedSocialImagePath.startsWith("//")
-      ? resolvedSocialImagePath
-      : toAbsoluteSiteUrl(
-          resolvedSocialImagePath,
-          appConfig?.siteUrl || "",
-          sitePathPrefix,
-        ));
+  const socialImageHref = resolvedSocialImagePath
+    ? toAbsoluteAssetUrl(
+        resolvedSocialImagePath,
+        appConfig?.siteUrl || "",
+        sitePathPrefix,
+      )
+    : "";
+  // Dimensions / alt only describe an explicitly provided social image. The
+  // fallbacks (site avatar, Jant default) are square branding marks, so they
+  // keep the small `summary` card and a generic site-name alt.
+  const hasExplicitSocialImage = Boolean(socialImageUrl);
+  const socialImageAltText = hasExplicitSocialImage
+    ? socialImageAlt
+    : siteName || undefined;
+  const socialImageWidthValue = hasExplicitSocialImage
+    ? socialImageWidth
+    : undefined;
+  const socialImageHeightValue = hasExplicitSocialImage
+    ? socialImageHeight
+    : undefined;
+  // `summary_large_image` only looks good for genuine landscape content; a
+  // portrait or square image gets center-cropped into a thin banner.
+  const useLargeTwitterCard =
+    hasExplicitSocialImage &&
+    socialImageWidthValue !== undefined &&
+    socialImageHeightValue !== undefined &&
+    socialImageWidthValue > socialImageHeightValue &&
+    socialImageWidthValue >= 300;
   const mainFeedHref = appConfig ? toPublicPath("/feed", sitePathPrefix) : null;
   const latestFeedHref = appConfig
     ? toPublicPath("/feed/latest", sitePathPrefix)
@@ -261,16 +309,46 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           <title>{title}</title>
           {description && <meta name="description" content={description} />}
           <meta property="og:title" content={title} />
-          <meta property="og:type" content="website" />
+          <meta property="og:type" content={ogType ?? "website"} />
+          {ogType === "article" && articlePublishedTime && (
+            <meta
+              property="article:published_time"
+              content={articlePublishedTime}
+            />
+          )}
+          {ogType === "article" && articleModifiedTime && (
+            <meta
+              property="article:modified_time"
+              content={articleModifiedTime}
+            />
+          )}
           {description && (
             <meta property="og:description" content={description} />
           )}
           {socialImageHref && (
             <meta property="og:image" content={socialImageHref} />
           )}
+          {socialImageHref && socialImageWidthValue !== undefined && (
+            <meta
+              property="og:image:width"
+              content={String(socialImageWidthValue)}
+            />
+          )}
+          {socialImageHref && socialImageHeightValue !== undefined && (
+            <meta
+              property="og:image:height"
+              content={String(socialImageHeightValue)}
+            />
+          )}
+          {socialImageHref && socialImageAltText && (
+            <meta property="og:image:alt" content={socialImageAltText} />
+          )}
           {siteName && <meta property="og:site_name" content={siteName} />}
           {currentUrl && <meta property="og:url" content={currentUrl} />}
-          <meta name="twitter:card" content="summary" />
+          <meta
+            name="twitter:card"
+            content={useLargeTwitterCard ? "summary_large_image" : "summary"}
+          />
           <meta name="twitter:title" content={title} />
           {description && (
             <meta name="twitter:description" content={description} />
@@ -278,9 +356,25 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           {socialImageHref && (
             <meta name="twitter:image" content={socialImageHref} />
           )}
+          {socialImageHref && socialImageAltText && (
+            <meta name="twitter:image:alt" content={socialImageAltText} />
+          )}
           {resolvedNoindex && (
             <meta name="robots" content="noindex, nofollow" />
           )}
+          {!resolvedNoindex && jsonLd != null && (
+            <script
+              type="application/ld+json"
+              // JSON.stringify output with `<` / `>` escaped to \u-sequences
+              // so a value containing `</script>` cannot break out of the tag.
+              // JSON parsers decode the escapes transparently.
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(jsonLd)
+                  .replace(/</g, "\\u003c")
+                  .replace(/>/g, "\\u003e"),
+              }}
+            />
+          )}
           {canonicalHref && <link rel="canonical" href={canonicalHref} />}
           <link rel="icon" href={resolvedFaviconHref} sizes="16x16 32x32" />
           <link rel="apple-touch-icon" href={resolvedAppleTouchHref} />