posts: add share buttons

components/Layout.js

@@ -3,34 +3,38 @@ import Footer from "./Footer";
 import Meta from "./Meta";
 
 export default function Layout({
-  siteTitle,
-  siteDescription,
-  pageTitle,
-  children,
+	siteTitle,
+	siteDescription,
+	pageTitle,
+	children,
 }) {
-  return (
-    <section className={`layout`}>
-      <Meta siteTitle={siteTitle} siteDescription={siteDescription} pageTitle={pageTitle}/>
-      <Header siteTitle={siteTitle} />
-      <div className="content">{children}</div>
-      <Footer />
-      <style jsx>
-        {`
-          .layout {
-            overflow-x: hidden;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-          }
-          .layout .info_page {
-            color: #ebebeb;
-          }
-          .content {
-          }
-          @media (min-width: 768px) {
-          }
-        `}
-      </style>
-    </section>
-  );
+	return (
+		<section className={`layout`}>
+			<Meta
+				siteTitle={siteTitle}
+				siteDescription={siteDescription}
+				pageTitle={pageTitle}
+			/>
+			<Header siteTitle={siteTitle} />
+			<div className="content">{children}</div>
+			<Footer />
+			<style jsx>
+				{`
+					.layout {
+						overflow-x: hidden;
+						display: flex;
+						flex-direction: column;
+						min-height: 100vh;
+					}
+					.layout .info_page {
+						color: #ebebeb;
+					}
+					.content {
+					}
+					@media (min-width: 768px) {
+					}
+				`}
+			</style>
+		</section>
+	);
 }

components/Meta.js

@@ -58,6 +58,16 @@ export default function Meta(props) {
 					rel="pingback"
 					href="https://webmention.io/garrit.xyz/xmlrpc"
 				/>
+
+				<link
+					href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
+					rel="stylesheet"
+				/>
+				<script
+					src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
+					defer
+					init
+				></script>
 			</Head>
 		</>
 	);

pages/posts/[post].js

@@ -8,108 +8,120 @@ import React from "react";
 import TagIcon from "../../components/TagIcon";
 
 export default function BlogTemplate(props) {
-    function reformatDate(fullDate) {
-        const date = new Date(fullDate);
-        return date.toDateString().slice(4);
-    }
+	function reformatDate(fullDate) {
+		const date = new Date(fullDate);
+		return date.toDateString().slice(4);
+	}
 
-    /*
-     ** Odd fix to get build to run
-     ** It seems like on first go the props
-     ** are undefined — could be a Next bug?
-     */
+	/*
+	 ** Odd fix to get build to run
+	 ** It seems like on first go the props
+	 ** are undefined — could be a Next bug?
+	 */
 
-    if (!props.frontmatter) return <></>;
+	if (!props.frontmatter) return <></>;
 
-    const addAnchorTag = ({ node, children, ...props }) => {
-        const headerSlug = node.children[0].value
-            .replaceAll(" ", "-")
-            .toLowerCase();
-        return React.createElement(node.tagName, {
-            id: headerSlug,
-            children: [children],
-            ...props,
-        });
-    };
+	const addAnchorTag = ({ node, children, ...props }) => {
+		const headerSlug = node.children[0].value
+			.replaceAll(" ", "-")
+			.toLowerCase();
+		return React.createElement(node.tagName, {
+			id: headerSlug,
+			children: [children],
+			...props,
+		});
+	};
 
-    const renderTagList = () => {
-        const tags = props.frontmatter.tags
-            ?.split(",")
-            .map((tag) => tag.trim());
+	const renderTagList = () => {
+		const tags = props.frontmatter.tags
+			?.split(",")
+			.map((tag) => tag.trim());
 
-        return (
-            <div className="page__tag-list">
-                <TagIcon />
-                {tags.map((tag) => (
-                    <a href={`/posts?tags=${tag}`}>#{tag}</a>
-                ))}
-            </div>
-        );
-    };
+		return (
+			<p className="page__tag-list">
+				<TagIcon />
+				{tags.map((tag) => (
+					<a href={`/posts?tags=${tag}`}>#{tag}</a>
+				))}
+			</p>
+		);
+	};
 
-    return (
-        <Page
-            siteTitle="Garrit's Notes"
-            title={props.frontmatter.title}
-            date={reformatDate(props.frontmatter.date)}
-        >
-            <ReactMarkdown
-                date={props.frontmatter.date}
-                remarkPlugins={[gfm]}
-                rehypePlugins={[rehypeRaw]}
-                components={{
-                    h1: addAnchorTag,
-                    h2: addAnchorTag,
-                    h3: addAnchorTag,
-                    h4: addAnchorTag,
-                    h5: addAnchorTag,
-                    h6: addAnchorTag,
-                }}
-            >
-                {props.markdownBody}
-            </ReactMarkdown>
-            <hr />
-            <p>
-                <a
-                    href={`mailto:garrit@slashdev.space?subject=Re: ${encodeURIComponent(
-                        props.frontmatter.title
-                    )}`}
-                >
-                    Reply via E-Mail
-                </a>
-            </p>
-            {props.frontmatter.tags && renderTagList()}
-        </Page>
-    );
+	return (
+		<Page
+			siteTitle="Garrit's Notes"
+			title={props.frontmatter.title}
+			date={reformatDate(props.frontmatter.date)}
+		>
+			<ReactMarkdown
+				date={props.frontmatter.date}
+				remarkPlugins={[gfm]}
+				rehypePlugins={[rehypeRaw]}
+				components={{
+					h1: addAnchorTag,
+					h2: addAnchorTag,
+					h3: addAnchorTag,
+					h4: addAnchorTag,
+					h5: addAnchorTag,
+					h6: addAnchorTag,
+				}}
+			>
+				{props.markdownBody}
+			</ReactMarkdown>
+			<hr />
+			<p>
+				<a
+					href={`mailto:garrit@slashdev.space?subject=Re: ${encodeURIComponent(
+						props.frontmatter.title
+					)}`}
+				>
+					Reply via E-Mail
+				</a>
+			</p>
+
+			{props.frontmatter.tags && renderTagList()}
+
+			<div class="shareon">
+				<a class="facebook"></a>
+				<a class="linkedin"></a>
+				<a class="mastodon"></a>
+				<a class="pocket"></a>
+				<a class="reddit"></a>
+				<a class="telegram"></a>
+				<a class="twitter"></a>
+				<a class="whatsapp"></a>
+			</div>
+		</Page>
+	);
 }
 
 export async function getStaticProps({ ...ctx }) {
-    const { post } = ctx.params;
-    const content = await import(`../../content/posts/${post}.md`);
-    const data = matter(content.default);
+	const { post } = ctx.params;
+	const content = await import(`../../content/posts/${post}.md`);
+	const data = matter(content.default);
 
-    return {
-        props: {
-            frontmatter: data.data,
-            markdownBody: data.content,
-        },
-    };
+	return {
+		props: {
+			frontmatter: data.data,
+			markdownBody: data.content,
+		},
+	};
 }
 
 export async function getStaticPaths() {
-    //get all .md files in the posts dir
-    const blogs = glob.sync("content/posts/**/*.md");
+	//get all .md files in the posts dir
+	const blogs = glob.sync("content/posts/**/*.md");
 
-    //remove path and extension to leave filename only
-    const blogSlugs = blogs.map((file) =>
-        file.split("/")[2].replace(/ /g, "-").slice(0, -3).trim()
-    );
+	//remove path and extension to leave filename only
+	const blogSlugs = blogs.map((file) =>
+		file.split("/")[2].replace(/ /g, "-").slice(0, -3).trim()
+	);
 
-    // create paths with `slug` param
-    const paths = blogSlugs.map((slug) => `/posts/${slug}`);
+	// create paths with `slug` param
+	const paths = blogSlugs.map((slug) => `/posts/${slug}`);
 
-    return {
-        paths,
-        fallback: false,
-    };
+	return {
+		paths,
+		fallback: false,
+	};
 }

styles/foundation/base.scss

@@ -155,8 +155,8 @@ article a[href^="https://"]::after {
 }
 }
 
-article a[href^="http"]::after,
-article a[href^="https://"]::after
+article p a[href^="http"]::after,
+article p a[href^="https://"]::after
 {
     content: "";
     width: 11px;