Fix Paths to be Cross Platform (Windows compatible)

[paul42]

Hey, love the idea for this library, but I'm not that great at CSS, and one of the tools I like is Tailwind CSS - I took an initial stab at poking it into rollup here in this Gist Here but I'm having a wierd issue where I don't think my CSS stylesheet is getting put into the dist folder?

do you have any suggested reading materials for 'how to get better at rollup' :D? I'd love to help if able, I think this is a neat idea.

[paul42]

even after running the degit template and not running any other changes, I'm still getting a 404 on style.css

[nickreese]

@paul42 Did you run npm start? The command that does the copy of the assets folder to the public folder, is run during rollup.

Are you on windows? I just setup my windows development box to be able to troubleshoot this issue.

[paul42]

@nickreese thanks for responding, yes I'm on windows, yes I ran npm start like in the elderdocs, windows 10, didn't see any errors in the output window. (big fan of the static site gen stuff, I love hugo and I'm excited about getting into this one for svelte)

[nickreese]

I’m mobile but have read you gist and will dig into this when I am free. I think there could be two issues going on.

1. Take a look at this issue regarding files not being copied on windows. https://github.com/Elderjs/elderjs/issues/16#issuecomment-678812234

2. It could also have to do with where tailwinds is outputting the css? Is the css getting generated that you can find?

[paul42]

I think you're right about the rollup config, I'm going to dig into that more and try to poke at a cross-environment solution using path or something - when I tried the workaround from #16 I was able to get a style.css in my final build

[nickreese]

@paul42 OK, please keep me posted if you come up with a cross env solution. It is on my to-do list to hunt down.

[paul42]

I'm super slow so I apologize but the root cause is on windows node.js's process.cwd() has path seperators as backslashes, and in the line: const filePath = file.replace(process.cwd() + '/src/assets/', '').split('/'); the process.cwd() pathseperators are different from the /src/assets/ slashes, on my windows machine: filepath: C:/Users/MediaCompy/source/repos/elderjs-app-2/src/assets/style.css process.cwd: C:\Users\MediaCompy\source\repos\elderjs-app-2 process.cwd() + '/src/assets/': C:\Users\MediaCompy\source\repos\elderjs-app-2/src/assets/

I'll poke at different ways, but I think:

1. split file into array first
2. remove src and assets elements from array using indexOf?
3. test if that works? alternatively poke at how path.sep works and path.extname ?

[nickreese]

We can probably just replace all / with https://nodejs.org/api/path.html#path_path_sep.

I’m pretty sure there are some that also need to be tackled in the Elder.js core.

Have been running Elder.js on WSL2 and didnt remember to test standard Windows.

[nickreese]

It appears path.join may be the right route. https://shapeshed.com/writing-cross-platform-node/

I’m mobile but I’d test this path.join(process.cwd(), “src”, “assets“) first. If this works I can hack on the Elder.js core.

[nickreese]

@paul42 I've adjusted the template to a cross platform solution for copying over asset files.

Here is the hook if anyone is looking.

const fs = require('fs-extra');

  {
    hook: 'bootstrap',
    name: 'copyAssetsToPublic',
    description: 'Copies /src/assets/ to the assets folder defined in the elder.config.js',
    run: ({ settings }) => {
      // copy assets folder to public destination
      glob.sync(path.resolve(process.cwd(), settings.locations.srcFolder, './assets/**/*')).forEach((file) => {
        const parsed = path.parse(file);

        // Only write the file/folder structure if it has an extension
        if (parsed.ext && parsed.ext.length > 0) {
          fs.ensureDirSync(parsed.dir);
          const relDirToAssets = file.replace(parsed.dir, '.');
          fs.copyFileSync(file, path.resolve(process.cwd(), settings.locations.assets, relDirToAssets));
        }
      });
    },
  },