feat: new about page and new changelog

contentlayer.config.ts

@@ -2,21 +2,23 @@ import { defineDocumentType, makeSource } from "contentlayer/source-files";
 
 export const Change = defineDocumentType(() => ({
   name: "Change",
-  filePathPattern: `**/*.md`,
+  filePathPattern: `changelog/**/*.md`,
   fields: {
     title: { type: "string", required: true },
     date: { type: "date", required: true },
     version: { type: "string", required: true },
   },
-  computedFields: {
-    url: {
-      type: "string",
-      resolve: (change) => `/change/${change._raw.flattenedPath}`,
-    },
+}));
+
+export const About = defineDocumentType(() => ({
+  name: "About",
+  filePathPattern: `about/**/*.md`,
+  fields: {
+    title: { type: "string", required: true },
   },
 }));
 
 export default makeSource({
-  contentDirPath: "src/app/changelog/content",
-  documentTypes: [Change],
+  contentDirPath: "./src/content",
+  documentTypes: [Change, About],
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chadnext",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "prisma generate && next dev",

src/app/about/opengraph-image.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/server";
+import Logo from "../../../public/chad-next.png";
+
+export const runtime = "edge";
+export const alt = "ChadNext - Quick Starter Template for your Next.js project";
+export const contentType = "image/png";
+
+export default async function OG() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          backgroundImage:
+            "linear-gradient(to bottom right, #E0E7FF 25%, #ffffff 50%, #CFFAFE 75%)",
+        }}
+        tw="h-full w-full flex flex-col items-center justify-center bg-white"
+      >
+        <h1
+          style={{
+            background:
+              "linear-gradient(to bottom right, #000000 21.66%, #78716c 86.47%)",
+            backgroundClip: "text",
+          }}
+          tw="text-8xl font-bold leading-loose text-transparent"
+        >
+          Changelog
+        </h1>
+        <div tw="flex items-center">
+          <img
+            src={process.env.NEXT_PUBLIC_APP_URL + Logo.src}
+            alt="ChadNext Logo"
+            tw="w-10 h-10 opacity-95 mr-4"
+            width={40}
+            height={40}
+          />
+          <h2 tw="text-5xl font-bold leading-loose ">ChadNext</h2>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}

src/app/about/page.tsx

@@ -0,0 +1,34 @@
+import { allAbouts, type About } from "contentlayer/generated";
+import { type Metadata } from "next";
+
+function AboutCard(about: About) {
+  return (
+    <article className="prose prose-slate mb-8 dark:prose-invert">
+      <h2 className="mb-0 text-3xl font-semibold tracking-tight transition-colors ">
+        {about.title}
+      </h2>
+      <div dangerouslySetInnerHTML={{ __html: about.body.html }} />
+    </article>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "About",
+  description: "Learn about the tech stack and inspiration behind ChadNext.",
+};
+
+export default function About() {
+  return (
+    <div className="container min-h-screen py-8">
+      <h1 className="text-4xl font-bold tracking-tight lg:text-5xl">About</h1>
+      <p className="mb-10 mt-2.5 text-xl text-muted-foreground">
+        Learn about the tech stack and inspiration behind ChadNext.
+      </p>
+      <div className="space-y-10">
+        {allAbouts.map((p, i) => (
+          <AboutCard key={i} {...p} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/layout/footer.tsx

@@ -26,8 +26,17 @@ export default function Footer() {
             </Link>
           </p>
         </div>
-        <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
-          <Link href="/changelog" className="font-semibold">
+        <p className="space-x-4 text-center text-sm leading-loose text-muted-foreground md:text-left">
+          <Link
+            href="/about"
+            className="font-semibold hover:underline hover:underline-offset-4"
+          >
+            About
+          </Link>
+          <Link
+            href="/changelog"
+            className="font-semibold hover:underline hover:underline-offset-4"
+          >
             Changelog
           </Link>
         </p>

src/components/sections/open-source.tsx

@@ -1,9 +1,6 @@
 import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 import { siteConfig } from "~/config/site";
-import { cn } from "~/lib/utils";
-import Icons from "../shared/icons";
-import { buttonVariants } from "../ui/button";
 
 export default function OpenSource() {
   return (
@@ -19,13 +16,12 @@ export default function OpenSource() {
           </Balancer>
         </p>
         <Link
-          className={cn(buttonVariants(), "h-auto w-auto gap-x-2.5")}
+          className={" underline underline-offset-8"}
           href={siteConfig.links.github}
           target="_blank"
           rel="noreferrer"
         >
-          <span>Star on</span>
-          <Icons.gitHub width={20} />
+          <span className="font-semibold">Star me</span>, Onii Chan {`>_<`}
         </Link>
       </div>
     </section>

src/content/about/inspiration.md

@@ -0,0 +1,9 @@
+---
+title: Inspiration
+---
+
+- **[Taxonomy](https://tx.shadcn.com/)**
+- **[Shadcn/ui](https://ui.shadcn.com/)**
+- **[Precedent](https://precedent.dev/)**
+- **[Dub](https://dub.sh/)**
+- **[Float UI](https://floatui.com/)**

src/content/about/tech-stack.md

@@ -0,0 +1,15 @@
+---
+title: Tech Stack
+---
+
+- Language: **[Typescript](https://www.typescriptlang.org/)**
+- Framework: **[Next.js](https://nextjs.org/)**
+- Styling: **[Tailwind CSS](https://tailwindcss.com/)** for Styling.
+- Component Library: **[Shadcn/ui](https://ui.shadcn.com/)** for UI components.
+- Database: **[Postgres](https://vercel.com/postgres)** for Database.
+- ORM: **[Prisma](https://www.prisma.io/)** for Database ORM.
+- Authentication: **[NextAuth.js](https://next-auth.js.org/)** for Authentication.
+- Deployment: **[Vercel](https://vercel.com/)** for Deployment.
+- Email: **[Resend](https://resend.com/)**
+- File Storage: **[UploadThing](https://uploadthing.com/)**
+- Linting & Formatting: **[ESLint](https://eslint.org/)** & **[Prettier](https://prettier.io/)**

src/content/changelog/change-06.md

@@ -0,0 +1,11 @@
+---
+title: Homepage got updated!
+date: 2023-08-02
+version: 1.5.0
+---
+
+- Added Features Section on Homepage.
+- Added Open Source Section on Homepage.
+- Added About Page.
+- Added Projects Page in Dashboard.
+- and many more improvements and bug fixes.