I am trying to achieve multiple directories that are encapsulated with their own js/css/html, within my greater project. What would be the best approach to make this work? The file structure would be something like below.
source
–index
–/styles
–/js
–/layouts
–/examples
----/example1
------index
------/css
------/js
----/example2
------index
------/css
------/js
What I think you’re trying to accomplish is to have a sprockets-aware css and js directory in each of these sub-directories/sub-sites. This isn’t going to happen using Middleman out-of-the-box.
I’m not sure why you need this exact project structure, but if it’s mainly to ease deploy of these sites, I’d recommend writing a custom extension that would add a css and js directory to each /example/* directory during the build process.
However, I think you likely don’t really want what you think you want. Why not just have the build process output multiple CSS and JS files as a part of the build process. It’s easy enough to output example1.css, example2.css and have a custom layout for each example directory linking to these specific assets.
Hey Eric, thanks for the response.
The purpose of my directory structure here was to be able to provide mini encapsulated code examples to serve as a reference to other members of my development team. I have been able to accomplish this using frontmatter. I simply added a reference in my example1/index.html front matter to the stylesheets and scripts I wanted to load in, and dynamically loaded them from my main layout
//frontmatter in encapsulated directory
stylesheet: example-styles
scripts: [example-script-1, example-script-2,example-script-3]
//In layout
- if data.page.stylesheet
= stylesheet_link_tag data.page.stylesheet
I don’t think middleman was the best tool to solve this problem, but for my use case I have been able to accomplish every I needed to.