lots of work

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

README.md

@@ -1,4 +1,6 @@
-# coffeeclass.io ☕
+<div align="center">
+    <h1>coffeeclass.io ☕</h1>
+</div>
 
 Learn programming and computer science for free.
 
@@ -35,4 +37,4 @@ You can also contribute to the website itself. New features and bug fixes are al
 
 https://benjamincarlson.notion.site/609b8bb171844146a9bcd9fbabd171a8?v=341de17fff6149bea36dbafbe2f2cf88
 
-[Powered by ![Vercel Logo](/public/vercel/logotype/dark/vercel-logotype-dark.png)](https://vercel.com/?utm_source=carlson-technologies&utm_campaign=oss)
+[Powered by ![Vercel Logo](/public/logos/vercel.png)](https://vercel.com/?utm_source=carlson-technologies&utm_campaign=oss)

content/snippets/add-comments-to-nextjs-website.mdx → content/articles/add-comments-to-nextjs-website.mdx

@@ -12,6 +12,8 @@ type: "snippet"
 logoImage: ["utterances.png"]
 ---
 
+## Introduction
+
 Adding comments to a [Jamstack](https://jamstack.org/) website is a challenge. The main reason for this is because
 comments require some sort of database, and (one of) Jamstack's selling point is that it doesn't need one!
 You can choose to connect a database such as [Firestore](https://firebase.google.com/docs/firestore) or [AWS](https://aws.amazon.com/products/databases/) - but we're not going to do that because it's
@@ -44,7 +46,7 @@ If you want to add Utteranc to a simple html site, all you need to do is paste i
 The first step is to create a GitHub repo to store your comments. You can use the same repo that your website
 is pushed to, however, I recommend creating a new one just for the comments. You can then name this `comments-your-website-name` - or another name if you feel so inclined.
 
-![The comments GitHub repo for this website](/content/snippets/add-comments-to-nextjs-website/comments-coffeeclass-io.png)
+![The comments GitHub repo for this website](/content/articles/add-comments-to-nextjs-website/comments-coffeeclass-io.png)
 
 > ❗ Make sure this repo is public and that Utterances is authorized. ❗
 

content/snippets/add-firebase-to-flutter-mobile-app.mdx → content/articles/add-firebase-to-flutter-mobile-app.mdx

@@ -39,36 +39,36 @@ After a minute or two, your project will finish creating and you will be brought
 
 Next, we will add Firebase to our Android version. We will need to do IOS and Android separately although the process is similar.
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/console.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/console.png)
 
 - Click on the Android Icon from the overview page
 - Complete the Register App step.
 
 For Android package name use the format: _com.[your name or business name].[project name]_. For app nickname, use whatever name you’d like.
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/add.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/add.png)
 
 Step 2
 
 - Download the config file and place it in the app level (in the app folder).
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/app-level.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/app-level.png)
 
 - In the project level build.gradle, add the following:
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/build.gradle.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/build.gradle.png)
 
 - In the app level build.gradle add the following:
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/app-level-build.gradle.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/app-level-build.gradle.png)
 
 Lastly, in the app level build.gradle file (same file as above), find the applicationId and change it to the name you chose in step 2. In my case I used _com.benjamincarlson.medium_tutorial_.
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/name.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/name.png)
 
 At this point we are done. Run the app with an android emulator and make sure everything works. You should see the following image below if everything works as expected.
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/working-android.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/working-android.png)
 
 ## Add Firebase to IOS
 
@@ -78,7 +78,7 @@ Click on the IOS Icon from the overview page
 
 Enter the IOS bundle ID. This can be found by opening your project in Xcode -> click on runner (top right) -> general tab -> Identity
 
-![Firebase Console](/content/snippets/connect-flutter-to-firebase/bundle-id.png)
+![Firebase Console](/content/articles/connect-flutter-to-firebase/bundle-id.png)
 
 I changed mine from com.example.mediumTutorial to com.benjamincarlson.mediumTutorial.
 

content/tutorials/add-firebase-to-nextjs.mdx → content/articles/add-firebase-to-nextjs.mdx

@@ -222,7 +222,7 @@ export default WriteToCloudFirestore
 Imort this component inside of `index.js` and press the button. You should see a success alert
 and if you navigate to [Firbase](https://console.firebase.google.com) you should see the data.
 
-![Write Success Image](/content/tutorials/add-firebase-to-nextjs/write-success.png)
+![Write Success Image](/content/articles/add-firebase-to-nextjs/write-success.png)
 
 ### Read
 

content/snippets/add-google-analytics-to-nextjs.mdx → content/articles/add-google-analytics-to-nextjs.mdx

@@ -12,6 +12,8 @@ type: "snippet"
 logoImage: ["google-analytics.png"]
 ---
 
+## Introduction
+
 Adding Google analytics to a Next.js website seems complicated, but is not that difficult. To begin, make sure you have
 a [Google Analytics](https://analytics.google.com/) account with your project set up. Create a folder in your Next.js root directory called `lib`. Inside of here, create a file named `gtag.js`. Paste in the following
 code:
@@ -85,4 +87,4 @@ export default class MyDocument extends NextDocument {
 That's it! Once you [deploy to Vercel](https://vercel.com/) (or another hosting service of your choice) you should see analytics coming
 through after 5 minutes or so.
 
-![Realtime Views](/content/snippets/add-google-analytics-to-nextjs/realtime.png)
+![Realtime Views](/content/articles/add-google-analytics-to-nextjs/realtime.png)

content/snippets/add-splitbee-analytics-to-nextjs.mdx → content/articles/add-splitbee-analytics-to-nextjs.mdx

@@ -11,6 +11,10 @@ type: "snippet"
 logoImage: ["splitbee.png"]
 ---
 
+<EmbeddedVideo src="https://www.youtube.com/embed/WcckDQ716_o" alt="Watch Advanced Chakra UI on YouTube." maxW={800} />
+
+## Introduction
+
 Most websites use [Google Analytics](https://analytics.google.com/analytics/web/) to track users and events. This is a great way to get an idea of how your website is performing. However, there are some downsides to using Google Analytics.
 
 1. They sell your data

content/snippets/advanced-chakra-ui-do-you-know-all-5.mdx → content/articles/advanced-chakra-ui-do-you-know-all-5.mdx

@@ -14,6 +14,8 @@ logoImage: ["chakra-ui.png"]
 
 <EmbeddedVideo src="https://www.youtube.com/embed/joYNKCG3cWo" alt="Watch Advanced Chakra UI on YouTube." maxW={800} />
 
+## Introduction
+
 [Chakra UI](https://chakra-ui.com) is a css framework for React based apps. It is super easy to use which makes for a smooth developer experience. I've been using Chakra UI for over a year now and in this time I've learned a lot about it. In this post, I'll show you 5 Chakra UI features that will take you from beginner to advanced.
 
 <SnippetStep number="1" title="Custom Theme Multiple Files" />
@@ -146,7 +148,7 @@ custom_brand: {
  </Button>
 ```
 
-![Chakra UI default red color pallete](/content/snippets/advanced-chakra-ui-do-you-know-all-5/color-pallete.png)
+![Chakra UI default red color pallete](/content/articles/advanced-chakra-ui-do-you-know-all-5/color-pallete.png)
 
 ## Conclusion
 

content/snippets/chakra-ui-mobile-navbar.mdx → content/articles/chakra-ui-mobile-navbar.mdx

@@ -11,6 +11,8 @@ type: "snippet"
 logoImage: ["chakra-ui.png"]
 ---
 
+## Introduction
+
 In this snippet we will create a simple mobile navigation bar using Chakra UI's [drawer component](https://chakra-ui.com/docs/overlay/drawer). It will be similar to the one on this website.
 
 <SnippetStep number="1" title="Creating the Hamburger Icon Button" />

content/snippets/flutter-bottom-navigation-bar.mdx → content/articles/flutter-bottom-navigation-bar.mdx

@@ -11,6 +11,8 @@ type: "snippet"
 logoImage: ["flutter.png"]
 ---
 
+## The Code
+
 ```dart:main.dart
 import 'package:flutter/material.dart';
 import 'package:bottom_navigation_bar/nav.dart';

content/snippets/generate-dynamic-sitemap.mdx → content/articles/generate-dynamic-sitemap.mdx

@@ -15,7 +15,7 @@ logoImage: ["nextjs-light.png"]
 
 A sitemap is how you tell Google what pages are in your website. This helps them get ranked higher. Take a look at the performance chart of this website. 
 
-![Performance click chart in Google Search Console for coffeeclass.io](/content/snippets/generate-dynamic-sitemap/performance.png)
+![Performance click chart in Google Search Console for coffeeclass.io](/content/articles/generate-dynamic-sitemap/performance.png)
 
 I added the sitemap on 7/20/21 and you can see the clicks spiked right after.
 

content/snippets/how-to-compare-dates-in-javascript.mdx → content/articles/how-to-compare-dates-in-javascript.mdx

@@ -11,6 +11,8 @@ type: "snippet"
 logoImage: ["javascript.png"]
 ---
 
+## Introduction
+
 Back in the day when JavaScript was introduced, it didn’t have any specific `date` data type. But later, the [date data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) was introduced in JavaScript and that’s when developers started to look around for ways to compare dates in JavaScript.
 
 If you are also looking for ways to compare different dates, you are at the right place. Besides that, even if you were just exploring the topic, it is recommended to go through this guide because at some point in your programming career as you will need to compare dates.

content/snippets/how-to-create-react-native-app.mdx → content/articles/how-to-create-react-native-app.mdx

@@ -37,7 +37,7 @@ expo init ExampleProject
 
 Expo will prompt you with the following message:
 
-![React Native Expo template options](/content/snippets/how-to-create-react-native-app/2.png)
+![React Native Expo template options](/content/articles/how-to-create-react-native-app/2.png)
 
 For this tutorial, I will select blank but I encourage you to do some research and select the best option for your project.
 
@@ -52,10 +52,10 @@ npm start
 
 When you run ‘npm start’, a new browser window will open at your local host. You will notice a barcode in the lower left hand corner.
 
-![Expo running in browser](/content/snippets/how-to-create-react-native-app/3.png)
+![Expo running in browser](/content/articles/how-to-create-react-native-app/3.png)
 
 We can scan this barcode in the expo app to run our app on a device. Go to either the Apple App Store or the Google Play Store and search for ‘expo client’. See the image below.
 
-![Expo in google play store](/content/snippets/how-to-create-react-native-app/4.png)
+![Expo in google play store](/content/articles/how-to-create-react-native-app/4.png)
 
 Once you download and open the app, you will see an option to “Scan QR Code”. Tap this and scan your code. After the JavaScript loads, you should be able to see the app on your device. If you see “Open up App.js to start working on your app!” you have done it correctly.

content/tutorials/java-inheritance-tutorial.mdx → content/articles/java-inheritance-tutorial.mdx

@@ -29,7 +29,7 @@ behaviors than basic vehicles, like Electric vehicle has battery capacity, avera
 Gasoline and Hybrid vehicles have specialized attributes and behaviors. Following diagram gives us a
 good overview.
 
-![A diagram of Java Inheritance](/content/tutorials/java-inheritance-tutorial/diagram.png)
+![A diagram of Java Inheritance](/content/articles/java-inheritance-tutorial/diagram.png)
 
 All three type of vehicles have extra features, including basic feature of vehicle. If there is no
 inheritance, then we need to include all attributes and behavior of basic vehicle in all type of

content/tutorials/nextjs-crash-course-build-a-developer-portfolio-website.mdx → content/articles/nextjs-crash-course-build-a-developer-portfolio-website.mdx

@@ -21,7 +21,7 @@ There are a lot of popular Jamstack frameworks. The main ones are [Next.js](http
 
 In this post, you will learn Next.js by building a developer portfolio complete with a blog. You will also learn some other awesome technologies in the process like chakra-ui, next-mdx-remote, next-seo, Vercel, and more.
 
-![A pie chart comparing the top Jamstack frameworks](/content/tutorials/nextjs-crash-course-build-a-developer-portfolio-website/pie-chart.png)
+![A pie chart comparing the top Jamstack frameworks](/content/articles/nextjs-crash-course-build-a-developer-portfolio-website/pie-chart.png)
 
 ## Starter Files Overview
 

content/tutorials/todo-app-nextjs-chakraui-firebase.mdx → content/articles/todo-app-nextjs-chakraui-firebase.mdx

@@ -8,7 +8,6 @@ authorPosition: "Founder coffeeclass.io"
 publishedAt: "2021-09-26T12:16"
 featureImg: "feature.png"
 youtubeId: "https://youtu.be/Cn0OKuG2mzM"
-# youtubeEmbed: "https://www.youtube.com/embed/Cn0OKuG2mzM"
 githubURL: "https://github.com/bjcarlson42/overly-complicated-todo-app"
 tags: ["chakra-ui", "nextjs", "firebase"]
 type: "tutorial"
@@ -72,19 +71,19 @@ NEXT_PUBLIC_COOKIE_SECURE=false # set to true in HTTPS environment
 
 Next, create a Firebase project and create a web project inside of it.
 
-![Image of creating a firebase web app](/content/tutorials/todo-app-nextjs-chakraui-firebase/create-web-app.png)
+![Image of creating a firebase web app](/content/articles/todo-app-nextjs-chakraui-firebase/create-web-app.png)
 
 Go ahead and turn on Email/Password auth, cloud firestore and realtime db.
 
-![Image of left sidebar](/content/tutorials/todo-app-nextjs-chakraui-firebase/left-sidebar.png)
+![Image of left sidebar](/content/articles/todo-app-nextjs-chakraui-firebase/left-sidebar.png)
 
 Now, go into project settings. In the general tab, you will find most of your secret values.
 
-![Image of secrets](/content/tutorials/todo-app-nextjs-chakraui-firebase/secrets.png)
+![Image of secrets](/content/articles/todo-app-nextjs-chakraui-firebase/secrets.png)
 
 To get the remaining values, click the "Service Accounts" tab and "Generate a New Private Key." Open the file that is downloaded. The remaining secret values such as the api key (the super long string) can be found in here.
 
-![Image of generating a private key](/content/tutorials/todo-app-nextjs-chakraui-firebase/generate-private-key.png)
+![Image of generating a private key](/content/articles/todo-app-nextjs-chakraui-firebase/generate-private-key.png)
 
 > For the 2 cookie secrets, simply generate 2 random strings!
 

content/learn/chakra-ui/chakra-ui-custom-theme.mdx → content/course/chakra-ui/chakra-ui-custom-theme.mdx

@@ -8,7 +8,7 @@ type: learn
 language: chakra-ui
 ---
 
-In the [last module](/learn/chakra-ui/chakra-ui-default-theme), we took a look at Chakra UI's default theme. These styles work great, however you will most likely need to custimize some or all of them. We can do this by creating a custom theme, also known as overriding the default theme.
+In the [last module](/courses/chakra-ui/chakra-ui-default-theme), we took a look at Chakra UI's default theme. These styles work great, however you will most likely need to custimize some or all of them. We can do this by creating a custom theme, also known as overriding the default theme.
 
 To begin, create a file named `theme.js`. Inside of this file, we will extend our default theme. To do this, we will use 2 Chakra UI imports.
 
@@ -54,7 +54,7 @@ const overrides = {
 
 Right now nothing will happen. This is because we aren't using this custom theme anywhere in our website! 
 
-Recall in the [getting started](/learn/chakra-ui/getting-started-with-chakra-ui) section that we are using the `ChakraProvider` to render our app. This takes in a property called `theme` which is, you guessed it, our custom theme.
+Recall in the [getting started](/courses/chakra-ui/getting-started-with-chakra-ui) section that we are using the `ChakraProvider` to render our app. This takes in a property called `theme` which is, you guessed it, our custom theme.
 
 ```javascript:_app.js
 import customTheme from '../theme' // <-- import our custom theme

content/learn/chakra-ui/chakra-ui-default-theme.mdx → content/course/chakra-ui/chakra-ui-default-theme.mdx

@@ -16,7 +16,7 @@ Chakra UI comes with a set of default colors. If you are familiar with [Tailwind
 
 Using colors is simple. They range from 50 to 900 in value. Take a look at the gray value below.
 
-![Gray color Chakra UI](/content/learn/chakra-ui/chakra-ui-default-theme/gray.png)
+![Gray color Chakra UI](/content/courses/chakra-ui/chakra-ui-default-theme/gray.png)
 
 > See all colors on [Chakra UI's](https://chakra-ui.com/docs/theming/theme#colors) website.
 

next-seo.config.js

@@ -13,7 +13,7 @@ const SEO = {
         description,
         images: [
             {
-                url: 'https://www.coffeeclass.io/favicons/logo-white-bg.png',
+                url: 'https://www.coffeeclass.io/logo-white-bg.png',
                 alt: title
             }
         ]

next.config.js

@@ -8,7 +8,18 @@ module.exports = withMDX({
         if (isServer) {
             require('./src/scripts/generate-sitemap');
         }
-
+        if (!isServer) {
+            config.resolve.fallback.fs = false;
+        }
         return config
-    }
+    },
+    async redirects() {
+        return [
+            {
+                source: '/snippets/add-comments-to-nextjs-website',
+                destination: '/articles/add-comments-to-nextjs-website',
+                permanent: true,
+            },
+        ]
+    },
 })

package.json

@@ -5,36 +5,42 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "node ./scripts/build-algolia-search.js",
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.8",
-    "@chakra-ui/react": "^1.6.4",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/icons": "^1.1.1",
+    "@chakra-ui/react": "^1.7.2",
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^10.1.3",
-    "date-fns": "^2.19.0",
-    "framer-motion": "^4",
+    "@next/mdx": "^12.0.4",
+    "algoliasearch": "^4.11.0",
+    "date-fns": "^2.25.0",
+    "dotenv": "^10.0.0",
+    "framer-motion": "^5.3.0",
     "gray-matter": "^4.0.2",
-    "javascript-time-ago": "^2.3.8",
-    "mdx-prism": "^0.3.3",
-    "next": "10.1.3",
+    "javascript-time-ago": "^2.3.10",
+    "mdx-prism": "^0.3.4",
+    "next": "12",
     "next-google-fonts": "^2.2.0",
-    "next-mdx-remote": "^3.0.4",
+    "next-mdx-remote": "^3.0.1",
     "next-remote-watch": "^1.0.0",
-    "next-seo": "^4.23.0",
-    "prettier": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-icons": "^4.2.0",
-    "reading-time": "^1.3.0",
-    "rehype": "^11.0.0",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-code-titles": "^0.1.1"
+    "next-seo": "^4.28.1",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-instantsearch-dom": "^6.15.0",
+    "reading-time": "^1.5.0",
+    "rehype": "^12.0.0",
+    "remark-autolink-headings": "^7.0.1",
+    "remark-code-titles": "^0.1.2"
   },
   "devDependencies": {
+    "eslint": "<8.0.0",
+    "eslint-config-next": "12.0.4",
     "globby": "^11.0.1"
   }
 }