Request: asset folder helper

[JSteunou]

Harpjs have an option to compile a project but does not transform assets path into correct relative path, which mean we have to have a webserver in order to view our compiled project.

It happens when you have articles, or posts within subfolders but with the main layout which is in root folder.

It could be nice to have a config option to set a public path in global var, but also tell harp to handle it as absolute or relative so it works flawless as server and as static.

The main idea behind that came when I start to write some documentation with Harpjs, but could not send a static copy by mail that could be read as it is.

[kennethormandy]

Hey there,

There’s a discussion on that here #149, so I am going to close this issue in favour of that, but here’s how you should be able to take care of it.

The easiest solution is to leave the .html extension in your links if you know your server needs this. If Harp isn’t going to be the server you use in production, Harp can’t add some of the features from server mode into the compile mode, so it just follows whatever you have done. We have discussed some URL helpers to make this easier in the future, but none have been finished yet. Feel free to comment here if you have more questions, and if you have your code on GitHub I’d be happy to take a look.

[JSteunou]

I'm sorry you totally missed my point. Maybe I explained it very badly though :(

My issue is with assets like css and images.

Imagine a _layout.ejs at the root of a Harp project, and some articles in the articles folder. Each article will be generated with the _layout.ejs from the root folder, which contains a link to assets/css/main.css for example.

So if I'm using harp compile, my index.html can be opened directly in a web browser, css is fine. But all my html articles are broken since the path for the css is still assets/css/main.css instead of ../assets/css/main.css.

Do you copy?

[sintaxi]

@JSteunou I am on board with this feature request. What I think we should do is put together a list of possible solutions and go from there.

[kennethormandy]

Sorry @JSteunou, my mistake.

@sintaxi I have a pull request open on Terraform that includes one possible solution, but we discussed it and suggested a broader URL helper would be better. I documented that there, but the gist of it is that I added this:

link(href="#{ current.base }css/main.css" rel="stylesheet")

But in the end we leaned towards this being more versatile:

link(href=url("css/main.css") rel="stylesheet")

[JSteunou]

+1 for an url helper. If it can be used for css / js / img / ... it will be terrific!

[mfrohberg]

+100, Just yesterday, I had to manually resolve every img, js, and css tag when compiling as I develop using harp yet deploy to S3.

[cfjedimaster]

This is one of the first things I ran into with Harp, so, +1000.

[JSteunou]

Instead of having an helper, can relative urls be resolved automatically at compilation?

For example, if a .md file is rendered using a layout 2 folders up, scan this layout to transform urls adding ../../

[mfrohberg]

My temporary solution to the problem is to assign path variables in harp.json. i.e ("articles_path": "../../", "archived_articles": "../../../", etc)

[tobinharris]

+1000 to this also.

One possible solution that almost works is to use wget to fetch the whole site and --convert-links so they're relative.

wget -r --no-parent --convert-links --html-extension  -P ./compiled  http://localhost:9000

If you have .json files etc these might be missed, so you probably need an extra step to copy any missed resources.

Obviously, having harp compile not translate relative paths to absolute would be nicer :)

[koen-serry]

Hi I was wondering if there is any progress on this issue as we're facing the same issue?

[bubbleheadinc]

Hi. Has there been any update on this? Just started with Harp, and ran into this issue right away. Thanks

[kexoth]

Hello!

+1 for url helper or a layout rule inside the compile for building it's relative paths.

I'm also trying to use harp to build my static page on Github Pages & stuck with this issue.
In my opinion the relative path for the resources in _layout.[ejs|jade] should be calculated regarding the path of the _layout file in the filesystem, not regarding the file for which the layout is compiled.

Kex

[agibsen]

What's the status on this? It would be really helpful with a {{root}} helper like in Zurb's Panini
[http://foundation.zurb.com/sites/docs/panini.html#root][http://foundation.zurb.com/sites/docs/panini.html#root)

[allergeek]

Hi, is there any way to avoid this construct? Thank you!
<%- include ../../../_includes/_head %>

[sintaxi]

@allergeek IIRC you can use and absolute path so <%- include /_includes/_head %> should also work.

[allergeek]

@sintaxi Thanx! I'm not sure why, but unfortunately it doesn't work for me. Do you think it's on the EJS part?
This pretty much illustrates the problem:
https://stackoverflow.com/questions/44499771/how-to-include-ejs-partials-using-absolute-path

I've seen a workaround with current.path, that renders a url for the proper environment. Checking just in case there's a simpler fix.

[allergeek]

[sintaxi]

Oh crap, my bad. include is a template specific command that is built into the templating engine. Try using partial instead which is a harp sepcific mechanism. Its much more powerful and robust.

http://harpjs.com/docs/development/partial