Jekyll data-driven navigation

jsonnav.html

{% comment %}
	This snippet checks the data "navigation.json" file for pages not included

	Usage:
		{% include jsonnav.html %}

	Return:
		HTML direct output

	Required:
		json file called "navigation.json" in data folder
{% endcomment %}


{% comment %}
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
	--- VARIABLES ---
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% assign foundPages = "" %}
{% assign foundPagesCount = 0 %}
{% assign newPages = "" %}
{% assign newPagesCount = 0 %}


{% comment %}
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
	--- LOGIC ---
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for page in site.html_pages %}

	{% assign found = false %}

	{% comment %}
		------------------------------------------------------------------------------------------------------------------------------------------------------------
		--- LEVEL 1 ---
		------------------------------------------------------------------------------------------------------------------------------------------------------------
	{% endcomment %}
	{% for link in site.data.navigation %}

		{% if link.url == page.url && link.title == page.title %}
			{% assign found = true %}
			{% break %}
		{% else %}
			{% comment %}{{link.url}} == {{page.url}} &amp;&amp; {{link.title}} == {{page.title}}<br>{% endcomment %}
		{% endif %}

			{% if link.subpages.size > 0 %}
					{% comment %}
						----------------------------------------------------------------------------------------------------------------------------------------------------
						--- LEVEL 2 ---
						----------------------------------------------------------------------------------------------------------------------------------------------------
					{% endcomment %}
					{% for sublink in link.subpages %}

						{% if sublink.url == page.url && sublink.title == page.title %}
							{% assign found = true %}
							{% break %}
						{% else %}
							{% comment %}{{sublink.url}} == {{page.url}} &amp;&amp; {{sublink.title}} == {{page.title}}<br>{% endcomment %}
						{% endif %}

							{% if sublink.subpages.size > 0 %}
									{% comment %}
										--------------------------------------------------------------------------------------------------------------------------------------------
										--- LEVEL 3 ---
										--------------------------------------------------------------------------------------------------------------------------------------------
									{% endcomment %}
									{% for subsublink in sublink.subpages %}
										{% if subsublink.url == page.url && subsublink.title == page.title %}
											{% assign found = true %}
											{% break %}
										{% else %}
											{% comment %}{{subsublink.url}} == {{page.url}}<br>{% endcomment %}
										{% endif %}
									{% endfor %}
							{% endif %}
					{% endfor %}
			{% endif %}
	{% endfor %}


	{% comment %}
		Handeling found and new pages
	{% endcomment %}
	{% if found == true %} {% comment %}Found pages{% endcomment %}

		{% assign foundPagesCount = foundPagesCount | plus: 1 %}
		{% capture foundPages %}{{ foundPages }}
			<pre><code>
{
	"title": "{{ page.title }}",
	"url": "{{ page.url }}",
	"subpages": []
},
			</code></pre><hr>
		{% endcapture %}

	{% else %} {% comment %}New pages{% endcomment %}

		{% assign newPagesCount = newPagesCount | plus: 1 %}
		{% capture newPages %}{{ newPages }}
			<pre><code>
{
	"title": "{{ page.title }}",
	"url": "{{ page.url }}",
	"subpages": []
},
			</code></pre><hr>
		{% endcapture %}

	{% endif %}

{% endfor %}



{% comment %}
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
	--- OUTPUT ---
	--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}

<h2>New pages <small>({{ newPagesCount }})</small></h2>
{{ newPages }}
<h2>Found pages <small>({{ foundPagesCount }})</small></h2>
{{ foundPages }}

navigation.html

{% comment %}
	This snippet spits out the HTML navigation derived from a json data file.

	Usage:
		{% include navigation.html %}

	Return:
		HTML direct output

	Required:
		json file called "navigation.json" in data folder
{% endcomment %}


<ul class="navi top-margin7-xs">
	{% comment %}
		------------------------------------------------------------------------------------------------------------------------------------------------------------
		--- LEVEL 1 ---
		------------------------------------------------------------------------------------------------------------------------------------------------------------
	{% endcomment %}
	{% for link in site.data.navigation %}

		<li>
			<a href="{{ link.url }}">{{ link.title }}</a>

			{% if link.subpages.size > 0 %}
				<ul>

					{% comment %}
						----------------------------------------------------------------------------------------------------------------------------------------------------
						--- LEVEL 2 ---
						----------------------------------------------------------------------------------------------------------------------------------------------------
					{% endcomment %}
					{% for sublink in link.subpages %}

						<li>
							<a href="{{ sublink.url }}">{{ sublink.title }}</a>

							{% if sublink.subpages.size > 0 %}
								<ul>

									{% comment %}
										--------------------------------------------------------------------------------------------------------------------------------------------
										--- LEVEL 3 ---
										--------------------------------------------------------------------------------------------------------------------------------------------
									{% endcomment %}
									{% for subsublink in sublink.subpages %}
										<li>
											<a href="{{ subsublink.url }}">{{ subsublink.title }}</a>
										</li>
									{% endfor %}
								</ul>
							{% endif %}
						</li>

					{% endfor %}
				</ul>
			{% endif %}
		</li>

	{% endfor %}
</ul>

navigation.json

[
	{
		"title": "Home",
		"url": "/"
	},
	{
		"title": "Customer Experience",
		"url": "/Customer%20Experience/",

		"subpages": [
			{
				"title": "Example",
				"url": "/Customer%20Experience/example/"
			}
		]
	},
	{
		"title": "Capture",
		"url": "/Capture/",

		"subpages": [
			{
				"title": "Example",
				"url": "/Capture/example/"
			}
		]
	},
	{
		"title": "Create",
		"url": "/Create/",

		"subpages": [
			{
				"title": "Example",
				"url": "/Create/example/"
			}
		]
	},
	{
		"title": "GEM",
		"url": "/GEM/",

		"subpages": [
			{
				"title": "Using GEM",
				"url": "/GEM/Using%20GEM/",

				"subpages": [
					{
						"title": "Example",
						"url": "/GEM/Using%20GEM/example/"
					}
				]
			},
			{
				"title": "Production",
				"url": "/GEM/Production/",

				"subpages": [
					{
						"title": "Example",
						"url": "/GEM/Production/example/"
					}
				]
			},
			{
				"title": "UX UI",
				"url": "/GEM/UX%20UI/",

				"subpages": [
					{
						"title": "Example",
						"url": "/GEM/UX%20UI/example/"
					}
				]
			},
			{
				"title": "Visual Designer",
				"url": "/GEM/Visual%20Designer/",

				"subpages": [
					{
						"title": "Example",
						"url": "/GEM/Visual%20Designer/example/"
					}
				]
			},
			{
				"title": "The FEDs",
				"url": "/GEM/The%20FEDs/",

				"subpages": [
					{
						"title": "Example",
						"url": "/GEM/The%20FEDs/example/"
					}
				]
			}

		]
	},

	{
		"title": "Tools",
		"url": "/Tools/",

		"subpages": [
			{
				"title": "Example",
				"url": "/Tools/example/"
			}
		]
	},
	{
		"title": "Support",
		"url": "/Support/",

		"subpages": [
			{
				"title": "Example",
				"url": "/Support/example/"
			}
		]
	}
]