giles
e8bc228c7f
Rename all sexp directories, files, identifiers, and references to sx. artdag/ excluded (separate media processing DSL). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
55 lines
3.6 KiB
Plaintext
55 lines
3.6 KiB
Plaintext
;; Blog editor components
|
|
|
|
(defcomp ~blog-editor-error (&key error)
|
|
(div :class "max-w-[768px] mx-auto mt-[16px] rounded-[8px] border border-red-300 bg-red-50 px-[16px] py-[12px] text-[14px] text-red-700"
|
|
(strong "Save failed:") " " error))
|
|
|
|
(defcomp ~blog-editor-form (&key csrf title-placeholder create-label)
|
|
(form :id "post-new-form" :method "post" :class "max-w-[768px] mx-auto pb-[48px]"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(input :type "hidden" :id "lexical-json-input" :name "lexical" :value "")
|
|
(input :type "hidden" :id "feature-image-input" :name "feature_image" :value "")
|
|
(input :type "hidden" :id "feature-image-caption-input" :name "feature_image_caption" :value "")
|
|
(div :id "feature-image-container" :class "relative mt-[16px] mb-[24px] group"
|
|
(div :id "feature-image-empty"
|
|
(button :type "button" :id "feature-image-add-btn"
|
|
:class "text-[14px] text-stone-400 hover:text-stone-600 transition-colors cursor-pointer"
|
|
"+ Add feature image"))
|
|
(div :id "feature-image-filled" :class "relative hidden"
|
|
(img :id "feature-image-preview" :src "" :alt ""
|
|
:class "w-full max-h-[448px] object-cover rounded-[8px] cursor-pointer")
|
|
(button :type "button" :id "feature-image-delete-btn"
|
|
:class "absolute top-[8px] right-[8px] w-[32px] h-[32px] rounded-full bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/70 cursor-pointer text-[14px]"
|
|
:title "Remove feature image"
|
|
(i :class "fa-solid fa-trash-can"))
|
|
(input :type "text" :id "feature-image-caption" :value ""
|
|
:placeholder "Add a caption..."
|
|
:class "mt-[8px] w-full text-[14px] text-stone-500 bg-transparent border-none outline-none placeholder:text-stone-300 focus:text-stone-700"))
|
|
(div :id "feature-image-uploading"
|
|
:class "hidden flex items-center gap-[8px] mt-[8px] text-[14px] text-stone-400"
|
|
(i :class "fa-solid fa-spinner fa-spin") " Uploading...")
|
|
(input :type "file" :id "feature-image-file"
|
|
:accept "image/jpeg,image/png,image/gif,image/webp,image/svg+xml" :class "hidden"))
|
|
(input :type "text" :name "title" :value "" :placeholder title-placeholder
|
|
:class "w-full text-[36px] font-bold bg-transparent border-none outline-none placeholder:text-stone-300 mb-[8px] leading-tight")
|
|
(textarea :name "custom_excerpt" :rows "1" :placeholder "Add an excerpt..."
|
|
:class "w-full text-[18px] text-stone-500 bg-transparent border-none outline-none placeholder:text-stone-300 resize-none mb-[24px] leading-relaxed")
|
|
(div :id "lexical-editor" :class "relative w-full bg-transparent")
|
|
(div :class "flex items-center gap-[16px] mt-[32px] pt-[16px] border-t border-stone-200"
|
|
(select :name "status"
|
|
:class "text-[14px] rounded-[4px] border border-stone-200 px-[8px] py-[6px] bg-white text-stone-600"
|
|
(option :value "draft" :selected t "Draft")
|
|
(option :value "published" "Published"))
|
|
(button :type "submit"
|
|
:class "px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px] hover:bg-stone-800 transition-colors cursor-pointer" create-label))))
|
|
|
|
(defcomp ~blog-editor-styles (&key css-href)
|
|
(<> (link :rel "stylesheet" :href css-href)
|
|
(style
|
|
"#lexical-editor { display: flow-root; }"
|
|
"#lexical-editor [data-kg-card=\"html\"] * { float: none !important; }"
|
|
"#lexical-editor [data-kg-card=\"html\"] table { width: 100% !important; }")))
|
|
|
|
(defcomp ~blog-editor-scripts (&key js-src init-js)
|
|
(<> (script :src js-src) (script init-js)))
|