6

I've been converting some Noir websites to Compojure.

I have a function here that creates the layout of the page: 

(defn layout [title & content]
  (html5
   [:head
    [:title "My Site | " title]
    (include-css "css/main.css")
   [:body
    [:header 
     [:h1 (link-to "/" "My Site")]]
    content]))

And this is the function and the routes: 

(defn home-page []
  (layout
   "Home"
   [:div [:p "Home Page"]])))

(defn article-list []
  (layout
   "Article List"
   [:div [:p "Article List"]])))

(defroutes app-routes
  (GET "/" [] (home-page))
  (GET "/article-list" [] (article-list))

When I open up localhost:3000/article-list all of the CSS rules work fine.

However, when I attempt to extend the URL path and change the program to: 

(defn article-list []
  (layout
   "Article List"
   [:div [:p "Article List"]])))

(defn article-one []
  (layout
   "Article One"
   [:div [:p "Article One"]])))

(defroutes app-routes
  (GET "/" [] (home-page))
  (GET "/article-list" [] (article-list)
  (GET "/article-list/article-one" [] (article-one))

And go to localhost:3000/article-list/article-one, I get all of the HTML but the CSS rules no longer work. When I inspect the page, the css paths are included in the < head > element but there are no styles on the page.

I've searched for a solution to this issue, but there doesn't seem to be any writing on this. I've also tried pulling out the routes so that I have: 

(defroutes article-routes
  (GET "/article-list/article-one" [] (article-one))

(defroutes app-routes
  (GET "/" [] (home-page))
  (GET "/article-list" [] (article-list)
  (context "article-list" [] article-routes)

but I have the same issue. How can I get the CSS rules to work on pages with extended paths?

dizzystar
  • 941
  • 6
  • 17

1 Answers1

5

Your CSS is being included with a relative path, which means the when you go to localhost:3000/article-list/article-one your browser is looking for the CSS at localhost:3000/article-list/css/main.css.

The easiest way to fix this would be to include the CSS with (include-css "/css/main.css"). The / at the beginning will ensure it always searches for localhost:3000/css/main.css.

mange
  • 3,124
  • 15
  • 27
  • Oh, man. I just tried this and still have the same issue. For giggles, I commented out (route/resources "/") in the defroutes and reloaded ring to no avail. I also tried both versions of the defroutes posted above and it is still no cathcing the CSS. – dizzystar Jun 23 '13 at 06:34
  • 1
    This solution did work after a bit of trying. Just don't forget to clear the cache. Thanks – dizzystar Jun 23 '13 at 07:02