How to get nice menu at top

[tyeeman]

I, and everyone else would most likely like a menu somewhere. The template should determine this, so I guess I want to know how to take any html template from the web and use it with jr and then have the menu built and placed in the proper position. To me that's the only thing lacking here for simple websites which is all I make, or am I not seeing the simplicity built in? Maybe I just change the .css file in the templates folder and that's it??

[xeoncross]

So, there are a variety of ways you could make a menu. You can see that I include a "menu" of sorts by AJAX loading in the "footer.html" file and appending it to the bottom of the post.

However, Jr has no server-side aspect, so unlike regular CMS or static site generators, it does not know about other posts on the server so it cannot auto-build a menu for you.

[tyeeman]

Yes, I want to build the menu manually, that's ok. I tried shifting the footer to the top and now it works fine unlike the previous version, thanks. But how do I use a generic template and make it work with jr? I see that this code is your current template -

// Basic HTML5 shell wrapped in a div
jr.body.innerHTML = '<div class="wrapper"><main role="main">\
    <article>' + html + '</article>\
</main><footer></footer></div>';

That makes it fixed doesn't it. Is it possible to use a generic html/css template somehow with the above code? Forgive me if it's a silly question, I'm not a coder but I sure would like to solve this question because you've got a great project here.

[xeoncross]

If you change it to this:

// Basic HTML5 shell wrapped in a div
jr.body.innerHTML = '<div class="wrapper"><header></header><main role="main">\
    <article>' + html + '</article>\
</main><footer></footer></div>';

You could load additional menus by adding another line like this: https://github.com/Xeoncross/jr/blob/master/js/jr.js#L170

ajax('nav.html', function(html) {
    if(x) {
        document.getElementsByTagName('header')[0].innerHTML = html;
    }
});

[xeoncross]

I'll look into setting a config value to load additional menu/block sections. This is a good idea.

[xeoncross]

I added a "block" config section to the jr.js file where you can specify blocks of HTML content to load into parts of the page (like loading a nav into the header).

[tyeeman]

Thanks for doing this! What if I want a 2 or 3 column template with the nav on the right or left? Is JR only for one column pages?

[xeoncross]

At the moment only two, one column layouts are included.

Jr is whatever you make it. With CSS you can style the header, main, or footer into three columns if you want. Or you could edit the jr.js file and add more markup to the default DOM structure.

It's really up to you.

[tyeeman]

So if I want two columns I propose to do this with a generic template -- Copy the header portion into header.html, copy the footer portion into footer.html using your format of tags (section & aside, I don't really know what they actually do though), copy the nav portion into nav.html and add it to the blocks area at the top of jr.js. Now how do I get that nav.html to show on the left side. If I do the following it won't work will it -

// Basic HTML5 shell wrapped in a div
jr.body.innerHTML = '<div class="wrapper">\
    <header></header>\
            <nav></nav>\
    <main role="main">\
        <article>' + html + '</article>\
    </main>\
    <footer></footer>\
</div>';

Can I add some code to the above to create a column easily? I don't want you spending more than one minute to do this. Just asking if it's easy?

[xeoncross]

Taking your code, you could do this.

blocks : {
    'footer.html' : 'footer',
    'header.html' : 'header',
    'sidebar.html' : '.sidebar',

},

Then

// Basic HTML5 shell wrapped in a div
jr.body.innerHTML = '<div class="wrapper">\
    <header></header>\
    <main role="main">\
       <div class="sidebar"></div>\
        <article>' + html + '</article>\
    </main>\
    <footer></footer>\
</div>';

Also, section, main, header, etc.. are all HTML5 elements. They are nothing special.

[tyeeman]

Yes, this is looking good. I'll tell you what I did, trying to simplify it the most. I took the generic template and split it into 3 sections. I placed everything from the top of the template into header.html, everything from below the templates main content area into footer.html, and the main content of the generic template into index.html, changing the html code to markdown in this one only. I commented out the path to the css because the css path is now within header.html. I then loaded index.html into the browser to see what it looked like and everything was there except the styling for index.html. I'm trying to determine why the styling won't take but I'm at a loss right now. The problem seems to be that my template uses a div with a class of "content" for the main area so somehow I've got to get that into the html by changing the following -

<main role="main">\
        <article>' + html + '</article>\
    </main>\

I've tried a few changes here but nothing seems to work. Please suggest easiest way.

PS - I tried adding a div like you described above and it doesn't seem to work. I just get the markdown printing out on a white page. If I use

sidebar></sidebar>\ 

instead of

div class="sidebar"></div>\

it seems to work.