I'm trying to create a SilverStripe theme using Zurb's Foundation for Apps and I'm having trouble getting Foundation's template loading to work with the directory structure.
Normally Foundation's structured like this:
What I'm trying to do is this:
Basically:
a) Foundation is in a subdirectory but still accessed with a root URL (eg http://example.com/) because SilverStripe loads the templates from it's controller.
b) The compiled files are but in a sibling directory of Foundation rather than a child.
This mostly works by just specifying output directories in gulpfile.js like .pipe(gulp.dest('../'+outputTheme)).
The problem is loading page templates by AJAX. Front-router compiles a list of routes and the paths to their template files but it makes them relative (templates/mypage.html) it tries to fetch example.com/templates/mypage.html instead of example.com/themes/livetheme/templates/mypage.html.
SO
a) Is there a way to specify a root or something in the client side JavaScript that gets added to the paths in foundationRoutes?
b) Failing that is there a way to get front-router to write full paths to routes.js? I've tried passing various values of root and dir to it but it gets passed through node's path.relative() which never gives them the result I'd expect.
Eg having this in gulpfile.js
gulp.task('copy:templates', function() {
return gulp.src('./templates/**/*.*')
.pipe(router({
path: '../livetheme/javascript/routes.js',
root: '/templates/',
dir: 'themes/livetheme'
}))
.pipe(gulp.dest('../livetheme/templates'))
;
});
results in this routes.js file:
var foundationRoutes = [{"name":"home","url":"/","path":"../../../templates/Layout/home.html"}];
When I really want the path to be "themes/livetheme/templates/Layout/home.html"
Sorry this is a bit of a mess, I'm not sure what information is relevant to the problem.