WIP page types

src/assets/stylesheet.css

@@ -39,6 +39,10 @@ a {
   padding-bottom: 20px;
 }
 
+.-mar-no {
+  margin: 0;
+}
+
 .-left {
   float: left;
 }
@@ -92,12 +96,24 @@ a {
 .index-interiorlink {
   display: block;
   width: 100%;
-  padding: 1rem;
+  padding: .5rem 2rem;
   color: white;
   text-decoration: none;
   box-sizing: border-box;
 }
 
+.index-interiorlink-description {
+  height: 1.5em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.index-interiorlink-icon {
+  position: relative;
+  top: .2em;
+}
+
 .interior-topbar {
   height: 25px;
 }
@@ -114,6 +130,11 @@ a {
   background: linear-gradient(90deg, rgba(235, 181, 242, .3), rgba(128, 95, 132, .3));
 }
 
+.index-interiorlink.-git,
+.interior-headline.-git {
+  background: linear-gradient(90deg, rgba(181, 242, 186, .3), rgba(95, 132, 105, .3));
+}
+
 .interior-headline svg {
   vertical-align: bottom;
 }

src/discoverJSONData.js

@@ -17,6 +17,7 @@ const getPinnedRepoJSONs = async () => {
     }
   } = await requestGithub(schema);
   return pinnedRepoData.map(data => {
+    data.node.pageType = 'git';
     if (data.node.readme && data.node.readme.text) {
       data.node.readme.html = marked(data.node.readme.text);
     }

src/pages/example.json

@@ -1,5 +1,17 @@
 {
   "name": "Example",
+  "pageType": "volunteer",
+  "repositoryTopics": {
+    "edges": [
+      {
+        "node": {
+          "topic": {
+            "name": "volunteering"
+          }
+        }
+      }
+    ]
+  },
   "readme": {
     "text": "## Whats Up?"
   }

src/templates/index.hbs

@@ -16,9 +16,14 @@
   <ol class="index-interiorlinks">
     {{#each this}}
       <li class="index-interiorlink-wrapper">
-        <a class="index-interiorlink -volunteer" href="./{{this.name}}.html">
-          <h3>{{this.name}}</h3>
-          <p>{{this.description}}</p>
+        <a class="index-interiorlink -{{this.pageType}}" href="./{{this.name}}.html">
+          <h3 class="-mar-no">
+            <svg class="index-interiorlink-icon" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <use xlink:href="./assets/spritesheet.svg#git" />
+            </svg>
+            {{this.name}}
+          </h3>
+          <p class="index-interiorlink-description -mar-no">{{this.description}}</p>
           <ul class="tags">
             {{#each this.repositoryTopics.edges}}
               <li class="tag">{{this.node.topic.name}}

src/templates/interior.hbs

@@ -22,7 +22,7 @@
         </svg>
       </a>
     </div>
-    <div class="interior-headline -pad-h -pad-v">
+    <div class="interior-headline -{{pageType}} -pad-h -pad-v">
       <h1 class="-container">
         <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <use xlink:href="./assets/spritesheet.svg#git" />