@actuate-media/cms-admin 0.49.3 → 0.50.0

package/src/views/post-editor/PostFieldsModal.tsx

@@ -1,13 +1,20 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { TagInput } from '../../components/TagInput.js'
 import { RichTextField } from '../../fields/RichTextField.js'
+import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
 /**
  * The slice of a collection's field config the modal reads to pick controls:
  * a `select` category renders a dropdown (structured vocabulary), an `array`
@@ -33,13 +40,7 @@ const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
 
-function slugify(value: string): string {
-  return value
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
+const slugify = normalizeSlug
 
 /** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
 export function PostFieldsModal({
@@ -89,7 +90,10 @@ export function PostFieldsModal({
     if (!slugTouched) setSlug(slugify(next))
   }
 
+  const slugError = validateSlug(slug)
+
   function handleSave() {
+    if (slugError) return
     onSave({ title, slug, excerpt, featuredImage, category, tags, body, seoTitle, seoDescription })
     onClose()
   }
@@ -104,7 +108,7 @@ export function PostFieldsModal({
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit}>
+          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
             Done
           </Button>
         </>
@@ -133,11 +137,18 @@ export function PostFieldsModal({
               className={INPUT}
               value={slug}
               disabled={!canEdit}
+              aria-invalid={Boolean(slugError)}
+              aria-describedby={slugError ? 'pf-slug-error' : undefined}
               onChange={(e) => {
                 setSlugTouched(true)
                 setSlug(slugify(e.target.value))
               }}
             />
+            {slugError && (
+              <p id="pf-slug-error" className="text-destructive mt-1 text-xs">
+                {slugError}
+              </p>
+            )}
           </div>
           <div>
             <label className={LABEL} htmlFor="pf-category">
@@ -241,26 +252,34 @@ export function PostFieldsModal({
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-seo-title">
-            SEO title
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
+              SEO title
+            </label>
+            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+          </div>
           <input
             id="pf-seo-title"
             className={INPUT}
             value={seoTitle}
             disabled={!canEdit}
+            placeholder={title || 'Defaults to the post title'}
             onChange={(e) => setSeoTitle(e.target.value)}
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-seo-desc">
-            SEO description
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
+              SEO description
+            </label>
+            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+          </div>
           <textarea
             id="pf-seo-desc"
             className={`${INPUT} min-h-[60px] resize-y`}
             value={seoDescription}
             disabled={!canEdit}
+            placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>

package/src/views/post-editor/PostHeader.tsx

@@ -49,9 +49,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
         <div className="absolute inset-0 bg-linear-to-t from-black/70 to-black/10" aria-hidden />
         <div className="absolute inset-x-0 bottom-0 px-6 pb-8">
           <div className={`mx-auto flex max-w-3xl flex-col ${align}`}>
-            <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
-              {title}
-            </h1>
+            <h1 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">{title}</h1>
             {config.showExcerpt && context.excerpt && (
               <p className="mt-3 max-w-2xl text-lg text-white/90">{context.excerpt}</p>
             )}
@@ -67,7 +65,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
       <div
         className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
       >
-        <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
         {config.showExcerpt && context.excerpt && (
           <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
         )}

package/src/views/post-editor/PostHeaderPanel.tsx

@@ -48,7 +48,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Layout
           </legend>
           <div>
@@ -69,7 +69,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
         </fieldset>
 
         <fieldset disabled={!canEdit} className="space-y-2">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Show in header
           </legend>
           {TOGGLES.map((t) => {