How to do complex exploration of the file structure


#1

I have a site that has some fairly complex file paths. For instance, a simplified version would look like

/Project
    /Project/pages
        /Project/pages/A
            /Project/pages/A/1
                /Project/pages/A/1/i
                    page1.html
                    page2.html
                    page3.html
                /Project/pages/A/1/ii
                    page1.html
                    page2.html
            /Project/pages/A/2
                /Project/pages/A/2/i
                    page1.html
                    page2.html
                /Project/pages/A/2/ii
                    page1.html
                    page2.html
                    page3.html
                    page4.html
        /Project/pages/B
            ... (This will look similar to directory A above) ...

I will often be adding to these files and directories, and I want the links between pages to update automatically. For instance, I want a breadcrumbs bar that will have a drop-down menu. So suppose that you’re at page

/Project/pages/C/5/iii/page3.html

which in the breadcrumbs bar will look like

C > 5 > iii > page3

When you hover over the C it should drop-down all the options in that directory, so A, B, C, D, for instance. When you hover over 5 it should drop-down all the options inside of the C folder only. So if C has sub-directories 1, 2, 3, 4, and 5, it displays all of these.

So what it seems like I need to do is: For any given page, I need to detect all of the files that are siblings (i.e. in the same folder) and put them in the breadcrumbs. Then I need to look a directory above, and detect all of the directories that are siblings there, and include those paths in the breadcrumbs. Do it again, and again, until it reaches the /Project/pages directory. Since I don’t know in advance how deep the directories will go or how many there will be, I need to do this in a recursive way, I think. So does anyone have any suggestions about how I might attempt this?


#2

that is very ambitious. It may also kill your build time depending on how many files you have. The breadcrumb itself might not be too bad, but your requirement to have each section of the crumb be a dropdown is going to be complicated.

You may be better off doing this all via JS - have jekyll build a json file that has all the files in it, then parse that somehow to get what you want. I don’t have any experience with that, but am guessing it would be better than trying to get jekyll to do it.


#3

Interesting, I have been starting to suspect this project is ambitious given how few resources there are for doing it–but it also felt kind of natural, so part of me thought “this should be kind of hard but not THAT hard”. Welp. Maybe it really is that hard.

Anyway, I know you said that you don’t have any experience with this, but perhaps I can ask: What makes a JSON file come to mind? Does Jekyll have good support for generating this? I know Jekyll can read and parse JSONs but I haven’t seen anything about it generating them.

I know I could accomplish this task with JQuery on the server side, but it seemed a little silly to do it that way since I’m not personalizing anything–so why have a script run on every request, generating the file context and inserting the links, when it just does the same thing every time? But unless I’m going to write my own static site generator, maybe that’s the best solution after all.

Would a framework help with this? Should I learn NodeJS or AngularJS to do this, or would those not really help with this?


#4

Don’t let me scare you off too much - there are 2 concerns though - how hard it is to code (hard but doable is my guess) and how much it slows your build times. My primary concern with what you want to do is about build times - though I would bail out pretty quick if I tried to code it I think (keep in mind I am not a trained professional when it comes to code - far from it).

Jekyll itself knows nothing about json as far as outputting it is concerned - you would just make a layout with the correct syntax and it would be output just fine. Google jekyll json and you should come up with a few examples. i suggest json as a way to interface with JS client side to accomplish what you want.

I would look at the json file as doing what you are saying you could do with jquery server-side as basically the same thing - except you don’t need a server - the jekyll site could be served from anything that can serve files (S3). You would need to do the same type of code client side to parse the json, and it seems better to do it client side than server side to me (so you don’t need a server).

The problem with what you want to do if you use liquid - besides it being a fair amount of work to do it - is that you may end up looping thru every file to build the menus - on EVERY page build - which may take a long time depending on how many pages you have. If you only have 35 pages then it s probably no big deal. With a json file jekyll would build that once and you are done - other than whatever JS code you need to parse it, but as far as generation times are concerned it would be clean and quick.