Change the base URL

[anthonyjclark]

Being new to both Spike and Webpack I'm not exactly sure how to setup my app.js to handle this fairly simple problem.

On my local machine the default URL is fine:

http://localhost:1111/

However, when deployed my website will be contained in a different directory. For example,

http://some_website.com/anthonyjclark

I'm not sure how to tell Webpack that all absolute paths need to be from this new base URL anthonyjclark. Coming from Hugo, this was done with the baseURL parameter.

[jescalan]

Hey Anthony!

So, there is no special handling for this at all. You can just use relative URLs instead of absolute. For example, if you are including a main js file in your layout, you want <script src='js/main.js' instead of <script src='/js/main.js'. The latter is an absolute path and will reference the root every time, whereas the former is relative and will reference from the directory its in.

If you have deep nested folders, this will mess up the idea of using a relative path - in this case, you'll want to use an absolute url like /anthonyjclark/js/main.js, and to get this to work in development, you'd probably want to set up a url helper so that things work in both development and production environments. Something like:

htmlStandards({
  locals: {
    baseUrl: process.env.NODE_ENV === 'production' ? '/anthonyjclark' : ''
  }
})

Then use that in your layout as such:

<script src='{{ baseUrl }}/js/main.js'></script>

Hope this helps!

[anthonyjclark]

That does help quite a bit. One quick thought before I go down this route: how can URLs in markdown be handled?

I tried the following, before my initial question, without any luck:

![Some Photo]({{ baseurl }}/img/some-image.png)

[jescalan]

You'd want to make sure you are using the markdown option for the tag you're using. For example:

<p md>![Some Photo]({{ baseurl }}/img/some-image.png)</p>

This functionality comes from reshape/standard and can be swapped around and customized if you want.

[anthonyjclark]

I was actually doing this:

    <div md>
      <include src='_about.md'></include>
    </div>

Which renders like this:

<p>![Some Photo](</p>
<p>/anthonyjclark</p>
<p>/img/some-image.png)</p>

So, it would seem that markdown-it butchers it before it can be handled by reshape. I'll try to escape the braces, but that seems cumbersome.

[anthonyjclark]

If I escape the braces:

![Some Photo](\{\{baseurl\}\}/img/some-image.png)

I get the following:

<img src="%7B%7Bbaseurl%7D%7D/img/some-image.png" alt="Some Photo">

Which, in hindsight, is not surprising.  

[jescalan]

Yeah, if you want to include a markdown file like that, I'd recommend adding this plugin: https://github.com/makestatic/reshape-markdown 😁

[jescalan]

Just an additional note - in general, it will greatly help you to customize everything the way you want if you get a better understanding of how reshape works. Try dropping reshape/standard and assembling plugins yourself, etc. It's also super simple to make your own custom plugins and you can start using them immediately unlike with other templating languages that require understanding a large compiler codebase and getting a PR accepted. 🤖

[anthonyjclark]

I appreciate your comments. Your suggestion to use reshape-markdown would definitely be a good idea, but I'm wondering if that will actually solve the problem of markdown-it messing up on the braces? Anyway, I made a quick plugin to solve the issue. It is definitely a kludge, but it seems to work for now (it will undoubtedly have unintended consequences at some point :)).

appendPlugins: [function baseURLPlugin (tree) {
      if (env === 'production') {
        return util.modifyNodes(tree, (node) => node.attrs && (node.attrs.href || node.attrs.src), (node) => {
          if (node.attrs.href && node.attrs.href[0].content[0] === '/') {
            node.attrs.href[0].content = baseurl + node.attrs.href[0].content;
          }
          if (node.attrs.src && node.attrs.src[0].content[0] === '/') {
            node.attrs.src[0].content = baseurl + node.attrs.src[0].content;
          }
          return node;
        });
      } else {
        return tree;
      }

You can feel free to close this issue.

[jescalan]

I think it should be fine. The curly braces should always be processed before markdown runs (ref), so that it won't see the braces. That being said, you might need to add in the eval-code plugin in the middle so that markdown is running on text instead of a code node. This is already the case with the standard preset so it should be fine.

The reason this happens is because reshape has the ability to output a javascript template that can be evaluated at runtime. The markdown transform though happens at compile time. If you are compiling to a static view, this doesn't really make a difference. So we have the eval-code plugin, which can be used to go through any "code" nodes - nodes that are compiled to js code that can be evaluated at runtime - and evaluate them at compile time instead.

This plugin you made looks great! If this is working for you, you should definitely make it into its own repo and publish it -- I'm sure other people would find it to be useful as well 😁

[anthonyjclark]

Thank you for your help. I'll cleanup my app.js and layout.html with your suggested changes. As for the plugin, I'll try to find some time to package it together later this week.

I really like what you've done with reshape and spike.

[jescalan]

Of course, super happy to help, and very impressed by how quickly you were able to understand how it works and produce a pretty great plugin.

We also have a small but fairly active community of other people using these tools and generally working on cool static site stuff if you're interested - would be happy to see you there!