add blog feature

.contentlayer/.cache/v0.3.4/compiled-contentlayer-config-BWCTWV7G.mjs

@@ -0,0 +1,62 @@
+// contentlayer.config.js
+import {
+  defineNestedType,
+  defineDocumentType,
+  makeSource
+} from "contentlayer/source-files";
+var Project = defineDocumentType(() => ({
+  name: "Project",
+  filePathPattern: `projects/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: {
+      type: "string",
+      description: "The title of the project",
+      required: true
+    },
+    location: {
+      type: "string",
+      description: "The location of the project",
+      required: true
+    },
+    date: {
+      type: "string",
+      description: "The date of the project",
+      required: true
+    },
+    image: {
+      type: "string",
+      description: "The feature image of the project",
+      required: true
+    },
+    client: {
+      type: "string",
+      description: "The client of the project",
+      required: true
+    },
+    role: {
+      type: "string",
+      description: "The role of the project",
+      required: true
+    },
+    year: {
+      type: "string",
+      description: "The year of the project",
+      required: true
+    }
+  },
+  computedFields: {
+    url: {
+      type: "string",
+      resolve: (doc) => `/${doc._raw.flattenedPath}`
+    }
+  }
+}));
+var contentlayer_config_default = makeSource({
+  contentDirPath: "content",
+  documentTypes: [Project]
+});
+export {
+  contentlayer_config_default as default
+};
+//# sourceMappingURL=compiled-contentlayer-config-BWCTWV7G.mjs.map

.contentlayer/.cache/v0.3.4/compiled-contentlayer-config-BWCTWV7G.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../contentlayer.config.js"],
+  "sourcesContent": ["import {\r\n    defineNestedType,\r\n    defineDocumentType,\r\n    makeSource,\r\n} from \"contentlayer/source-files\";\r\n\r\nconst Project = defineDocumentType(() => ({\r\n    name: \"Project\",\r\n    filePathPattern: `projects/*.mdx`,\r\n    contentType: \"mdx\",\r\n    fields: {\r\n        title: {\r\n            type: \"string\",\r\n            description: \"The title of the project\",\r\n            required: true,\r\n        },\r\n        location: {\r\n            type: \"string\",\r\n            description: \"The location of the project\",\r\n            required: true,\r\n        },\r\n        date: {\r\n            type: \"string\",\r\n            description: \"The date of the project\",\r\n            required: true,\r\n        },\r\n        image: {\r\n            type: \"string\",\r\n            description: \"The feature image of the project\",\r\n            required: true,\r\n        },\r\n        client: {\r\n            type: \"string\",\r\n            description: \"The client of the project\",\r\n            required: true,\r\n        },\r\n        role: {\r\n            type: \"string\",\r\n            description: \"The role of the project\",\r\n            required: true,\r\n        },\r\n        year: {\r\n            type: \"string\",\r\n            description: \"The year of the project\",\r\n            required: true,\r\n        },\r\n    },\r\n    computedFields: {\r\n        url: {\r\n            type: \"string\",\r\n            resolve: (doc) => `/${doc._raw.flattenedPath}`,\r\n        },\r\n    },\r\n}));\r\n\r\nexport default makeSource({\r\n    contentDirPath: \"content\",\r\n    documentTypes: [Project],\r\n});\r\n"],
+  "mappings": ";AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,IAAM,UAAU,mBAAmB,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,QAAQ;AAAA,IACJ,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACZ,KAAK;AAAA,MACD,MAAM;AAAA,MACN,SAAS,CAAC,QAAQ,IAAI,IAAI,KAAK,aAAa;AAAA,IAChD;AAAA,EACJ;AACJ,EAAE;AAEF,IAAO,8BAAQ,WAAW;AAAA,EACtB,gBAAgB;AAAA,EAChB,eAAe,CAAC,OAAO;AAC3B,CAAC;",
+  "names": []
+}

.contentlayer/generated/Project/_index.mjs

@@ -0,0 +1,9 @@
+// NOTE This file is auto-generated by Contentlayer
+
+import projects__contemporaryBeachfrontVillaMdx from './projects__contemporary-beachfront-villa.mdx.json' assert { type: 'json' }
+import projects__highTechSmartHomeMdx from './projects__high-tech-smart-home.mdx.json' assert { type: 'json' }
+import projects__modernEcoFriendlyResidenceMdx from './projects__modern-eco-friendly-residence.mdx.json' assert { type: 'json' }
+import projects__sustainableOfficeBuildingMdx from './projects__sustainable-office-building.mdx.json' assert { type: 'json' }
+import projects__urbanLoftRenovationMdx from './projects__urban-loft-renovation.mdx.json' assert { type: 'json' }
+
+export const allProjects = [projects__contemporaryBeachfrontVillaMdx, projects__highTechSmartHomeMdx, projects__modernEcoFriendlyResidenceMdx, projects__sustainableOfficeBuildingMdx, projects__urbanLoftRenovationMdx]

.contentlayer/generated/index.d.ts

@@ -0,0 +1,12 @@
+// NOTE This file is auto-generated by Contentlayer
+
+import { Project, DocumentTypes, DataExports } from './types'
+import { SourceProvideSchemaErrorJSON, SourceFetchDataErrorJSON } from 'contentlayer/core'
+
+export * from './types'
+
+export declare const allProjects: Project[]
+
+export declare const allDocuments: DocumentTypes[]
+
+

.contentlayer/generated/index.mjs

@@ -0,0 +1,13 @@
+// NOTE This file is auto-generated by Contentlayer
+
+export { isType } from 'contentlayer/client'
+
+// NOTE During development Contentlayer imports from `.mjs` files to improve HMR speeds.
+// During (production) builds Contentlayer it imports from `.json` files to improve build performance.
+import { allProjects } from './Project/_index.mjs'
+
+export { allProjects }
+
+export const allDocuments = [...allProjects]
+
+

.contentlayer/generated/types.d.ts

@@ -0,0 +1,78 @@
+// NOTE This file is auto-generated by Contentlayer
+
+import type { Markdown, MDX, ImageFieldData, IsoDateTimeString } from 'contentlayer/core'
+import * as Local from 'contentlayer/source-files'
+
+export { isType } from 'contentlayer/client'
+
+export type { Markdown, MDX, ImageFieldData, IsoDateTimeString }
+
+/** Document types */
+export type Project = {
+  /** File path relative to `contentDirPath` */
+  _id: string
+  _raw: Local.RawDocumentData
+  type: 'Project'
+  /** The title of the project */
+  title: string
+  /** The location of the project */
+  location: string
+  /** The date of the project */
+  date: string
+  /** The feature image of the project */
+  image: string
+  /** The client of the project */
+  client: string
+  /** The role of the project */
+  role: string
+  /** The year of the project */
+  year: string
+  /** MDX file body */
+  body: MDX
+  url: string
+}  
+
+/** Nested types */
+
+
+/** Helper types */
+
+export type AllTypes = DocumentTypes | NestedTypes
+export type AllTypeNames = DocumentTypeNames | NestedTypeNames
+
+export type DocumentTypes = Project
+export type DocumentTypeNames = 'Project'
+
+export type NestedTypes = never
+export type NestedTypeNames = never
+
+export type DataExports = {
+  allDocuments: DocumentTypes[]
+  allProjects: Project[]
+}
+
+
+export interface ContentlayerGenTypes {
+  documentTypes: DocumentTypes
+  documentTypeMap: DocumentTypeMap
+  documentTypeNames: DocumentTypeNames
+  nestedTypes: NestedTypes
+  nestedTypeMap: NestedTypeMap
+  nestedTypeNames: NestedTypeNames
+  allTypeNames: AllTypeNames
+  dataExports: DataExports
+}
+
+declare global {
+  interface ContentlayerGen extends ContentlayerGenTypes {}
+}
+
+export type DocumentTypeMap = {
+  Project: Project
+}
+
+export type NestedTypeMap = {
+
+}
+
+

.contentlayer/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dot-contentlayer",
+  "description": "This package is auto-generated by Contentlayer",
+  "version": "0.0.0-BWCTWV7G",
+  "exports": {
+    "./generated": {
+      "import": "./generated/index.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "generated": [
+        "./generated"
+      ]
+    }
+  }
+}

app/projects/[slug]/ProjectContent.jsx

@@ -0,0 +1,136 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { allProjects } from "contentlayer/generated";
+import { compareDesc, format, parseISO } from "date-fns";
+import { motion } from "framer-motion";
+import { getMDXComponent } from "next-contentlayer/hooks";
+import PostCard from "@/components/Projects/PostCard/index.jsx";
+import styles from "./styles.module.css";
+
+const ProjectContent = ({ project }) => {
+    const projects = allProjects.sort((a, b) =>
+        compareDesc(new Date(a.date), new Date(b.date))
+    );
+
+    let MDXContent;
+
+    if (!projects) return null;
+
+    if (!project) {
+        console.log("Post not found");
+    } else {
+        MDXContent = getMDXComponent(project.body.code);
+    }
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 0 }}
+            whileInView={{
+                opacity: 1,
+                y: 0,
+                transition: { delay: 0.2, duration: 0.5 },
+            }}
+            viewport={{ once: true }}
+            className={styles.main}
+        >
+            <div className={styles.main_nav}>
+                <Link href="/projects">
+                    <h2>Projects.</h2>
+                </Link>
+            </div>
+            <div className={styles.article}>
+                <div className={styles.article_heading}>
+                    <div className={styles.article_title}>
+                        <h1>{project.title}</h1>
+                    </div>
+                    <div className={styles.article_info}>
+                        <p>
+                            <span className={styles.date_role}>
+                                <span>
+                                    {format(
+                                        parseISO(project.date),
+                                        "LLL d, yyyy"
+                                    )}
+                                </span>
+                                <span>•</span>
+                                <span>{project.role}</span>
+                            </span>
+                        </p>
+                    </div>
+                </div>
+                <div className={styles.imageWrapper}>
+                    <Image
+                        src={project.image}
+                        width={1065}
+                        height={644}
+                        className="object-cover object-top"
+                        alt={project.title}
+                    />
+                </div>
+                <article className={styles.article_content}>
+                    <div className={styles.work}>
+                        <div className={styles.work_info}>
+                            <div className={styles.title_name}>
+                                <div className={styles.title}>
+                                    <p>Client</p>
+                                </div>
+                                <div className={styles.name}>
+                                    {project.client}
+                                </div>
+                            </div>
+
+                            <div className={styles.title_name}>
+                                <div className={styles.title}>
+                                    <p>Year</p>
+                                </div>
+                                <div className={styles.name}>
+                                    {project.year}
+                                </div>
+                            </div>
+
+                            <div className={styles.title_name}>
+                                <div className={styles.title}>
+                                    <p>Role</p>
+                                </div>
+                                <div className={styles.name}>
+                                    {project.role}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <MDXContent />
+                </article>
+            </div>
+
+            {/* More Projects*/}
+            <div className="max-w-4xl mx-auto mt-20 lg:mt-32">
+                <h2 className="text-2xl text-gray-700 mb-10">More Projects</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                    {projects
+                        .filter((a) => project.title !== a.title)
+                        .map((item, idx) => {
+                            if (idx > 2) return null;
+                            return (
+                                <PostCard
+                                    key={idx}
+                                    index={idx}
+                                    project={item}
+                                />
+                            );
+                        })}
+                </div>
+                <div className="flex justify-center mt-10">
+                    <Link
+                        href="/projects"
+                        className="transition-all duration-300 ease-in-out text-[11.5px] tracking-[2px] font-bold uppercase bg-violet-600 py-4 px-5 text-white hover:bg-white hover:text-violet-600 hover:shadow-2xl"
+                    >
+                        View all projects
+                    </Link>
+                </div>
+            </div>
+        </motion.div>
+    );
+};
+
+export default ProjectContent;

app/projects/[slug]/page.jsx

@@ -0,0 +1,29 @@
+import { allProjects } from "contentlayer/generated";
+import ProjectContent from "./ProjectContent";
+
+export async function generateStaticParams() {
+    const projects = await allProjects;
+    return projects.map((project) => ({ slug: project.slug }));
+}
+
+export const generateMetadata = async ({ params }) => {
+    const project = allProjects.find(
+        (project) => project._raw.flattenedPath === "projects/" + params.slug
+    );
+
+    return { title: project?.title, excerpt: project?.excerpt };
+};
+
+const ProjectLayout = ({ params }) => {
+    const project = allProjects.find(
+        (project) => project._raw.flattenedPath === "projects/" + params.slug
+    );
+
+    return (
+        <>
+            <ProjectContent project={project} />
+        </>
+    );
+};
+
+export default ProjectLayout;