small fixes to type errors and use of next/link

dqna64 · dqna64 · commit 921c893aec6f · 2024-07-26T05:08:41.000+10:00
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -10,6 +10,7 @@ import Logo from './Logo'
 import NavMenu from './NavMenu'
 import SearchButton from './SearchButton'
 import { Text } from './Text'
+import { StyledLink } from './StyledLink'
 
 const GITHUB_URL = 'https://github.com/csesoc/learning-platform'
 const navItems = [
@@ -153,28 +154,21 @@ export default function Navbar() {
       </Flex>
       <NavContainer isOpen={isOpen}>
         {navItems.map((navItem, idx) => (
-          <Link key={idx} href={`/${navItem.path}`}>
+          <Link
+            key={idx}
+            href={`/${navItem.path}`}
+            legacyBehavior
+            passHref>
             <Text
-              as="a"
+              as={'a'}
               css={{ color: '$slate12', cursor: 'pointer', whiteSpace: 'nowrap' }}
               onClick={() => { setIsOpen(false); console.log('hi') }}>
               {navItem.title}
-
             </Text>
           </Link>
 
         )
         )}
-        {/* <Text
-          as="a"
-          size="label-lg"
-          css={{
-            color: '$slate11',
-            userSelect: 'none',
-            cursor: 'not-allowed'
-          }}>
-          About
-        </Text> */}
       </NavContainer>
       <Box css={{
         display: isOpen ? "block" : "none",
diff --git a/data/articles/ppc-backend-1.mdx b/data/articles/ppc-backend-1.mdx
@@ -172,5 +172,4 @@ In our <Link href="/articles/ppc-backend-2">next article</Link> we will look at
 next="/articles/ppc-backend-2"
 
 nextName="Backend Project Tutorial 2 - MongoDB"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/ppc-backend-2.mdx b/data/articles/ppc-backend-2.mdx
@@ -134,6 +134,4 @@ nextName="Backend Project Tutorial 3 - CRUD Opearations"
 
 prev="/articles/ppc-backend-1"
 prevName="Backend Project Tutorial 1 - Creating a simple Express.js backend"
->
-</ArticleButtonContainer>
-
+/>
diff --git a/data/articles/ppc-backend-3.mdx b/data/articles/ppc-backend-3.mdx
@@ -97,5 +97,4 @@ nextName="Backend Project Tutorial 4 - Users and authentication"
 
 prev="/articles/ppc-backend-2"
 prevName="Backend Project Tutorial 2 - MongoDB"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/ppc-backend-4.mdx b/data/articles/ppc-backend-4.mdx
@@ -384,5 +384,4 @@ nextName="Backend Project Tutorial 5 - Deployment"
 
 prev="/articles/ppc-backend-3"
 prevName="Backend Project Tutorial 3 - CRUD Operations"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/ppc-backend-5.mdx b/data/articles/ppc-backend-5.mdx
@@ -53,5 +53,4 @@ That's about it for our backend tutorial. To recap, we have set up an Express ba
 
 prev="/articles/ppc-backend-4"
 prevName="Backend Project Tutorial 4 - Users and authentication"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/reactjs-tut-0.mdx b/data/articles/reactjs-tut-0.mdx
@@ -1,19 +1,22 @@
 ---
-title: "ReactJS Project Tutorial: Introduction"
+title: 'ReactJS Project Tutorial: Introduction'
 date: 2022-06-28
 desc: A series of tutorials to teach you the fundamentals of ReactJS and how to build a frontend project.
 author: Gordon Huang
 tags:
   - 'ReactJS'
   - 'Frontend'
 coverPhoto: '/images/generic/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg'
-
 ---
 
 Welcome to this tutorial series on ReactJS! This tutorial aims to teach you the fundamentals of the ReactJS front-end library so you can learn how to build your own projects with ReactJS. By the end of this tutorial series you will have built a front-end application like this:
 
 <Centerer>
-<img src="https://imgur.com/sfHTEm4.png" alt="Final product of this this tutorial series" width="70%" />
+  <img
+    src="https://imgur.com/sfHTEm4.png"
+    alt="Final product of this this tutorial series"
+    width="70%"
+  />
 </Centerer>
 
 ReactJS is a front-end JavaScript library for building user interfaces for websites, dynamic web applications, mobile apps, and many other places that need a visual interface for users to interact with software. It was released in 2013 and since then it has become by far the most popular tool for building web applications. It is made and maintained by Facebook/Meta and is used for many commercial apps and websites like Facebook, Instagram, Airbnb and Uber Eats. Needless to say, ReactJS is currently widely used in industry and there are huge swathes of positions in the tech industry for ReactJS developers. So learning ReactJS will give you valuable front-end UI development skills, and also make you highly employable for many years before the next big front-end framework takes its place.
@@ -28,5 +31,4 @@ If you're ready, learn to build a mini React application starting in the <Link h
 
 next="/articles/reactjs-tut-1"
 nextName="ReactJS Project Tutorial: Part 1"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/reactjs-tut-1.mdx b/data/articles/reactjs-tut-1.mdx
@@ -40,6 +40,7 @@ $ node -v
 and press enter. This tests whether you have installed NodeJS correctly. If you have, it should print the version of NodeJS which you have installed, such as `16.15.0`.
 
 ## NPM - Node Package Manager
+
 Installing NodeJS also automatically installs NPM (Node Package Manager) which manages JavaScript packages for your projects. To check that it has installed properly, type into your command line:
 
 ```bash:
@@ -82,30 +83,38 @@ $ cd reactjs-project-tutorial
 Also open up the project in VSCode by opening up VSCode and opening the folder <FileName>reactjs-project-tutorial</FileName>.
 
 <Centerer>
-<img alt="Open VSCode and open a folder" src="https://imgur.com/T6kP1ov.png" width="80%" />
+  <img
+    alt="Open VSCode and open a folder"
+    src="https://imgur.com/T6kP1ov.png"
+    width="80%"
+  />
 </Centerer>
 
 <Centerer>
-<img alt="Select the my-react-app folder" src="https://imgur.com/vts088y.png" width="80%" />
+  <img
+    alt="Select the my-react-app folder"
+    src="https://imgur.com/vts088y.png"
+    width="80%"
+  />
 </Centerer>
 
 You should now be able to see the source code of your new React app in your code editor!
 
 <Centerer>
-<img alt="Your React source code app in VSCode" src="https://i.imgur.com/0uACQX4.png" width="80%" />
+  <img
+    alt="Your React source code app in VSCode"
+    src="https://i.imgur.com/0uACQX4.png"
+    width="80%"
+  />
 </Centerer>
 
 In the <Link href="/articles/reactjs-tut-2">next tutorial</Link> we'll explore all the different parts of the code that create-react-app has given to us.
 
-
 <ArticleButtonContainer
 
 next="/articles/reactjs-tut-2"
 prev="/articles/reactjs-tut-0"
 
 nextName="ReactJS Project Tutorial: Part 2"
 prevName="ReactJS Project Tutorial: Introduction"
->
-</ArticleButtonContainer>
-
-
+/>
diff --git a/data/articles/reactjs-tut-2.mdx b/data/articles/reactjs-tut-2.mdx
@@ -22,7 +22,6 @@ In the last tutorial you installed all the tools we'll need to create a React ap
   install it.
 </Callout>
 
-
 The <FileName>README.md</FileName> file at the bottom has a brief description of this repository and how to use it. The <FileName>.md</FileName> extension stands for _markdown_, a common text editing syntax to format text. It is not code; markdown is to make text readable for humans.
 
 In general you should use a <FileName>README.md</FileName> in a project to give an overview of what your project does, how to use it, and any other information you think would be useful for people interested in your code.
@@ -85,5 +84,4 @@ prev="/articles/reactjs-tut-1"
 
 nextName="ReactJS Project Tutorial: Part 3"
 prevName="ReactJS Project Tutorial: Part 1"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/reactjs-tut-3.mdx b/data/articles/reactjs-tut-3.mdx
@@ -124,5 +124,4 @@ prev="/articles/reactjs-tut-2"
 
 nextName="ReactJS Project Tutorial: Part 4"
 prevName="ReactJS Project Tutorial: Part 2"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/reactjs-tut-4.mdx b/data/articles/reactjs-tut-4.mdx
@@ -286,13 +286,12 @@ const App = () => {
 
 Currently we have effectively "hard-coded" the restaurant information into our app. We want to be able to dynamically store and change this information. We will learn how to do this in the <Link href="/articles/reactjs-tut-5">next tutorial</Link>.
 
-
 <ArticleButtonContainer
 
 next="/articles/reactjs-tut-5"
 prev="/articles/reactjs-tut-3"
 
 nextName="ReactJS Project Tutorial: Part 5"
 prevName="ReactJS Project Tutorial: Part 3"
->
-</ArticleButtonContainer>
+
+/>
diff --git a/data/articles/reactjs-tut-5.mdx b/data/articles/reactjs-tut-5.mdx
@@ -12,7 +12,9 @@ coverPhoto: '/images/generic/joan-gamell-nFqwVZhimpM-unsplash.jpg'
 Variables are a fundamental concept in programming because it allows us to store and modify data depending on where or how our program is used. In a React app, variables are made using something called the `useState` hook. React hooks are functions that can be called from within our functional components like `App` to use various core React features.
 
 <Callout type="note">
-The tutorial starts getting a bit tricky here. If you get lost at any point, take a look at the sample implementation at [github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough](https://github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough).
+  The tutorial starts getting a bit tricky here. If you get lost at any point,
+  take a look at the sample implementation at
+  [github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough](https://github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough).
 </Callout>
 
 To use the `useState` hook, first import it into our <FileName>App.jsx</FileName> file. Then inside the `App` functional component and above the return statement, write the following:
@@ -229,5 +231,4 @@ prev="/articles/reactjs-tut-4"
 
 nextName="ReactJS Project Tutorial: Part 6"
 prevName="ReactJS Project Tutorial: Part 4"
->
-</ArticleButtonContainer>
+/>
diff --git a/data/articles/reactjs-tut-6.mdx b/data/articles/reactjs-tut-6.mdx
@@ -16,7 +16,11 @@ Just like how functions in programming can separate responsibilities and elimina
 Make a new <FileName>components </FileName> folder in <FileName>src </FileName>. This new folder will store any reusable components that we create. Inside <FileName>src/components </FileName> create a file <FileName>Card.jsx </FileName> and add in this template for a basic React component:
 
 <Centerer>
-<img src="https://imgur.com/3qnvh1a.png" alt="new Card.jsx component" width="90%" />
+  <img
+    src="https://imgur.com/3qnvh1a.png"
+    alt="new Card.jsx component"
+    width="90%"
+  />
 </Centerer>
 
 We want this `Card` component to render the restaurant card we made in <FileName>App.jsx </FileName>. Cut and paste that JSX into the return of this `Card` component. Remember to wrap it in parentheses. Also be sure to move the star.svg and <FileName>Card.css </FileName> imports from <FileName>App.jsx </FileName> to <FileName>Card.jsx </FileName> (hint: the path from <FileName>Card.jsx </FileName> to <FileName>Card.css </FileName> is <FileName>"../styles/Card.css" </FileName> where ".." means "the parent folder of the folder that contains this file").
@@ -248,12 +252,11 @@ Our app now renders a list of cards of all restaurants specfied in the `places`
 
 That's all for this series of tutorials, well done on making it to the end! The fundamental concepts that you have learned here including components, props and state will be useful in all future ReactJS projects that you work on.
 
-There are also many more things to learn which we haven't covered in this series. What if you want to provide a form to add more restaurants, or increase `visits` count for a restaurant? These features can be achieved using things called *event handlers*, which ReactJS does very similarly to HTML. There are plenty of resources online including other articles, videos and documentation to teach you those things. The best way to learn how to use them is to continue building projects and searching the internet for learning resources like these whenever you get stuck. Good luck on your ReactJS journey and have fun!
+There are also many more things to learn which we haven't covered in this series. What if you want to provide a form to add more restaurants, or increase `visits` count for a restaurant? These features can be achieved using things called _event handlers_, which ReactJS does very similarly to HTML. There are plenty of resources online including other articles, videos and documentation to teach you those things. The best way to learn how to use them is to continue building projects and searching the internet for learning resources like these whenever you get stuck. Good luck on your ReactJS journey and have fun!
 
 <ArticleButtonContainer
 
 prev="/articles/reactjs-tut-5"
 
 prevName="ReactJS Project Tutorial: Part 5"
->
-</ArticleButtonContainer>
+/>
diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx
@@ -5,7 +5,6 @@ import { allArticleTypes, ArticleType } from 'contentlayer/generated'
 import { format, parseISO } from 'date-fns'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import Head from 'next/head'
-import Image from 'next/image'
 import { Box } from 'components/Box'
 import Callout from 'components/Callout'
 import FileName from 'components/Filename'
@@ -21,26 +20,44 @@ import NextArticleButton from 'components/NextArticleButton'
 // import PrevArticleButton from 'components/PrevArticleButton'
 import ArticleButtonContainer from 'components/ArticleNavigationContainer'
 import { BackButton } from 'components/BackButton'
+import { MDXComponents } from 'mdx/types'
+import { forwardRef } from 'react'
 
 
-const defaultComponents = {
-  Image,
+/**
+ * Create lightweight wrapper components to satisfy MDXComponents type
+ */
+const WrappedLink = ({ href, children }: { href: string, children: React.ReactNode }) => {
+  return (
+    <Link href={href}>
+      children
+    </Link>
+  )
+}
+
+const WrappedArrowDown = ({ size }: { size: number }) => {
+  return (
+    <ArrowDown size={size} />
+  )
+}
+
+
+
+// Add any components used in MDX files here.
+// Components here load dynamically if they're used.
+// See https://github.com/tsriram/with-mdx-bundler for details.
+const components: MDXComponents = {
   Callout,
   FileName,
   Centerer,
   MultiChoice,
-  Link,
-  ArrowDown,
+  Link: WrappedLink,
+  ArrowDown: WrappedArrowDown,
   NextArticleButton,
   // PrevArticleButton,
   ArticleButtonContainer
 }
 
-// Add any components used in MDX files here.
-// Components here load dynamically if they're used.
-// See https://github.com/tsriram/with-mdx-bundler for details.
-const components = { ...defaultComponents }
-
 export async function getStaticPaths() {
   const paths = allArticleTypes.map((a) => ({ params: { slug: a.slug } }))
   return {
