Skip to content

Commit 79602d6

Browse files
ariflogsariflogs
authored
Merge pull request #10 from ariflogs/docs-site
Docs site
2 parents 118f530 + 8f6a325 commit 79602d6

File tree

22 files changed

+2622
-52
lines changed

22 files changed

+2622
-52
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ yarn-error.log*
3434
# typescript
3535
*.tsbuildinfo
3636
next-env.d.ts
37+
38+
# contentlayer
39+
.contentlayer

‎app/(docs)/docs/[[...slug]]/page.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import { allDocs } from "contentlayer/generated";
3+
import { notFound } from "next/navigation";
4+
import {format} from "date-fns"
5+
import MDX from "@/components/MDX";
6+
import { H1, H2, H3, H4 } from "@/packages/ui";
7+
8+
async function getDocParams(slug: string) {
9+
const doc = allDocs.find((doc) => doc.url === slug);
10+
11+
if (!doc) {
12+
return null;
13+
}
14+
15+
return doc;
16+
}
17+
18+
export default async function page({ params }: { params: { slug: string[] } }) {
19+
const slug = params.slug?.join("/") || "/docs";
20+
const doc = await getDocParams(slug);
21+
22+
if (!doc) {
23+
return notFound();
24+
}
25+
26+
return (
27+
<div className="space-y-12 pb-8">
28+
<div>
29+
<H2>{doc.title}</H2>
30+
<p className="text-lg text-muted">{doc.description}</p>
31+
</div>
32+
<div>
33+
<MDX code={doc.body.code} />
34+
</div>
35+
<p className="text-right">Last Updated: {format(doc.lastUpdated, "dd MMM, YYY")}</p>
36+
</div>
37+
);
38+
}

‎app/(docs)/docs/layout.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import SideNav from "@/components/SideNav";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "Getting Started | RetroUI",
6+
};
7+
8+
export default function ComponentLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return (
14+
<div className="relative">
15+
<div className="hidden lg:block">
16+
<SideNav />
17+
</div>
18+
<div className="lg:ml-72 mt-20 px-4">{children}</div>
19+
</div>
20+
);
21+
}

‎app/global.css

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
:root {
6+
--muted: #606067;
7+
}
8+
59
.text-outlined {
6-
@apply relative text-primary-400 font-bold;
7-
letter-spacing: 2px;
8-
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black outline */
9-
}
10+
@apply relative text-primary-400 font-bold;
11+
letter-spacing: 2px;
12+
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
13+
2px 2px 0 #000; /* Black outline */
14+
}

‎components/MDX.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
2+
import { useMDXComponent } from "next-contentlayer/hooks";
3+
import React from "react";
4+
5+
const components = {
6+
h1: H1,
7+
h2: H2,
8+
h3: H3,
9+
h4: H4,
10+
h5: H5,
11+
h6: H6,
12+
};
13+
14+
export default function MDX({ code }: { code: string }) {
15+
const Content = useMDXComponent(code);
16+
17+
return <Content components={components} />;
18+
}

‎components/SideNav.tsx

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1+
import { navConfig } from "@/config/navigation";
2+
import { H6 } from "@/packages/ui";
13
import Link from "next/link";
24

3-
const navItems = [
4-
{ title: "Getting Started", route: "/components" },
5-
{ title: "Accordions", route: "/components/accordions" },
6-
{ title: "Avatars", route: "/components/avatars" },
7-
// { title: "Badges", route: "/components/badges" },
8-
{ title: "Buttons", route: "/components/buttons" },
9-
{ title: "Cards", route: "/components/cards" },
10-
{ title: "Inputs", route: "/components/inputs" },
11-
{ title: "Textareas", route: "/components/textareas" },
12-
{ title: "Typography", route: "/components/typography" },
13-
];
14-
155
export default function SideNav() {
166
return (
177
<div
188
className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
199
>
20-
<nav className="flex flex-col items-start p-6 space-y-2">
21-
{navItems.map((item) => (
22-
<Link key={item.route} href={item.route}>
23-
{item.title}
24-
</Link>
10+
<nav className="flex flex-col items-start p-6 space-y-4">
11+
{navConfig.sideNavItems.map((item) => (
12+
<div key={item.title}>
13+
<H6>{item.title}</H6>
14+
<div className="flex flex-col space-y-2">
15+
{item.children.map((child) => (
16+
<Link key={child.title} href={child.href}>
17+
{child.title}
18+
</Link>
19+
))}
20+
</div>
21+
</div>
2522
))}
2623
</nav>
2724
</div>

‎components/TopNav.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Link from "next/link";
33
import { GitBranchIcon, GithubIcon } from "lucide-react";
44
import HamburgerMenu from "./HamburgerMenu";
55
import { Button } from "@/packages/ui";
6+
import { navConfig } from "@/config/navigation";
67

78
export default function TopNav() {
89
return (
@@ -26,18 +27,15 @@ export default function TopNav() {
2627

2728
{/* Navigation Links */}
2829
<div className="hidden md:flex space-x-8">
29-
<a
30-
href="/components"
31-
className="hover:text-primary-500 transition-all"
32-
>
33-
Documentation
34-
</a>
35-
<a
36-
href="/components/buttons"
37-
className="hover:text-primary-500 transition-all"
38-
>
39-
Components
40-
</a>
30+
{navConfig.topNavItems.map((item) => (
31+
<Link
32+
key={item.title}
33+
href={item.href}
34+
className="hover:text-primary-500 transition-all"
35+
>
36+
{item.title}
37+
</Link>
38+
))}
4139
</div>
4240

4341
<div className="flex items-center space-x-4 lg:hidden">
@@ -46,7 +44,7 @@ export default function TopNav() {
4644
target="_blank"
4745
rel="noopener noreferrer"
4846
>
49-
<GithubIcon />
47+
<GithubIcon />
5048
</Link>
5149
<HamburgerMenu />
5250
</div>

‎config/navigation.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { INavigationConfig } from "@/types";
2+
3+
const componentsRoute = "/docs/components";
4+
5+
export const navConfig: INavigationConfig = {
6+
topNavItems: [
7+
{ title: "Documentation", href: "/docs" },
8+
{ title: "Components", href: `${componentsRoute}/button` },
9+
],
10+
sideNavItems: [
11+
{
12+
title: "Getting Started",
13+
children: [{ title: "Introduction", href: "/docs" }],
14+
},
15+
{
16+
title: "Components",
17+
children: [
18+
{ title: "Accordion", href: `${componentsRoute}/accordion` },
19+
{ title: "Avatar", href: `${componentsRoute}/avatar` },
20+
{ title: "Badge", href: `${componentsRoute}/badge` },
21+
{ title: "Button", href: `${componentsRoute}/button` },
22+
{ title: "Card", href: `${componentsRoute}/card` },
23+
{ title: "Input", href: `${componentsRoute}/input` },
24+
{ title: "Textarea", href: `${componentsRoute}/textarea` },
25+
{ title: "Typography", href: `${componentsRoute}/typography` },
26+
],
27+
},
28+
],
29+
};

‎content/docs/index.mdx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Getting Started
3+
description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
4+
lastUpdated: 29 Sep, 2024
5+
---
6+
7+
### 1. Add the fonts
8+
We are useing `Archivo Black` for headings and `Share Tech` for everything else.
9+
10+
Installation form Google Fonts:
11+
```
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap" rel="stylesheet">
15+
```
16+
17+
Save the fonts in `global.css`:
18+
```
19+
:root {
20+
--font-head: "Archivo Black", sans-serif;
21+
--font-sans: "Share Tech", sans-serif;
22+
}
23+
```
24+
25+
<br />
26+
27+
### 2. Add the theme to your tailwind.config.js file.
28+
```
29+
import type { Config } from "tailwindcss";
30+
31+
const config = {
32+
theme: {
33+
extend: {
34+
fontFamily: {
35+
head: ["var(--font-head)"],
36+
sans: ["var(--font-sans)"],
37+
},
38+
boxShadow: {
39+
"xs": "1px 1px 0 0 #000",
40+
"md": "3px 3px 0 0 #000",
41+
"3xl": "10px 10px 0 0 #000",
42+
},
43+
colors: {
44+
primary: {
45+
50: "#FFFEF0",
46+
100: "#FEF9C3",
47+
200: "#FEF08A",
48+
300: "#FDE047",
49+
400: "#FACC15",
50+
500: "#EAB308",
51+
600: "#CA8A04",
52+
700: "#A16207",
53+
800: "#854D0E",
54+
900: "#713F12",
55+
},
56+
},
57+
},
58+
},
59+
};
60+
export default config;
61+
```
62+
63+
<br />
64+
65+
### 3. Now start copy-pasting the components!

‎contentlayer.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// contentlayer.config.ts
2+
import { defineDocumentType, makeSource } from "contentlayer/source-files";
3+
4+
export const Doc = defineDocumentType(() => ({
5+
name: "Doc",
6+
filePathPattern: `docs/**/*.mdx`,
7+
contentType: "mdx",
8+
fields: {
9+
title: { type: "string", required: true },
10+
description: { type: "string", required: true },
11+
lastUpdated: { type: "date", required: true },
12+
},
13+
computedFields: {
14+
url: {
15+
type: "string",
16+
resolve: (doc) => `/${doc._raw.flattenedPath}`,
17+
},
18+
},
19+
}));
20+
21+
export default makeSource({ contentDirPath: "./content", documentTypes: [Doc] });

0 commit comments

Comments
 (0)