Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit d7d9f9e

Browse files
segunadebayosegunadebayo
committed
feat: add figma things to website
1 parent 8157b58 commit d7d9f9e

File tree

14 files changed

+238
-66
lines changed

14 files changed

+238
-66
lines changed

‎configs/figma.sidebar.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"routes": [
3+
{
4+
"title": "Figma",
5+
"routes": [
6+
{ "title": "Figma UI Kit", "path": "/figma/ui-kit" },
7+
{ "title": "Figma Plugin", "path": "/figma/plugin" }
8+
]
9+
}
10+
]
11+
}

‎configs/search-meta.json

+25
Original file line numberDiff line numberDiff line change
@@ -54324,6 +54324,31 @@
5432454324
"url": "/docs/styled-system/theme#config",
5432554325
"hierarchy": { "lvl1": "Default Theme", "lvl2": "Config", "lvl3": null }
5432654326
},
54327+
{
54328+
"content": "Figma Plugin",
54329+
"id": "//figma/plugin",
54330+
"type": "lvl1",
54331+
"url": "/figma/plugin",
54332+
"hierarchy": { "lvl1": "Figma Plugin" }
54333+
},
54334+
{
54335+
"content": "How it works",
54336+
"id": "//figma/plugin",
54337+
"type": "lvl2",
54338+
"url": "/figma/plugin#how-it-works",
54339+
"hierarchy": {
54340+
"lvl1": "Figma Plugin",
54341+
"lvl2": "How it works",
54342+
"lvl3": null
54343+
}
54344+
},
54345+
{
54346+
"content": "Figma UI Kit",
54347+
"id": "//figma/ui-kit",
54348+
"type": "lvl1",
54349+
"url": "/figma/ui-kit",
54350+
"hierarchy": { "lvl1": "Figma UI Kit" }
54351+
},
5432754352
{
5432854353
"content": "Blitz.js",
5432954354
"id": "//getting-started/blitzjs-guide",

‎content/figma/plugin.mdx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: 'Figma Plugin'
3+
description: 'Convert Figma Designs to Chakra UI'
4+
---
5+
6+
We've built a [Figma plugin](https://figma.chakra-ui.com/) that can
7+
auto-generate Chakra UI code from any Figma design. Supercharge your team's
8+
design-to-code process and help you ship even faster ⚡️
9+
10+
<Image src='/figma/plugin.png' ratio={1.6} border />
11+
12+
<Box my='8'>
13+
<Button
14+
leftIcon={<FiFigma />}
15+
as='a'
16+
colorScheme='teal'
17+
href='https://figma.chakra-ui.com/'
18+
target='_blank'
19+
size='lg'
20+
children='Get Figma Plugin'
21+
/>
22+
</Box>
23+
24+
## How it works
25+
26+
Watch the video below to learn how to use and get the best results from the
27+
plugin.
28+
29+
<VideoPlayer url='https://www.youtube.com/watch?v=bk9SEufTZtA' />

‎content/figma/ui-kit.mdx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: 'Figma UI Kit'
3+
description: 'Get the Figma UI Kit for Chakra UI'
4+
---
5+
6+
<Image src='/figma/ui-kit.png' ratio={1.6} />
7+
8+
Our design kit is built with Figma. You can install it from the
9+
[Figma Community](https://www.figma.com/community/file/971408767069651759).
10+
11+
The Figma kit is designed to match the structure of the components and
12+
properties in Chakra UI. This helps designers & developers create stunning user
13+
interfaces faster.
14+
15+
<br />
16+
17+
- **🧩 Made with Autolayout**
18+
- **🎛 Component properties match Chakra UI**
19+
- **✨ Improved layer structure and naming**
20+
21+
<Box my='8'>
22+
<Button
23+
leftIcon={<FiFigma />}
24+
as='a'
25+
colorScheme='teal'
26+
href='https://www.figma.com/community/file/971408767069651759'
27+
target='_blank'
28+
size='lg'
29+
children='Get Figma UI Kit'
30+
/>
31+
</Box>

‎content/getting-started/nextjs-guide.mdx

+1-16
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,7 @@ author: estheragbaje
66
category: frameworks
77
---
88

9-
<Box mt={3}>
10-
<AspectRatio ratio={16 / 8.84}>
11-
<VideoPlayer
12-
width='100%'
13-
height='100%'
14-
url='https://www.youtube.com/watch?v=wI2vqXsjsIo'
15-
config={{
16-
youtube: {
17-
playerVars: {
18-
controls: true,
19-
},
20-
},
21-
}}
22-
/>
23-
</AspectRatio>
24-
</Box>
9+
<VideoPlayer url='https://www.youtube.com/watch?v=wI2vqXsjsIo' />
2510

2611
## Next.js 13
2712

‎contentlayer.config.ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -187,9 +187,29 @@ const Changelog = defineDocumentType(() => ({
187187
},
188188
}))
189189

190+
const Figma = defineDocumentType(() => ({
191+
name: 'Figma',
192+
filePathPattern: 'figma/*.mdx',
193+
contentType: 'mdx',
194+
fields: {
195+
title: { type: 'string', required: true },
196+
description: { type: 'string', required: true },
197+
},
198+
computedFields: {
199+
frontMatter: {
200+
type: 'json',
201+
resolve: (doc) => ({
202+
title: doc.title,
203+
description: doc.description,
204+
slug: `/figma/${doc._raw.flattenedPath}`,
205+
}),
206+
},
207+
},
208+
}))
209+
190210
const contentLayerConfig = makeSource({
191211
contentDirPath: 'content',
192-
documentTypes: [Doc, Guides, Recipe, Changelog, Blogs, Tutorial],
212+
documentTypes: [Doc, Guides, Recipe, Changelog, Blogs, Tutorial, Figma],
193213
mdx: {
194214
rehypePlugins: [rehypeMdxCodeMeta],
195215
remarkPlugins: [remarkSlug, remarkGfm, remarkEmoji],

‎layouts/changelog.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import hooksSidebar from 'configs/hooks.sidebar.json'
66
import styledSystemSidebar from 'configs/styled-system.sidebar.json'
77
import tutorialSidebar from 'configs/tutorial.sidebar.json'
88
import communitySidebar from 'configs/community.sidebar.json'
9+
import figmaSidebar from 'configs/figma.sidebar.json'
910
import semverRSort from 'semver/functions/rsort'
1011
import { ReactNode } from 'react'
1112
import { RouteItem } from 'utils/get-route-context'
@@ -29,6 +30,7 @@ export function getRoutes(slug: string): RouteItem[] {
2930
'/docs/components': componentsSidebar,
3031
'/tutorial': tutorialSidebar,
3132
'/community': communitySidebar,
33+
'/figma': figmaSidebar,
3234
}
3335

3436
const [, sidebar] =

‎layouts/mdx.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import gettingStartedSidebar from 'configs/getting-started.sidebar.json'
66
import hooksSidebar from 'configs/hooks.sidebar.json'
77
import styledSystemSidebar from 'configs/styled-system.sidebar.json'
88
import tutorialSidebar from 'configs/tutorial.sidebar.json'
9+
import figmaSidebar from 'configs/figma.sidebar.json'
910
import communitySidebar from 'configs/community.sidebar.json'
1011
import { ReactNode } from 'react'
1112
import { findRouteByPath, removeFromLast } from 'utils/find-route-by-path'
@@ -25,6 +26,7 @@ export function getRoutes(slug: string): RouteItem[] {
2526
'/docs/components': componentsSidebar,
2627
'/tutorial': tutorialSidebar,
2728
'/community': communitySidebar,
29+
'/figma': figmaSidebar,
2830
}
2931

3032
const [, sidebar] =

‎pages/figma/[...slug].tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { MDXComponents } from 'components/mdx-components'
2+
import { allFigmas } from 'contentlayer/generated'
3+
import MDXLayout from 'layouts/mdx'
4+
import { GetStaticPaths, InferGetStaticPropsType } from 'next'
5+
import { useMDXComponent } from 'next-contentlayer/hooks'
6+
7+
export default function Page({
8+
figma,
9+
}: InferGetStaticPropsType<typeof getStaticProps>) {
10+
const Component = useMDXComponent(figma.body.code)
11+
return (
12+
<MDXLayout frontmatter={figma.frontMatter}>
13+
<Component components={MDXComponents} />
14+
</MDXLayout>
15+
)
16+
}
17+
18+
export const getStaticPaths: GetStaticPaths = async () => {
19+
const figmas = allFigmas
20+
.map((t) =>
21+
t._id.replace('figma/', '').replace('.mdx', '').replace('index', ''),
22+
)
23+
.map((id) => ({ params: { slug: [id.replace('figma/', '')] } }))
24+
25+
return { paths: figmas, fallback: false }
26+
}
27+
28+
export const getStaticProps = async (ctx) => {
29+
const params = Array.isArray(ctx.params.slug)
30+
? ctx.params.slug
31+
: [ctx.params.slug]
32+
const figma = allFigmas.find((figma) => figma._id.includes(params.join('/')))
33+
return { props: { figma } }
34+
}

‎public/figma/plugin.png

1.32 MB
Loading

‎public/figma/ui-kit.png

363 KB
Loading

‎src/components/mdx-components/mdx-components.tsx

+23-17
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
11
import * as Chakra from '@chakra-ui/react'
2-
import * as React from 'react'
3-
import PropsTable from '../props-table'
4-
import CarbonAd from './carbon-ad'
5-
import CodeBlock from './codeblock/codeblock'
6-
import ComponentLinks from './component-links'
7-
import { FeaturesCourses } from './course-banner'
8-
import IconsList from './icons-list'
92
import {
103
ColorPalette,
114
ColorPalettes,
125
ColorWrapper,
136
} from 'components/color-palette'
7+
import { JoinCommunityCards } from 'components/community-card'
148
import { FeaturesOverview } from 'components/features-overview'
159
import { FrameworkLinks } from 'components/framework-link'
1610
import { Anchor } from 'components/mdx-components/anchor'
1711
import { InlineCode } from 'components/mdx-components/inline-code'
1812
import { LinkedHeading } from 'components/mdx-components/linked-heading'
1913
import { Pre } from 'components/mdx-components/pre'
20-
import { TData, THead, Table } from 'components/mdx-components/table'
21-
import { VideoPlayer } from 'components/mdx-components/video-player'
14+
import { Table, TData, THead } from 'components/mdx-components/table'
15+
import { PackageManagers } from 'components/package-managers'
2216
import SandpackEmbed from 'components/sandpack-embed'
2317
import { TutorialCodeBlock } from 'components/tutorial/tutorial-code-block'
2418
import { TutorialFileAction } from 'components/tutorial/tutorial-file-action'
25-
import { JoinCommunityCards } from 'components/community-card'
26-
import { PackageManagers } from 'components/package-managers'
2719
import NextImage from 'next/image'
20+
import { FiFigma } from 'react-icons/fi'
21+
import PropsTable from '../props-table'
22+
import CarbonAd from './carbon-ad'
23+
import CodeBlock from './codeblock/codeblock'
24+
import ComponentLinks from './component-links'
25+
import { FeaturesCourses } from './course-banner'
26+
import IconsList from './icons-list'
27+
import { VideoPlayer } from './video-player'
2828

2929
const { Alert, AspectRatio, Box, chakra, Kbd, Link } = Chakra
3030

3131
export const MDXComponents = {
3232
...Chakra,
33-
Image: (props) => (
34-
<Box my='5'>
33+
FiFigma,
34+
Image: ({ ratio, border, src, ...props }: any) => (
35+
<AspectRatio
36+
my='5'
37+
position='relative'
38+
borderWidth={border ? '1px' : undefined}
39+
ratio={ratio}
40+
>
3541
<NextImage
36-
layout='responsive'
37-
width={700}
38-
height={400}
42+
src={src}
43+
alt=''
44+
layout='fill'
3945
objectFit='contain'
4046
{...props}
4147
/>
42-
</Box>
48+
</AspectRatio>
4349
),
4450
LinkedImage: ({ href, ...props }) => (
4551
<Link display='block' my='10' href={href} isExternal>

‎src/components/mdx-components/video-player.tsx

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
1-
import React from 'react'
1+
import { AspectRatio, Box } from '@chakra-ui/react'
22
import ReactPlayer, { ReactPlayerProps } from 'react-player'
33

4-
export const VideoPlayer = (props: ReactPlayerProps) => (
5-
<ReactPlayer {...props} />
6-
)
4+
export function VideoPlayer(props: ReactPlayerProps) {
5+
return (
6+
<Box mt={3}>
7+
<AspectRatio ratio={16 / 8.84}>
8+
<ReactPlayer
9+
width='100%'
10+
height='100%'
11+
{...props}
12+
config={{
13+
youtube: {
14+
playerVars: {
15+
controls: true,
16+
},
17+
},
18+
}}
19+
/>
20+
</AspectRatio>
21+
</Box>
22+
)
23+
}

0 commit comments

Comments
 (0)