Merge pull request #34 from Kinfe123/feat/code_preview

Feat/code preview

apps/www/app/changelog/page.tsx

@@ -1,7 +1,7 @@
 import ChangelogDisplay from "components/Changelog/ChangelogDisplay";
 import RetroGrid from "components/ui/Grid";
 import { ChevronRight } from "lucide-react";
-const {title , description}: {title: string , description:string} = {
+const { title, description }: { title: string; description: string } = {
   title: "Changelog - Any Iteration and Updates.",
   description: "Changes and all jazzes will dumped here",
 };
@@ -30,12 +30,11 @@ export const metadata = {
 };
 const ChangeLogPage = () => {
   return (
-    <div className="lg:mt-[-40px] custom-screen"> 
-          <RetroGrid />
+    <div className="lg:mt-[-40px] custom-screen">
+      <RetroGrid />
 
       <div className="relative">
         <section className="relative max-w-full mr-auto  z-1">
-
           <div className="max-w-screen-xl z-30  px-4 py-28 gap-12 text-gray-600 md:px-8">
             <div className="space-y-5 max-w-[60rem] px-[-40px] leading-0  lg:leading-0 mr-auto text-left">
               <h1 className="text-sm text-gray-400 group font-geist  px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit mr-auto">
@@ -44,19 +43,22 @@ const ChangeLogPage = () => {
               </h1>
 
               <h2 className=" text-5xl md:text-6xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mr-auto lg:text-7xl ">
-              <span className="bg-gradient-to-r from-purple-300 to-orange-200 text-transparent bg-clip-text">
-              Changes </span> <br/> <span className="bg-gradient-to-r from-green-100 to-orange-200 text-transparent bg-clip-text">Anouncements <br /></span> and <span className="bg-gradient-to-r from-white to-orange-200 text-transparent bg-clip-text">
-              All the jazz 
-                </span> {" "}
-                <span className=" ">
-                will  be dumped here.
-                </span>
+                <span className="bg-gradient-to-r from-purple-300 to-orange-200 text-transparent bg-clip-text">
+                  Changes{" "}
+                </span>{" "}
+                <br />{" "}
+                <span className="bg-gradient-to-r from-green-100 to-orange-200 text-transparent bg-clip-text">
+                  Anouncements <br />
+                </span>{" "}
+                and{" "}
+                <span className="bg-gradient-to-r from-white to-orange-200 text-transparent bg-clip-text">
+                  All the jazz
+                </span>{" "}
+                <span className=" ">will be dumped here.</span>
               </h2>
 
               <p className="max-w-2xl mr-auto text-gray-300">
-              We will update you on our iterations.
-
-
+                We will update you on our iterations.
               </p>
               <div className="items-start z-30 justify-start gap-x-3 space-y-3 sm:flex sm:space-y-0">
                 <span className="relative inline-block overflow-hidden rounded-full p-[1.5px]">
@@ -73,13 +75,10 @@ const ChangeLogPage = () => {
               </div>
             </div>
           </div>
-
         </section>
         <ChangelogDisplay />
       </div>
     </div>
-
-
   );
 };
 

apps/www/app/components/[slug]/page.tsx

@@ -4,6 +4,8 @@ import matter from "gray-matter";
 import PreviewApp from "components/ui/Preview/PreviewApp";
 import sections from "sections/sections.json";
 import { serialize } from "next-mdx-remote/serialize";
+import { ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
 
 type Params = {
   slug: string;
@@ -74,11 +76,25 @@ export default async ({ params: { slug } }: { params: Params }) => {
         };
       })
       // .sort((a, b) => a.created_at - b.created_at)
-    );  
+    );
     return (
       <>
-        <div>
-          <h1 className="font-semibold text-4xl font-geist">{pageDetails.section_name}</h1>
+        <div className="">
+          <div className="z-30 flex items-center space-x-1 text-sm text-muted-foreground mb-10">
+            <Link
+              href={"/components"}
+              className="overflow-hidden cursor-pointer text-ellipsis whitespace-nowrap font-geistMono tracking-tight uppercase"
+            >
+              Components
+            </Link>
+            <ChevronRightIcon className="h-4 w-4" />
+            <div className="font-medium text-foreground">
+              {pageDetails.section_name}
+            </div>
+          </div>
+          <h1 className="font-semibold text-4xl font-geist">
+            {pageDetails.section_name}
+          </h1>
           <p className="mt-3 text-zinc-300">{pageDetails.description}</p>
         </div>
         <div className="mt-12 space-y-12">

apps/www/app/components/layout.tsx

@@ -25,7 +25,7 @@ export default (props: Props) => {
     <main className="relative custom-screen-lg ">
       <div className="lg:flex">
         <Sidebar />
-        <div className="flex-1 overflow-hidden mt-20 mb-12 xl:px-8 xl:mt-10">
+        <div className="flex-1 overflow-hidden mt-20 mb-12 xl:px-8 xl:mt-10 z-20">
           {children}
         </div>
       </div>

apps/www/app/components/page.tsx

@@ -5,6 +5,8 @@ import { serialize } from "next-mdx-remote/serialize";
 import MDXRemoteClient from "components/MDXRemoteClient";
 import SupportedLibraries from "components/ui/SupportedLibraries";
 import metatag from "metatag";
+import { Mdx } from "components/MdxComponent";
+import { allComponents } from "contentlayer/generated";
 const {ogImage} = metatag
 const title = "FarmUI - Introduction";
 const description =
@@ -34,6 +36,9 @@ export const metadata = {
 };
 
 export default async () => {
+  const nativeComponnts = allComponents
+  const introDocs = allComponents.find((comp) => comp.slug === '/nativeComponents/intro')
+
   const markdownWithMeta = fs.readFileSync(
     path.join(process.cwd(), "content/intro.mdx"),
     "utf-8"
@@ -44,10 +49,11 @@ export default async () => {
   return (
     <>
       <article className="prose prose-invert max-w-7xl">
-        <MDXRemoteClient
+        <Mdx code={introDocs?.body.code ?? ""}/>
+        {/* <MDXRemoteClient
           mdxSource={{ ...mdxSource }}
           components={{ SupportedLibraries }}
-        />
+        /> */}
       </article>
     </>
   );

apps/www/app/layout.tsx

@@ -11,6 +11,8 @@ import Image from "next/image";
 import bgback from "../public/bg-back.png";
 import { ThemeProvider } from "components/ThemeProvider";
 import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+
 import { Toaster } from "@/components/ui/toaster";
 import Loglib from "@loglib/tracker/react";
 import { Analytics } from "@vercel/analytics/react"

apps/www/components/MdxComponent.tsx

@@ -9,7 +9,7 @@ export const components = {
 
   h1: ({ className, ...props }) => (
       <h1
-          className={cn("mt-2 scroll-m-20 text-4xl font-bold tracking-wide", className)}
+          className={cn("mt-2 scroll-m-20 text-4xl font-semibold font-geist tracking-normal", className)}
           {...props}
       />
   ),

apps/www/content/intro.mdx

@@ -22,16 +22,17 @@ And for the interactive components we use the following Libraries:
 ```bash
 pnpm add @kinfe123/farm-ui
 ```
-2. Go to https://farmui.com/components and grab the id of the UI or component that you want 
 
-3. Adding the UI or component based on that ID
+2. Adding the UI or component based on that ID
 ```bash
 pnpm farm-ui add {id}
 ```
-       **id** - being the id of the component from farmui.com
 
-4. Specify the directory where you want the componnt to be installed or it uses **components** dir by default. 
 
-5. Finally you get to see the component or UI block inside of **farmui** directory nested on directory you have mentioned on step 4.
+ **id** - being the id of the component from the component section
+
+3. Specify the directory where you want the componnt to be installed or it uses **components** dir by default. 
+
+4. Finally you get to see the component or UI block inside of **farmui** directory nested on directory you have mentioned on step 4.
 
 

apps/www/content/nativeComponents/intro.mdx

@@ -0,0 +1,44 @@
+---
+title: Intro to FARMUI components
+description: This will guide you on how to install the CLI tools and get started using FARMUI.
+lastModified: 2024-06-04
+---
+
+# What is FarmUI?
+
+
+FarmUI is a client-first and animation-rich UI component library that is built on top of several popular libraries, including Radix and Shadcn. It is designed to provide developers with a comprehensive set of UI components and tools that are optimized for performance and user experience.
+
+The "client-first" approach of FarmUI means that the library is primarily focused on delivering an exceptional user experience on the client-side, with a strong emphasis on smooth animations and responsive design. This makes FarmUI well-suited for building modern, web-based applications that require a high degree of interactivity and visual appeal.
+
+The library's use of Radix and Shadcn as its foundation provides developers with access to a wide range of primitive components and utilities, which can be easily customized and combined to create complex UI elements. This approach allows for a high degree of flexibility and control, while still maintaining a consistent and cohesive look and feel across the application.
+
+In addition to the Radix and Shadcn components, FarmUI also integrates with other primitive providers, such as Tailwind CSS, to offer a comprehensive set of styling and layout options. This ensures that developers can create visually stunning and highly functional user interfaces without having to reinvent the wheel.
+
+
+## Frameworks
+
+We Provide Support for Components Developed Using React, Vue.js, Svelte, HTML, and Alpine.js.
+And for the interactive components we use the following Libraries:
+
+
+## Installation Guide
+
+1. Install the npm package
+```bash
+pnpm add @kinfe123/farm-ui
+```
+
+2. Adding the UI or component based on that ID
+```bash
+pnpm farm-ui add {id}
+```
+<Callout>
+**id** - being the id of the component from the component section
+</Callout>
+3. Specify the directory where you want the componnt to be installed or it uses **components** dir by default. 
+
+4. Finally you get to see the component or UI block inside of **farmui** directory nested on directory you have mentioned on step 4.
+
+
+

apps/www/contentlayer.config.js

@@ -170,6 +170,23 @@ export const Author = defineDocumentType(() => ({
   computedFields,
 }));
 
+export const Components = defineDocumentType(() => ({
+  name: "Components",
+  filePathPattern: `nativeComponents/**/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: {
+      type: "string",
+    },
+    description: {
+      type: "string",
+    },
+    lastModified: {
+      type: "date",
+    },
+  },
+  computedFields,
+}));
 export const Templates = defineDocumentType(() => ({
   name: "Templates",
   filePathPattern: `templates/**/*.mdx`,
@@ -183,46 +200,44 @@ export const Templates = defineDocumentType(() => ({
       type: "string",
     },
     images: {
-        type: "list",
-        of: { type: "string" },
-        
-        required:true
+      type: "list",
+      of: { type: "string" },
+
+      required: true,
     },
     is_free: {
       type: "boolean",
       required: true,
     },
     price: {
-        type: "string",
-
+      type: "string",
     },
     authors: {
-
       type: "list",
       of: { type: "string" },
     },
     date: {
-        type:'date',
-        required: true
+      type: "date",
+      required: true,
     },
     live_preview: {
-        type:"string",   
+      type: "string",
     },
     source_code: {
-        type: "string",
+      type: "string",
     },
     stack_used: {
-        type: "list",
-        of: {type:"string"},
-        required:true
-    }
-},
+      type: "list",
+      of: { type: "string" },
+      required: true,
+    },
+  },
   computedFields,
 }));
 
 export default makeSource({
   contentDirPath: "./content",
-  documentTypes: [Templates, Doc, Guide, Post, Author, Changelog],
+  documentTypes: [Templates, Doc, Guide, Post, Author, Changelog , Components],
   mdx: {
     remarkPlugins: [remarkGfm, codeImport],
     rehypePlugins: [

apps/www/tailwind.config.js

@@ -69,6 +69,8 @@ module.exports = {
         display: ["Cabinet Grotesk", ...defaultTheme.fontFamily.sans],
         dmSans:"var(--font-dm-san)",
         geist: ['var(--font-geist-sans)'],
+        geistMono: ['var(--font-geist-mono)'],
+
       },
       borderRadius: {
         lg: "var(--radius)",

apps/www/viewport/template/index.ts

@@ -11,7 +11,7 @@ const template:string = `
     <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap" rel="stylesheet" />
     <title>Document</title>
 </head>
-<body class="body"  >
+<body class="body">
 
 </body>
 </html>