Update dependencies and fix introduced errors

@types/mdx.d.ts

@@ -1,37 +1,14 @@
 declare module '@mdx-js/react' {
 	import * as React from 'react';
-	type ComponentType =
-		| 'a'
-		| 'blockquote'
-		| 'code'
-		| 'del'
-		| 'em'
-		| 'h1'
-		| 'h2'
-		| 'h3'
-		| 'h4'
-		| 'h5'
-		| 'h6'
-		| 'hr'
-		| 'img'
-		| 'inlineCode'
-		| 'li'
-		| 'ol'
-		| 'p'
-		| 'pre'
-		| 'strong'
-		| 'sup'
-		| 'table'
-		| 'td'
-		| 'thematicBreak'
-		| 'tr'
-		| 'ul';
+
 	export type Components = {
-		[key in ComponentType]?: React.ComponentType<any>;
+		[key]?: React.ComponentType<any>;
 	};
+
 	export interface MDXProviderProps {
 		children: React.ReactNode;
-		components: Components;
+		components?: Components;
 	}
+	
 	export class MDXProvider extends React.Component<MDXProviderProps> {}
 }

components/Button/index.tsx

@@ -1,24 +1,17 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
-import { Btn } from './styles';
-import Link from 'next/link';
+import { StyledButton } from './styles';
 
-const Button: FC<Props & { className?: string }> = ({
+const Button = ({
 	variant = 'text',
 	href,
 	target,
 	onClick,
 	children,
 	className
-}) => {
-	return (
-		<Link href={href} passHref>
-			<Btn as='a' target={target} variant={variant} onClick={onClick} className={className}>
-				{children}
-			</Btn>
-		</Link>
-	);
-};
+}: Props) => (
+	<StyledButton href={href} target={target} className={className} onClick={onClick} variant={variant}>
+		{children}
+	</StyledButton>
+);
 
 export default Button;

components/Button/styles.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Props } from './types';
 
-export const Btn = styled.button<Omit<Props, 'href'>>`
+export const StyledButton = styled(Link)<Props>`
 	position: relative;
 	display: inline;
 	cursor: pointer;

components/Button/types.ts

@@ -3,4 +3,6 @@ export type Props = {
 	href: string;
 	target?: HTMLAnchorElement['target'];
 	onClick?: () => void;
+	children: React.ReactNode;
+	className?: string;
 };

components/Card/index.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { StyledCard } from './styles';
 import Image from 'next/image';
-import Link from 'next/link';
 
 interface Props {
 	title: string;
@@ -15,26 +14,24 @@ interface Props {
 
 const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
 	return (
-		<Link href={href} passHref>
-			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
-				<div className='card-content'>
-					<h3>{title}</h3>
-					<p>{description}</p>
-					{tags && (
-						<div className='tags-wrapper'>
-							{tags.map((tag, index) => (
-								<span key={index}>#{tag}&nbsp;</span>
-							))}
-						</div>
-					)}
-				</div>
-				{image && (
-					<div className='card-image'>
-						<Image src={image} layout='fill' objectFit='cover' />
+		<StyledCard href={href} onClick={onClick} image={!!image} target={target}>
+			<div className='card-content'>
+				<h3>{title}</h3>
+				<p>{description}</p>
+				{tags && (
+					<div className='tags-wrapper'>
+						{tags.map((tag, index) => (
+							<span key={index}>#{tag}&nbsp;</span>
+						))}
 					</div>
 				)}
-			</StyledCard>
-		</Link>
+			</div>
+			{image && (
+				<div className='card-image'>
+					<Image alt={title} src={image} fill />
+				</div>
+			)}
+		</StyledCard>
 	);
 };
 

components/Card/styles.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import Link from 'next/link';
 
-export const StyledCard = styled.div<{ image: boolean }>`
+export const StyledCard = styled(Link)<{ image: boolean }>`
 	cursor: pointer;
 	width: 100%;
 	display: grid;

components/CodeBlock/index.tsx

@@ -3,7 +3,7 @@ import Highlight, { defaultProps, Language } from 'prism-react-renderer';
 import theme from 'prism-react-renderer/themes/vsDark';
 import { Line, LineContent, LineNo, Pre } from './styles';
 
-const CodeBlock: FC<{ className: string }> = ({ children, className }) => {
+const CodeBlock: FC<{ className: string, children: React.ReactNode }> = ({ children, className }) => {
 	const language = className.replace(/language-/, '') as Language;
 
 	return (

components/GlobalStyles.tsx

@@ -39,7 +39,7 @@ const GlobalStyles = createGlobalStyle`
 	}
 
 	* {
-    color: var(--text);
+    	color: var(--text);
 	}
 	
 	ul, ol {
@@ -67,6 +67,10 @@ const GlobalStyles = createGlobalStyle`
 	body::-webkit-scrollbar-thumb {
 		background-color: var(--text) !important;
 	}
+
+	a {
+		text-decoration: none;
+	}
 `;
 
 export default GlobalStyles;

components/IconButton.tsx

@@ -12,7 +12,7 @@ interface Props {
 	onClick?: () => void;
 }
 
-const Btn = styled.button`
+const Btn = styled(Link)`
 	cursor: pointer;
 	background: none;
 	border: none;
@@ -30,15 +30,13 @@ const IconButton: FC<Props & { className?: string }> = ({
 	height = 24
 }) => {
 	return !href ? (
-		<Btn onClick={onClick} className={className}>
-			<Image src={icon} width={width} height={height} />
+		<Btn href='#' onClick={onClick} className={className}>
+			<Image alt='' src={icon} width={width} height={height} />
 		</Btn>
 	) : (
-		<Link href={href} passHref>
-			<Btn as='a' target={target} onClick={onClick} className={className}>
-				<Image src={icon} width={width} height={height} />
-			</Btn>
-		</Link>
+		<Btn href={href} target={target} onClick={onClick} className={className}>
+			<Image alt='' src={icon} width={width} height={height} />
+		</Btn>
 	);
 };
 

components/MDXButton/index.tsx

@@ -1,10 +1,9 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
-import Link from 'next/link';
 
-const MDXButton: FC<Props & { className?: string }> = ({
+const MDXButton = ({
 	variant = 'text',
 	type = 'button',
 	link,
@@ -12,25 +11,23 @@ const MDXButton: FC<Props & { className?: string }> = ({
 	children,
 	disabled,
 	className
-}) => {
+}: Props) => {
 	const { mode } = useContext(ThemeContext);
 
 	return link ? (
-		<Link href={link} passHref>
-			<Btn
-				as='a'
-				target={target}
-				variant={variant}
-				type={type}
-				mode={mode}
-				disabled={disabled}
-				className={className}
-			>
-				{children}
-			</Btn>
-		</Link>
+		<Btn
+			href={link}
+			target={target}
+			variant={variant}
+			type={type}
+			mode={mode}
+			disabled={disabled}
+			className={className}
+		>
+			{children}
+		</Btn>
 	) : (
-		<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
+		<Btn href="#" variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
 		</Btn>
 	);

components/MDXButton/styles.tsx

@@ -1,7 +1,8 @@
+import Link from 'next/link';
 import styled from 'styled-components';
 import { Props } from './types';
 
-export const Btn = styled.button<Props>`
+export const Btn = styled(Link)<Props>`
 	cursor: pointer;
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};

components/MDXButton/types.ts

@@ -5,4 +5,6 @@ export type Props = {
 	target?: HTMLAnchorElement['target'];
 	mode?: string;
 	disabled?: boolean;
+	className?: string;
+	children: React.ReactNode;
 };

components/Nav/index.tsx

@@ -13,17 +13,15 @@ const Nav: FC = () => {
 
 	return (
 		<Bar>
-			<Link href='/' passHref>
-				<a className='logo'>
-					<Image
-						className='logo-image'
-						src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
-						alt='Logo Image'
-						width={48}
-						height={48}
-					/>
-					<h1>Hazem Krimi</h1>
-				</a>
+			<Link className='logo' href='/'>
+				<Image
+					className='logo-image'
+					src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
+					alt='Logo Image'
+					width={48}
+					height={48}
+				/>
+				<h1>Hazem Krimi</h1>
 			</Link>
 			<div className='buttons'>
 				<IconButton

components/index.ts

@@ -1,14 +0,0 @@
-import { CodePen, Gist, YouTube, CodeSandbox, Vimeo, Tweet } from 'mdx-embed';
-import Image from 'next/image';
-import MDXButton from './MDXButton';
-
-export default {
-	Button: MDXButton,
-	Image,
-	CodePen,
-	Gist,
-	Vimeo,
-	CodeSandbox,
-	Tweet,
-	YouTube
-};

next.config.js

@@ -1,5 +1,8 @@
 const withMDX = require('@next/mdx')({
-	extension: /\.mdx?$/
+	extension: /\.mdx?$/,
+	options: {
+		providerImportSource: '@mdx-js/react'
+	}
 });
 
 module.exports = withMDX({

package.json

@@ -8,28 +8,28 @@
     "start": "next start"
   },
   "dependencies": {
-    "@formspree/react": "^2.2.3",
-    "@mdx-js/loader": "^1.6.22",
-    "@next/mdx": "^12.0.8",
-    "gray-matter": "^4.0.2",
-    "mdx-embed": "^0.0.22",
-    "next": "^12.0.8",
-    "next-mdx-remote": "^3.0.8",
+    "@formspree/react": "^2.4.1",
+    "@mdx-js/loader": "^2.3.0",
+    "@next/mdx": "^13.2.4",
+    "gray-matter": "^4.0.3",
+    "mdx-embed": "^1.1.2",
+    "next": "^13.2.4",
+    "next-mdx-remote": "^4.4.1",
     "nprogress": "^0.2.0",
-    "prism-react-renderer": "^1.1.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "reading-time": "^1.4.0",
-    "styled-components": "^5.2.1"
+    "prism-react-renderer": "^1.3.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "reading-time": "^1.5.0",
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
-    "@types/node": "^17.0.8",
+    "@types/node": "^18.15.3",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "^17.0.38",
-    "@types/styled-components": "^5.1.20",
-    "babel-plugin-styled-components": "^2.0.2",
+    "@types/react": "^18.0.28",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
     "babel-runtime": "^6.26.0",
-    "typescript": "^4.5.4"
+    "typescript": "^5.0.2"
   },
   "engines": {
     "node": ">=14.x"

pages/blog/[slug].tsx

@@ -8,7 +8,6 @@ import { GetStaticPaths, GetStaticProps } from 'next';
 import { serialize } from 'next-mdx-remote/serialize';
 import { Wrapper } from '../../styles/blog/slug';
 import matter from 'gray-matter';
-import components from '../../components';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
@@ -24,6 +23,8 @@ interface Props {
 const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 	const router = useRouter();
 	const stats = readingTime(text);
+	const htmlOverrides = { code: CodeBlock };
+	const mdxComponents = {};
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -83,15 +84,15 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 					) : null}
 					{frontMatter?.image ? (
 						<div className='image'>
-							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
+							<Image alt={frontMatter?.title} src={frontMatter.image} fill />
 						</div>
 					) : null}
 					<hr />
 				</div>
-				<MDXProvider components={{ code: CodeBlock }}>
+				<MDXProvider components={{ ...htmlOverrides, ...mdxComponents }}>
 					<MDXEmbedProvider>
 						<div className='content'>
-							<MDXRemote {...source} components={components} />
+							<MDXRemote {...source} />
 						</div>
 					</MDXEmbedProvider>
 				</MDXProvider>

pages/portfolio/[slug].tsx

@@ -3,11 +3,9 @@ import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/
 import { useRouter } from 'next/router';
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { MDXProvider } from '@mdx-js/react';
-import { MDXEmbedProvider } from 'mdx-embed';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import { serialize } from 'next-mdx-remote/serialize';
 import matter from 'gray-matter';
-import components from '../../components';
 import { Wrapper } from '../../styles/portfolio/slug';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
@@ -22,6 +20,8 @@ interface Props {
 
 const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	const router = useRouter();
+	const htmlOverrides = { code: CodeBlock };
+	const mdxComponents = { Button: MDXButton };
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -78,26 +78,24 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 					) : null}
 					{frontMatter?.image && !frontMatter?.hideImage ? (
 						<div className='image'>
-							<Image src={frontMatter?.image} width='100%' height='100%' layout='responsive' />
+							<Image alt={frontMatter?.title} src={frontMatter?.image} fill />
 						</div>
 					) : null}
 					<hr />
 				</div>
-				<MDXProvider components={{ code: CodeBlock }}>
-					<MDXEmbedProvider>
-						<div className='content'>
-							<MDXRemote {...source} components={components} />
-							<h1>Showcase</h1>
-							<div className='showcase-buttons'>
-								<MDXButton variant='action' link={frontMatter?.demo} target='_blank'>
-									Demo
-								</MDXButton>
-								<MDXButton variant='outline' link={frontMatter?.code} target='_blank'>
-									Source Code
-								</MDXButton>
-							</div>
+				<MDXProvider components={{ ...htmlOverrides, ...mdxComponents }}>
+					<div className='content'>
+						<MDXRemote {...source} />
+						<h1>Showcase</h1>
+						<div className='showcase-buttons'>
+							<MDXButton variant='action' link={frontMatter?.demo} target='_blank'>
+								Demo
+							</MDXButton>
+							<MDXButton variant='outline' link={frontMatter?.code} target='_blank'>
+								Source Code
+							</MDXButton>
 						</div>
-					</MDXEmbedProvider>
+					</div>
 				</MDXProvider>
 			</Wrapper>
 		</>