Improve link posts in archive listings

- Remove `target="_blank"` anti-pattern
- If link post point title to source article
- Switch star icon to a link to indicate "permalink" and markup semantically with `rel="permalink"`
- Reduce opacity of permalink icon
- Adjust hover styles due to shuffling around <a> element
- Close #276

_includes/archive-single.html

@@ -6,29 +6,35 @@
   {% capture teaser %}{{ site.teaser }}{% endcapture %}
 {% endif %}
 
+{% if post.id %}
+  {% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
+{% else %}
+  {% assign title = post.title %}
+{% endif %}
+
 <div class="{{ include.type | default: "list" }}__item">
-  {% if post.link %}
+  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
-    <a href="{{ post.link }}" target="_blank">
+    {% if include.type == "grid" and teaser != blank %}
-  {% else %}
+      <div class="archive__item-teaser">
-    <a href="{{ base_path }}{{ post.url }}">
+        <img src=
-  {% endif %}
+          {% if teaser contains "://" %}
-    <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
+            "{{ teaser }}"
-      {% if include.type == "grid" and teaser != blank %}
+          {% else %}
-        <div class="archive__item-teaser">
+            "{{ teaser | prepend: "/images/" | prepend: base_path }}"
-          <img src=
+          {% endif %}
-            {% if teaser contains "://" %}
+          alt="">
-              "{{ teaser }}"
+      </div>
-            {% else %}
+    {% endif %}
-              "{{ teaser | prepend: "/images/" | prepend: base_path }}"
+    <h2 class="archive__item-title" itemprop="headline">
-            {% endif %}
+      {% if post.link %}
-            alt="">
+        <a href="{{ post.link }}">{{ title }}</a> <a href="{{ base_path }}{{ post.url }}" rel="permalink"><i class="fa fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
-        </div>
+      {% else %}
+        <a href="{{ base_path }}{{ post.url }}" rel="permalink">{{ title }}</a>
       {% endif %}
-      <h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}{% if post.link %}<i class="fa fa-star" aria-hidden="true"></i>{% endif %}</h2>
+    </h2>
-      {% if post.read_time %}
+    {% if post.read_time %}
-        <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
+      <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
-      {% endif %}
+    {% endif %}
-      {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
+    {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
-    </article>
+  </article>
-  </a>
 </div>

assets/_scss/_archive.scss

@@ -35,6 +35,10 @@
 .archive__item-title {
   margin-bottom: 0.25em;
   font-family: $sans-serif-narrow;
+
+  a + a {
+    opacity: 0.5;
+  }
 }
 
 // remove border
@@ -63,7 +67,7 @@
   }
 }
 
-a:hover {
+.archive__item:hover {
   .archive__item-teaser {
     box-shadow: 0 0 10px rgba(#000, 0.25);
   }