Skip to content
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

Jump to bottom

Share buttons added #215

Merged
merged 3 commits into from
Jan 8, 2024
Merged

Share buttons added #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
498db76
Share buttons added
immodded Jan 5, 2024
54fbc77
refactor: update and rename Sharebutton to ShareLinks
satnaing Jan 8, 2024
00163a4
refactor: place ShareLinks next to `back to top`
satnaing Jan 8, 2024
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
65 changes: 65 additions & 0 deletions src/components/ShareLinks.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
import LinkButton from "./LinkButton.astro";
import socialIcons from "@assets/socialIcons";

const URL = Astro.url;

const shareLinks = [
{
name: "WhatsApp",
href: "https://wa.me/?text=",
linkTitle: `Share this post via WhatsApp`,
},
{
name: "Facebook",
href: "https://www.facebook.com/sharer.php?u=",
linkTitle: `Share this post on Facebook`,
},
{
name: "Twitter",
href: "https://twitter.com/intent/tweet?url=",
linkTitle: `Share this post on Facebook`,
},
{
name: "Telegram",
href: "https://t.me/share/url?url=",
linkTitle: `Share this post via Telegram`,
},
{
name: "Pinterest",
href: "https://pinterest.com/pin/create/button/?url=",
linkTitle: `Share this post on Pinterest`,
},
{
name: "Mail",
href: "mailto:?subject=See%20this%20post&body=",
linkTitle: `Share this post via email`,
},
] as const;
---

<div class={`social-icons`}>
<span class="italic">Share this post on:</span>
<div class="text-center">
{
shareLinks.map(social => (
<LinkButton
href={`${social.href + URL}`}
className="link-button"
title={social.linkTitle}
>
<Fragment set:html={socialIcons[social.name]} />
</LinkButton>
))
}
</div>
</div>

<style>
.social-icons {
@apply flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start;
}
.link-button {
@apply scale-90 p-2 hover:rotate-6 sm:p-1;
}
</style>
10 changes: 8 additions & 2 deletions src/layouts/PostDetails.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Tag from "@components/Tag.astro";
import Datetime from "@components/Datetime";
import type { CollectionEntry } from "astro:content";
import { slugifyStr } from "@utils/slugify";
import ShareLinks from "@components/ShareLinks.astro";

export interface Props {
post: CollectionEntry<"blog">;
Expand Down Expand Up @@ -73,10 +74,13 @@ const layoutProps = {
<ul class="my-8">
{tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
</ul>
<div class="flex justify-end">

<div
class="flex flex-col-reverse items-center justify-between gap-6 sm:flex-row-reverse sm:items-end sm:gap-4"
>
<button
id="back-to-top"
class="focus-outline whitespace-nowrap hover:opacity-75"
class="focus-outline whitespace-nowrap py-1 hover:opacity-75"
>
<svg xmlns="http://www.w3.org/2000/svg" class="rotate-90">
<path
Expand All @@ -85,6 +89,8 @@ const layoutProps = {
</svg>
<span>Back to Top</span>
</button>

<ShareLinks />
</div>
</main>
<Footer />
Expand Down