ericalli / static-site-boilerplate

A better workflow for building modern static websites.
http://staticsiteboilerplate.com
MIT License
1.74k stars 166 forks source link

HTML files in subfolders do not get styles / scripts. #46

Open Andrew1431 opened 4 years ago

Andrew1431 commented 4 years ago

Describe the bug In your documentation, it clearly states:

You may add as many html pages as you’d like to the root level directory, they will automatically be copied and minified into the dist/ folder upon building your site.

So I don't know if this a bug report or a feature request:

I want users to be able to visit website.com/survey instead of survey.html so I've put a survey/index.html file there. It works technically, I see the HTML, but it is not receiving any of the styles or javascript code injection.

To Reproduce Steps to reproduce the behavior:

  1. Create a subfolder for HTML (Very standard operation I assume?)
  2. HTML inside there will load but it will not get the webpack injections or live reload.

Expected behavior I expect to be able to nest my HTML for cleaner URLs

Desktop (please complete the following information): Platform Agnostic

CharnjeetIotasol commented 4 years ago

Have you found any way to load style and script on subfolder.

kesavanv commented 4 years ago

You will be able to organize HTML files in folders, by adding the below code

filename = dir.substring(6); in https://github.com/ericalli/static-site-boilerplate/blob/master/config/webpack.plugins.js#L60

Can be done better, if we alter the actual code.

redordev commented 4 years ago

Would be great if we could have different directories and root level pages e.g.

contact.html index.html insights.html service.html team.html blog/story1.html blog/story2.html insights/insight1.html insights/insight2.html services/service1.html services/service2.html team/member1.html team/member2.html

Any idea how to change the script to do this?

BenceSzalai commented 3 years ago

All you need to do is modify webpack.plugins.js to instead of using path.basename(dir) which throws away the directory path, extract the html "filename" from dir including the relative path compared to src. Something like:

const filename = path.relative(config.paths.src, dir);

Actually this could be updated in the repo, as it would be more versatile.

Together with changing line 58 as:

const generateHTMLPlugins = () => glob.sync(`./${config.paths.src}/**/*.html`).map((dir) => {

which would allow the src path to be properly modified here, but that is not directly related to this issue, just saying, as once config.paths.src is being used to generate the relative filenames it'd be preferable to use that to gather the files as well instead of hardcoded src as of now.