make post folders possible

content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md

@@ -2,8 +2,8 @@
 layout: post
 
 title: Using <kbd> for fun and profit
-image: ../media/kremalicious-kbdfun-teaser.png
+image: ./kremalicious-kbdfun-teaser.png
-style: post-kbd.min.css
+style: ./post-kbd.css
 author: Matthias Kretschmann
 featured: true
 
@@ -17,6 +17,10 @@ tags:
 coinhive: true
 ---
 
+<style>
+    @import './post-kbd.css';
+</style>
+
 There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.
 
 The above picture might be blurry depending on the device you're using so here's a live rendered demo:

content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css

@@ -0,0 +1,73 @@
+kbd {
+    font-size: 18px;
+    color: #444444;
+    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    text-align: center;
+    line-height: 1em;
+    text-shadow: 0 1px 0 #fff;
+    display: inline;
+    padding: .3em .55em;
+    border-radius: 6px;
+    background-clip: padding-box;
+    border: 1px solid #bbb;
+    background-color: #f7f7f7;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+    background-repeat: repeat-x;
+    box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
+}
+
+kbd.dark {
+    color: #eeeeee;
+    text-shadow: 0 -1px 0 #000000;
+    border-color: #000;
+    background-color: #4d4c4c;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+    background-repeat: no-repeat;
+    box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
+}
+
+
+kbd.ios {
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+    color: #000;
+    border-color: rgba(0, 0, 0, 0.6);
+    border-top-color: rgba(0, 0, 0, 0.4);
+    background-color: #b7b7bc;
+    background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
+    background-repeat: repeat-x;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
+}
+
+
+kbd.android {
+    font-family: 'RobotoRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #ffffff;
+    text-shadow: none;
+    padding: .3em;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+    background-clip: padding-box;
+    background: #5e5e5e;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
+}
+
+
+kbd.android.dark {
+    background: #222222;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
+}
+
+kbd.android.color {
+    background: #083c5b;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
+}
+
+@font-face {
+    font-family: 'RobotoRegular';
+    src: url('./Roboto-Regular-webfont.eot');
+    src: url('./Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('./Roboto-Regular-webfont.woff') format('woff'), url('./Roboto-Regular-webfont.ttf') format('truetype'), url('./Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

gatsby-node.js

@@ -1,17 +1,23 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
-// Create slug & date for posts from file path
+// Create slug & date for posts from file path values
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
 
   if (node.internal.type === 'MarkdownRemark') {
     const fileNode = getNode(node.parent)
     const parsedFilePath = path.parse(fileNode.relativePath)
+    const slugOriginal = createFilePath({ node, getNode })
 
     // slug
-    const slugOriginal = createFilePath({ node, getNode })
+    let slug
-    const slug = `/${slugOriginal.substring(12)}` // remove date from file path
+
+    if (parsedFilePath.name === 'index') {
+      slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir
+    } else {
+      slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path
+    }
 
     createNodeField({
       node,
@@ -25,7 +31,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
     if (node.frontmatter.date) {
       date = `${node.frontmatter.date}`
     } else {
-      date = `${parsedFilePath.name.substring(0, 10)}`
+      date = `${slugOriginal.substring(1, 10)}` // grab date from file path
     }
 
     createNodeField({
@@ -42,18 +48,22 @@ exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     const postTemplate = path.resolve('src/templates/Post.jsx')
     // const indexTemplate = path.resolve('src/templates/index.jsx')
-    // const tagPage = path.resolve('src/templates/tag.jsx')
+    // const tagTemplate = path.resolve('src/templates/tag.jsx')
-    // const categoryPage = path.resolve('src/templates/category.jsx')
+    // const categoryTemplate = path.resolve('src/templates/category.jsx')
 
     resolve(
       graphql(
         `
           {
-            allMarkdownRemark {
+            allMarkdownRemark(
+              sort: { fields: [fields___date], order: DESC }
+              limit: 1000
+            ) {
               edges {
                 node {
                   fields {
                     slug
+                    date
                   }
                 }
               }
@@ -67,20 +77,21 @@ exports.createPages = ({ graphql, actions }) => {
           reject(result.errors)
         }
 
-        // Creates Index page
-        // createPaginatedPages({
-        //   edges: result.data.allMarkdownRemark.edges,
-        //   createPage: createPage,
-        //   pageTemplate: indexTemplate
-        // })
-
         // Create Posts
-        result.data.allMarkdownRemark.edges.forEach(edge => {
+        const posts = result.data.allMarkdownRemark.edges
+
+        posts.forEach((post, index) => {
+          const previous =
+            index === posts.length - 1 ? null : posts[index + 1].node
+          const next = index === 0 ? null : posts[index - 1].node
+
           createPage({
-            path: `${edge.node.fields.slug}`,
+            path: `${post.node.fields.slug}`,
             component: postTemplate,
             context: {
-              slug: edge.node.fields.slug
+              slug: post.node.fields.slug,
+              previous,
+              next
             }
           })
         })
@@ -89,47 +100,40 @@ exports.createPages = ({ graphql, actions }) => {
         // const tagMap = new Map()
         // const categorySet = new Set()
 
-        // result.data.allMarkdownRemark.edges.forEach(edge => {
+        // posts.forEach(post => {
-        //   if (edge.node.frontmatter.tags) {
+        //   if (post.node.frontmatter.tags) {
-        //     edge.node.frontmatter.tags.forEach(tag => {
+        //     post.node.frontmatter.tags.forEach(tag => {
         //       tagSet.add(tag)
 
         //       const array = tagMap.has(tag) ? tagMap.get(tag) : []
-        //       array.push(edge)
+        //       array.push(post)
         //       tagMap.set(tag, array)
         //     })
         //   }
 
-        //   if (edge.node.frontmatter.category) {
+        //   if (post.node.frontmatter.category) {
-        //     categorySet.add(edge.node.frontmatter.category)
+        //     categorySet.add(post.node.frontmatter.category)
         //   }
         // })
 
-        // const tagFormatter = tag => route =>
-        //   `/tags/${_.kebabCase(tag)}/${route !== 1 ? route : ''}`
         // const tagList = Array.from(tagSet)
+
         // tagList.forEach(tag => {
         //   // Creates tag pages
-        //   createPaginationPages({
+        //   createPage({
-        //     createPage,
+        //     path: `/tags/${tag}/`,
-        //     edges: tagMap.get(tag),
+        //     component: tagTemplate,
-        //     component: tagPage,
+        //     context: { tag }
-        //     pathFormatter: tagFormatter(tag),
-        //     limit: siteConfig.sitePaginationLimit,
-        //     context: {
-        //       tag
-        //     }
         //   })
         // })
 
         // const categoryList = Array.from(categorySet)
+
         // categoryList.forEach(category => {
         //   createPage({
-        //     path: `/categories/${_.kebabCase(category)}/`,
+        //     path: `/categories/${category}/`,
-        //     component: categoryPage,
+        //     component: categoryTemplate,
-        //     context: {
+        //     context: { category }
-        //       category
-        //     }
         //   })
         // })
 

package.json

@@ -21,10 +21,10 @@
     "last 3 versions"
   ],
   "dependencies": {
-    "@webcomponents/webcomponentsjs": "^2.0.2",
+    "@webcomponents/webcomponentsjs": "^2.0.3",
     "clipboard": "^2.0.1",
     "exif-js": "^2.3.0",
-    "gatsby": "^2.0.0-beta.46",
+    "gatsby": "^2.0.0-beta.47",
     "gatsby-image": "^2.0.0-beta.6",
     "gatsby-plugin-matomo": "^0.4.1",
     "gatsby-plugin-react-helmet": "^3.0.0-beta.3",

src/styles/_mixins.scss

@@ -205,3 +205,19 @@
         color: $color;
     }
 }
+
+// Image frame style
+/////////////////////////////////////
+
+@mixin media-frame() {
+    @include transition();
+
+    border-top: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-radius: $border-radius;
+    box-shadow: 0 1px 3px rgba($brand-grey, .2);
+
+    @media (min-width: $screen-sm) {
+        border: 2px solid transparent;
+    }
+}

src/styles/base.scss

@@ -167,16 +167,26 @@ a {
     }
 }
 
-// Media
+// Responsive Media
 /////////////////////////////////////
 
+figure,
 img,
-video,
 svg,
-figure {
+video,
+audio,
+embed,
+canvas,
+picture {
     max-width: 100%;
     height: auto;
-    margin: 0;
+    margin: 0 auto;
+    display: block;
+    border-radius: $border-radius;
+}
+
+img {
+    vertical-align: middle;
 }
 
 // Lists

src/templates/Post.module.scss

@@ -34,13 +34,19 @@
     margin-top: $spacer * 1.5;
     margin-bottom: $spacer * 1.5;
 
-    img {
+    > div {
+        @include media-frame();
+
         border-radius: 0;
 
         @media (min-width: $screen-sm) {
             border-radius: $border-radius;
         }
     }
+
+    img {
+        border-radius: 0;
+    }
 }
 
 // Post Content