app/_header.html
<!doctype html>
<html id="voxel" class="voxel-no-js" lang="en">
<head>
<meta charset="utf-8">
<title><%= @config['title'] %> — <%= @config['subtitle'] %></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Voxel Hologram. Hand crafted with ♥.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Voxel Hologram -->
<link rel="stylesheet" href="styles/main.css">
<!-- /Voxel Hologram -->
<!-- User stylesheets -->
<% @config['css_include'].each do |css| %>
<link rel="stylesheet" href="<%= css %>">
<% end %>
<!-- User stylesheets -->
<script src="<%= @config['bower_components_dir'] %>/voxel/dist/scripts/libraries/modernizr.custom.js"></script>
<!-- Ensure Voxel Hologram gets initialized in user's main script. -->
<script src="<%= @config['bower_components_dir'] %>/requirejs/require.js" data-main="<%= @config['requirejs_main'] %>"></script>
<!--
___
/ '_) Voxel Hologram.
.-^^^-/ / Handcrafted with ♥.
__/ / github.com/rishabhsrao/voxel-hologram.
<__.|_|-|_|
-->
</head>
<body class="voxel-theme--<%= @config['voxel_theme'] %>">
<!--[if lt IE 9]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<main>
<div class="voxel-hologram__content">
<aside data-js="voxelDrawer" class="voxel-drawer">
<header class="voxel-drawer__header">
<a href="index.html" class="voxel-drawer__title"><%= @config['title'] %></a>
</header>
<div class="voxel-layout__content">
<% categoryTitles = Array.new %>
<% @categories.each do |category| %>
<% categoryTitleName = category[0].split(@config['name_scope']).first %>
<% if not categoryTitles.include?(categoryTitleName) %>
<% categoryTitles.push(categoryTitleName) %>
<% end %>
<% end %>
<ol class="voxel-list voxel-list--ordered">
<% if file_name.include?("index.html") %>
<li class="voxel-list__item">
<a class="voxel-list__item__link voxel-list__item__link--active" href="index.html">Home</a>
</li>
<% else %>
<li class="voxel-list__item">
<a class="voxel-list__item__link" href="index.html">Home</a>
</li>
<% end %>
<% categoryTitles.each do |categoryTitle| %>
<li class="voxel-list__item">
<p class="voxel-list__item__text"><%= categoryTitle %></p>
<ol class="voxel-list voxel-list--ordered">
<% @categories.each do |category| %>
<% if category[0].include?(categoryTitle) %>
<% categoryName = category[0].split(@config['name_scope']).last %>
<% if categoryName == title.split(@config['name_scope']).last %>
<li class="voxel-list__item">
<a class="voxel-list__item__link voxel-list__item__link--active" href="<%= category[1] %>"><%= categoryName %></a>
</li>
<% else %>
<li class="voxel-list__item">
<a class="voxel-list__item__link" href="<%= category[1] %>"><%= categoryName %></a>
</li>
<% end %>
<% end %>
<% end %>
</ol>
</li>
<% end %>
</ol> <!-- /.voxel-list -->
</div> <!-- /.voxel-layout__content -->
</aside> <!-- /.voxel-drawer -->
</div> <!-- /.voxel-hologram__content -->
<div class="voxel-hologram__content">
<header class="voxel-header">
<a href="javascript:;" data-js="voxelDrawerToggle" class="voxel-drawer__toggle">⋮</a>
<div class="voxel-layout__content">
<% if title.split(@config['name_scope']).last %>
<a href="index.html" class="voxel-header__title" data-js="voxelDrawerHeaderTitle"><%= title.split(@config['name_scope']).last %> <span class="voxel-header__title__sub"><%= @config['subtitle'] %></span></a>
<% elsif file_name.include?("index.html") %>
<a href="index.html" class="voxel-header__title" data-js="voxelDrawerHeaderTitle"><%= @config['title'] %> <span class="voxel-header__title__sub"><%= @config['subtitle'] %></span></a>
<% end %>
</div> <!-- /.voxel-layout__content -->
</header> <!-- /.voxel-header -->
</div> <!-- /.voxel-hologram__content -->
<div class="voxel-layout__page" data-js="voxelDrawerPage">
<div class="voxel-layout__content">
<div class="voxel-hologram__content">
<ul class="voxel-pills">
<% @blocks.each do |block| %>
<li class="voxel-pills__item">
<a href="#<%= block[:name] %>" class="voxel-pill"><%= block[:title] %></a>
</li>
<% end %>
</ul> <!-- /.voxel-pills -->
</div> <!-- /.voxel-hologram__content -->
<div class="voxel-hologram__content">