add buttons, more post meta

README.md

@@ -37,13 +37,16 @@ npm run build
 
 ### Posts
 
-<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />All post content under `_src/_posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
+<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
+  <img alt="Creative Commons License" style="border-width:0;" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
+</a><br />
+All post content under `_src/_posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
 
 ### Photos & images
 
 All photos & image assets under `_src/_media`, `_src/assets/img`, and `assets sheet.psd` are plain ol' copyright.
 
-Copyright (c) 2008–2017 Matthias Kretschmann
+Copyright (c) 2008–2018 Matthias Kretschmann
 
 Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission.
 

content/posts/2012-04-20-the-origins-of-the-blink-tag.md

@@ -1,7 +1,7 @@
 ---
 type: link
 
-title: The origins of the <blink> tag
+title: The origins of the <blink> tag
 linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
 author: Matthias Kretschmann
 

content/posts/2012-08-07-projectpurple.md

@@ -33,7 +33,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
 Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
 
 <p class="content-download">
-    <a class="icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
+    <a class="icon-download" href="../media/project-purple-kremalicious.zip">Download <span> zip</span></a>
 </p>
 
   * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png)

package.json

@@ -34,7 +34,7 @@
     "gatsby-remark-images": "^2.0.1-beta.7",
     "gatsby-remark-prismjs": "^3.0.0-beta.3",
     "gatsby-remark-smartypants": "^2.0.0-beta.2",
-    "gatsby-source-filesystem": "^2.0.1-beta.6",
+    "gatsby-source-filesystem": "^2.0.1-beta.7",
     "gatsby-transformer-remark": "^2.1.1-beta.3",
     "gatsby-transformer-sharp": "^2.1.1-beta.5",
     "gatsby-transformer-yaml": "^2.1.1-beta.2",

src/components/atoms/PostLinkActions.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PostLinkActions.module.scss'
+
+const PostLinkActions = ({ linkurl, slug }) => (
+  <div className={styles.postLinkActions}>
+    <a className="more-link" href={linkurl}>
+      Go to source
+    </a>
+    <a className="more-link" href={slug} rel="tooltip" title="Permalink">
+      Permalink
+    </a>
+  </div>
+)
+
+PostLinkActions.propTypes = {
+  slug: PropTypes.string.isRequired,
+  linkurl: PropTypes.string
+}
+
+export default PostLinkActions

src/components/atoms/PostLinkActions.module.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+
+.postLinkActions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 2;
+}

src/components/atoms/PostTitle.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PostTitle.module.scss'
+
+const PostTitle = ({ type, linkurl, title }) =>
+  type === 'link' ? (
+    <h1
+      className={[styles.hentry__title, styles.hentry__title__link].join(' ')}
+    >
+      <a href={linkurl} title={`Go to source: ${linkurl}`}>
+        {title}
+      </a>
+    </h1>
+  ) : (
+    <h1 className={styles.hentry__title}>{title}</h1>
+  )
+
+PostTitle.propTypes = {
+  type: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  linkurl: PropTypes.string
+}
+
+export default PostTitle

src/components/atoms/PostTitle.module.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+
+// Post Title
+/////////////////////////////////////
+
+.hentry__title {
+    font-size: $font-size-h1;
+    text-align: center;
+    color: $color-headings;
+    margin-top: 0;
+    margin-bottom: $spacer;
+}
+
+.hentry__title__link {
+    font-size: $font-size-h3;
+}

src/components/molecules/PostMeta.jsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Time from 'react-time'
+import PostLinkActions from '../atoms/PostLinkActions'
 import styles from './PostMeta.module.scss'
 
 const PostMeta = ({ post, meta }) => {
-  const { author, updated, category, tags } = post.frontmatter
-  const { date } = post.fields
+  const { author, updated, category, tags, type, linkurl } = post.frontmatter
+  const { date, slug } = post.fields
 
   return (
     <footer className={styles.entryMeta}>
+      {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
+
       <div className={styles.byline}>
         <span className={styles.by}>by</span>
         <a className="fn" rel="author" href={meta.author.uri}>
@@ -29,9 +32,11 @@ const PostMeta = ({ post, meta }) => {
       </div>
 
       {category && (
+        <div className={styles.categories}>
           <a className={styles.category} href="/">
             {category}
           </a>
+        </div>
       )}
 
       {tags && (

src/components/molecules/PostMeta.module.scss

@@ -17,7 +17,7 @@
 
 .byline,
 .time {
-    font-size: italic;
+    font-style: italic;
 }
 
 .byline {
@@ -37,6 +37,7 @@
 
 .categories {
     margin-bottom: $spacer / 2;
+    text-align: center;
 }
 
 .category {
@@ -64,9 +65,6 @@
     }
 }
 
-.tags {
-}
-
 .tag {
     color: $text-color;
     margin-right: 5px;

src/styles/_buttons.scss

@@ -0,0 +1,227 @@
+@import 'variables';
+@import 'mixins';
+
+.btn,
+a.btn {
+    text-align: center;
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none; // Reset unusual Firefox-on-Android default style
+    white-space: nowrap;
+    user-select: none;
+    transition: all .2s ease-in-out;
+
+    // Default Button
+    @include button-size(
+        $padding-base-vertical,
+        $padding-base-horizontal,
+        $font-size-small,
+        $line-height,
+        $border-radius
+    );
+
+    background-color: rgba(255, 255, 255, .1);
+    border: 1px solid rgba(94, 131, 162, .3);
+    border-bottom-color: rgba(94, 131, 162, .4);
+    font-family: $font-family-headings;
+    font-weight: $font-weight-headings;
+    color: $brand-grey;
+    text-transform: uppercase;
+    box-shadow: 0 1px 3px rgba($brand-grey-light, .1),
+        inset 0 1px 0 rgba(255, 255, 255, .7);
+
+    @media (min-width: $screen-sm) {
+        max-width: 20rem;
+    }
+
+    &:hover,
+    &:focus {
+        outline: 0;
+        background-color: rgba(255, 255, 255, .5);
+    }
+
+    &:active {
+        color: $brand-grey;
+        border-color: rgba(94, 131, 162, .3);
+        background-color: transparent;
+        box-shadow: 0 1px 0 #fff;
+        transition: none;
+        outline: 0;
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    // Disabled State
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        pointer-events: none;
+        opacity: .6;
+        box-shadow: none;
+    }
+
+    // grid buttons
+    &.col2,
+    &.col3 {
+        margin-bottom: $spacer / 2;
+
+        @media (min-width: $screen-sm) {
+            margin-bottom: 0;
+        }
+    }
+
+    span {
+        font-size: .9rem;
+        color: rgba(19, 56, 50, .6);
+        margin-left: .3em;
+    }
+}
+
+// Primary Button
+.btn-primary,
+a.btn-primary {
+    @extend .btn;
+
+    color: darken($link-color, 50%);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
+    background: lighten($link-color, 15%);
+    border-color: $link-color;
+    box-shadow: 0 1px 3px rgba($brand-grey-light, .4),
+        inset 0 1px 0 rgba(255, 255, 255, .4);
+
+    &:hover,
+    &:focus {
+        color: darken($link-color, 50%);
+        background-color: lighten($link-color, 25%);
+        text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
+    }
+
+    &:active {
+        color: darken($link-color, 50%);
+        border-color: darken($link-color, 10%);
+        background-color: lighten($link-color, 15%);
+    }
+}
+
+.more-link {
+    font-family: $font-family-headings;
+    font-weight: $font-weight-headings;
+    font-size: $font-size-small;
+    color: $link-color;
+    text-transform: uppercase;
+
+    .icon {
+        top: .15em;
+        position: relative;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.btn-block {
+    display: block;
+}
+
+// Close button
+/////////////////////////////////////
+
+.close {
+    text-align: center;
+    display: block;
+    color: lighten($brand-grey-light, 50%);
+    line-height: 1;
+    font-size: $font-size-large;
+    padding: 3px;
+    cursor: pointer;
+
+    &button {
+        cursor: pointer;
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+    }
+
+    &:hover,
+    &:focus {
+        color: lighten($brand-grey-light, 20%);
+        cursor: pointer;
+        outline: 0;
+    }
+
+    &:active {
+        background: none;
+        color: $brand-grey-light;
+        transition: none;
+    }
+}
+
+// some helper classes for old content
+/////////////////////////////////////
+
+.content-download {
+    text-align: center;
+    display: block;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 2;
+
+    @media (min-width: $screen-xs) {
+        display: flex;
+    }
+
+    a {
+        @extend .btn;
+
+        flex: 1;
+        margin-left: $spacer / 2;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:only-child {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        span {
+            font-size: $font-size-mini;
+            color: $text-color-light;
+        }
+    }
+
+    .icon-download,
+    .icon-heart,
+    .icon-wordpress,
+    .icon-github,
+    .icon-eye {
+        &::before {
+            content: '';
+            width: 18px;
+            height: 18px;
+            display: inline-block;
+            margin-right: 5px;
+            margin-bottom: -3px;
+            opacity: .35;
+            background: url('../images/arrow-with-circle-down.svg') no-repeat
+                left center;
+        }
+    }
+
+    .icon-heart::before {
+        background-image: url('../images/heart.svg');
+    }
+
+    .icon-github::before {
+        background-image: url('../images/github.svg');
+    }
+
+    .icon-eye::before {
+        background-image: url('../images/eye.svg');
+    }
+}

src/styles/_variables.scss

@@ -74,6 +74,8 @@ $color-headings--dark: $brand-main-light;
 /////////////////////////////////////
 
 $spacer: ($font-size-base * $line-height);
+$padding-base-vertical: 8px;
+$padding-base-horizontal: 12px;
 
 $border-radius: 3px;
 

src/styles/base.scss

@@ -356,3 +356,4 @@ blockquote {
 }
 
 @import 'code';
+@import 'buttons';

src/templates/Post.module.scss

@@ -12,17 +12,6 @@
     }
 }
 
-// Post Title
-/////////////////////////////////////
-
-.hentry__title {
-    font-size: $font-size-h1;
-    text-align: center;
-    color: $color-headings;
-    margin-top: 0;
-    margin-bottom: $spacer;
-}
-
 // Post/photo teaser
 /////////////////////////////////////
 
@@ -62,3 +51,16 @@
         margin-bottom: 0;
     }
 }
+
+// Goodies download
+/////////////////////////////////////
+
+.goodie-actions {
+    text-align: center;
+    max-width: 640px;
+
+    .btn {
+        margin-bottom: 0;
+        display: block;
+    }
+}

src/templates/post.jsx

@@ -4,25 +4,28 @@ import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Image from '../components/atoms/Image'
+import PostTitle from '../components/atoms/PostTitle'
 import PostMeta from '../components/molecules/PostMeta'
 import styles from './Post.module.scss'
 
 const Post = ({ data }) => {
   const { markdownRemark: post } = data
   const { contentYaml: meta } = data
-  const { title, image } = post.frontmatter
+  const { title, image, type, linkurl } = post.frontmatter
 
   return (
     <Layout location={location}>
       <Helmet title={title} />
 
       <article className={styles.hentry}>
-        <h1 className={styles.hentry__title}>{title}</h1>
+        <PostTitle type={type} linkurl={linkurl} title={title} />
+
         {image && (
           <figure className={styles.hentry__teaser}>
             <Image fluid={image.childImageSharp.fluid} alt={title} />
           </figure>
         )}
+
         <div
           className={styles.hentry__content}
           dangerouslySetInnerHTML={{ __html: post.html }}
@@ -45,6 +48,7 @@ export const pageQuery = graphql`
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
       frontmatter {
+        type
         title
         image {
           childImageSharp {
@@ -55,6 +59,7 @@ export const pageQuery = graphql`
         updated
         category
         tags
+        linkurl
       }
       fields {
         slug