Share buttons (#21)

* clean margins on comments list component.
* create share buttons component.
* Add share buttons to all relevant pages.
* Minor adjustments to buttons on Chapter & Markdown component

components/CommentsList.jsx

@@ -97,7 +97,7 @@ export default function CommentsList({
 
  return (
  <>
- <h2 className="text-primary my-4">
+ <h2 className="text-primary mb-4 mt-2">
  {COMMENT_HEADER} {title ? <>&ldquo;{title}&rdquo;</> : "this story"}
  </h2>
  {showForm && (

components/Share.jsx

@@ -0,0 +1,41 @@
+import { SHARE } from "@constants/app";
+import { firebaseApp } from "@fb/client";
+import { generateShareLink } from "@lib/utils";
+import { getAnalytics, logEvent } from "firebase/analytics";
+import Link from "next/link";
+import React from "react";
+import styles from "../styles/modules/Share.module.scss";
+
+function Share({ title, url, contentType }) {
+ const logShare = (method) => {
+ const analytics = getAnalytics(firebaseApp);
+ logEvent(analytics, "share", {
+ method,
+ content_type: contentType,
+ item_id: title,
+ });
+ };
+
+ return (
+ <>
+ <span className="h5 mb-0">Share &ldquo;{title}&rdquo;</span>
+ <div className={styles.share_list}>
+ {Object.entries(SHARE).map(([platform, config]) => (
+ <Link
+ key={platform}
+ target="_blank"
+ href={generateShareLink(title, url, platform)}
+ rel="noopener noreferrer"
+ className={styles.share_btn}
+ onClick={() => logShare(config.label)}
+ >
+ <span className="me-2">{config.label}</span>
+ {config.icon}
+ </Link>
+ ))}
+ </div>
+ </>
+ );
+}
+
+export default Share;

constants/app.js

@@ -1,3 +1,10 @@
+import {
+ IconBrandFacebook,
+ IconBrandLinkedin,
+ IconBrandTwitter,
+ IconBrandWhatsapp,
+} from "@tabler/icons";
+
 export const APP_TITLE = "The Pilfered Diaries";
 export const INSTA_HANDLE = "/the.pilfered.diaries";
 export const INSTA_LINK = `https://instagram.com${INSTA_HANDLE}`;
@@ -31,3 +38,26 @@ export const FOOTER_LINK_PROPS = {
  "data-bs-placement": "top",
  target: "_blank",
 };
+
+export const SHARE = {
+ whatsapp: {
+ path: "https://api.whatsapp.com/send",
+ icon: <IconBrandWhatsapp size={16} />,
+ label: "Whatsapp",
+ },
+ facebook: {
+ path: "https://www.facebook.com/sharer.php",
+ icon: <IconBrandFacebook size={16} />,
+ label: "Facebook",
+ },
+ twitter: {
+ path: "https://twitter.com/intent/tweet",
+ icon: <IconBrandTwitter size={16} />,
+ label: "Twitter",
+ },
+ linkedIn: {
+ path: "https://www.linkedin.com/shareArticle",
+ icon: <IconBrandLinkedin size={16} />,
+ label: "LinkedIn",
+ },
+};

pages/posts/[slug].jsx

@@ -1,6 +1,7 @@
 import CommentsList from "@components/CommentsList";
 import ContentCardLarge from "@components/ContentCardLarge";
 import Markdown from "@components/Markdown";
+import Share from "@components/Share";
 import SubscriptionForm from "@components/SubscriptionForm";
 import {
  APP_TITLE,
@@ -108,6 +109,9 @@ export default function SinglePost({
  <TagsList tags={meta.tags} />
  </Suspense>
  </div>
+ <div className="mt-3">
+ <Share title={meta.title} url={router.asPath} contentType="post" />
+ </div>
  <CommentsList
  type="posts"
  title={meta.title}

pages/stories/[slug]/[chapter].jsx

@@ -1,11 +1,12 @@
 import Markdown from "@components/Markdown";
+import Share from "@components/Share";
 import { APP_TITLE, AVG_READING_SPEED } from "@constants/app";
 import firestore from "@fb/server";
 import { useIntersection } from "@hooks/intersection";
 import {
  IconArrowLeft,
  IconArrowRight,
- IconHome,
+ IconChevronLeft,
  IconPoint,
 } from "@tabler/icons";
 import axios from "axios";
@@ -23,7 +24,7 @@ const TextControl = dynamic(() => import("../../../components/TextControl"));
 const CommentsList = dynamic(() => import("../../../components/CommentsList"));
 
 export default function SingleChapter({ metadata, content }) {
- const { query } = useRouter();
+ const { query, asPath } = useRouter();
 
  const [fontSize, setFontSize] = useState(18);
  const ref = useRef();
@@ -57,38 +58,51 @@ export default function SingleChapter({ metadata, content }) {
  </p>
  </div>
  <Markdown {...content} ref={ref} theme="dark" fontSize={fontSize} />
- <div className="container px-1">
- <div className="row mb-3">
- <div className="col-6 px-0">
- {metadata.previousChapter && (
+ <div className="container">
+ <div className="row mb-3 mx-0">
+ {metadata.previousChapter && (
+ <div className="col-6 ps-0 pe-1">
  <Link
  className={styles.navigation}
  href={`/stories/${query.slug}/${metadata.previousChapter}`}
  >
  <IconArrowLeft size={24} />
- Previous Chapter
+ Prev. Chapter
+ </Link>
+ </div>
+ )}
+ <div className="col-6 pe-0 ps-1">
+ {metadata.nextChapter ? (
+ <Link
+ className={styles.navigation}
+ href={`/stories/${query.slug}/${metadata.nextChapter}`}
+ >
+ Next Chapter
+ <span className="ms-1">
+ <IconArrowRight size={24} />
+ </span>
+ </Link>
+ ) : (
+ <Link
+ className={styles.navigation}
+ href={`/stories/${query.slug}`}
+ >
+ <span className="me-1">
+ <IconChevronLeft size={24} />
+ </span>
+ Story Home
  </Link>
  )}
  </div>
- <div className="col-6 px-0">
- <Link
- className={styles.navigation}
- href={
- metadata.nextChapter
- ? `/stories/${query.slug}/${metadata.nextChapter}`
- : `/stories/${query.slug}`
- }
- >
- {metadata.nextChapter ? "Next Chapter" : "Story Home"}
- {metadata.nextChapter ? (
- <IconArrowRight size={24} />
- ) : (
- <IconHome size={20} />
- )}
- </Link>
- </div>
  </div>
  </div>
+ <div className="my-3 container">
+ <Share
+ title={metadata.title}
+ url={asPath}
+ contentType="story-chapter"
+ />
+ </div>
  {!metadata.nextChapter && (
  <>
  <div className="container my-2">

pages/stories/[slug]/index.jsx

@@ -1,6 +1,7 @@
 import CommentsList from "@components/CommentsList";
 import ContentCardLarge from "@components/ContentCardLarge";
 import Markdown from "@components/Markdown";
+import Share from "@components/Share";
 import SubscriptionForm from "@components/SubscriptionForm";
 import { APP_TITLE, DATE_FORMATS, ISR_INTERVAL } from "@constants/app";
 import firestore from "@fb/server";
@@ -134,6 +135,13 @@ export default function StoryDetails({
  </div>
  )}
  </div>
+ <div className="mt-3">
+ <Share
+ title={story.title}
+ url={router.asPath}
+ contentType="story"
+ />
+ </div>
  <CommentsList
  type="stories"
  title={story.title}

styles/modules/Chapter.module.scss

@@ -24,6 +24,7 @@
  font-family: $theme-font-headings;
  color: $light;
  border-radius: 0.5rem;
+ border: 1px solid rgba($color: $light, $alpha: 0.1);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  &:hover,

styles/modules/Markdown.module.scss

@@ -32,5 +32,8 @@
  }
  p {
  transition: all 0.2s ease-in;
+ &:last-child {
+ margin-bottom: 0;
+ }
  }
 }

styles/modules/Share.module.scss

@@ -0,0 +1,27 @@
+@import "../theme/variables";
+
+.share_list {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 0.75rem;
+ gap: 0.5rem;
+}
+
+.share_btn {
+ text-decoration: none;
+ padding: 0.1rem 0.5rem;
+ border-radius: 0.25rem;
+ background-color: darken($color: $dark, $amount: 2);
+ border: 1px solid rgba($color: $light, $alpha: 0.2);
+ transition: all 0.15s ease-in-out;
+ color: rgba($color: $white, $alpha: 0.45);
+ display: flex;
+ align-items: center;
+ &:hover,
+ &:focus {
+ background-color: lighten($color: $dark, $amount: 1);
+ outline: none;
+ color: rgba($color: $white, $alpha: 0.95);
+ }
+}

utils/utils.js

@@ -1,3 +1,5 @@
+import { APP_TITLE, SHARE, SITE_URL } from "@constants/app";
+
 export function scrollToRef(elementRef, offset = 60) {
  const { offsetTop } = elementRef.current;
  document.scrollingElement.scrollTo({
@@ -6,3 +8,34 @@ export function scrollToRef(elementRef, offset = 60) {
  });
  document.activeElement.blur();
 }
+
+function generateParams(params) {
+ const urlParams = new URLSearchParams();
+ Object.entries(params).forEach(([key, value]) => {
+ urlParams.set(key, value);
+ });
+ return urlParams.toString();
+}
+
+export function generateShareLink(text, url, type) {
+ switch (type) {
+ case "whatsapp":
+ return `${SHARE[type].path}?${generateParams({
+ text: `Read “${text}” on ${APP_TITLE}: ${SITE_URL}${url}`,
+ })}`;
+ case "facebook":
+ return `${SHARE[type].path}?${generateParams({
+ t: `Read “${text}” on ${APP_TITLE}`,
+ u: SITE_URL + url,
+ })}`;
+ case "twitter":
+ case "linkedIn":
+ return `${SHARE[type].path}?${generateParams({
+ text: `Read “${text}” on ${APP_TITLE}`,
+ url: SITE_URL + url,
+ })}`;
+
+ default:
+ break;
+ }
+}