CSS load on wrong path for flatten files; repo is public

[ajmalafif]

Hey all,

So previously I open an issue here: https://github.com/sintaxi/harp/issues/317 to optimize my site on heroku. harp compile doesn't work earlier (as mentioned in the previous issue above) but now managed to get it to compile, but CSS doesn't load properly. Here's the repo: https://github.com/ajmalafif/harp-ajmalafif-my

Compiling the public folder into public/www with harp compile path/to/public/ path/to/public/www works fine. I put all my assets file on assets folder, but the flatten head.jade loads css from work folder:

https://github.com/ajmalafif/harp-ajmalafif-my/blob/master/public/www/work/index.html

ps: I decided to flatten those files mainly because I went on and optimize my files based on Page Insight (developers.google.com/speed/pagespeed/insights/?url=ajmalafif.my&tab=desktop) and I can't find a way around gzip compression and cached (though I did have NODE_ENV=production for my heroku config). I went on and attempted to implement RequireJS but realized its quite complicated esp I have different JS files loaded on different page. Feels like doing it defeating the purpose of using HarpJS. Plus it doesn't take any penalty from Page Insight too, so I keep that task for later.

[kevinsimper]

Are you using the harp compile and also the express harp create server function?

[kevinsimper]

There is no error with Harp, it is because harp firstly ignores folders with underscore when it compiles, and output files relative, but i think you did not caught it because you show a different frontpage when you use harp server, because the same errors would have shown :)

But I did this to make it work:

Kevins-MacBook-Pro-2:harp-ajmalafif-my kevinsimper$ harp server public/
------------
Harp v0.12.1 – Chloi Inc. 2012–2014
Your server is listening at http://localhost:9000/
Press Ctl+C to stop the server
------------
^CKevins-MacBook-Pro-2:harp-ajmalafif-my kevinsimper$ harp compile public/ out/
Kevins-MacBook-Pro-2:harp-ajmalafif-my kevinsimper$ ll
total 32
drwxr-xr-x  10 kevinsimper  staff  340 Aug  3 00:56 ./
drwxr-xr-x   3 kevinsimper  staff  102 Aug  3 00:55 ../
drwxr-xr-x  13 kevinsimper  staff  442 Aug  3 00:55 .git/
-rw-r--r--   1 kevinsimper  staff   34 Aug  3 00:55 .gitignore
-rw-r--r--   1 kevinsimper  staff   19 Aug  3 00:55 Procfile
drwxr-xr-x  12 kevinsimper  staff  408 Aug  3 00:55 node_modules/
drwxr-xr-x  13 kevinsimper  staff  442 Aug  3 00:56 out/
-rw-r--r--   1 kevinsimper  staff  488 Aug  3 00:55 package.json
drwxr-xr-x  16 kevinsimper  staff  544 Aug  3 00:55 public/
-rw-r--r--   1 kevinsimper  staff   70 Aug  3 00:55 server.js
Kevins-MacBook-Pro-2:harp-ajmalafif-my kevinsimper$ harp server out/

and then made these changes:

diff --git a/public/_shared/footer.jade b/public/_shared/footer.jade
index 98c12b3..b705de4 100644
--- a/public/_shared/footer.jade
+++ b/public/_shared/footer.jade
@@ -1,11 +1,11 @@
 //- script(src='/assets/js/scripts.min.js')
 if current.path[0] === "index" && environment == "production"
-  script(src="../assets/js/jquery/jquery.min.js")
-  script(src="../assets/js/jquery/jquery-ui.min.js")
-  script(src="../assets/js/jquery/jquery.ui.slider.min.js")
-  script(src="../assets/js/bigvideo/imagesloaded.min.js")
-  script(src="../assets/js/bigvideo/video.min.js")
-  script(src="../assets/js/bigvideo/bigvideo.min.js")
+  script(src="/assets/js/jquery/jquery.min.js")
+  script(src="/assets/js/jquery/jquery-ui.min.js")
+  script(src="/assets/js/jquery/jquery.ui.slider.min.js")
+  script(src="/assets/js/bigvideo/imagesloaded.min.js")
+  script(src="/assets/js/bigvideo/video.min.js")
+  script(src="/assets/js/bigvideo/bigvideo.min.js")
   script(type='text/javascript').
     var BV = new $.BigVideo();
       BV.init();
@@ -15,7 +15,7 @@ else
    p.text-center Okay, Harp is in development mode right now. Check your todos!

 if current.path[0] === "blog" || current.path[0] === "work"
-  script(src='../assets/js/prism/prism.min.js')
+  script(src='/assets/js/prism/prism.min.js')

 //- <script src="/assets/js/responsive-nav/responsive-nav.js"></script>
 //- script(type='text/javascript').
diff --git a/public/_shared/head.jade b/public/_shared/head.jade
index 2774265..b52841c 100644
--- a/public/_shared/head.jade
+++ b/public/_shared/head.jade
@@ -34,7 +34,7 @@ noscript
 link(rel="stylesheet", href='assets/css/style.css')
 //- link(rel="stylesheet", href='assets/css/main.css')
 if environment == "production"
-  link(rel="stylesheet", href='assets/css/_nav/live.css')
+  link(rel="stylesheet", href='assets/css/nav/live.css')

 <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500italic' rel='stylesheet' type='text/css'>
diff --git a/public/assets/css/_nav/live.styl b/public/assets/css/_nav/live.styl
deleted file mode 100644
index d48e2d5..0000000
--- a/public/assets/css/_nav/live.styl
+++ /dev/null
@@ -1,10 +0,0 @@
-.nav-collapse a
-  font-size: 15px
-
-header
-  h1
-    a
-      font-size: 22px
-
-h3
-  font-size: 1.3em
\ No newline at end of file
diff --git a/public/assets/css/nav.styl b/public/assets/css/nav.styl
index 54a639b..00ac090 100644
--- a/public/assets/css/nav.styl
+++ b/public/assets/css/nav.styl
@@ -1 +1 @@
-@import "_nav/*"
\ No newline at end of file
+@import "nav/*"
\ No newline at end of file

[ajmalafif]

@kevinsimper,

Oh wow thank you so much! I had a look into those files you mentioned and made a fix to it; works like a charm now: https://github.com/ajmalafif/harp-ajmalafif-my/tree/0bebd5048816789c2e8667917428892ceabb6a97

Thanks again!