Merge pull request #3 from jeffjadulco/next

Migrate from Gatsby to Next.js + Other stuff
jeffjadulco · May 26, 2021 · c34ce47 · c34ce47
2 parents dcbbefd + 16ec05c
commit c34ce47
Show file tree

Hide file tree

Showing 100 changed files with 16,784 additions and 24,627 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,10 +54,6 @@ typings/
 # dotenv environment variable files
 .env*
 
-# gatsby files
-.cache/
-public
-
 # Mac files
 .DS_Store
 
@@ -67,3 +63,6 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+# Next.js
+.next
diff --git a/.gitmodules b/.gitmodules
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "semi": false
+  "semi": false,
+  "singleQuote": true
 }
diff --git a/.storybook/layout.js b/.storybook/layout.js
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
diff --git a/.storybook/preview.js b/.storybook/preview.js
diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
diff --git a/README.md b/README.md
@@ -3,18 +3,32 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 ![Twitter Follow](https://img.shields.io/twitter/follow/jeffjadulco?style=social)
 
-My personal website running on Gatsby.
+My personal website running on [Next.js](https://nextjs.org/)
 
-## Tech Stack
+## Built using
 
-- [React](https://reactjs.org/)
-- [Gatsby](https://www.gatsbyjs.org/)
+- [Next.js + Typescript](https://nextjs.org/)
+- [MDX using `mdx-bundler`](https://github.com/kentcdodds/mdx-bundler/)
 - [Tailwind CSS](https://tailwindcss.com/)
-- [Storybook](https://storybook.js.org/)
+- [Figma (mostly outdated)](https://www.figma.com/file/6umesgU3tEZgkQm9Hrw2PO/jeffjadulco.com)
 
-## Author
+## Development
 
-- [Jeff Jadulco](https://jeffjadulco.com)
+```bash
+git clone https://github.com/jeffjadulco/jeffjadulco.com.git
+cd jeffjadulco.com
+npm install
+npm run dev
+```
+
+## Configuration
+
+- MDX - located in `content/blog`
+- Analytics - I'm using [GoatCounter](https://www.goatcounter.com/). If you want to remove or replace it, remove/replace the `goat-counter` script in`_document.tsx` and `useAnalytics`.
+
+## Old version
+
+I initially made this website using Gatsby, here's the tagged version for the last commit before migrating to Next.js: [v1.3](https://github.com/jeffjadulco/jeffjadulco.com/tree/v1.3)
 
 ## License
 

diff --git a/content/blog/2020-into-2021/index.mdx → content/blog/2020-into-2021.mdx b/content/blog/2020-into-2021/index.mdx → content/blog/2020-into-2021.mdx
@@ -1,18 +1,17 @@
 ---
 title: 2020 into 2021
-date: 2020-12-30
-published: true
-tags: ["life"]
+publishedAt: '2020-12-30'
+updatedAt: '2021-05-08'
+isPublished: true
+tags: ['life']
 description: My personal year in review
 toc: true
-seoImage: "og-card-blog-2020-into-2021.png"
+seoImage: '/static/og/blog/2020-into-2021.png'
 ---
 
-import { ExtLink } from "../../../src/components/atoms.js"
-
 2020 has been a year. Yep.
 
-This has been a <ExtLink link="https://youtu.be/6-1Ue0FFrHY" newTab>loooong</ExtLink> year. Or a short one maybe? It's been hard especially with the Covid-19. But it didn't stop us to adapt with the tremendous changes.
+This has been a [loooong](https://youtu.be/6-1Ue0FFrHY) year. Or a short one maybe? It's been hard especially with the Covid-19. But it didn't stop us to adapt with the tremendous changes.
 
 For me, this year was full of growth. I learned so much. This article will serve as a retrospective look at how this year has gone for me.
 
@@ -36,13 +35,13 @@ Freelancing is great. My income was higher than my full-time work. But doing bot
 
 ## I created my personal website
 
-Creating my personal website was one of my goals this year. I treated it as a legit project with actual project planning using <ExtLink link="https://clickup.com/" newTab>Clickup</ExtLink> and time tracking using <ExtLink link="https://toggl.com/track/" newTab>Toggl</ExtLink>. I took <ExtLink link="https://share.clickup.com/t/h/2xkaht/X0MKPPTJM2MXUHV" newTab>inspirations</ExtLink> from sites of other devs, but I tried to make it visually unique.
+Creating my personal website was one of my goals this year. I treated it as a legit project with actual project planning using [ClickUp](https://clickup.com/) and time tracking using [Toggl](https://toggl.com/track/). I took [inspirations](https://share.clickup.com/t/h/2xkaht/X0MKPPTJM2MXUHV) from sites of other devs, but I tried to make it visually unique.
 
 From **July 1, 2020**, to **December 29, 2020**, there were **4.8K** sessions on this website. **51%** of the traffic were direct while **28%** came from organic search (Google). Also, this site's dark mode was toggled **6,368** times.
 
 I received a few appreciation emails about my website and my tutorial article. I still remember the feeling when I received the first email, my happiness went through the roof. I never expected these, and I'm super happy that people appreciate my work. Thank you guys!
 
-I also created my <ExtLink link="https://gamedev.jeffjadulco.com/" newTab>gamedev portfolio website</ExtLink> a month after, but it is kind of secret-ish (it's not searchable)
+I also created my [gamedev portfolio website](https://gamedev.jeffjadulco.com/) a month after.
 
 ## I started a blog ... kinda
 

diff --git a/content/blog/css-snippet-bottom-footer.mdx b/content/blog/css-snippet-bottom-footer.mdx
@@ -0,0 +1,62 @@
+---
+title: 'CSS Snippet: Stay at the bottom, footer!'
+publishedAt: '2021-01-31'
+isPublished: true
+tags: ['css']
+description: CSS trick to keep the footer at the bottom
+toc: false
+seoImage: '/static/og/blog/bottom-footer.png'
+---
+
+![Footer issue](/images/blog/footer-gap.png)
+
+I experienced this footer problem before in this site, but I got away with it because there are no pages that have no content to make this happen 😆. But in this [side project](https://hn.jeffjadulco.com) of mine (which is a Hacker News reader), there are times when a post don't have no comments yet, and I have no control over it.
+
+I've looked for solutions over the internet and this is the most clever solution I saw: using `flexbox`.
+
+```jsx
+<html>
+  <body>
+    <header>Header</header>
+    <main>Content</main>
+    <footer>Footer</footer>
+  </body>
+</html>
+```
+
+```css
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex-grow: 1;
+}
+```
+
+I love this solution because it's so simple and it tells us what it does.
+
+> 💡 The whole body is a flexbox which has a minimum height of whatever the browser's height is.
+>
+> 💡 The main content's height grows to occupy the remaining space. Pushing the footer to the bottom of the page.
+
+![Footer issue fixed](/images/blog/footer-fixed.png)
+
+And... that's it! Now the footer stays at the bottom whenever there are no or few contents in the page.
+
+You can easily do it on Tailwind too!
+
+```html
+<div class="min-h-screen flex flex-col">
+  <header>Header</header>
+  <main class="flex-grow">Main Content</main>
+  <footer>Footer</footer>
+</div>
+```
+
+I've also made a simple example using CodeSandbox and Tailwind Play.
+
+- [CodeSandbox sample](https://codesandbox.io/s/hopeful-lichterman-g8dkb?file=/index.html)
+- [Tailwind Play sample](https://play.tailwindcss.com/pymHJ6XIPU)
diff --git a/content/blog/css-snippet-bottom-footer/index.mdx b/content/blog/css-snippet-bottom-footer/index.mdx