Dynamic feature list creation using _confiq.yml and Liquid

Author: emilbaehr

_config.yml

@@ -10,6 +10,15 @@ collections:
   posts:
     output          : true
 
+# Features
+features                      :
+  - title                     : 'First Feature'
+    description               : 'A good description'
+    fontawesome_icon_name     : adjust
+  - title                     : 'Another feature'
+    description               : 'Another good description'
+    fontawesome_icon_name     : mobile
+
 # Handling Reading
 safe                : false
 include             : [".htaccess", "_pages"]

_includes/features.html

@@ -1,103 +1,24 @@
 <div class="features">
-    <div class="feature">
-        <div>
-            <span class="fa-stack fa-1x">
-                <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-mobile fa-stack-1x"></i>
-            </span>
-        </div>
-        <div class="featureText">
-            <h4>
-                Feature 1
-            </h4>
-            <p>
-                Use Siri Shortcuts and x-callback-url for automation.
-            </p>
-        </div>
-    </div>
 
-    <div class="feature">
-        <div>
-            <span class="fa-stack fa-1x">
-                <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-adjust fa-stack-1x"></i>
-            </span>
-        </div>
-        <div class="featureText">
-            <h4>
-                Feature 2
-            </h4>
-            <p>
-                Kiwi that well dolphin alas this the mindfully jeepers.
-            </p>
-        </div>
-    </div>
-
-    <div class="feature">
-        <div>
-            <span class="fa-stack fa-1x">
-                <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-cloud fa-stack-1x"></i>
-            </span>
-        </div>
-        <div class="featureText">
-            <h4>
-                Feature 3
-            </h4>
-            <p>
-                One preparatory up less therefore hello oh amid.
-            </p>
-        </div>
-    </div>
+    {% for feature in site.features %}
 
     <div class="feature">
         <div>
             <span class="fa-stack fa-1x">
                 <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-expand-arrows-alt fa-stack-1x"></i>
+                <i class="iconTop fas fa-{{ feature.fontawesome_icon_name }} fa-stack-1x"></i>
             </span>
         </div>
         <div class="featureText">
             <h4>
-                Feature 3
+                {{ feature.title }}
             </h4>
             <p>
-                Use Siri Shortcuts and x-callback-url for automation.
+                {{ feature.description }}
             </p>
         </div>
     </div>
 
-    <div class="feature">
-        <div>
-            <span class="fa-stack fa-1x">
-                <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-history fa-stack-1x"></i>
-            </span>
-        </div>
-        <div class="featureText">
-            <h4>
-                Feature 5
-            </h4>
-            <p>
-                Use Siri Shortcuts and x-callback-url for automation.
-            </p>
-        </div>
-    </div>
+    {% endfor %}
 
-    <div class="feature">
-        <div>
-            <span class="fa-stack fa-1x">
-                <i class="iconBack fas fa-circle fa-stack-2x"></i>
-                <i class="iconTop fas fa-database fa-stack-1x"></i>
-            </span>
-        </div>
-        <div class="featureText">
-            <h4>
-                Feature 6
-            </h4>
-            <p>
-                Use Siri Shortcuts and x-callback-url for automation.
-            </p>
-        </div>
-    </div>
 </div>