Skip to content

Commit

Permalink
Merge pull request #16 from FiligranHQ/issue/refactor-ui
Browse files Browse the repository at this point in the history
[filigran-website] redefine website layout
  • Loading branch information
jpkha authored Oct 10, 2024
2 parents 2e154c7 + 2bad435 commit 47643bb
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 72 deletions.
3 changes: 2 additions & 1 deletion packages/filigran-ui/src/theme.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
:root {
--dark-100: var(--gray-1000);
--light-0: 0 0% 100%;
--light-100: var(--gray-50);
--background: var(--gray-50);
--foreground: var(--gray-1000);

--page-background: var(--light-100);
--page-background: var(--light-0);
--box-background: var(--light-100);
--primary-background: var(--darkblue-400);
--focus-background: var(--darkblue-100);
Expand Down
2 changes: 1 addition & 1 deletion projects/filigran-website/app/docs/[...slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default async function Blog({params}: {params: {slug: string[]}}) {
notFound()
}
return (
<section className="p-s">
<section className="p-l">
<article>
<CustomMDX source={content.content} />
</article>
Expand Down
52 changes: 4 additions & 48 deletions projects/filigran-website/app/docs/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import type {Metadata} from 'next'
import Link from 'next/link'
import {getContentMenu} from '@/utils/mdx.util'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from 'filigran-ui/clients'
import {Menu} from '@/components/ui/menu'

export const metadata: Metadata = {
title: 'Filigran docs',
Expand All @@ -20,47 +14,9 @@ export default async function RootLayout({
}>) {
const contentMenu = await getContentMenu()
return (
<main className=" flex max-w-full p-4">
<aside className="fixed z-10 flex w-[250px] flex-col px-2">
<h2 className="text-xl font-medium">{contentMenu.title}</h2>
{contentMenu.content.map((menu) => {
if (menu?.content?.length > 0) {
return (
<Accordion
type="single"
key={menu.title}
collapsible>
<AccordionItem value={`item-${menu.title}`}>
<AccordionTrigger className="mx-0">
{menu.title}
</AccordionTrigger>
<AccordionContent>
{menu?.content.map((m) => {
return (
<Link
key={m.slug}
className="my-2 flex flex-col space-y-1"
href={`/docs/${m.slug}`}>
{m.title}
</Link>
)
})}
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
return (
<Link
key={menu.slug}
className="my-2 flex flex-col space-y-1"
href={`/docs/${menu.slug}`}>
{menu.title}
</Link>
)
})}
</aside>
<div className="prose dark:prose-invert ml-[250px] max-w-none flex-1 overflow-auto">
<main className="flex max-w-full">
<Menu contentMenu={contentMenu} />
<div className="prose max-w-none flex-1 overflow-auto dark:prose-invert">
{children}
</div>
</main>
Expand Down
2 changes: 1 addition & 1 deletion projects/filigran-website/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
<html
lang="en"
className={`${geologica.variable} ${ibmPlexSans.variable}`}>
<body className=" flex min-h-screen flex-col dark:bg-gradient-to-br dark:from-[#00020C] dark:from-80% dark:to-[#071578]">
<body className="flex min-h-screen flex-col">
<ThemeProvider
attribute="class"
defaultTheme="system"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
import {FunctionComponent} from 'react'
import {tw} from 'twind'
import * as FiligranUIComponent from 'filigran-ui'
import * as FiligranIcon from 'filigran-icon'

Expand All @@ -24,7 +23,7 @@ const ReactLiveDisplay: FunctionComponent<ReactLiveDisplayProps> = ({
<div className="py-4">
<LiveProvider
code={codeExample}
scope={{...scope, ...customComponent, tw}}
scope={{...scope, ...customComponent}}
noInline={noInline}>
<div className="p-4">
<LiveEditor className="font-mono" />
Expand Down
26 changes: 12 additions & 14 deletions projects/filigran-website/components/site-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,19 @@ import Link from 'next/link'
import Logo from '../public/logo.svg'
export function SiteHeader() {
return (
<header className="supports-backdrop-blur:bg-white/95 sticky top-0 z-40 z-50 w-full flex-none border-b border-slate-900/10 bg-white backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-slate-900/75">
<div className="mx-auto flex h-16 max-w-4xl items-center justify-between py-2">
<div className="h-full pr-2">
<Logo className="h-full w-full" />
</div>
<nav>
<Button
asChild
variant="link"
className="dark:text-white">
<Link href="/docs">Docs</Link>
</Button>
</nav>
<ModeToggle />
<header className="sticky top-0 z-10 flex h-16 w-full flex-shrink-0 items-center justify-between border-b bg-page-background px-xl shadow-md">
<div className="h-full p-l">
<Logo className="h-full w-full" />
</div>
<nav>
<Button
asChild
variant="link"
className="dark:text-white">
<Link href="/docs">Docs</Link>
</Button>
</nav>
<ModeToggle />
</header>
)
}
82 changes: 82 additions & 0 deletions projects/filigran-website/components/ui/menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
'use client'
import {FunctionComponent} from 'react'
import {ContentMenu} from '@/utils/mdx.util'
import {cn} from '@/utils/utils'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Button,
} from 'filigran-ui'
import Link from 'next/link'
import {usePathname} from 'next/navigation'

interface MenuProps {
contentMenu: ContentMenu
}

export const Menu: FunctionComponent<MenuProps> = ({contentMenu}) => {
const currentPath = usePathname().replace('/docs/', '')
return (
<aside
className={cn(
'mobile:hidden z-9 sticky top-[4rem] flex h-[calc(100vh-4rem)] w-48 flex-col overflow-y-auto overflow-x-hidden border-r bg-page-background py-s duration-300 ease-in-out'
)}>
<h2 className="px-s text-xl font-medium leading-9">
{contentMenu.title}
</h2>
{contentMenu.content.map((menu) => {
if (menu?.content?.length > 0) {
return (
<Accordion
type="single"
key={menu.title}
collapsible>
<AccordionItem value={`item-${menu.title}`}>
<AccordionTrigger
className={cn(
'h-9 justify-between px-4 py-2 hover:bg-hover hover:no-underline',
currentPath.startsWith(menu.title.toLowerCase()) &&
'bg-primary/10 shadow-[inset_2px_0px] shadow-primary'
)}>
{menu.title}
</AccordionTrigger>
<AccordionContent>
{menu?.content.map((m) => {
return (
<Button
key={m.slug}
variant="ghost"
className={cn(
'h-9 w-full justify-start rounded-none',
currentPath === m.slug &&
'bg-primary/10 shadow-[inset_2px_0px] shadow-primary'
)}
asChild>
<Link href={`/docs/${m.slug}`}>{m.title}</Link>
</Button>
)
})}
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
return (
<Button
key={menu.slug}
variant="ghost"
className={cn(
'h-9 w-full justify-start rounded-none',
currentPath === menu.slug &&
'bg-primary/10 shadow-[inset_2px_0px] shadow-primary'
)}
asChild>
<Link href={`/docs/${menu.slug}`}>{menu.title}</Link>
</Button>
)
})}
</aside>
)
}
2 changes: 1 addition & 1 deletion projects/filigran-website/content/docs/0-presentation.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Filigran UI presentation
title: Presentation
---

## Welcome to my MDX page!
Expand Down
4 changes: 2 additions & 2 deletions projects/filigran-website/content/docs/2-typography.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@ title: Typography
</div>
```

<div className="flex flex-col gap-s bg-white p-xl">
<div className="flex flex-col gap-s bg-page-background p-xl">
<h5 className="txt-category font-title"> Description</h5>
<div className="bg-darkblue-100 p-m txt-sub-content">
<div className="dark:bg-darkblue-800 bg-darkblue-100 p-m txt-sub-content">
{' '}
Iperdiet, eu ultricies nibh varius. Nulla tincidunt mauris nec vehicula tincidunt.
Nullam in ante lacinia ante convallis viverra et ac enim. Suspendisse maximus
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Badge
title: Badge
---

## Example
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Toast
title: Toast
---

## Example
Expand Down

0 comments on commit 47643bb

Please sign in to comment.