Provide the featured list through api

_data/featured.yml

@@ -0,0 +1,13 @@
+  - id: com.fynelabs.nomad
+    image: /assets/images/carousel/nomad.PNG
+  - id: io.github.jacalz.rymdport
+    color: "#1e3c6d"
+    name-color: "#ffffff"
+  - id: me.ankushjadhav.fynesweeper
+    image: /assets/images/carousel/fynesweeper.png
+  - id: com.pomadorik
+    color: "#0a7b0b"
+    name-color: "#ff5f3a"
+  - id: com.github.alexballas.go2tv
+    image: /assets/images/carousel/go2tv.png
+

_includes/carousel.html

@@ -4,7 +4,7 @@
 {% assign letters = letterstring | split: ',' %}
 <div class="carousel__holder">
     <div id="featured" class="carousel">
-        {% for item in page.featured %}
+        {% for item in site.data.featured %}
           <input class="carousel__activator" type="radio" name="featured" id="{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
         {% endfor %}
         {% for item in page.featured %}
@@ -27,7 +27,7 @@
         {% endfor %}
         <div class="carousel__track">
           <ul>
-            {% for item in page.featured %}
+            {% for item in site.data.featured %}
             {% if item.image | blank | not %}
             <li class="carousel__slide" style="background-image: url('{{ item.image }}');">
               <a href="/apps/{{ item.id }}.html">&nbsp;</a></li>
@@ -49,7 +49,7 @@
           </ul>
         </div>
         <div class="carousel__indicators">
-            {% for item in page.featured %}
+            {% for item in site.data.featured %}
               <label class="carousel__indicator" for="{{ letters[forloop.index0] }}"></label>
             {% endfor %}
         </div>
@@ -70,7 +70,7 @@
 .carousel__activator {
   display: none;
 }
-{% for item in page.featured %}
+{% for item in site.data.featured %}
 .carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
   -webkit-transform: translateX(-{{ forloop.index0 }}00%);
           transform: translateX(-{{ forloop.index0 }}00%);
@@ -162,7 +162,7 @@
   right: 0;
   opacity: 1;
 }
-{% for item in page.featured %}
+{% for item in site.data.featured %}
 .carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
   -webkit-transform: translateX({{ forloop.index0 }}00%);
           transform: translateX({{ forloop.index0 }}00%);
@@ -204,7 +204,7 @@
 .carousel__indicator {
   background-color: #fafafa;
 }
-{% for item in page.featured %}
+{% for item in site.data.featured %}
 .carousel__slide:nth-of-type({{ forloop.index }}),
 .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
   background-size: cover;

api/v1/featured.json

@@ -0,0 +1,21 @@
+---
+layout: none
+---
+[
+{% for item in site.data.featured %}
+{%- assign apps = site.apps | where:"appid", item.id %}
+{%- assign app = apps[0] -%}
+{
+  "id": "{{ item.id }}",
+  "description": "{{ app.excerpt }}",
+  {%- if item.image %}
+  "image": "{{ item.image }}",
+  {%- else %}
+  "background": "{{ item.color }}",
+  "icon": "{{app.icon }}",
+  "color": "{{ item.name-color }}"
+  {%- endif %}
+}
+  {%- unless forloop.last -%},{%- endunless -%}
+  {%- endfor %}
+]

index.md

@@ -2,21 +2,6 @@
 layout: default
 title:  Newest additions
 order:  1
-
-featured: 
-  - id: com.fynelabs.nomad
-    image: /assets/images/carousel/nomad.PNG
-  - id: io.github.jacalz.rymdport
-    color: "#1e3c6d"
-    name-color: "#ffffff"
-  - id: me.ankushjadhav.fynesweeper
-    image: /assets/images/carousel/fynesweeper.png
-  - id: com.pomadorik
-    color: "#0a7b0b"
-    name-color: "#ff5f3a"
-  - id: com.github.alexballas.go2tv
-    image: /assets/images/carousel/go2tv.png
-
 ---
 <div> 
   {% include nav.html %}