Render functions in proper order despite the YAML order

_data/functions.yml

@@ -1,4 +1,6 @@
 ---
+# this is the rendering order of functions
+
 execute-interactive:
   label: Interactive execute
   description: |

_includes/function_list.html

@@ -1,6 +1,8 @@
 <ul class="function-list">
-    {% for function in include.bin.functions %}
-    {% assign type = function[0] %}
-    <li><a href="{{ include.bin.url }}#{{ type }}">{{ site.data.functions[type].label }}</a></li>
+    {% for function in site.data.functions %}
+    {% assign function_name = function[0] %}
+    {% if include.bin.functions[function_name] %}
+    <li><a href="{{ include.bin.url }}#{{ function_name }}">{{ site.data.functions[function_name].label }}</a></li>
+    {% endif %}
     {% endfor %}
 </ul>

_layouts/bin.html

@@ -10,10 +10,10 @@ layout: common
 
 {{ page.description | markdownify }}
 
-{% for function in page.functions %}
-
+{% for function in site.data.functions %}
 {% assign function_name = function[0] %}
-{% assign examples = function[1] %}
+{% assign examples = page.functions[function_name] %}
+{% if examples %}
 
 <h2 id="{{ function_name }}" class="function-name">
     {{- site.data.functions[function_name].label -}}
@@ -46,4 +46,5 @@ sudo setcap cap_setuid+ep {{ bin_name }}
 
 </ul>
 
+{% endif %}
 {% endfor %}