Add blog attribution

TejasQ · Jan 14, 2020 · 2eafd7f · 2eafd7f · vercel · Jan 14, 2020
1 parent 63ba526
commit 2eafd7f
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 13 deletions.
diff --git a/components/BlogAttribution.tsx b/components/BlogAttribution.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 150px auto;
+    gap: 32px;
+  }
+`;
+
+const Image = styled.img`
+  width: 150px;
+  border-radius: 50%;
+  margin: 0 auto;
+
+  @media (min-width: 768px) {
+    width: 100%;
+  }
+`;
+
+const BlogAttribution = ({ url }: { url: string }) => (
+  <Container>
+    <div>
+      <Image alt="Tejas' Face" src="https://pbs.twimg.com/profile_images/1210680744407908353/5bTFS_QO_400x400.jpg" />
+    </div>
+    <div>
+      <p>
+        Tejas has a special love humans and code that sometimes finds its way onto this blog and other parts of the
+        internet. Say hi on{" "}
+        <a href="https://twitter.com/tejaskumar_" rel="noopener" target="_blank">
+          twitter
+        </a>
+        !
+        <br />
+        <br />
+        If you particularly enjoyed this post, consider{" "}
+        <a
+          href={`https://twitter.com/share?url=${url}&text=I just read this article by @tejaskumar_ and I would love to share it with you!`}
+          rel="noopener"
+          target="_blank"
+        >
+          sharing it
+        </a>
+        .
+      </p>
+    </div>
+  </Container>
+);
+
+export default BlogAttribution;
diff --git a/components/ContentSeparator.tsx b/components/ContentSeparator.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: auto max-content auto;
+  gap: 16px;
+  width: 100%;
+  height: 40px;
+  text-align: center;
+  align-items: center;
+  margin: 32px auto;
+
+  ::before,
+  ::after {
+    content: "";
+    width: 100%;
+    height: 1px;
+    background: #0003;
+
+    @media (prefers-color-scheme: dark) {
+      background: #fff3;
+    }
+  }
+`;
+
+const ContentSeparator = () => <Container>❤️🔥💞🙌🏽🤝🎉</Container>;
+
+export default ContentSeparator;
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -21,13 +21,22 @@ class MyDocument extends Document {
       <Html lang="en">
         <Global styles={globalStyles} />
         <Head>
-          <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" />
+          <link
+            href="https://fonts.googleapis.com/css?family=Roboto:400,900"
+            rel="stylesheet"
+          />
           <link
             href="https://fonts.googleapis.com/css?family=DM+Sans:400,700|Gloria+Hallelujah|Inria+Serif&display=swap"
             rel="stylesheet"
           />
-          <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1" />
-          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-97872345-2" />
+          <meta
+            name="viewport"
+            content="width=device-width, user-scalable=0, initial-scale=1"
+          />
+          <script
+            async
+            src="https://www.googletagmanager.com/gtag/js?id=UA-97872345-2"
+          />
           <script
             dangerouslySetInnerHTML={{
               __html: `
@@ -36,7 +45,7 @@ class MyDocument extends Document {
   gtag('js', new Date());
 
   gtag('config', 'UA-97872345-2');
-`,
+`
             }}
           />
         </Head>
@@ -54,17 +63,31 @@ class MyDocument extends Document {
                 </A>
               </li>
               <li>
-                <A color="#38A1F3" target="_blank" href="https://twitter.com/tejaskumar_" rel="noopener">
+                <A
+                  color="#38A1F3"
+                  target="_blank"
+                  href="https://twitter.com/tejaskumar_"
+                  rel="noopener"
+                >
                   TWITTER
                 </A>
               </li>
               <li>
-                <A target="_blank" href="https://github.com/tejasq" rel="noopener">
+                <A
+                  target="_blank"
+                  href="https://github.com/tejasq"
+                  rel="noopener"
+                >
                   GITHUB
                 </A>
               </li>
               <li>
-                <A color="red" target="_blank" href="https://github.com/TejasQ/tejaskumar.com#trolling" rel="noopener">
+                <A
+                  color="red"
+                  target="_blank"
+                  href="https://github.com/TejasQ/tejaskumar.com#trolling"
+                  rel="noopener"
+                >
                   TROLL/LEARN
                 </A>
               </li>

diff --git a/pages/blog/[post].tsx b/pages/blog/[post].tsx
@@ -6,13 +6,15 @@ import fetch from "node-fetch";
 import BlogPost from "../../components/BlogPost";
 import Breadcrumb from "../../components/Breadcrumb";
 import { title } from "case";
+import ContentSeparator from "../../components/ContentSeparator";
+import BlogAttribution from "../../components/BlogAttribution";
 
 type Post = {
   content: string;
   slug: string
 };
 
-const BlogPostPage = ({ post }: { post: Post; }) => {
+const BlogPostPage = ({ post, blogPostUrl }: { post: Post; blogPostUrl: string }) => {
   return (
     post && (
       <BlogPost>
@@ -26,17 +28,18 @@ const BlogPostPage = ({ post }: { post: Post; }) => {
           path={[{ label: "tejaskumar.com", link: "/" }, { label: "blog", link: "/blog" }, { label: post.slug }]}
         ></Breadcrumb>
         <ReactMarkdown escapeHtml={false} source={post.content}></ReactMarkdown>
+        <ContentSeparator />
+        <BlogAttribution url={blogPostUrl} />
       </BlogPost>
     )
   );
 };
 
-BlogPostPage.getInitialProps = async ({ query }: any) => {
+BlogPostPage.getInitialProps = async ({ query, req }: any) => {
   const content = await fetch(
     `https://raw.githubusercontent.com/TejasQ/tejaskumar.com/master/blog/${query.post}.md`,
   ).then(r => r.text());
-
-  return { post: { content, slug: query.post } };
+  return { post: { content, slug: query.post }, blogPostUrl: `https://${req.headers.host}/${req.url}` };
 };
 
 export default BlogPostPage;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -43,7 +43,15 @@ const BlogList = styled.div`
   }
 `;
 
-const App = ({ name, numberOfTejass, posts }: { name: string; numberOfTejass: number; posts: Posts }) => {
+const App = ({
+  name,
+  numberOfTejass,
+  posts
+}: {
+  name: string;
+  numberOfTejass: number;
+  posts: Posts;
+}) => {
   const containerElement = useRef<HTMLDivElement>(null);
   const [currentTejas, setCurrentTejas] = useState(1);
   const [shouldWaitToUpdateTejas, setShouldWaitToUpdateTejas] = useState(false);
@@ -86,7 +94,10 @@ const App = ({ name, numberOfTejass, posts }: { name: string; numberOfTejass: nu
       if (!containerElement.current) {
         return;
       }
-      containerElement.current.removeEventListener("mousemove", handleMouseMove);
+      containerElement.current.removeEventListener(
+        "mousemove",
+        handleMouseMove
+      );
       window.removeEventListener("shake", handleMouseMove);
     };
   });