@actuate-media/cms-admin 0.49.4 → 0.50.0

package/src/views/page-editor/PageSettingsModal.tsx

@@ -1,10 +1,17 @@
 '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 { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import type { EditorPage } from '../../lib/page-editor-service.js'
 
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
 interface PageSettingsModalProps {
   open: boolean
   page: EditorPage
@@ -17,13 +24,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 page-level fields: title, slug, path, and SEO. */
 export function PageSettingsModal({
@@ -60,7 +61,10 @@ export function PageSettingsModal({
     }
   }
 
+  const slugError = validateSlug(slug)
+
   function handleSave() {
+    if (slugError) return
     onSave({ title, slug, path: path || (slug ? `/${slug}` : '/'), seoTitle, seoDescription })
     onClose()
   }
@@ -75,7 +79,7 @@ export function PageSettingsModal({
           <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>
         </>
@@ -104,11 +108,18 @@ export function PageSettingsModal({
               className={INPUT}
               value={slug}
               disabled={!canEdit}
+              aria-invalid={Boolean(slugError)}
+              aria-describedby={slugError ? 'ps-slug-error' : undefined}
               onChange={(e) => {
                 setSlugTouched(true)
                 setSlug(slugify(e.target.value))
               }}
             />
+            {slugError && (
+              <p id="ps-slug-error" className="text-destructive mt-1 text-xs">
+                {slugError}
+              </p>
+            )}
           </div>
           <div>
             <label className={LABEL} htmlFor="ps-path">
@@ -125,26 +136,34 @@ export function PageSettingsModal({
           </div>
         </div>
         <div>
-          <label className={LABEL} htmlFor="ps-seo-title">
-            SEO title
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-title">
+              SEO title
+            </label>
+            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+          </div>
           <input
             id="ps-seo-title"
             className={INPUT}
             value={seoTitle}
             disabled={!canEdit}
+            placeholder={title || 'Defaults to the page title'}
             onChange={(e) => setSeoTitle(e.target.value)}
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="ps-seo-desc">
-            SEO description
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-desc">
+              SEO description
+            </label>
+            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+          </div>
           <textarea
             id="ps-seo-desc"
             className={`${INPUT} min-h-[64px] resize-y`}
             value={seoDescription}
             disabled={!canEdit}
+            placeholder="Summarize the page for search results (120–160 characters)"
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>

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>