Skip to content

Commit

Permalink
Merge pull request #34 from Kinfe123/feat/code_preview
Browse files Browse the repository at this point in the history
Feat/code preview
  • Loading branch information
Kinfe123 authored Jun 4, 2024
2 parents 962ae79 + 63033d2 commit 62f00b3
Show file tree
Hide file tree
Showing 17 changed files with 151 additions and 258 deletions.
33 changes: 16 additions & 17 deletions apps/www/app/changelog/page.tsx
Original file line number Diff line number Diff line change
@@ -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",
};
Expand Down Expand Up @@ -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">
Expand All @@ -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]">
Expand All @@ -73,13 +75,10 @@ const ChangeLogPage = () => {
</div>
</div>
</div>

</section>
<ChangelogDisplay />
</div>
</div>


);
};

Expand Down
22 changes: 19 additions & 3 deletions apps/www/app/components/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/components/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions apps/www/app/components/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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"
Expand All @@ -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>
</>
);
Expand Down
2 changes: 2 additions & 0 deletions apps/www/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/components/MdxComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
),
Expand Down
11 changes: 6 additions & 5 deletions apps/www/content/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.


44 changes: 44 additions & 0 deletions apps/www/content/nativeComponents/intro.mdx
Original file line number Diff line number Diff line change
@@ -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.



49 changes: 32 additions & 17 deletions apps/www/contentlayer.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand All @@ -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: [
Expand Down
2 changes: 2 additions & 0 deletions apps/www/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down
2 changes: 1 addition & 1 deletion apps/www/viewport/template/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 62f00b3

Please sign in to comment.