Don't display category in the component name

Author: johno

components/articles/title-text-image/index.html

@@ -34,7 +34,7 @@ <h1 class="f2">Title Text with Image</h1>
 </article>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Articles Title Text Image</h1>
+  <h1 class="f4 f3-ns mt4">Title Text Image</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/articles/title-text/index.html

@@ -33,7 +33,7 @@ <h1 class="">Title</h1>
 </article>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Articles Title Text</h1>
+  <h1 class="f4 f3-ns mt4">Title Text</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/layout/flag-object-collapse/index.html

@@ -29,7 +29,7 @@
 </div>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Layout Flag Object Collapse</h1>
+  <h1 class="f4 f3-ns mt4">Flag Object Collapse</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/layout/flag-object/index.html

@@ -28,7 +28,7 @@
 </div>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Layout Flag Object</h1>
+  <h1 class="f4 f3-ns mt4">Flag Object</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/layout/two-column-collapse-one/index.html

@@ -28,7 +28,7 @@ <h1>Column Two</h1>
 </article>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Layout Two Column Collapse One</h1>
+  <h1 class="f4 f3-ns mt4">Two Column Collapse One</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/layout/two-column/index.html

@@ -28,7 +28,7 @@ <h1>Column Two</h1>
 </article>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Layout Two Column</h1>
+  <h1 class="f4 f3-ns mt4">Two Column</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/nav/large-title-link-list/index.html

@@ -27,7 +27,7 @@
 </nav>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Nav Large Title Link List</h1>
+  <h1 class="f4 f3-ns mt4">Large Title Link List</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

components/nav/title-link-list/index.html

@@ -25,7 +25,7 @@
 </nav>
 
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4">Nav Title Link List</h1>
+  <h1 class="f4 f3-ns mt4">Title Link List</h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">

src/components-build.js

@@ -44,7 +44,7 @@ module.exports = function () {
       componentsForNav[category] = componentsForNav[category] || []
       componentsForNav[category].push({
         href: component.replace('src', '').replace('.html', '') + '/index.html',
-        name: getTitle(component.split('/')[3])
+        name: getName(component)
       })
     })
 
@@ -68,6 +68,7 @@ module.exports = function () {
       var frontMatter = fmParsed.attributes || {}
       frontMatter.bodyClass = frontMatter.bodyClass || ''
       frontMatter.title = frontMatter.title || getTitle(component)
+      frontMatter.name = frontMatter.name || getName(component)
       frontMatter.classes = getClasses(fmParsed.body).map(function(klass) {
         return '.' + klass
       })
@@ -114,3 +115,7 @@ function getTitle(component) {
   var title = rmHtmlExt(component).replace('src/components/', '').replace(/(\/|_|-)/g, ' ')
   return titleize(title)
 }
+
+function getName(component) {
+  return titleize(getTitle(component.split('/')[3]))
+}

src/templates/components.html

@@ -9,7 +9,7 @@
 <main>
   <%= content %>
   <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
-  <h1 class="f4 f3-ns mt4"><%= title %></h1>
+  <h1 class="f4 f3-ns mt4"><%= name %></h1>
 
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">