.md partials or how to build TOC for whole project

Mevrael commented 8 years ago

I have toc.md in src root and some basic CSS custom styles which generates nested numbering for <ol> and would like to use this table of contents in sidebar in all other pages, however, as I can see only html files in layout partials folder can be used and not .md files in src.

Is there any way right now in one .md file insert another .md file and in layout's page.html include multiple md files? If not, what would be your suggestions, short algorithm, how I would make it myself using your tool?

Or may be you have another option to automatically build toc for whole project from all .md files?

P.S. thank you for this simple and great tool. It is closest to what I was looking looking for, simple to install and use out of the box with GitHub syntax highlighting support for most languages. Probably you also started making this tool because didn't find any simple ones. If you need some help in contributing, give me some guidelines about used technologies and architecture. I see there are many features and imporvmenets could be made. You also may contact me on twitter

wchrisjohnson commented 8 years ago

+1 for the ability to handle multiple markdown files, TOC, etc. We are currently having to maintain all the example code for a project I'm involved with in one large file and it's getting cumbersome to do so in markup. I'd like to either be able to 1) combine many individual markdown files into one single file and kick out a markup file, or 2) be able to simulate the same via the TOC approach that @Mevrael notes above.

Thanks for a nice, clean toolkit for doing this sort of thing!

Mevrael commented 8 years ago

Right now I am doing it with iframe:

layout's page.html:

  {{#if headings}}
  <div class="row">
    <menu>
      <iframe src="{{asset '../toc.html'}}">TOC</iframe>
    </menu>
    <main class="markdown-body">
      {{~> content}}
    </main>
  </div>
  {{else}}
    <div class="markdown-body">
      {{~> content}}
    </div>
  {{/if}}

in <head> add this line so iframe would open links in main window:

<base target="_parent" />

And create toc.md in src root without any heading. Each other file should have heading. This is simple if statemenet how I determine is it toc or normal page to prevent rendering toc in toc itself.

I extended github layout and added this simple css to make two column layout and auto numbering in nested list:


ol {
    counter-reset: section;
    list-style-type: none !important;
}

li {
    font-weight: normal;
}

.markdown-body > ol > li {
    font-weight: bold;
    margin-bottom: 20px;
}

ol ol {
    list-style-type: none !important;
}

ol li::before {
    counter-increment: section;
    content: counters(section,".") ". "; 
}

body {
    max-width: none;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.row {
    height: calc(100% - 60px);
    float: left;
}

menu {
    width: 450px;
    height: 100%;
    display: inline-block;
    margin: 0 -100% 0 0;
    padding: 30px 0;
    vertical-align: top;
    float: left;
}

main {
    display: inline-block;
    margin: 0 0 0 450px;
    padding: 30px 30px 30px;
    vertical-align: top;
}

iframe {
    border: none;
    width: 100%;
    height: 100%;
}

a:not([href]) {
    color: black !important;
    text-decoration: none !important;
}

mixu / markdown-styles

.md partials or how to build TOC for whole project #37