From fdcb7310d373977524efce3d394d653bf4f3ac1b Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliver.turner@codedsignal.co.uk>
Date: Wed, 15 Dec 2021 23:07:57 +0000
Subject: [PATCH 1/2] Add sharing links

---
 src/components/post-content.astro |   2 +
 src/components/share-links.astro  | 156 ++++++++++++++++++++++++++++++
 2 files changed, 158 insertions(+)
 create mode 100644 src/components/share-links.astro

diff --git a/src/components/post-content.astro b/src/components/post-content.astro
index 3a2463b..3980c73 100644
--- a/src/components/post-content.astro
+++ b/src/components/post-content.astro
@@ -12,6 +12,7 @@ export interface Props {
 }
 
 import dateFormat from "dateformat";
+import ShareLinks from "$components/share-links.astro";
 
 const { title, publishDate: publishDateRaw, permalink, image } = Astro.props;
 
@@ -41,6 +42,7 @@ const publishDate = dateFormat(publishDateRaw, "dS mmm, yyyy");
 <main class="wrapper">
 	<article class="content">
 		<slot />
+		<ShareLinks {title} {permalink} />
 	</article>
 </main>
 
diff --git a/src/components/share-links.astro b/src/components/share-links.astro
new file mode 100644
index 0000000..156ecf4
--- /dev/null
+++ b/src/components/share-links.astro
@@ -0,0 +1,156 @@
+---
+const { title, permalink } = Astro.props;
+const links = {
+	email: `mailto:?subject=${title}&amp;body=${permalink}`,
+	twitter: `https://twitter.com/intent/tweet/?text=${title}&amp;url=${permalink}`,
+	linkedin: `https://www.linkedin.com/shareArticle?mini=true&amp;url=${permalink}&amp;title=${title}&amp;summary=${title}&amp;source=${permalink}`,
+};
+---
+
+<!-- Sharingbutton Twitter -->
+<div class="links">
+	<a
+		class="link link--twitter"
+		href={links.twitter}
+		target="_blank"
+		rel="noopener"
+		aria-label="Share on Twitter"
+	>
+		<svg class="link__icon" aria-hidden="true" viewBox="0 0 512 512">
+			<path
+				fill="#fff"
+				d="M437 152a72 72 0 01-40 12a72 72 0 0032-40a72 72 0 01-45 17a72 72 0 00-122 65a200 200 0 01-145-74a72 72 0 0022 94a72 72 0 01-32-7a72 72 0 0056 69a72 72 0 01-32 1a72 72 0 0067 50a200 200 0 01-105 29a200 200 0 00309-179a200 200 0 0035-37"
+			></path>
+		</svg>
+		Share on Twitter
+	</a>
+
+	<!-- Sharingbutton E-Mail -->
+	<a
+		class="link link--email"
+		href={links.email}
+		target="_self"
+		rel="noopener"
+		aria-label="Share by E-Mail"
+	>
+		<svg class="link__icon" aria-hidden="true" viewBox="0 0 512 512">
+			<rect width="512" height="512" rx="15%" fill="teal"></rect>
+			<rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%"></rect>
+			<path
+				fill="none"
+				stroke="teal"
+				stroke-width="20"
+				d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"
+			></path>
+		</svg>
+		Share by E-Mail
+	</a>
+
+	<!-- Sharingbutton LinkedIn -->
+	<a
+		class="link link--linkedin"
+		href={links.linkedin}
+		target="_blank"
+		rel="noopener"
+		aria-label="Share on LinkedIn"
+	>
+		<svg class="link__icon" aria-hidden="true" viewBox="0 0 512 512">
+			<circle fill="#fff" cx="142" cy="138" r="37"></circle>
+			<path stroke="#fff" stroke-width="66" d="M244 194v198M142 194v198"></path>
+			<path
+				fill="#fff"
+				d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32"
+			></path>
+		</svg>
+		Share on LinkedIn
+	</a>
+</div>
+
+<style>
+	.links {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+
+		margin-top: 2rem;
+		padding: 2rem 0 1rem;
+		border-top: 1px solid #ccc;
+		font-size: 0.9rem;
+	}
+
+	.link {
+		display: flex;
+		align-items: center;
+
+		transition: 0.25s ease-out;
+
+		border-radius: 5px;
+		padding: 0 1rem 0 0.25rem;
+		text-decoration: none;
+		color: #fff;
+	}
+
+	.link__icon {
+		width: 2rem;
+		aspect-ratio: 1;
+		padding: 0.25rem 0;
+	}
+
+	.link--twitter {
+		background-color: #55acee;
+	}
+
+	.link--twitter:hover {
+		background-color: #2795e9;
+	}
+
+	.link--linkedin {
+		background-color: #0077b5;
+	}
+
+	.link--linkedin:hover {
+		background-color: #046293;
+	}
+
+	.link--email {
+		background-color: #777;
+	}
+
+	.link--email:hover {
+		background-color: #5e5e5e;
+	}
+
+	.link--twitter {
+		background-color: #55acee;
+		border-color: #55acee;
+	}
+
+	.link--twitter:hover,
+	.link--twitter:active {
+		background-color: #2795e9;
+		border-color: #2795e9;
+	}
+
+	.link--email {
+		background-color: #777777;
+		border-color: #777777;
+	}
+
+	.link--email:hover,
+	.link--email:active {
+		background-color: #5e5e5e;
+		border-color: #5e5e5e;
+	}
+
+	.link--linkedin {
+		background-color: #0077b5;
+		border-color: #0077b5;
+	}
+
+	.link--linkedin:hover,
+	.link--linkedin:active {
+		background-color: #046293;
+		border-color: #046293;
+	}
+</style>

From e9e4636a671413bd1d54f8a2be579f32fa5a6447 Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliver.turner@codedsignal.co.uk>
Date: Thu, 16 Dec 2021 00:00:35 +0000
Subject: [PATCH 2/2] reponsive tweaks

---
 src/components/share-links.astro | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/share-links.astro b/src/components/share-links.astro
index 156ecf4..977da0f 100644
--- a/src/components/share-links.astro
+++ b/src/components/share-links.astro
@@ -66,22 +66,27 @@ const links = {
 	</a>
 </div>
 
-<style>
+<style lang="scss">
 	.links {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		display: grid;
 		gap: 1rem;
 
 		margin-top: 2rem;
 		padding: 2rem 0 1rem;
 		border-top: 1px solid #ccc;
 		font-size: 0.9rem;
+
+		@media (--mq-medium) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 
 	.link {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 
 		transition: 0.25s ease-out;
 
@@ -89,6 +94,10 @@ const links = {
 		padding: 0 1rem 0 0.25rem;
 		text-decoration: none;
 		color: #fff;
+
+		@media (--mq-medium) {
+			justify-content: start;
+		}
 	}
 
 	.link__icon {