diff --git a/components/Share.tsx b/components/Share.tsx new file mode 100644 index 000000000000..db7857abe037 --- /dev/null +++ b/components/Share.tsx @@ -0,0 +1,108 @@ +// Copyright 2023 the Deno authors. All rights reserved. MIT license. + +// Copied from https://iconmonstr.com/facebook-4-svg/ +function FacebookIcon() { + return ( + + + + ); +} + +// Copied from https://iconmonstr.com/linkedin-3-svg/ +function LinkedInIcon() { + return ( + + + + ); +} + +// Copied from https://iconmonstr.com/reddit-4-svg/ +function RedditIcon() { + return ( + + + + ); +} + +// Copied from https://iconmonstr.com/twitter-1-svg/ +function TwitterIcon() { + return ( + + + + ); +} + +/** + * Dynamically generates links for sharing the current content on the major social media platforms. + * + * Inspired by https://schier.co/blog/pure-html-share-buttons + * + * Features: + * - Each link provides the title, where possible + * - Links are opened in a new page + * - Accessible labels are provided, as logos are used as the content for each link + * - Each logo respects the branding color of the respective social media platform. + */ +export default function Share(props: { url: URL; title: string }) { + return ( +
+ Share + + + + + + + + + + + + +
+ ); +} diff --git a/routes/blog/[slug].tsx b/routes/blog/[slug].tsx index 5125456ff137..f3d074ae468b 100644 --- a/routes/blog/[slug].tsx +++ b/routes/blog/[slug].tsx @@ -4,7 +4,7 @@ import { CSS, render } from "$gfm"; import { getPost, Post } from "@/utils/posts.ts"; import type { State } from "@/routes/_middleware.ts"; import Head from "@/components/Head.tsx"; -import { HEADING_STYLES } from "@/utils/constants.ts"; +import Share from "@/components/Share.tsx"; interface BlogPostPageData extends State { post: Post; @@ -38,6 +38,7 @@ export default function PostPage(props: PageProps) { {date} )} +