Home Explore Help
Sign In
leakypixel
/
mdrender
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Breadcrumb

Craig Fletcher 6 years ago
parent
af9cb8518e
commit
00cdadf4aa
6 changed files with 117 additions and 75 deletions
Split View Show Diff Stats
  1. 8 2
      .npm-scripts/build-pipeline.js
  2. 8 0
      .npm-scripts/funcs/compileTemplates.js
  3. 17 0
      helpers/breadcrumb.js
  4. 0 52
      partials/contact-card.handlebars
  5. 3 5
      partials/header.handlebars
  6. 81 16
      styles/styles.css

+ 8 - 2
.npm-scripts/build-pipeline.js
View File 

@@ -33,6 +33,7 @@ module.exports = {
 
           { path: "./static" },
 
           { path: "./styles", outputExtension: ".css" },
 
           { path: "./partials" },
 
+          { path: "./helpers" },
 
           { path: "./fonts" },
 
           { path: "./js", outputExtension: ".js" },
 
           { path: "./pages" }
 
@@ -80,7 +81,8 @@ module.exports = {
 
       },
 
       {
 
         func: "copy",
 
-        selector: state => state.matchingAnyTag(["partials", "svgs", "pages"])
 
+        selector: state =>
 
+          state.matchingAnyTag(["helpers", "partials", "svgs", "pages"])
 
       }
 
     ],
 
     [
 
@@ -118,7 +120,8 @@ module.exports = {
 
         func: "compileTemplates",
 
         selector: state => state.selectByTag("pages"),
 
         getConfig: state => ({
 
-          partials: state.selectByTag("partials")
 
+          partials: state.selectByTag("partials"),
 
+          helpers: state.selectByTag("helpers")
 
         })
 
       },
 
       {
 
@@ -176,6 +179,8 @@ module.exports = {
 
             meta: {
 
               title: currentItem.niceName,
 
               dir: dir,
 
+              dirPath: [...dirPath.slice(1), currentItem.name],
 
+              name: currentItem.name,
 
               now: new Date().toLocaleString(),
 
               context: dirPath[1],
 
               isIndex: isIndex,
 
@@ -184,6 +189,7 @@ module.exports = {
 
               entries: state
 
                 .selectByTag("content")
 
                 .selectByTag("markdown")
 
+                .selectByTag(dirPath[1])
 
                 .not(state.selectByTag("index"))
 
             },
 
             template: matchingTemplate

+ 8 - 0
.npm-scripts/funcs/compileTemplates.js
View File 

@@ -10,6 +10,14 @@ function compileTemplates(config, item) {
 
   });
 
 }
 
 compileTemplates.withConfig = function(config) {
 
+  if (config.helpers) {
 
+    console.log("Helpers:", config.helpers);
 
+    config.helpers.map(helper => {
 
+      console.log("helper:", eval(helper.content.toString()));
 
+      const evalledhelper = require("../../" + helper.path);
 
+      Handlebars.registerHelper(helper.name, eval(helper.content.toString()));
 
+    });
 
+  }
 
   if (config.partials) {
 
     config.partials.map(partial =>
 
       Handlebars.registerPartial(partial.name, partial.content)

+ 17 - 0
helpers/breadcrumb.js
View File 

@@ -0,0 +1,17 @@
 
+module.exports = function(context, options) {
 
+  return `
 
+    <ul class="breadcrumb">
 
+    <a href="/" title="wiki"><li>
 
+    wiki
 
+    </li></a>
 
+    ${context
 
+      .map(function(item, index) {
 
+        return `<a href="/${context.slice(0, index + 1).join("/")}"
 
+          title="${item}"><li>
 
+            ${item}
 
+          </li></a>`;
 
+      })
 
+      .join("\n")}
 
+    </ul>
 
+    `;
 
+};

+ 0 - 52
partials/contact-card.handlebars
View File 

@@ -1,52 +0,0 @@
 
-<section class="contact-card">
 
-  <ul>
 
-    <li>
 
-      <a href="https://twitter.com/leakypixel">
 
-        {{{ meta.svgs.twitter-brands }}}
 
-        <span>twitter</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="https://github.com/leakypixel">
 
-        {{{ meta.svgs.github-brands }}}
 
-        <span>github</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="https://hub.docker.com/u/leakypixel">
 
-        {{{ meta.svgs.docker-brands }}}
 
-        <span>docker hub</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="https://www.linkedin.com/in/craig-fletcher-30594868/">
 
-        {{{ meta.svgs.linkedin-brands }}}
 
-        <span>linkedin</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="/blog">
 
-        {{{ meta.svgs.newspaper-solid }}}
 
-        <span>blog</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="https://www.npmjs.com/~leakypixel">
 
-        {{{ meta.svgs.npm-brands }}}
 
-        <span>npm</span>
 
-      </a>
 
-    </li>
 
-
 
-    <li>
 
-      <a href="https://www.instagram.com/leakypixel/">
 
-        {{{ meta.svgs.instagram-brands }}}
 
-        <span>instagram</span>
 
-      </a>
 
-    </li>
 
-  </ul>
 
-</section>

+ 3 - 5
partials/header.handlebars
View File 

@@ -14,11 +14,6 @@
 
 </head>
 
 <body>
 
   <header>
 
-    <div class="controls">
 
-      <a href="/">{{{ meta.svgs.home-solid }}}</a>
 
-      <a href="/{{meta.context}}">{{{ meta.svgs.list-solid }}}</a>
 
-      <a href="/{{meta.dir}}">{{{ meta.svgs.arrow-up-solid }}}</a>
 
-    </div>
 
     <div class="switches">
 
       <button class="lightswitch"
 
               onclick="lightMode(true)"
 
@@ -33,4 +28,7 @@
 
         {{{ meta.svgs.moon-solid }}}
 
       </button>
 
     </div>
 
+
 
+    {{#breadcrumb meta.dirPath}}
 
+    {{/breadcrumb}}
 
 </header>

+ 81 - 16
styles/styles.css
View File 

@@ -96,7 +96,7 @@ section img + em {
 
 }
 
 
 h1 {
 
-  display: inline;
 
+  display: inline-block;
 
   font-family: "NotoSerif", serif;
 
   font-size: 2.4em;
 
   letter-spacing: 0.05em;
 
@@ -188,28 +188,91 @@ footer p {
 
 
 /* Header */
 
 header {
 
-  margin: 3vw auto 2em auto;
 
+  margin: 3vw auto 2vw auto;
 
   display: flex;
 
   flex-flow: row;
 
   max-width: 80vw;
 
   padding: 1em;
 
+  flex-wrap: wrap;
 
 }
 
-header div {
 
-  margin: 0 auto 2em auto;
 
-  margin: 0 auto;
 
-  flex: 1;
 
+
 
+.breadcrumb {
 
+  font-size: 0;
 
+  font-family: "Hack", monospace;
 
+  flex: 4;
 
+  list-style-type: none;
 
   display: flex;
 
-  flex-flow: row;
 
-  max-width: 300px;
 
+  flex-direction: row;
 
+  align-items: center;
 
+  flex-wrap: wrap;
 
+  margin-bottom: 1vw;
 
 }
 
 
-.controls svg,
 
-.controls a {
 
+.breadcrumb li {
 
+  padding: 0;
 
+  margin: 0;
 
+}
 
+
 
+.breadcrumb a {
 
   flex: 1;
 
-  width: 2em;
 
-  height: 3em;
 
-  color: var(--color-text-alternative);
 
-  background-color: transparent;
 
+  padding: 0;
 
+  padding-left: 1em;
 
+  padding-right: 2em;
 
+  margin: 0;
 
+  position: relative;
 
+  line-height: 2rem;
 
+  font-size: 1rem;
 
+  color: var(--color-background);
 
+}
 
+
 
+.breadcrumb a:after {
 
+  content: "";
 
+  display: inline-block;
 
+  width: 0;
 
+  height: 0;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+}
 
+
 
+.breadcrumb a:nth-child(1n + 1) {
 
+  background-color: var(--color-accent-1);
 
+}
 
+
 
+.breadcrumb a:nth-child(2n + 1) {
 
+  background-color: var(--color-accent-2);
 
+}
 
+
 
+.breadcrumb a:nth-child(3n + 1) {
 
+  background-color: var(--color-accent-3);
 
+}
 
+
 
+.breadcrumb a:nth-child(1n + 1):after {
 
+  border-top: 1rem solid var(--color-accent-2);
 
+  border-bottom: 1rem solid var(--color-accent-2);
 
+  border-left: 1rem solid transparent;
 
+}
 
+
 
+.breadcrumb a:nth-child(2n + 1):after {
 
+  border-top: 1rem solid var(--color-accent-3);
 
+  border-bottom: 1rem solid var(--color-accent-3);
 
+  border-left: 1rem solid transparent;
 
+}
 
+
 
+.breadcrumb a:nth-child(3n + 1):after {
 
+  border-top: 1rem solid var(--color-accent-1);
 
+  border-bottom: 1rem solid var(--color-accent-1);
 
+  border-left: 1rem solid transparent;
 
+}
 
+
 
+.breadcrumb a:last-child {
 
+  border: none;
 
+  padding-right: 1rem;
 
+}
 
+
 
+.breadcrumb a:last-child:after {
 
+  border: none;
 
+  display: none;
 
 }
 
 
 /* Dark/light mode switches */
 
@@ -217,7 +280,9 @@ header div {
 
   display: flex;
 
   align-content: space-around;
 
   align-items: flex-start;
 
-  justify-content: flex-end;
 
+  justify-content: flex-start;
 
+  flex: 1;
 
+  margin-bottom: 1vw;
 
 }
 
 
 .switches svg {
 
@@ -350,6 +415,7 @@ header div {
 
   header {
 
     max-width: 90vw;
 
     margin-bottom: 2em;
 
+    flex-flow: column;
 
   }
 
   footer {
 
     padding: 0;
 
@@ -362,7 +428,6 @@ header div {
 
   footer p {
 
     padding: 1em;
 
     border-bottom: none;
 
-    border-left: 0.5em solid;
 
     margin: 0 1em;
 
   }
 
 }