Blog is finally shaping up!

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [["styled-components", { "ssr": true }], ["@babel/plugin-proposal-optional-chaining"]]
+  "plugins": [["styled-components", { "ssr": true }], ["@babel/plugin-proposal-optional-chaining"], "macros", "preval"]
 }

components/CodeBlock.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import Highlight, { defaultProps, Language } from "prism-react-renderer";
+import theme from "prism-react-renderer/themes/nightOwl";
+import Pre from "./Pre";
+
+interface CodeBlockProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
+  const language = className?.replace(/language-/, "");
+  return (
+    <Highlight
+      {...defaultProps}
+      code={children as string}
+      language={language as Language}
+      theme={theme}
+    >
+      {({
+        className,
+        style,
+        tokens,
+        getLineProps,
+        getTokenProps
+      }): React.ReactNode => (
+        <Pre className={className} style={{ ...style, padding: "20px" }}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </Pre>
+      )}
+    </Highlight>
+  );
+};
+
+const InlineCode: React.FC<CodeBlockProps> = ({ children, className }) => {
+  const language = className?.replace(/language-/, "");
+  return (
+    <Highlight
+      {...defaultProps}
+      code={children as string}
+      language={language as Language}
+      theme={theme}
+    >
+      {({
+        className,
+        style,
+        tokens,
+        getLineProps,
+        getTokenProps
+      }): React.ReactNode => (
+        <code className={className} style={style}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </code>
+      )}
+    </Highlight>
+  );
+};
+
+export { CodeBlock, InlineCode };

components/Footer.tsx

@@ -74,7 +74,7 @@ const Footer: React.FC<{}> = () => (
             View the source on GitHub
           </FooterItem>
           <FooterItem
-            href="https://twitter.com/newblockk"
+            href="https://twitter.com/hiranmayagundu"
             IconComp={Twitter}
             rel="me"
           >

components/Markdown.tsx

@@ -2,6 +2,8 @@ import { H1, H2, H3, H4 } from "./Heading";
 import Link from "./Link";
 import P from "./Paragraph";
 import { UnorderedList, OrderedList, ListItem } from "./ListComponents";
+import { CodeBlock, InlineCode } from "./CodeBlock";
+import Pre from "./Pre";
 
 export default {
   h1: H1,
@@ -12,5 +14,8 @@ export default {
   a: Link,
   ul: UnorderedList,
   ol: OrderedList,
-  li: ListItem
+  li: ListItem,
+  pre: Pre,
+  code: CodeBlock,
+  inlineCode: InlineCode
 };

components/Post.tsx

@@ -3,6 +3,7 @@ import { H2 } from "./Heading";
 import P from "./Paragraph";
 import PublishedAt from "./PublishedAt";
 import { Box, Flex } from "rebass/styled-components";
+import styled from "styled-components";
 
 interface PostProps {
   title: string;
@@ -11,11 +12,15 @@ interface PostProps {
   path: string;
 }
 
+const PostH2 = styled(H2)`
+  margin-bottom: 0px;
+`;
+
 const Post: React.FC<PostProps> = props => (
   <Box as="article" mb={5}>
     <Box as="header" mb={3}>
       <Link href={props.path}>
-        <H2>{props.title}</H2>
+        <PostH2>{props.title}</PostH2>
       </Link>
       <Flex mt={2}>
         <PublishedAt link={props.path} date={props.date} />

components/Pre.tsx

@@ -0,0 +1,16 @@
+import { Box } from "rebass/styled-components";
+import styled from "styled-components";
+
+export default styled(Box).attrs({
+  as: "pre",
+  p: 3,
+  mb: 3,
+  fontSize: "15px"
+})`
+  display: block;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+  border-radius: 3px;
+`;

components/PublishedAt.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import Link from "./Link";
+import P from "./Paragraph";
 import { parse, format } from "date-fns";
 
 interface PublishedAtProps {
   link: string;
   date: string;
 }
-const PublishedAt: React.FC<PublishedAtProps> = props => (
-  <Link href={props.link}>
-    <time>
-      {format(parse(props.date, "MMMM DD, YYYY", new Date()), "MMMM DD, YYYY")}
-    </time>
+const PublishedAt: React.FC<PublishedAtProps> = ({ link, date }) => (
+  <Link href={link}>
+    <P>
+      <time>
+        {format(parse(date, "yyyy-MM-dd", new Date()), "MMMM dd, yyyy")}
+      </time>
+    </P>
   </Link>
 );
 

package.json

@@ -11,7 +11,11 @@
     "@next/mdx": "^9.1.4",
     "conditional-wrap": "^1.0.0",
     "date-fns": "^2.8.1",
-    "next": "latest",
+    "lodash.range": "^3.2.0",
+    "next": "^9.1.7",
+    "pagination": "^0.4.6",
+    "prism-react-renderer": "^1.0.2",
+    "prismjs": "^1.18.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-feather": "^2.0.3",
@@ -21,6 +25,8 @@
   "devDependencies": {
     "@babel/core": "^7.7.4",
     "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/preset-typescript": "^7.8.0",
+    "@types/lodash.range": "^3.2.6",
     "@types/node": "^12.12.14",
     "@types/react": "16.9.13",
     "@types/react-dom": "16.9.4",
@@ -29,6 +35,8 @@
     "@typescript-eslint/eslint-plugin": "^2.9.0",
     "@typescript-eslint/parser": "^2.9.0",
     "babel-jest": "^24.9.0",
+    "babel-plugin-macros": "^2.8.0",
+    "babel-plugin-preval": "^4.0.0",
     "babel-plugin-styled-components": "^1.10.0",
     "eslint": "^6.7.1",
     "eslint-config-airbnb": "^18.0.1",

pages/about.mdx

@@ -2,13 +2,19 @@
 
 Hi, I'm Hiranmaya Gundu. I'm a software developer from India, currently based in Bengaluru, Karnataka. 
 
+<br />
+
 I'm a recent graduate of PES University, and as of Jan 2020, have about a year of professional experience in the industry. 
 I currently work as a Full Stack engineer, and learnt professional JavaScript and Web Development on the job. 
 This website was born out of a desire to learn about React's server side rendering capabilities, as well as TypeScript. 
 
+<br />
+
 I'm currently actively looking to further my education through a graduate program. I have a strong interest in the Systems
 and NLP fields. 
 
+<br />
+
 I prefer Windows as my main OS, mostly because WSL is _seriously_ cool. 
 
 ## Technical Skills 

pages/blog.tsx

@@ -1,8 +1,33 @@
 import React from "react";
+import paginaton from "pagination";
+import _range from "lodash.range";
 import Main from "../components/Main";
 import Text from "../components/Text";
+import Post from "../components/Post";
+import { NextPage } from "next";
+import posts from "../posts/index";
+
+interface BlogProps {
+  page: number;
+}
+
+interface PostInterface {
+  title: string;
+  summary: string;
+  publishedAt: string;
+  path: string;
+}
+
+const Blog: NextPage<BlogProps> = ({ page = 1 }) => {
+  const paginator = new paginaton.SearchPaginator({
+    prelink: "/",
+    current: page,
+    rowsPerPage: 8,
+    totalResult: posts.length
+  });
+  const { fromResult, toResult } = paginator.getPaginationData();
+  const results = _range(fromResult - 1, toResult);
 
-const Blog: React.FC<{}> = () => {
   return (
     <Main>
       <Text
@@ -14,8 +39,22 @@ const Blog: React.FC<{}> = () => {
       >
         Blog
       </Text>
+      {/* @ts-ignore */}
+      {posts
+        .filter(
+          (post: PostInterface, index: number) =>
+            post && results.indexOf(index) > -1
+        )
+        .map((post: PostInterface, index: number) => (
+          <Post
+            key={index}
+            title={post.title}
+            summary={post.summary}
+            date={post.publishedAt}
+            path={post.path}
+          />
+        ))}
     </Main>
   );
 };
-
 export default Blog;

pages/posts/my-first-blog.mdx

@@ -0,0 +1,99 @@
+export const meta = {
+  "published": true,
+  "publishedAt": "2020-01-12",
+  "title": "My First Blog",
+  "summary": "An explanation of how I built this blog as well as why I did it."
+}
+
+## My First Blog
+
+My reason for starting a blog was simple. I wanted to start a personal side project.
+After working for nearly a year (half of that year as intern), I realized that I have 
+ridden of the high that joining a new job gives and that this was the time to experiment. 
+
+<br />
+
+As part of my job, as I googled for answers like we all do, I found some amazing personal
+blogs, such as this one by [Dan Abarmov](https://overreacted.io/). Blogs give a place to 
+express your technical opinions, and also generally improve your long form writing skills.
+So I decided to make my first personal project a blog.
+
+<br />
+
+Having decided on building a blog, I started gathering my requirements. This was the list of 
+things I wanted to do: 
+- Use TypeScript - According to the [StackOverflow 2019 Survey](https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-languages)
+TypeScript is one of the most loved languages. I wanted to see what the fuss was all about. 
+- Use Statically / Server rendered React - We use React at work, and wanted to explore features that I had not used yet. 
+- Use Styled-Components - Wanted to learn this so that I could use it at work 
+- Deploy this is a serverless manner.  
+
+### Whatever you want to do, it's almost always solved
+
+In the case of Statically / Server generated react, there are two main competitors, Next and Gatsby. A quick [google search](https://www.google.com/search?q=next+vs+gatsby)
+will show you the pros and cons of each. I went with Next.js primarily because of it's integration with [now.sh](https://zeit.co/home). I achieved serverless deployments 
+and server rendered react in one go. An especially impressive feature of Next is [Automatic Static Optimization](https://nextjs.org/docs/advanced-features/automatic-static-optimization)
+It automatically emits a hydrated React application if you don't use the getInitialProps function. Plus, it helps that it uses PHP like pages directory!
+
+<br />
+
+Having decided to use Next.js, I looked for prior art. I found [Juan Olvera's blog](https://jolvera.dev/) and through that [Max Stoiber's blog](https://mxstbr.com/).
+Serendipitously, Max Stoiber is one of the co-founder's of Styled-Components! So I used their code bases as \*ahem\* inspiration, and made my own.
+A shoutout to both of them, I would not have a website without their blogs. 
+
+### Things I learned while building this website
+
+
+#### TypeScript and Rebass 
+TypeScript is worth it, but in larger code bases, or code bases that are likely to evolve. It helps communicate the type of data your component takes 
+very well and also catches invalid props at compile time, saving a lot of time! However, working on a small blog, I found types just to be a hinderance, 
+especially with the strict typescript rules to prohibit the any type. And quite frequently, I found the compilation errors next to useless and hard to 
+debug. I also could not use it on the NodeJS code. At least, not easily. Next.js, TypeScript and Node.js seemed to require conflicting javascript module 
+systems, which I had learned about just because of this. TypeScript does not support the require syntax, while Node.js demands it. Facing all these issues,
+I reverted to javascript for the get-blog-posts.js helper module.
+
+Another thing to note is that rebass v4.0+ has moved to use Theme-UI, so to use styled-components with rebass, you have to import it like so: 
+
+<br />
+
+```javascript
+import { Box } from 'rebass/styled-components'
+import styled from 'styled-components'
+
+// Use Box now and style it as you wish
+
+const StyledBox = styled(Box)`
+  color='blue';
+`
+```
+
+Also, to use it with TypeScript, you will have to edit your tsconfig.json file and add the following: 
+
+```json
+{
+  "baseUrl": ".",
+    "paths": {
+      "rebass/styled-components": [
+        "node_modules/@types/rebass"
+      ]
+    }
+}
+```
+
+#### CSS and Design is still hard
+
+If you look at my website closely (well, you don't really need to look at it closely) you'll find that in terms of styling it's 
+a mix of the two blogs I've previously mentioned. Styling and design is really hard. Which is probably why nocode tools like 
+[webflow](https://webflow.com/) are hot right now. CSS Styling seems like an easily automatable task, and soon designers will take
+care of it rather then developers. 
+
+
+### Features yet to be built
+
+As I was working on this website, I realized there are somethings that still have to be built to get a proper blog. 
+- A commenting system. I'll probably have a look at webmention or some other component that can be used. 
+- A RSS Feed
+
+<br /> 
+
+I'll be adding these as and when I have time, but my primary focus will be on writing some blog posts!