remove contentful dependency. step 1

Author: codegino

src/app/about/page.tsx

@@ -1,14 +1,12 @@
 import {FALLBACK_LOCALE, Locales} from '@/app/i18n/settings';
-import {EntryFieldTypes} from 'contentful';
 import dompurify from 'isomorphic-dompurify';
 import type {Metadata, NextPage} from 'next';
 import dynamicImport from 'next/dynamic';
 import AboutMeHero from '../../components/AboutMeHero';
 import NextLink from '../../components/basic/NextLink';
 import {newCommonMetaTags} from '../../frontend-utils/meta-tags';
-import type {StaticContent} from '../../models/static-content';
-import {client, getBlurringImage} from '../../utils/contentful.utils';
-import {mapLocale} from '../i18n/map-locale.util';
+import {getBlurringImage} from '../../utils/contentful.utils';
+import {aboutMeData} from '@/models/static-content';
 
 const TechStackCarousel = dynamicImport(
   () => import('../../components/TechStackCarousel'),
@@ -23,7 +21,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 const AboutMePage: NextPage = async () => {
   const {
-    props: {aboutMeDetails, img, svg, techStacks},
+    props: {aboutMeDetails, img, svg},
   } = await getStaticProps();
   return (
     <>
@@ -49,24 +47,6 @@ const AboutMePage: NextPage = async () => {
           })}
         </article>
 
-        <h2 className="text-center">This website is powered by</h2>
-        <TechStackCarousel techStacks={techStacks} />
-
-        <section className="mb-2 mt-4">
-          <h4 className="text-center">
-            This awesome carousel is easily made using&nbsp;
-            <NextLink
-              href="https://github.com/leandrowd/react-responsive-carousel"
-              target="_blank"
-              aria-label="React Responsive Carousel"
-              rel="noreferrer"
-              className="text-primary-900 dark:text-primary-300"
-            >
-              React Responsive Carousel
-            </NextLink>
-            .
-          </h4>
-        </section>
         <section className="pb-8">
           <h4 className="text-center">
             Here is the link to my&nbsp;
@@ -86,45 +66,15 @@ const AboutMePage: NextPage = async () => {
   );
 };
 
-type StaticAssetSkeleton = {
-  contentTypeId: 'staticText';
-  fields: {
-    key: EntryFieldTypes.Text;
-    content: EntryFieldTypes.Text;
-    category: EntryFieldTypes.Text;
-    label: EntryFieldTypes.Text;
-    order: EntryFieldTypes.Number;
-  };
-};
-
 const getStaticProps = async () => {
-  const entries = await client.getEntries<StaticAssetSkeleton, Locales>({
-    content_type: 'staticText',
-    'fields.category': 'about_me',
-    order: ['fields.order'],
-    locale: mapLocale(FALLBACK_LOCALE),
-  });
+  // Use local about me data instead of Contentful
+  const aboutMeDetails = aboutMeData.sort((a, b) => a.order - b.order);
 
   const {img, svg} = await getBlurringImage('batman_cover.png');
 
-  const assets = await client.getAssets<Locales>({
-    'fields.title[in]': [
-      'React,TypeScript,NextJS,Prettier,ESLint,Emotion,Supabase,GitHub,Vercel',
-    ],
-  });
-
-  const techStacks = assets.items.map(asset => ({
-    ...asset,
-    name: asset.fields.title as string,
-    url: asset.fields.file?.url as string,
-  }));
-
   return {
     props: {
-      aboutMeDetails: entries.items.map(
-        entry => entry.fields,
-      ) as StaticContent[],
-      techStacks,
+      aboutMeDetails,
       img,
       svg,
     },

src/app/novel/[slug]/page.tsx

@@ -7,27 +7,23 @@ import BlogContent from '@/modules/blog/BlogContent';
 import BlogHeader from '@/modules/blog/BlogHeader';
 import ContentLayout from '@/modules/common/ContentLayout';
 import {getNovelsMetadata, NOVELS_PATH} from '@/utils/mdx.utils';
-import {client} from '@/utils/contentful.utils';
 import {blurImage} from '@/utils/image-blur.utils';
 import BlogFooter from '@/modules/blog/BlogFooter';
 import {newCommonMetaTags} from '@/frontend-utils/meta-tags';
 import Script from 'next/script';
+import {getImageUrl} from '@/utils/get-image';
 
-export const generateMetadata = async (
-  props: {
-    params: Promise<{slug: string}>;
-  }
-): Promise<Metadata> => {
+export const generateMetadata = async (props: {
+  params: Promise<{slug: string}>;
+}): Promise<Metadata> => {
   const params = await props.params;
   const postFilePath = path.join(NOVELS_PATH, `${params.slug}.mdx`);
   const source = fs.readFileSync(postFilePath);
 
   const {data: novel} = matter(source);
   novel.slug = params.slug;
 
-  const asset = await client.getAsset(novel.bannerId);
-
-  const bannerUrl = `https:${asset.fields.file?.url}`;
+  const bannerUrl = getImageUrl('codecraft.jpeg');
 
   return {
     ...newCommonMetaTags(novel.title, `/novel/${novel.slug}`),
@@ -58,9 +54,7 @@ const BlogPage: NextPage<{
 }> = async props => {
   const params = await props.params;
 
-  const {
-    slug
-  } = params;
+  const {slug} = params;
 
   const {
     frontMatter: novel,
@@ -120,10 +114,8 @@ const getStaticProps = async (slug: string) => {
   const source = fs.readFileSync(postFilePath);
 
   const {content, data} = matter(source);
+  const bannerUrl = getImageUrl('codecraft.jpeg');
 
-  const banner = await client.getAsset(data.bannerId);
-
-  const bannerUrl = `https:${banner.fields.file?.url}`;
   const {img, svg} = await blurImage(bannerUrl);
 
   return {

src/app/novel/page.tsx

@@ -3,9 +3,9 @@ import SubscribeForm from '@/components/SubscribeForm';
 import {newCommonMetaTags} from '@/frontend-utils/meta-tags';
 import type {INovelMetadata} from '@/models/mdxFiles';
 import {getNovelsMetadata} from '@/utils/mdx.utils';
-import {client} from '@/utils/contentful.utils';
 import NovelsWrapper from './NovelsWrapper';
 import {createTranslation} from '../i18n/server';
+import {getImageUrl} from '@/utils/get-image';
 
 export const metadata = {
   ...newCommonMetaTags('Novels Page', '/novel'),
@@ -37,10 +37,7 @@ const getStaticProps = async () => {
   );
 
   for (let blog of novels) {
-    const asset = await client.getAsset(blog.bannerId);
-
-    const bannerUrl = `https:${asset.fields.file?.url}`;
-    blog.bannerId = bannerUrl;
+    blog.bannerId = getImageUrl('codecraft.jpeg');
   }
 
   return {