link post tweaks

src/components/atoms/PostLinkActions.jsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import Forward from '../svg/Forward'
+import Infinity from '../svg/Infinity'
 import styles from './PostLinkActions.module.scss'
 
 const PostLinkActions = ({ linkurl, slug }) => (
   <div className={styles.postLinkActions}>
     <a className="more-link" href={linkurl}>
-      Go to source
+      Go to source <Forward />
-    </a>
-    <a className="more-link" href={slug} rel="tooltip" title="Permalink">
-      Permalink
     </a>
+    <Link className="more-link" to={slug} rel="tooltip" title="Permalink">
+      <Infinity />
+    </Link>
   </div>
 )
 

src/components/atoms/PostLinkActions.module.scss

@@ -5,4 +5,22 @@
     justify-content: space-between;
     margin-top: $spacer * 2;
     margin-bottom: $spacer * 2;
+
+    a {
+        svg {
+            width: $font-size-small;
+            height: $font-size-small;
+            display: inline-block;
+            fill: $text-color-light;
+            vertical-align: baseline;
+        }
+
+        &:last-child {
+            svg {
+                width: $font-size-base;
+                height: $font-size-base;
+                fill: $brand-cyan;
+            }
+        }
+    }
 }

src/components/atoms/PostTitle.jsx

@@ -1,19 +1,26 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
+import Forward from '../svg/Forward'
 import styles from './PostTitle.module.scss'
 
-const PostTitle = ({ type, linkurl, title }) =>
+const PostTitle = ({ type, linkurl, title }) => {
-  type === 'link' ? (
+  const linkHostname = linkurl ? new URL(linkurl).hostname : null
-    <h1
+
-      className={[styles.hentry__title, styles.hentry__title__link].join(' ')}
+  return type === 'link' ? (
-    >
+    <Fragment>
-      <a href={linkurl} title={`Go to source: ${linkurl}`}>
+      <h1
-        {title}
+        className={[styles.hentry__title, styles.hentry__title__link].join(' ')}
-      </a>
+      >
-    </h1>
+        <a href={linkurl} title={`Go to source: ${linkurl}`}>
+          {title} <Forward />
+        </a>
+      </h1>
+      <div className={styles.linkurl}>{linkHostname}</div>
+    </Fragment>
   ) : (
     <h1 className={styles.hentry__title}>{title}</h1>
   )
+}
 
 PostTitle.propTypes = {
   type: PropTypes.string,

src/components/atoms/PostTitle.module.scss

@@ -14,4 +14,29 @@
 
 .hentry__title__link {
     font-size: $font-size-h3;
+
+    svg {
+        width: $font-size-base;
+        height: $font-size-base;
+        display: inline-block;
+        fill: $text-color-light;
+        vertical-align: baseline;
+    }
+}
+
+.linkurl {
+    @include ellipsis();
+
+    width: 100%;
+    text-align: center;
+    color: $brand-grey-light;
+    font-family: $font-family-base;
+    font-size: $font-size-mini;
+    padding: ($spacer/3) 0;
+    max-width: 70%;
+    margin: -($spacer) auto $spacer auto;
+
+    @media (min-width: $screen-sm) {
+        max-width: 50%;
+    }
 }

src/styles/_mixins.scss

@@ -66,8 +66,7 @@
 // Text overflow
 /////////////////////////////////////
 
-@mixin ellipsis($width) {
+@mixin ellipsis() {
-    width: $width;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;