netlify-templates · nisabmohd · Oct 15, 2024
diff --git a/components/CustomImage.js b/components/CustomImage.js
@@ -0,0 +1,21 @@
+import Image from 'next/image';
+
+export default function CustomImage({
+  src,
+  alt = 'alt',
+  width = 800,
+  height = 350,
+  ...props
+}) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      // Set quality as per need
+      quality={70}
+      {...props}
+    />
+  );
+}
diff --git a/components/CustomLink.js b/components/CustomLink.js
@@ -1,9 +1,5 @@
 import Link from 'next/link';
 
 export default function CustomLink({ as, href, ...otherProps }) {
-  return <>
-    <Link as={as} href={href} {...otherProps}>
-
-    </Link>
-  </>;
+  return <Link as={as} href={href} {...otherProps} />;
 }
diff --git a/pages/_document.js b/pages/_document.js
@@ -7,7 +7,7 @@ class MyDocument extends Document {
       <Html lang="en" className="theme-compiled">
         <Head />
         <body
-          className={`antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base`}
+          className={`antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base font-secondary`}
         >
           <Main />
           <NextScript />

diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -15,6 +15,7 @@ import Footer from '../../components/Footer';
 import Header from '../../components/Header';
 import Layout, { GradientBackground } from '../../components/Layout';
 import SEO from '../../components/SEO';
+import CustomImage from '../../components/CustomImage';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
@@ -26,6 +27,7 @@ const components = {
   // useful for conditionally loading components for certain routes.
   // See the notes in README.md for more details.
   Head,
+  img: CustomImage,
 };
 
 export default function PostPage({
@@ -52,40 +54,38 @@ export default function PostPage({
           )}
         </header>
         <main>
-          <article className="prose dark:prose-dark">
+          <article className="prose dark:prose-invert prose-img:rounded-md prose-headings:font-primary !max-w-full">
             <MDXRemote {...source} components={components} />
           </article>
         </main>
         <div className="grid mt-12 md:grid-cols-2 lg:-mx-24">
           {prevPost && (
-            (<Link
+            <Link
               href={`/posts/${prevPost.slug}`}
-              className="flex flex-col px-10 py-8 text-center transition bg-white border border-gray-800 md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg first last:rounded-b-lg backdrop-blur-lg dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 dark:border-white border-opacity-10 dark:border-opacity-10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none">
-
+              className="flex flex-col px-10 py-8 text-center transition bg-white border border-gray-800 md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg first last:rounded-b-lg backdrop-blur-lg dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 dark:border-white border-opacity-10 dark:border-opacity-10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none"
+            >
               <p className="mb-4 text-gray-500 uppercase dark:text-white dark:opacity-60">
                 Previous
               </p>
               <h4 className="mb-6 text-2xl text-gray-700 dark:text-white">
                 {prevPost.title}
               </h4>
               <ArrowIcon className="mx-auto mt-auto transform rotate-180 md:mr-0" />
-
-            </Link>)
+            </Link>
           )}
           {nextPost && (
-            (<Link
+            <Link
               href={`/posts/${nextPost.slug}`}
-              className="flex flex-col px-10 py-8 text-center transition bg-white border border-t-0 border-b-0 border-gray-800 md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 dark:border-white border-opacity-10 dark:border-opacity-10 first:border-t first:rounded-t-lg md:border-t last:border-b">
-
+              className="flex flex-col px-10 py-8 text-center transition bg-white border border-t-0 border-b-0 border-gray-800 md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 dark:border-white border-opacity-10 dark:border-opacity-10 first:border-t first:rounded-t-lg md:border-t last:border-b"
+            >
               <p className="mb-4 text-gray-500 uppercase dark:text-white dark:opacity-60">
                 Next
               </p>
               <h4 className="mb-6 text-2xl text-gray-700 dark:text-white">
                 {nextPost.title}
               </h4>
               <ArrowIcon className="mx-auto mt-auto md:ml-0" />
-
-            </Link>)
+            </Link>
           )}
         </div>
       </article>

diff --git a/posts/example-post.mdx b/posts/example-post.mdx
@@ -96,6 +96,10 @@ var foo = function (bar) {
 console.log(foo(5));
 ```
 
+Images
+
+![example-img](/example-img.avif "a title")
+
 ## Tables
 
 | Option | Description                                                               |

diff --git a/public/example-img.avif b/public/example-img.avif
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,17 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@tailwind variants;
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-primary);
-}
-
-body {
-  font-family: var(--font-secondary);
-}
+@tailwind variants;