rabbibotton / clog

CLOG - The Common Lisp Omnificent GUI
Other
1.49k stars 102 forks source link

CSS files being cached? #163

Closed nathanvy closed 2 years ago

nathanvy commented 2 years ago

I wrote a simple grocery list app as a CLOG learning exercise. It works very well, except today I decided to go back to it and fiddle with the styling. In order to keep things tidy, I'm adding my own rules to a separate css file that I'm loading like so:

(load-css (html-document body) "/css/fnlst.css")

This worked well for me in the past, however I've added a rule recently and no matter what I try, I can't get CLOG to serve the updated file. Here are the relevant snippets:

(defun render-list (app)
  (setf (inner-html (main app)) "")
  (let ((list-items (pomo:with-connection *sqlstring*
              (pomo:query (:select '* :from 'fnlst.contentlist)))))
    (dolist (list-item list-items)
      (let* ((com (clog-web:create-web-compositor (main app)
                          :content (second list-item)))
         (del (create-button com :content "×" :class "w3-button")))
    (clog-web:composite-right del)
    (add-class com "fnlst-list-container")
    (set-on-click del
              (lambda (obj)
            (declare (ignore obj))
            (pomo:with-connection *sqlstring*
              (pomo:query (:delete-from 'fnlst.contentlist
                       :where (:= 'index (first list-item)))))
            (render-list app)))))))

(defun on-new-window (body)
  (set-html-on-close body "Connection Lost")
  ;; Create an app-data object for every connection
  (let ((app (make-instance 'app-data)))
    (setf (connection-data-item body "app-data") app)
    (clog-web:clog-web-initialize body)
    (create-web-frame body app)
    (render-list app)
    ;;(route-content app "Home")
    ))

(defun start-server ()
  (initialize 'on-new-window :static-root "/Users/nathan/Code/finalist/")
  (open-browser))

(defun stop-server ()
  (shutdown))

(defun create-web-frame (body app)
  "This monstrosity basically sets up the skeleton of the page, and conditionally shows/hides menu items based on authorization/login status.  Function RENDER-LIST actually renders the main 'content' of the page"
  (setf (title (html-document body)) "Finalist")
  (load-css (html-document body) "/css/fnlst.css")
  (setf (head app) (clog-web:create-web-compositor body))
  (create-div (head app) :content (format nil "<h3>Finalist v~a (Beta)</h3>" *version*)
                        :class "w3-center")
  (let* ((btn (create-button (head app) :content "&#9776;" :class "w3-button")))
    (clog-web:composite-top-left btn)
    (add-class btn "fnlst-main-menu")
    (set-on-click btn
          (lambda (obj)
            (declare (ignore obj))
            (setf (display (menu app)) :block))))
  ;; Menu
  (setf (menu app) (clog-web:create-web-sidebar body :class "w3-animate-left" :hidden t))
  (setf (left (menu app)) (unit :rem 0))
  (clog-web:add-card-look (menu app))
  (if (profile app)
      (progn
    (set-on-click (clog-web:create-web-sidebar-item (menu app) :content "Lists")
              (lambda (obj)
            (declare (ignore obj))
            (lists-overview app)))
    (create-br (menu app))
    (set-on-click (clog-web:create-web-sidebar-item (menu app) :content "Logout")
              (lambda (obj)
            (declare (ignore obj))
            (setf (profile app) nil)
            (render-list app))))
      (set-on-click (clog-web:create-web-sidebar-item (menu app) :content "Login")
            (lambda (obj)
              (declare (ignore obj))
              (login app))))
  (set-on-click (clog-web:create-web-sidebar-item (menu app) :content "Close &times;")
        (lambda (obj)
          (declare (ignore obj))
          (setf (display (menu app)) :none)))
  ;; Main
  (setf (main app) (clog-web:create-web-panel body))
  (set-margin-side (main app) :left (unit :rem 0.625))
  ;; overlay
  (setf (overlay app) (clog-web:create-web-compositor body))
  (let ((add-btn (create-img (overlay app) :url-src "img/add-circle.png")))
    (setf (positioning add-btn) :fixed)
    (add-class add-btn "fnlst-add-new")
    (set-on-click add-btn
          (lambda (obj)
            (declare (ignore obj))
            (new-content app)))
    (clog-web:composite-bottom-right add-btn)))

The contents of fnlst.css are:

.fnlst-list-container {
    padding: 1rem 0 1rem 0;
}

.fnlst-add-new {
    margin: 0 4rem 4rem 0;
}

.fnlst-main-menu {
    font-size: 2rem;
}

However, nothing I've tried will get the .fnlst-add-new rule to show up in the browser. If I view the css file in the firefox inspector, it's missing that middle rule (see screenshot):

Screen Shot 2022-07-06 at 14 55 38

I've tried clearing the browser cache, deleting the file and recreating it, but nothing seems to cause CLOG to serve the updated file. As a workaround, I have been renaming the css files, so for example I'll rename it to fnlst2.css and then fnlst3.css and so on and so forth, and this works but obviously it's supremely un-ergonomic.

Just to be clear: If I do the following:

$ mv fnlst2.css fnlst.css

then upon a page refresh, the .fnlst-add-new rule is missing. If I rename it back to fnlst2.css the rule is restored.

Does CLOG cache static files somewhere and if so is there a convenient way to invalidate that cache?

nathanvy commented 2 years ago

Sigh.

Never mind. Apparently CMD+Shift+R doesn't actually clear CSS from the cache, but doing it from the menu does.

Embarassing.