Skip to content

Commit

Permalink
feat: add showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
dillionverma committed Jul 8, 2024
1 parent 5fe48ef commit 82645c5
Show file tree
Hide file tree
Showing 24 changed files with 427 additions and 112 deletions.
161 changes: 77 additions & 84 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,6 @@ Read the [example PR](https://github.com/magicuidesign/magicui/pull/12) to learn

Once done, open a pull request from your forked repo to the main repo [here](https://github.com/magicuidesign/magicui/compare).

- [Getting Started](#getting-started)
- [Fork and Clone the Repository](#fork-and-clone-the-repository)
- [Adding a New Component](#adding-a-new-component)
- [1. Add Sidebar Button Meta for Your Component](#1-add-sidebar-button-meta-for-your-component)
- [2. Create Your Component](#2-create-your-component)
- [3. Create a Basic Example Showcasing Your Component](#3-create-a-basic-example-showcasing-your-component)
- [4. Create MDX Page for Your Component](#4-create-mdx-page-for-your-component)
- [5. Add Registry Export](#5-add-registry-export)

## Getting Started

### Fork and Clone the Repository
Expand Down Expand Up @@ -61,89 +52,98 @@ Once done, open a pull request from your forked repo to the main repo [here](htt

To add a new component to MagicUI, you will need to modify several files. Follow these steps:

### 1. Add Sidebar Button Meta for Your Component

**File:** `config/docs.ts`

Add metadata for your component in the sidebar navigation.

```typescript
// Add sidebar button meta for your component
{
title: "Example Component",
href: `/docs/components/example-component`,
items: [],
label: "New",
}
```

### 2. Create Your Component

**File:** `registry/components/magicui/example-component.tsx`
### 1. Create Component

Create the main component file.
Create the main component in `registry/components/magicui/example-component.tsx`

```typescript
// Create your component here
import React from 'react'

const ExampleComponent = () => {
export default function ExampleComponent() {
return (
<div>
This is your component.
</div>
)
}

export default ExampleComponent;
```

### 3. Create a Basic Example Showcasing Your Component

**File:** `registry/components/example/example-component-demo.tsx`
### 2. Create Component Demo

Provide a basic example to showcase your component.
Provide a basic example to showcase your component in `registry/components/example/example-component-demo.tsx`

```typescript
// Create a very basic example showcasing your component
import ExampleComponent from '@/registry/components/magicui/example-component'

const ExampleComponentDemo = () => (
<div className="relative justify-center">
export default function ExampleComponentDemo() {
return (
<div className="relative justify-center">
<ExampleComponent />
</div>
)

export default ExampleComponentDemo;
)
}
```

### 4. Create MDX Page for Your Component
### 3. Update Sidebar

**File:** `content/docs/components/example-component.mdx`
Add your component to the sidebar in `config/docs.ts`

Create an MDX file for documenting your component.
```typescript
{
title: "Example Component",
href: `/docs/components/example-component`,
items: [],
label: "New",
}
```

### 4. Create docs

Create an MDX file for documenting your component in `content/docs/components/example-component.mdx`

````md
---
title: Example Component
date: 2024-06-01
description: Example component for demonstrating MagicUI integration
author: Bankkroll
description: Example component for Magic UI
author: magicui
published: true
---

<ComponentPreview name="example-component-demo" />

<Steps>
## Installation

### Installation
<Tabs defaultValue="cli">

Copy and paste the following code into your project.
<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```text
components/magicui/example-component.tsx
```bash
npx magicui-cli add example-component
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="example-component" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

<ComponentSource name="example-component" />

</Steps>
Expand All @@ -153,21 +153,14 @@ components/magicui/example-component.tsx
| Prop | Type | Description | Default |
| ----- | ------ | -------------------------- | ------- |
| color | String | The color of the component | "blue" |

## Credits

- Credit to [Bankk](https://www.x.com/bankkroll_eth)
````

### 5. Add Registry Export

**File:** `registry/index.tsx`
### 5. Update Registry

Export your component and example in the registry.
Export your component and example in the registry in `registry/index.tsx`

```typescript
const ui: Registry = {
// other components
"example-component": {
name: "example-component",
type: "components:ui",
Expand All @@ -176,7 +169,6 @@ const ui: Registry = {
};

const example: Registry = {
// other examples
"example-component-demo": {
name: "example-component",
type: "components:example",
Expand All @@ -188,48 +180,49 @@ const example: Registry = {
};
```

## How to use CLI
## Adding to the showcase

1. Run CLI script from project `root` folder
## 1. Create your showcase as a MDX file

```bash
pnpm run install:cli
```
Create your showcase in `content/showcase/website-name.mdx`

```bash
pnpm run dev:cli
```mdx
---
title: website-name.com
description: Website description
image: /showcase/website-name.png
href: https://website-name.com
featured: true
affiliation: YC S25, raised $10M
---
```

```bash
pnpm run build:cli
```
## 2. Create an image

```bash
pnpm run release:cli
```
Upload an image of your site to `public/showcase/website-name.png`

2. Run CLI script from `/packages/cli` folder
## How to use CLI

1. Run CLI script from project `root` folder

```bash
pnpm run install
pnpm run install:cli
```

```bash
pnpm run dev
pnpm run dev:cli
```

```bash
pnpm run build
pnpm run build:cli
```

```bash
pnpm run release
pnpm run release:cli
```

Lots more useful scripts are available in package.json

The CLI in development uses index.json from default `3000` port on localhost. Otherwise [https://magicui.design](https://magicui.design/registry/index.json)

## Ask for Help

For any help or questions, please open a new GitHub issue and we will get back to you :)
For any help or questions, please open a new GitHub issue.
25 changes: 6 additions & 19 deletions app/(marketing)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,17 @@
import Hero from "@/components/hero";
import { Mdx } from "@/components/mdx-components";
import ComponentDemos from "@/components/sections/component-demos";
import Hero from "@/components/sections/hero";
import Showcase from "@/components/sections/showcase";
import Testimonials from "@/components/sections/testimonials";

import "@/styles/mdx.css";

import { notFound } from "next/navigation";
import { allPages } from "contentlayer/generated";

import Testimonials from "@/components/testimonials";

const PAGE = "home";

export default async function Home() {
const page = allPages.find((page) => page.slugAsParams === PAGE);

if (!page) {
notFound();
}

return (
<>
<Hero />
<section id="component-demos" className="container max-w-5xl">
<Mdx code={page.body.code} />
</section>
<Showcase />
<ComponentDemos />
<Testimonials />
{/* <CTASection /> */}
</>
);
}
98 changes: 98 additions & 0 deletions app/(marketing)/showcase/[...slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Metadata } from "next";
import { notFound } from "next/navigation";
import { env } from "@/env.mjs";
import { allShowcases } from "contentlayer/generated";

import { siteConfig } from "@/config/site";
import { absoluteUrl } from "@/lib/utils";
import { ShowcaseCard } from "@/components/sections/showcase";

interface PageProps {
params: {
slug: string[];
};
}

async function getPageFromParams(params: PageProps["params"]) {
const slug = params?.slug?.join("/");
const page = allShowcases.find((page) => page.slugAsParams === slug);

if (!page) {
null;
}

return page;
}

export async function generateMetadata({
params,
}: PageProps): Promise<Metadata> {
const page = await getPageFromParams(params);

if (!page) {
return {};
}

const url = env.NEXT_PUBLIC_APP_URL;

const ogUrl = new URL(`${url}/api/og`);
ogUrl.searchParams.set("heading", page.title);
ogUrl.searchParams.set("type", siteConfig.name);
ogUrl.searchParams.set("mode", "light");

return {
title: page.title,
description: page.description,
openGraph: {
title: page.title,
description: page.description,
type: "article",
url: absoluteUrl(page.slug),
images: [
{
url: ogUrl.toString(),
width: 1200,
height: 630,
alt: page.title,
},
],
},
twitter: {
card: "summary_large_image",
title: page.title,
description: page.description,
images: [ogUrl.toString()],
},
};
}

export async function generateStaticParams(): Promise<PageProps["params"][]> {
return allShowcases.map((page) => ({
slug: page.slugAsParams.split("/"),
}));
}

export default async function PagePage({ params }: PageProps) {
const page = await getPageFromParams(params);

if (!page) {
notFound();
}

return (
<article className="container py-14 max-w-2xl">
<h2 className="mb-4 text-center text-5xl font-bold leading-[1.2] tracking-tighter text-foreground">
{page.title}
</h2>
<h3 className="mx-auto mb-8 text-balance text-center text-lg font-medium tracking-tight text-foreground/80">
{page.title} uses Magic UI to build their landing page.
</h3>
<ShowcaseCard
title={page.title}
href={page.href}
image={page.image}
affiliation={page.affiliation}
/>
</article>
);
}
Loading

0 comments on commit 82645c5

Please sign in to comment.