@acms-subir/core 0.3.14 → 0.3.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @acms-subir/core
 
+## 0.3.15
+
+### Patch Changes
+
+- 8e89435: Show the published site logo and site name on the admin login page, including its dark-mode logo. Share logo rendering with the admin sidebar so both surfaces retain the framework fallback when no site logo is configured.
+
 ## 0.3.14
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "publishConfig": {
     "access": "public"
   },

package/src/components/AdminLogo.astro

@@ -0,0 +1,23 @@
+---
+import { BRAND } from '../lib/brand';
+
+interface Props {
+  logo?: string;
+  logoDark?: string;
+  size?: number;
+}
+const { logo, logoDark, size = 20 } = Astro.props;
+---
+
+{logo ? (
+  <>
+    <img class:list={['brand-logo', { 'logo-light': !!logoDark }]} src={logo} alt="" />
+    {logoDark && <img class="brand-logo logo-dark" src={logoDark} alt="" />}
+  </>
+) : (
+  <svg width={size} height={size} viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
+    <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+    <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+    <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
+  </svg>
+)}

package/src/layouts/Admin.astro

@@ -10,6 +10,7 @@ import { accessFor } from '../lib/permissions/access';
 import { AUTH } from '../lib/auth/config';
 import ClerkSession from '../components/auth/ClerkSession.astro';
 import ThemeScript from '../components/ThemeScript.astro';
+import AdminLogo from '../components/AdminLogo.astro';
 import CommandPalette from '../components/CommandPalette';
 import '../styles/admin.css';
 
@@ -185,19 +186,7 @@ const themeOpts = [
     <div class="shell" id="acms-shell">
       <aside class="sidebar" aria-label="Admin navigation">
         <div class="brand">
-          {/* the site's own logo (Design) replaces the framework mark */}
-          {settings.siteLogo ? (
-            <>
-              <img class:list={['brand-logo', { 'logo-light': !!settings.siteLogoDark }]} src={settings.siteLogo} alt="" />
-              {settings.siteLogoDark && <img class="brand-logo logo-dark" src={settings.siteLogoDark} alt="" />}
-            </>
-          ) : (
-            <svg width="20" height="20" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-              <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
-              <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
-              <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
-            </svg>
-          )}
+          <AdminLogo logo={settings.siteLogo} logoDark={settings.siteLogoDark} />
           <span class="brand-name" title={`v${BRAND.version} · ${BRAND.stack}`}>{siteName}</span>
           <button class="icon-btn" type="button" id="acms-rail-toggle" aria-label="Collapse sidebar" title="Collapse sidebar">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.side} /></svg>

package/src/pages/admin/login.astro

@@ -7,6 +7,7 @@ import { allowLogin } from '../../lib/auth/login-limit';
 import { getRepo } from '../../lib/repo';
 import { BRAND } from '../../lib/brand';
 import ThemeScript from '../../components/ThemeScript.astro';
+import AdminLogo from '../../components/AdminLogo.astro';
 import ClerkSession from '../../components/auth/ClerkSession.astro';
 import '../../styles/admin.css';
 
@@ -55,7 +56,8 @@ const logoutAction = `/admin/logout${next ? `?next=${encodeURIComponent(next)}`
 // the destination query every sign-in link on this page carries forward
 const keep = next ? `next=${encodeURIComponent(next)}` : back ? `return=${encodeURIComponent(back)}` : '';
 const retryHref = `/admin/login${keep ? `?${keep}` : ''}`;
-const siteName = clerkMode ? (await (await getRepo(Astro.locals)).getSettings()).siteTitle || BRAND.name : BRAND.name;
+const settings = await (await getRepo(Astro.locals)).getSettings();
+const siteName = settings.siteTitle || BRAND.name;
 
 let error = '';
 if (!clerkMode && Astro.request.method === 'POST') {
@@ -105,7 +107,7 @@ if (!clerkMode && Astro.request.method === 'POST') {
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <ThemeScript />
     <meta name="robots" content="noindex" />
-    <title>{clerkView === 'sign-up' ? 'Accept invitation' : 'Sign in'} · {BRAND.name} admin</title>
+    <title>{clerkView === 'sign-up' ? 'Accept invitation' : 'Sign in'} · {siteName} admin</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <ClerkSession />
@@ -114,12 +116,8 @@ if (!clerkMode && Astro.request.method === 'POST') {
     <div class="login-wrap">
       <main class:list={['card card-pad login-card', { 'is-clerk': clerkMode }]}>
         <div class="brand">
-          <svg width="26" height="26" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
-            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
-            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
-          </svg>
-          <div class="brand-name">{BRAND.name}</div>
+          <AdminLogo logo={settings.siteLogo} logoDark={settings.siteLogoDark} size={26} />
+          <div class="brand-name">{siteName}</div>
         </div>
 
         {!clerkMode && (

package/src/styles/admin.css

@@ -756,6 +756,7 @@ dialog.modal[open] { animation: modal-in 0.16s ease-out; }
 .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
 .login-card { width: 100%; max-width: 360px; }
 .login-card .brand { justify-content: center; padding-bottom: 20px; }
+.login-card .brand-logo { height: 26px; max-width: 128px; }
 .login-card .brand-name { color: var(--text); flex: none; }
 .login-wrap { background: var(--bg); }
 .btn.block { width: 100%; justify-content: center; min-height: 38px; }