Skip to content

Add sharing links #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oliverturner wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add sharing links #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdcb731
Add sharing links
oliverturner Dec 15, 2021
e9e4636
reponsive tweaks
oliverturner Dec 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/post-content.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -41,6 +42,7 @@ const publishDate = dateFormat(publishDateRaw, "dS mmm, yyyy");
<main class="wrapper">
<article class="content">
<slot />
<ShareLinks {title} {permalink} />
</article>
</main>

Expand Down
165 changes: 165 additions & 0 deletions src/components/share-links.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
---
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 lang="scss">
.links {
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;

border-radius: 5px;
padding: 0 1rem 0 0.25rem;
text-decoration: none;
color: #fff;

@media (--mq-medium) {
justify-content: start;
}
}

.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>