Improve guides page (haxeflixel style)

Author: jeremyfa

content/_layouts/page.ejs

@@ -8,6 +8,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <title><%= title %> - Ceramic</title>
+        <link rel="stylesheet" href="/static/lucide-font/lucide.css" type="text/css" />
         <link rel="stylesheet" href="/static/style.css" type="text/css" />
         <link rel="stylesheet" href="/static/prism.css" type="text/css" />
         <script type="text/javascript" src="/static/script.js"></script>

content/guides.ejs

@@ -1,6 +1,7 @@
 ---
 layout: guides
 category: guides
+subCategory: index
 title: Guides
 ---
 <%
@@ -14,29 +15,33 @@ allGuides.sort(function(a, b) {
     return a.filePathStem.localeCompare(b.filePathStem);
 });
 var guideMenus = [];
+var guideIcons = {};
 for (item of allGuides) {
     var aMenu = item.data.menu;
     if (aMenu && guideMenus.indexOf(aMenu) == -1) {
         guideMenus.push(aMenu);
     }
+    if (aMenu && item.data.hasOwnProperty('menuIcon')) {
+        guideIcons[aMenu] = item.data.menuIcon;
+    }
 }
 %>
 <h1>Guides</h1>
 <p>This section gathers guides to help you learn <strong>Ceramic</strong> and get up and running. If you are new to <strong>Ceramic</strong>, you may want to read the <strong>Introduction</strong> or directly start with the <strong>Getting started</strong> section if you want to practise right away.</p>
 
+<div class="card-index">
 <% for (aMenu of guideMenus) { %>
-<h2><%= aMenu %></h2>
-<ul>
+<h2><i class="icon icon-<%= guideIcons[aMenu] != null ? guideIcons[aMenu] : 'book' %>"></i> <%= aMenu %></h2>
+<div class="card-grid">
     <%
     for (item of allGuides) {
         if (item.data.category == 'guides' && item.url != '/guides/' && item.data.menu == aMenu) {
     %>
-        <li>
-            <a href="<%= item.url %>"><%= item.data.title %></a>
-        </li>
+    <a href="<%= item.url %>" class="card-link"><%= item.data.hasOwnProperty('menuTitle') ? item.data.menuTitle : item.data.title %></a>
     <%
         }
     }
     %>
-</ul>
+</div>
 <% } %>
+</div>

content/guides/01-introduction/01-discover-ceramic.md

@@ -4,6 +4,7 @@ category: guides
 menu: Introduction
 title: Discover Ceramic, a cross-platform and open-source 2D framework
 menuTitle: Discover Ceramic
+menuIcon: telescope
 permalink: guides/discover-ceramic/
 ---
 # Discover Ceramic, a cross-platform and open-source 2D framework

content/guides/02-getting-started/01-install-ceramic.md

@@ -2,6 +2,7 @@
 layout: guides
 category: guides
 menu: Getting Started
+menuIcon: square-play
 title: Install Ceramic
 permalink: guides/install-ceramic/
 ---

content/guides/04-appendices/01-inside-a-default-project.md

@@ -2,6 +2,7 @@
 layout: guides
 category: guides
 menu: Appendices
+menuIcon: library-big
 title: Inside a default project
 permalink: guides/inside-a-default-project/
 ---

content/guides/05-extras/01-faq.md

@@ -2,6 +2,7 @@
 layout: guides
 category: guides
 menu: Extras
+menuIcon: pickaxe
 title: FAQ
 permalink: guides/faq/
 ---