From f83fc1bd63ca943fae7d95fccc7b466df6e242a2 Mon Sep 17 00:00:00 2001
From: Harsh Shandilya <msfjarvis@gmail.com>
Date: Tue, 21 Jan 2020 13:56:11 +0530
Subject: [PATCH] layouts/single: Add dev.to link to subhead and use buttons
 for tags

Signed-off-by: Harsh Shandilya <msfjarvis@gmail.com>
---
 layouts/_default/single.html     | 14 ++++++++++----
 themes/hyde/assets/css/poole.css | 12 ++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9107f70..b2f5156 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,10 +1,16 @@
 {{ define "main" -}}
 <div class="post">
   <h1>{{ .Title }}</h1>
-  <p class="post-date"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read |
-  {{ range .Params.tags }}
-    <span class="tag"><a class="tag" href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a> </span>
-  {{ end }}
+  <p class="post-date">
+    <span><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read </span>
+    {{- with .Params.devLink -}}
+      | Also available on <a href="{{ . }}">dev.to</a>
+    {{- end -}}
+  </p>
+  <p>
+    {{ range .Params.tags }}
+    <button class="tag-button"><a class="tag-button" href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a> </button>
+    {{ end }}
   </p>
   {{- with .Content -}}
     {{ . | replaceRE "(<h[1-2] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
diff --git a/themes/hyde/assets/css/poole.css b/themes/hyde/assets/css/poole.css
index e693dd4..4e2e817 100644
--- a/themes/hyde/assets/css/poole.css
+++ b/themes/hyde/assets/css/poole.css
@@ -86,6 +86,18 @@ a:focus {
   color: #757575;
 }
 
+.tag-button {
+  background-color: #202020;
+  border: none;
+  color: white;
+  padding: 7px 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border-radius:8px;
+}
+
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: .5rem;