feat: restyle index page with Pico CSS and emoji glyphs
This commit is contained in:
@@ -123,7 +123,14 @@ Returns nil if the file is missing or cannot be parsed."
|
||||
(defun spine-render-index (books &optional selected-id)
|
||||
"Render the index page HTML for BOOKS, expanding the book matching SELECTED-ID."
|
||||
(let ((order '("WANT" "READING" "READ" "ABANDONED"))
|
||||
(grouped (make-hash-table :test 'equal)))
|
||||
(grouped (make-hash-table :test 'equal))
|
||||
(total 0)
|
||||
(reading-count 0))
|
||||
;; Count totals
|
||||
(dolist (book books)
|
||||
(cl-incf total)
|
||||
(when (equal "READING" (plist-get book :status))
|
||||
(cl-incf reading-count)))
|
||||
;; Group books by status
|
||||
(dolist (book books)
|
||||
(let* ((status (or (plist-get book :status) "WANT")))
|
||||
@@ -133,38 +140,65 @@ Returns nil if the file is missing or cannot be parsed."
|
||||
(insert "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n")
|
||||
(insert "<meta charset=\"utf-8\">\n")
|
||||
(insert "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n")
|
||||
(insert "<title>Spine</title>\n</head>\n<body>\n")
|
||||
(insert "<div class=\"frame\">\n")
|
||||
(insert "<div class=\"titlebar\">Spine</div>\n")
|
||||
(insert "<title>Spine</title>\n")
|
||||
(insert "<link rel=\"stylesheet\""
|
||||
" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\">\n")
|
||||
(insert "<style>\n")
|
||||
(insert ".spine-row{display:flex;align-items:center;gap:0.75rem;")
|
||||
(insert "padding:0.4rem 0;border-bottom:1px solid var(--pico-muted-border-color)}\n")
|
||||
(insert ".spine-row:last-child{border-bottom:none}\n")
|
||||
(insert ".spine-selected{background:var(--pico-secondary-background)}\n")
|
||||
(insert ".spine-glyph{width:1.5rem;text-align:center;flex-shrink:0}\n")
|
||||
(insert ".spine-title{flex:1;min-width:0}\n")
|
||||
(insert ".spine-trail{font-size:0.85em;color:var(--pico-muted-color)}\n")
|
||||
(insert ".spine-tags{font-size:0.85em;color:var(--pico-muted-color)}\n")
|
||||
(insert ".spine-detail{margin:0 0 0 2rem;border-left:2px solid var(--pico-primary)}\n")
|
||||
(insert ".spine-detail p{margin-bottom:0.3rem}\n")
|
||||
(insert ".spine-detail footer{margin-top:0.5rem}\n")
|
||||
(insert "mark.want{background:var(--pico-mark-background);"
|
||||
"color:var(--pico-mark-color)}\n")
|
||||
(insert "mark.reading{background:#faeeda;color:#854f0b}\n")
|
||||
(insert "mark.read{background:#e1f5ee;color:#085041}\n")
|
||||
(insert "mark.abandoned{background:var(--pico-muted-color);"
|
||||
"color:var(--pico-background-color)}\n")
|
||||
(insert "article{margin-bottom:0}\n")
|
||||
(insert "article header{padding-bottom:0.5rem;margin-bottom:0.5rem}\n")
|
||||
(insert "</style>\n")
|
||||
(insert "</head>\n<body>\n")
|
||||
(insert "<main class=\"container\">\n")
|
||||
(insert "<article>\n")
|
||||
(insert (format "<header><strong>spine</strong>"
|
||||
"<small>%d books · %d reading</small></header>\n"
|
||||
total reading-count))
|
||||
;; Each group in order
|
||||
(dolist (status order)
|
||||
(let ((group-books (nreverse (gethash status grouped))))
|
||||
(when group-books
|
||||
(insert (format "<div class=\"group\">%s (%d)</div>\n"
|
||||
(insert (format "<hgroup><h2>%s</h2><small>%d</small></hgroup>\n"
|
||||
status (length group-books)))
|
||||
(dolist (book group-books)
|
||||
(let ((selected (equal (plist-get book :id) selected-id)))
|
||||
(insert (format "<div class=\"row%s\">\n"
|
||||
(if selected " selected" "")))
|
||||
;; Format glyph
|
||||
(insert (format "<div class=\"spine-row%s\">\n"
|
||||
(if selected " spine-selected" "")))
|
||||
;; Format glyph (emoji)
|
||||
(let ((fmt (plist-get book :format)))
|
||||
(insert (format "<span class=\"glyph\">%s</span>\n"
|
||||
(cond ((equal fmt "hardcover") "[H]")
|
||||
((equal fmt "ebook") "[E]")
|
||||
((equal fmt "audiobook") "[A]")
|
||||
(insert (format "<span class=\"spine-glyph\">%s</span>\n"
|
||||
(cond ((equal fmt "hardcover") "📖")
|
||||
((equal fmt "ebook") "📱")
|
||||
((equal fmt "audiobook") "🎧")
|
||||
(t "")))))
|
||||
;; Title + author
|
||||
(insert "<span class=\"title\">")
|
||||
(insert "<span class=\"spine-title\">")
|
||||
(insert (spine--h (plist-get book :title)))
|
||||
(let ((author (plist-get book :author)))
|
||||
(when author
|
||||
(insert (format " <span class=\"muted\">%s</span>"
|
||||
(insert (format " <small>%s</small>"
|
||||
(spine--h author)))))
|
||||
(insert "</span>\n")
|
||||
;; Tags
|
||||
(let ((tags (plist-get book :tags)))
|
||||
(when tags
|
||||
(insert (format "<span class=\"tags\">%s</span>\n"
|
||||
(insert (format "<small class=\"spine-tags\">%s</small>\n"
|
||||
(mapconcat (lambda (tag) (concat ":" tag ":"))
|
||||
tags " ")))))
|
||||
;; Recommendation trail
|
||||
@@ -172,42 +206,42 @@ Returns nil if the file is missing or cannot be parsed."
|
||||
(rec-note (plist-get book :rec_note)))
|
||||
(when (and rec-by (> (length rec-by) 0))
|
||||
(insert
|
||||
(format "<span class=\"trail\">%s%s</span>\n"
|
||||
(format "<span class=\"spine-trail\">%s%s</span>\n"
|
||||
(spine--h rec-by)
|
||||
(if (and rec-note (> (length rec-note) 0))
|
||||
(concat ": " (spine--h rec-note))
|
||||
"")))))
|
||||
;; Status pill
|
||||
(let ((status (or (plist-get book :status) "WANT")))
|
||||
(insert (format "<span class=\"pill %s\">%s</span>\n"
|
||||
(downcase status) status)))
|
||||
(insert (format "<mark class=\"%s\">%s</mark>\n"
|
||||
(downcase status) (downcase status))))
|
||||
;; Expanded detail
|
||||
(when selected
|
||||
(insert "<div class=\"detail\">\n")
|
||||
(insert "<blockquote class=\"spine-detail\">\n")
|
||||
(dolist (note (plist-get book :notes))
|
||||
(insert (format
|
||||
"<div class=\"logline\"><span class=\"logdate\">[%s]</span> %s</div>\n"
|
||||
(insert (format "<p><small>[%s]</small> %s</p>\n"
|
||||
(spine--h (car note))
|
||||
(spine--h (cadr note)))))
|
||||
(let ((parts nil))
|
||||
(let ((rating (plist-get book :rating)))
|
||||
(when (and rating (> (length rating) 0))
|
||||
(insert (format "<div>Rating: %s/5</div>\n"
|
||||
(spine--h rating)))))
|
||||
(push (format "Rating: %s/5" (spine--h rating)) parts)))
|
||||
(let ((isbn (plist-get book :isbn)))
|
||||
(when (and isbn (> (length isbn) 0))
|
||||
(insert (format "<div>ISBN: %s</div>\n"
|
||||
(spine--h isbn)))))
|
||||
(push (format "ISBN: %s" (spine--h isbn)) parts)))
|
||||
(let ((fmt (plist-get book :format)))
|
||||
(when (and fmt (> (length fmt) 0))
|
||||
(insert (format "<div>Format: %s</div>\n"
|
||||
(spine--h fmt)))))
|
||||
(push (format "Format: %s" (spine--h fmt)) parts)))
|
||||
(let ((added (plist-get book :added)))
|
||||
(when (and added (> (length added) 0))
|
||||
(insert (format "<div>Added: %s</div>\n"
|
||||
(spine--h added)))))
|
||||
(insert "</div>\n"))
|
||||
(push (format "Added: %s" (spine--h added)) parts)))
|
||||
(when parts
|
||||
(insert (format "<footer>%s</footer>\n"
|
||||
(mapconcat #'identity (nreverse parts) " · ")))))
|
||||
(insert "</blockquote>\n"))
|
||||
(insert "</div>\n"))))))
|
||||
(insert "</div>\n</body>\n</html>\n")
|
||||
(insert "</article>\n")
|
||||
(insert "</main>\n</body>\n</html>\n")
|
||||
(buffer-string))))
|
||||
|
||||
(defun spine-render-empty-state ()
|
||||
|
||||
Reference in New Issue
Block a user