@jant/core 0.3.31 → 0.3.33

package/src/ui/dash/settings/AccountContent.tsx

@@ -12,9 +12,6 @@ export function AccountContent({ userName }: { userName: string }) {
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
-      </h1>
       <SettingsNav currentTab="account" />
 
       <div class="flex flex-col max-w-lg">

package/src/ui/dash/settings/GeneralContent.tsx

@@ -18,7 +18,6 @@ export function GeneralContent({
   siteName,
   siteDescription,
   siteLanguage,
-  homeDefaultView,
   siteNameFallback,
   siteDescriptionFallback,
   siteAvatarUrl,
@@ -31,7 +30,6 @@ export function GeneralContent({
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
-  homeDefaultView: string;
   siteNameFallback: string;
   siteDescriptionFallback: string;
   siteAvatarUrl: string;
@@ -92,25 +90,13 @@ export function GeneralContent({
     }),
     aboutBlogHelp: t({
       message:
-        "Displayed above your blog posts on the home page. Also used as the meta description. Markdown supported.",
+        "A short intro for search engines and feed readers. Plain text only.",
       comment: "@context: Help text for site description field",
     }),
     language: t({
       message: "Language",
       comment: "@context: Settings form field",
     }),
-    defaultHomepageView: t({
-      message: "Default Homepage View",
-      comment: "@context: Settings form field",
-    }),
-    latest: t({
-      message: "Latest",
-      comment: "@context: Homepage view option - show latest posts",
-    }),
-    featured: t({
-      message: "Featured",
-      comment: "@context: Homepage view option - show featured posts",
-    }),
     timeZone: t({
       message: "Time Zone",
       comment: "@context: Settings form field",
@@ -161,7 +147,6 @@ export function GeneralContent({
     siteName,
     siteDescription,
     siteLanguage,
-    homeDefaultView,
     timeZone,
     siteFooter,
     noindex,
@@ -169,9 +154,6 @@ export function GeneralContent({
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
-      </h1>
       <SettingsNav currentTab="general" />
 
       <div class="flex flex-col max-w-lg">

package/src/ui/dash/settings/SettingsNav.tsx

@@ -37,16 +37,12 @@ export function SettingsNav({ currentTab }: { currentTab: SettingsTab }) {
   ];
 
   return (
-    <nav class="flex gap-1 mb-6">
+    <nav class="dash-subnav">
       {tabs.map((tab) => (
         <a
           key={tab.id}
           href={tab.href}
-          class={`px-3 py-2 text-sm rounded-md ${
-            tab.id === currentTab
-              ? "bg-accent text-accent-foreground font-medium"
-              : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          }`}
+          class={tab.id === currentTab ? "active" : ""}
         >
           {tab.label}
         </a>

package/src/ui/feed/NoteCard.tsx

@@ -42,10 +42,10 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
       )}
       {!compact && isArticle && post.summaryHasMore && (
         <a
-          href={post.permalink}
+          href={`${post.permalink}#continue`}
           class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
         >
-          Read more →
+          Continue →
         </a>
       )}
       <footer class="mt-2" data-post-meta>

package/src/ui/layouts/DashLayout.tsx

@@ -24,122 +24,119 @@ function DashLayoutContent({
 }: PropsWithChildren<Omit<DashLayoutProps, "c" | "title">>) {
   const { t } = useLingui();
 
-  const isActive = (path: string, match?: RegExp) => {
-    if (!currentPath) return false;
-    if (match) return match.test(currentPath);
-    return currentPath === path;
-  };
-
-  const navClass = (path: string, match?: RegExp) =>
-    `justify-start px-3 py-2 text-sm rounded-md ${
-      isActive(path, match)
-        ? "bg-accent text-accent-foreground font-medium"
-        : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-    }`;
+  const navClass = (match: RegExp) =>
+    `dash-header-link ${currentPath && match.test(currentPath) ? "dash-header-link-active" : ""}`;
 
   return (
     <div class="min-h-screen">
       {/* Header */}
-      <header class="border-b bg-card">
-        <div class="container-sidebar flex h-14 items-center justify-between">
-          <a id="site-name" href="/dash" class="font-semibold">
-            {siteName}
-          </a>
-          <nav class="flex items-center gap-4">
+      <header class="dash-header">
+        <div class="container dash-header-inner">
+          <div class="dash-header-left">
+            <a id="site-name" href="/dash" class="dash-header-logo">
+              {siteName}
+            </a>
             <a
               href="/"
-              class="text-sm text-muted-foreground hover:text-foreground"
-            >
-              {t({
+              target="_blank"
+              rel="noopener noreferrer"
+              class="dash-header-site-link"
+              aria-label={t({
                 message: "View Site",
                 comment:
                   "@context: Dashboard header link to view the public site",
               })}
-            </a>
-            <a
-              href="/signout"
-              class="text-sm text-muted-foreground hover:text-foreground"
             >
-              {t({
-                message: "Sign Out",
-                comment: "@context: Dashboard header link to sign out",
-              })}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M15 3h6v6" />
+                <path d="M10 14 21 3" />
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              </svg>
             </a>
-          </nav>
-        </div>
-      </header>
+          </div>
 
-      {/* Sidebar + Main */}
-      <div class="container-sidebar sidebar-layout py-8">
-        {/* Sidebar */}
-        <aside class="sidebar-nav">
-          <nav class="flex flex-col gap-1">
-            <a href="/dash" class={navClass("/dash", /^\/dash$/)}>
-              {t({
-                message: "Dashboard",
-                comment: "@context: Dashboard navigation - main dashboard page",
-              })}
-            </a>
-            <a
-              href="/dash/posts"
-              class={navClass("/dash/posts", /^\/dash\/posts/)}
-            >
-              {t({
-                message: "Posts",
-                comment: "@context: Dashboard navigation - posts management",
-              })}
-            </a>
-            <a
-              href="/dash/pages"
-              class={navClass("/dash/pages", /^\/dash\/pages/)}
-            >
+          <nav class="dash-header-nav">
+            <a href="/dash/pages" class={navClass(/^\/dash\/pages/)}>
               {t({
                 message: "Pages",
                 comment: "@context: Dashboard navigation - pages management",
               })}
             </a>
-            <a
-              href="/dash/media"
-              class={navClass("/dash/media", /^\/dash\/media/)}
-            >
-              {t({
-                message: "Media",
-                comment: "@context: Dashboard navigation - media library",
-              })}
-            </a>
-            <a
-              href="/dash/collections"
-              class={navClass("/dash/collections", /^\/dash\/collections/)}
-            >
-              {t({
-                message: "Collections",
-                comment:
-                  "@context: Dashboard navigation - collections management",
-              })}
-            </a>
-            <a
-              href="/dash/appearance"
-              class={navClass("/dash/appearance", /^\/dash\/appearance/)}
-            >
+            <a href="/dash/appearance" class={navClass(/^\/dash\/appearance/)}>
               {t({
                 message: "Appearance",
                 comment: "@context: Dashboard navigation - appearance settings",
               })}
             </a>
-            <a
-              href="/dash/settings"
-              class={navClass("/dash/settings", /^\/dash\/settings/)}
-            >
+            <a href="/dash/settings" class={navClass(/^\/dash\/settings/)}>
               {t({
                 message: "Settings",
                 comment: "@context: Dashboard navigation - site settings",
               })}
             </a>
           </nav>
-        </aside>
 
-        {/* Main content */}
-        <main class="sidebar-main">{children}</main>
+          <div class="dropdown-menu">
+            <button
+              type="button"
+              id="dash-menu-trigger"
+              class="dash-header-menu-btn"
+              aria-haspopup="menu"
+              aria-controls="dash-menu"
+              aria-expanded="false"
+              aria-label={t({
+                message: "Menu",
+                comment: "@context: Dashboard header menu button",
+              })}
+            >
+              <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
+              id="dash-menu-popover"
+              data-popover
+              data-align="end"
+              aria-hidden="true"
+            >
+              <div
+                role="menu"
+                id="dash-menu"
+                aria-labelledby="dash-menu-trigger"
+              >
+                <a href="/signout" role="menuitem">
+                  {t({
+                    message: "Sign Out",
+                    comment: "@context: Dashboard menu item to sign out",
+                  })}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main */}
+      <div class="container py-8">
+        <main>{children}</main>
       </div>
     </div>
   );

package/src/ui/layouts/SiteLayout.tsx

@@ -1,7 +1,7 @@
 /**
  * Site Layout
  *
- * Vertical header: site name on top, custom nav links below, description under nav.
+ * Vertical header: site name on top, custom nav links below.
  * Content area with browse filter tabs and compose prompt/dialog for authenticated users.
  */
 
@@ -27,12 +27,12 @@ function HeaderLink({ link }: { link: NavItemView }) {
 
 export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   siteName,
-  siteDescription,
   links,
   currentPath,
   isAuthenticated,
   collections,
   homeDefaultView,
+  headerNavMaxVisible,
   siteAvatarUrl,
   showHeaderAvatar,
   siteFooterHtml,
@@ -40,6 +40,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   children,
 }) => {
   const { t } = useLingui();
+  const maxVisible = headerNavMaxVisible ?? 3;
 
   const latestHref = homeDefaultView === "featured" ? "/latest" : "/";
   const featuredHref = homeDefaultView === "featured" ? "/" : "/featured";
@@ -89,9 +90,66 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
             <div class="site-header-right">
               {links.length > 0 && (
                 <nav class="site-header-nav">
-                  {links.map((link) => (
+                  {links.slice(0, maxVisible).map((link) => (
                     <HeaderLink key={link.id} link={link} />
                   ))}
+                  {links.length > maxVisible && (
+                    <div class="dropdown-menu site-header-more">
+                      <button
+                        type="button"
+                        id="site-nav-more-trigger"
+                        class="site-header-more-btn"
+                        aria-haspopup="menu"
+                        aria-controls="site-nav-more-menu"
+                        aria-expanded="false"
+                        aria-label={t({
+                          message: "More links",
+                          comment:
+                            "@context: Button to show overflow nav links",
+                        })}
+                      >
+                        <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
+                        id="site-nav-more-popover"
+                        data-popover
+                        data-align="end"
+                        aria-hidden="true"
+                      >
+                        <div
+                          role="menu"
+                          id="site-nav-more-menu"
+                          aria-labelledby="site-nav-more-trigger"
+                        >
+                          {links.slice(maxVisible).map((link) => (
+                            <a
+                              key={link.id}
+                              href={link.url}
+                              role="menuitem"
+                              {...(link.isExternal
+                                ? {
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                  }
+                                : {})}
+                            >
+                              {link.label}
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </nav>
               )}
               <a
@@ -117,9 +175,6 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
               </a>
             </div>
           </div>
-          {isHomePage && siteDescription && (
-            <p class="site-description">{siteDescription}</p>
-          )}
         </div>
       </header>
 
@@ -137,22 +192,28 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
           <div class="site-container">
             <div class="site-content">
               {isHomePage && (
-                <nav class="site-browse-nav">
-                  {browseLinks.map((link, i) => (
-                    <>
-                      {i > 0 && <span class="site-browse-sep">/</span>}
-                      <a
-                        key={link.href}
-                        href={link.href}
-                        class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
-                      >
-                        {link.label}
-                      </a>
-                    </>
-                  ))}
-                </nav>
+                <div class="site-home-header">
+                  {isAuthenticated && <ComposePrompt />}
+                  <nav class="site-browse-nav">
+                    {browseLinks.map((link, i) => (
+                      <>
+                        {i > 0 && (
+                          <span class="site-browse-sep" aria-hidden="true">
+                            /
+                          </span>
+                        )}
+                        <a
+                          key={link.href}
+                          href={link.href}
+                          class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
+                        >
+                          {link.label}
+                        </a>
+                      </>
+                    ))}
+                  </nav>
+                </div>
               )}
-              {isHomePage && isAuthenticated && <ComposePrompt />}
               {children}
             </div>
           </div>

package/src/lib/nav-reorder.ts

@@ -1,26 +0,0 @@
-/**
- * Navigation Link Reorder
- *
- * Initializes SortableJS on the navigation links list in the dashboard.
- * Auto-detects the list element and only activates when present.
- */
-
-import Sortable from "sortablejs";
-
-const list = document.getElementById("nav-links-list");
-if (list) {
-  Sortable.create(list, {
-    animation: 150,
-    handle: "[data-id]",
-    onEnd() {
-      const ids = [...list.querySelectorAll<HTMLElement>("[data-id]")].map(
-        (el) => Number(el.dataset.id),
-      );
-      fetch("/dash/pages/reorder", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ids }),
-      });
-    },
-  });
-}

package/src/ui/dash/pages/LinkFormContent.tsx

@@ -1,119 +0,0 @@
-/**
- * Link creation/editing form
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { NavItem } from "../../../types.js";
-
-export function LinkFormContent({
-  item,
-  isEdit,
-}: {
-  item?: NavItem;
-  isEdit?: boolean;
-}) {
-  const { t } = useLingui();
-  const title = isEdit
-    ? t({ message: "Edit Link", comment: "@context: Page heading" })
-    : t({ message: "New Link", comment: "@context: Page heading" });
-
-  const signals = JSON.stringify({
-    label: item?.label ?? "",
-    url: item?.url ?? "",
-  }).replace(/</g, "\\u003c");
-
-  const action = isEdit ? `/dash/pages/links/${item?.id}` : "/dash/pages/links";
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-6">{title}</h1>
-
-      <form
-        data-signals={signals}
-        data-on:submit__prevent={`@post('${action}')`}
-        data-indicator="_loading"
-        class="flex flex-col gap-4 max-w-lg"
-      >
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "Label",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="label"
-            class="input"
-            placeholder="Home"
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message: "Display text for the link",
-              comment: "@context: Navigation label help text",
-            })}
-          </p>
-        </div>
-
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "URL",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="url"
-            class="input"
-            placeholder="/archive or https://..."
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message:
-                "Path (e.g. /archive) or full URL (e.g. https://example.com)",
-              comment: "@context: Navigation URL help text",
-            })}
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <button type="submit" class="btn" data-attr:disabled="$_loading">
-            <svg
-              data-show="$_loading"
-              style="display:none"
-              class="animate-spin size-4"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              role="status"
-            >
-              <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-            </svg>
-            {isEdit
-              ? t({
-                  message: "Save Changes",
-                  comment: "@context: Button to save edited navigation link",
-                })
-              : t({
-                  message: "Create Link",
-                  comment: "@context: Button to save new navigation link",
-                })}
-          </button>
-          <a href="/dash/pages" class="btn-outline">
-            {t({
-              message: "Cancel",
-              comment: "@context: Button to cancel form",
-            })}
-          </a>
-        </div>
-      </form>
-    </>
-  );
-}