Allow index files to ignore permalink structure

[joshfry]

Using the permalinks plugin breaks index pages by putting them inside new directories named index. So for example, the site's homepage is no longer accessible unless you point to /index. Can there be a way to allow index files to ignore the permalink structure?

[jonschlinkert]

@joshfry how so? What does your config look like?

[joshfry]

Here's my assemble task:

assemble: {
  options: {
    data: 'src/templates/data/**/*.{json,yml}',
    assets: 'dist/assets',
    helpers: 'src/templates/helpers/*.js',
    layoutdir: 'src/templates/layouts',
    layout: 'default.hbs',
    partials: ['src/templates/partials/*.hbs'],
    plugins: ['permalinks'],
    permalinks: {
      structure: ':basename/index.html'
    }
  },
  pages: {
    files: [
      {
        expand: true,
        flatten: true,
        cwd: 'src/templates/pages',
        src: ['**/*.hbs'],
        dest: 'dist/'
      }
    ]
  },
}

This is the output from the shell:

...
Assembling dist/help/index.html OK
Assembling dist/index/index.html OK
Assembling dist/todo/index.html OK
...

My issue is that since the basename for index.hbs is index, index.hbs page(s) follow the permalink structure and get output to /index/index.html. Is there a way for pages named index.hbs to ignore the permalink structure and just get output to /index.html?

[jonschlinkert]

ah! got it. that makes sense. let me see what I can come up with

[jonschlinkert]

@joshfry let me know if this works out for you.

[joshfry]

@jonschlinkert I tested it out tonight and it worked as expected. Unfortunately, {{assets}} didn't work right and all the pages following the permalink structure had broken style, script and image links. I'll re-test at work tomorrow and post specific examples of issues.

[jonschlinkert]

bah, I forgot to test for that. I'l re-open until this is fixed properly

[jonschlinkert]

@joshfry I think I fixed this, but it would be great if you tested it yourself and let me know how it works out 5637018

[joshfry]

@jonschlinkert the asset links are still not being updated. I installed permalinks from npm, then replaced permalinks.js with the most up-to-date version on this repo.

The index files' {{asset}} links no longer work, either. The output directory is being added to the urls, like this:

index page
Is <link rel="stylesheet" href="dist/assets/css/style.css" />
Should be <link rel="stylesheet" href="assets/css/style.css" />

Inside page, one level deep (:basename/index.html)
Is <link rel="stylesheet" href="assets/css/style.css" />
Should be <link rel="stylesheet" href="../assets/css/style.css" />

[jonschlinkert]

I'll need more info about your setup to debug. The tests work fine, and it's working fine on my setup. Perhaps if you looked at the gruntfile for this repo to see how I'm doing it, and how the templates are setup, so you can explain what we're doing differently to yield different results...

[joshfry]

@jonschlinkert,
Awesome. Thanks for pointing out this repo's tests. I was able to pinpoint where we differed in Assemble's settings.

If you look at my sample assemble task above, the link to assets is assets: 'dist/assets', but in your Gruntfile, you just have assets: 'assets'. I changed my asset link to match yours and everything worked as expected! I have no idea how assemble just knows that assets is located inside dist, but either way, it's woring now. THANKS!

Amazing work @jonschlinkert and @doowb! I'm tickled pink.

[jonschlinkert]

Great! I'm glad it worked, but it shouldn't matter what directory the assets dir is in. This is either a bug in the plugin, or we need to change where/when the assets path is calculated in assemble so that plugins can re-calculate it.

I'm going to leave this open until we get this 100% fixed, thanks for hanging in there.

@doowb any ideas here? you're much more familiar with when/how the path is calculated.

[doowb]

looking at the code, it looks like the assets are only re-calculated if the page is an "index" page. There should be something at the bottom of the plugin to re-calculate the assets after the new file.dest path is set. I think this will be the same calculation regardless of if the page is an "index" page or not.

I can see if I can do something.

[jonschlinkert]

that would be great, thanks.

[doowb]

Check out my PR #26 . It works for all the test cases now (the assets option in the gruntfile needed to be changed to test/assets since that's technically where the assets folder resides.

[joshfry]

@doowb: perfect. I changed the assets option in the gruntfile back to what I originally had (pointing it to the actual location) and everything works perfectly and as expected. @jonschlinkert: For me, this issue is resolved.

[jonschlinkert]

👍 nice! happy to hear it!

[joshfry]

@jonschlinkert @doowb, I noticed something that may require opening this issue again (unless I'm doing something wrong). Ignoring all files named index.hbs may be too heavy handed.

My goal is to get assemble to generate a site with pages, blog posts and an index page with a list of blog posts. Here's how I currently have pages and blog posts organized.

├── pages
│   ├── page-1.hbs
│   ├── page-2.hbs
│   └── page-3.hbs
└── posts
    ├── 2013-05-01-post-1.hbs
    ├── 2013-06-13-post-2.hbs
    ├── 2013-07-09-post-3.hbs
    ├── 2013-08-06-post-4.hbs
    └── index.hbs

Notice that posts has an index file and pages does not. I want an index file in posts because when the posts task runs, I want to generate a blog listings page located at http://example.com/articles/. See my assemble task below. The reason why I removed index.hbs from pages is because since files named index ignore the permalink structure, the index file in posts overrides the index file in pages. Right now, it's working for me because I actually want to display articles on the homepage, but I've run into the same problem on other projects where I don't want index pages to fall through the cracks and override each other for a spot in the root.

Assemble task (I stripped out non-issue parts)

pages: {
  options: {
    permalinks: {
      structure: ':basename/index.html'
    }
  },
  files: [
    {
      expand: true,
      cwd: 'assemble/pages',
      src: ['**/*.hbs'],
      dest: 'dist'
    }
  ]
},
posts: {
  options: {
    permalinks: {
      structure: 'articles/:title/index.html'
    }
  },
  files: [
    {
      expand: true,
      cwd: 'assemble/posts',
      src: ['**/*.hbs'],
      dest: 'dist'
    }
  ]
}

Let me know if you need any more clarification.
Thanks, joshfry

[jonschlinkert]

Isn't this more of a matter of preference? I'm currently building my personal blog and I have "posts" going to ./blog/, while pages are built to the root. Or am I missing the point altogether?

[joshfry]

@jonschlinkert, do you have the source for your blog on github? Maybe I'm going about it all wrong.. If I can see how you're doing it, a light bulb may go on in my head.

[jonschlinkert]

ignore that last comment. how could index files in two different dirs overwrite each other? Based on what you described, each target should be able to have an index page, one at http://example.com/articles/index.html and one at http://example.com/index.html. I guess I'm a little confused

[jonschlinkert]

I'll try to get it pushed up in the next day or two. I'm working on getting the init task updated too. I'll keep working with you on this until we get it figured out

[joshfry]

Here's the ouput from grunt for my 2 tasks:

Running "assemble:pages" (assemble) task
Assembling dist/about/index.html OK
Assembling dist/index.html OK
Assembling dist/portfolio/index.html OK
Assembling dist/test/index.html OK
>> 4 pages assembled.

Running "assemble:posts" (assemble) task
Assembling dist/notes/front-end-dev-notes/index.html OK
Assembling dist/notes/omega-reset-for-bourbon-neat/index.html OK
Assembling dist/notes/boilerplate/index.html OK
Assembling dist/notes/sass-media-query-helper-for-designers/index.html OK
Assembling dist/index.html OK
>> 5 pages assembled.

See how when assemble:pages runs, it assembles Assembling dist/index.html OK then when assemble:posts runs, the index file inside the posts directory overrides the root index page: Assembling dist/index.html OK

[jonschlinkert]

ah, well if that's the case this is a bug. @doowb do you want to look at this? this sounds like a calculation error

[doowb]

@joshfry I think if you want both index files, they'll have to be in different dest folders, so you should be able to change your configuration for the posts target to this...

posts: {
  options: {
    permalinks: {
      structure: ':title/index.html'
    }
  },
  files: [
    {
      expand: true,
      cwd: 'assemble/posts',
      src: ['**/*.hbs'],
      dest: 'dist/articles/'
    }
  ]
}

[jonschlinkert]

@doowb that is exactly what I had in my first post, but then I thought I was missing something. I think that's right

[joshfry]

Thats it! THANK YOU @doowb and @jonschlinkert. Especially thank you for your quick responses.. It was my error.

[doowb]

So this issue was originally created to "ignore" files called index, so that's what the plugin is doing.

.... okay you replied while I was typing, so I'm not going to suggest my other idea because I think it just makes it look like it's doing more magic 😉

[jonschlinkert]

yeah, thanks @doowb! these are the nuances I like about the plugin, but it also makes it harder to use.

and @doowb, it's not magic, it's javascript ;-) (inside joke)

[joshfry]

I can't resist a The Office quote.. "I love inside jokes... I'd love to be apart of one someday." - Michael Scott

[doowb]

lol... I forgot about that.

[jonschlinkert]

@joshfry lol great quote, my wife and I love that show