Skip to content

Commit

Permalink
lfg
Browse files Browse the repository at this point in the history
  • Loading branch information
@irsyadadl
irsyadadl committed Oct 30, 2024
1 parent a73b200 commit 1b0e7f3
Show file tree
Hide file tree
Showing 13 changed files with 136 additions and 127 deletions.
8 changes: 4 additions & 4 deletions app/(app)/themes/themes-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const themesList = {
"--overlay": "0 0% 100%",
"--overlay-fg": "239.93 9% 4%",
"--muted": "240 4% 96%",
"--muted-fg": "240 3.83% 46.08%",
"--muted-fg": "240 4% 41%",
"--accent": "216.77 100% 50%",
"--accent-fg": "0 0% 100%",
"--accent-subtle": "216.92 99% 97%",
Expand Down Expand Up @@ -119,7 +119,7 @@ const themesList = {
"--info-fg": "0 0% 100%",

"--muted": "240 6% 90%",
"--muted-fg": "240 3.83% 46.08%",
"--muted-fg": "240 4% 41%",

"--danger": "0.01 72% 51%",
"--danger-fg": "360 86% 97%",
Expand Down Expand Up @@ -648,7 +648,7 @@ const themesList = {
"--overlay": "0 0% 100%",
"--overlay-fg": "239.93 9% 4%",
"--muted": "240 4% 96%",
"--muted-fg": "240 3.83% 46.08%",
"--muted-fg": "240 4% 41%",
"--success": "161.17 91% 31%",
"--success-fg": "151.77 82% 96%",
"--info": "205.77 100% 50%",
Expand Down Expand Up @@ -721,7 +721,7 @@ const themesList = {
"--overlay": "0 0% 100%",
"--overlay-fg": "239.93 9% 4%",
"--muted": "240 4% 96%",
"--muted-fg": "240 3.83% 46.08%",
"--muted-fg": "240 4% 41%",
"--success": "161.17 91% 31%",
"--success-fg": "151.77 82% 96%",
"--info": "205.77 100% 50%",
Expand Down
Binary file modified bun.lockb
View file
Binary file not shown.
194 changes: 98 additions & 96 deletions components/aside.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import React from "react"
import { type Docs, docs } from "#site/content"
import { goodTitle, sortDocs } from "@/resources/lib/utils"
import { LayoutGroup, motion } from "framer-motion"
import { IconChevronLeft, IconCircleHalf, IconCube, IconHighlight, IconLayers } from "justd-icons"
import { IconChevronRight, IconCircleHalf, IconCube, IconHighlight, IconLayers } from "justd-icons"
import { Link as NextLink } from "next-view-transitions"
import type { LinkProps as NextLinkProps } from "next/link"
import { usePathname } from "next/navigation"
import { twJoin } from "tailwind-merge"
import { tv } from "tailwind-variants"
import { Badge, cn, Disclosure, DisclosureGroup } from "ui"

Expand Down Expand Up @@ -56,11 +57,11 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
hideIndicator
allowsMultipleExpanded
defaultExpandedKeys={["getting-started", "components"]}
className="w-full [&_.dk32xd]:p-0 [&_.zwx3ai]:p-0 [&_.zwx3ai]:border-none"
className="w-full [&_.dk32xd]:p-0 flex flex-col gap-y-0.5 [&_.zwx3ai]:p-0 [&_.zwx3ai]:border-none"
>
{filteredNodeEntries.map(([key, value]) => (
<Disclosure key={key} id={key}>
<Trigger className="[&_.jr131]:size-4 py-1.5 text-fg groud-data-[open]:text-muted-fg [&_.jr131]:text-primary [&_.jr131]:fill-primary/10 dark:[&_.jr131]:fill-primary/30">
<Disclosure className={({ isExpanded }) => twJoin(isExpanded && "pb-0")} key={key} id={key}>
<Trigger className="[&_.jr131]:size-4 pl-2.5 pr-1 text-fg groud-data-[open]:text-muted-fg [&_.jr131]:text-muted-fg [&_.jr131]:fill-muted-fg/10 dark:[&_.jr131]:fill-muted-fg/30">
{key === "getting-started" ? (
<IconLayers className="jr131" />
) : key === "prologue" ? (
Expand All @@ -73,97 +74,98 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
{goodTitle(key)}
</Trigger>
<Disclosure.Panel>
{typeof value === "object" && "title" in value ? (
<AsideLink href={`/${(value as Doc).slug}`}>
{goodTitle((value as Doc).title)}
</AsideLink>
) : (
<DisclosureGroup
allowsMultipleExpanded
hideBorder
hideIndicator
defaultExpandedKeys={defaultValues}
className="w-full relative"
>
<div className="h-full absolute left-0 bg-zinc-200 dark:bg-zinc-800 w-px ml-4" />
{Object.entries(value as HierarchyNode).map(([subKey, subValue]) =>
typeof subValue === "object" && "title" in subValue ? (
<AsideLink
className="pl-[2rem] flex justify-between items-center"
key={subKey}
href={`/${subValue.slug}`}
>
{(subValue as Doc).title}
{subValue.status && (
<Badge
intent={
subValue?.status === "wip"
? "warning"
: subValue?.status === "alpha"
? "danger"
: subValue.status === "beta"
<DisclosureGroup
allowsMultipleExpanded
hideBorder
hideIndicator
defaultExpandedKeys={defaultValues}
className="w-full relative"
>
<div className="h-full absolute left-0 bg-zinc-200 dark:bg-zinc-800 w-px ml-4" />
{Object.entries(value as HierarchyNode).map(([subKey, subValue]) =>
typeof subValue === "object" && "title" in subValue ? (
<AsideLink
className="pl-[2.1rem] flex justify-between items-center"
key={subKey}
href={`/${subValue.slug}`}
>
{(subValue as Doc).title}
{subValue.status && (
<Badge
intent={
subValue?.status === "wip"
? "warning"
: subValue?.status === "alpha"
? "danger"
: subValue.status === "beta"
? "warning"
: subValue.status === "help"
? "warning"
: subValue.status === "help"
? "warning"
: subValue.status === "primitive"
? "secondary"
: "info"
}
className="uppercase h-5 text-[0.5rem]"
>
{subValue?.status as Doc["status"]}
</Badge>
: subValue.status === "primitive"
? "secondary"
: "info"
}
className="uppercase h-5 text-[0.5rem]"
>
{subValue?.status as Doc["status"]}
</Badge>
)}
</AsideLink>
) : (
<Disclosure
className={({ isExpanded }) => twJoin(isExpanded && "pb-0")}
key={subKey}
id={subKey}
>
{/* Trigger components: buttons, controls, etc. */}
<Trigger className="[--trigger-padding-left:2.2rem] pl-[--trigger-padding-left] pr-1">
{goodTitle(subKey)}
</Trigger>
<Disclosure.Panel>
{Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) =>
typeof childValue === "object" && "title" in childValue ? (
<AsideLink
className={cn(
"ml-[-0rem] flex justify-between h-9 items-center pl-[2.2rem] pr-2",
defaultValues.length > 0 && "jf320s"
)}
key={childKey}
href={`/${childValue.slug}`}
indicatorClassName=""
>
{(childValue as Doc).title === "Disclosure Group aka Accordion"
? "Disclosure Group"
: (childValue as Doc).title === "Disclosure aka Collapsible"
? "Disclosure"
: goodTitle((childValue as Doc).title)}
{childValue.status && (
<Badge
intent={
childValue?.status === "wip"
? "primary"
: childValue.status === "beta"
? "warning"
: childValue.status === "alpha"
? "primary"
: childValue.status === "help"
? "warning"
: childValue.status === "primitive"
? "secondary"
: "info"
}
className="capitalize h-5 text-[0.65rem]"
>
{childValue?.status as Doc["status"]}
</Badge>
)}
</AsideLink>
) : null
)}
</AsideLink>
) : (
<Disclosure key={subKey} id={subKey}>
<Trigger className="pl-[2rem]">{goodTitle(subKey)}</Trigger>
<Disclosure.Panel>
{Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) =>
typeof childValue === "object" && "title" in childValue ? (
<AsideLink
className={cn(
"ml-[-0rem] flex justify-between items-center pl-[3rem]",
defaultValues.length > 0 && "jf320s"
)}
key={childKey}
href={`/${childValue.slug}`}
indicatorClassName=""
>
{(childValue as Doc).title === "Disclosure Group aka Accordion"
? "Disclosure Group"
: (childValue as Doc).title === "Disclosure aka Collapsible"
? "Disclosure"
: goodTitle((childValue as Doc).title)}
{childValue.status && (
<Badge
intent={
childValue?.status === "wip"
? "primary"
: childValue.status === "beta"
? "warning"
: childValue.status === "alpha"
? "primary"
: childValue.status === "help"
? "warning"
: childValue.status === "primitive"
? "secondary"
: "info"
}
className="capitalize h-5 text-[0.65rem]"
>
{childValue?.status as Doc["status"]}
</Badge>
)}
</AsideLink>
) : null
)}
</Disclosure.Panel>
</Disclosure>
)
)}
</DisclosureGroup>
)}
</Disclosure.Panel>
</Disclosure>
)
)}
</DisclosureGroup>
</Disclosure.Panel>
</Disclosure>
))}
Expand Down Expand Up @@ -208,12 +210,12 @@ const Trigger = ({ children, className }: { children: React.ReactNode; className
return (
<Disclosure.Trigger
className={cn(
"group py-2 hover:text-fg pressed:text-fg aria-expanded:text-fg text-muted-fg",
"group hover:text-fg hover:bg-muted/60 py-1.5 pressed:text-fg aria-expanded:text-fg",
className
)}
>
{children}
<IconChevronLeft className="ml-auto group-aria-expanded:-rotate-90 transition shrink-0 duration-300" />
<IconChevronRight className="ml-auto group-aria-expanded:rotate-90 transition shrink-0 duration-300" />
</Disclosure.Trigger>
)
}
Expand All @@ -226,7 +228,7 @@ interface AsideLinkProps extends NextLinkProps {
}

const asideLinkStyles = tv({
base: "relative block focus:outline-none focus-visible:bg-secondary/70 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-md px-2.5 py-2 text-base transition-colors hover:bg-secondary/70 hover:text-fg lg:text-sm",
base: "relative block group focus:outline-none focus-visible:bg-muted/50 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-lg pl-2.5 h-9 text-base transition-colors hover:bg-muted/60 hover:text-fg lg:text-sm",
variants: {
isActive: {
true: "font-medium text-fg",
Expand Down
2 changes: 1 addition & 1 deletion components/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function Hero() {
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
}}
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-lime-500 to-primary-500 opacity-10 dark:opacity-[0.17] sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr dark:from-sky-500 dark:to-primary-500 opacity-10 dark:opacity-[0.17] sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
/>
</div>
<svg
Expand Down
2 changes: 1 addition & 1 deletion components/table-of-contents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ function TocLink({ item, activeId }: { item: TableOfContentsProps; activeId: str
<Link
className={cn(
"outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200",
item.url.split("#")[1] === activeId ? "text-fg" : "text-muted-fg/80"
item.url.split("#")[1] === activeId ? "text-fg" : "text-muted-fg/90"
)}
href={item.url}
>
Expand Down
2 changes: 1 addition & 1 deletion components/take-current-url.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function TakeCurrentUrl() {
const [copied, setCopied] = React.useState(false)
const pathname = usePathname()
const text = pathname.includes("/docs")
? "https://getjustd.com/d/" + pathname.split("/").pop()
? "https://getjustd.com/" + pathname.split("/").pop()
: "https://getjustd.com" + pathname
const handleCopy = async () => {
if (navigator.clipboard && window.isSecureContext) {
Expand Down
8 changes: 4 additions & 4 deletions components/ui/badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ const badgeIntents = {
primary:
"bg-primary/10 dark:bg-primary/15 text-primary dark:text-primary group-hover:bg-primary/15 dark:group-hover:bg-primary/20",
secondary:
"bg-secondary/90 group-hover:bg-secondary dark:bg-secondary/90 dark:group-hover:bg-secondary text-secondary-fg",
"bg-secondary group-hover:bg-muted dark:bg-secondary dark:group-hover:bg-muted text-secondary-fg",
success:
"bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20",
info: "bg-info/15 dark:bg-info/15 text-info group-hover:bg-info/15 dark:group-hover:bg-info/10",
info: "bg-info/15 dark:bg-info/15 text-info group-hover:bg-info/20 dark:group-hover:bg-info/20",
warning:
"bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning group-hover:bg-warning/15 dark:group-hover:bg-warning/10",
"bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning group-hover:bg-warning/15 dark:group-hover:bg-warning/20",
danger:
"bg-danger/10 dark:bg-danger/15 text-danger group-hover:bg-danger/15 dark:group-hover:bg-danger/10"
"bg-danger/10 dark:bg-danger/15 text-danger group-hover:bg-danger/15 dark:group-hover:bg-danger/20"
}
const badgeShapes = {
square: "rounded-md px-1.5",
Expand Down
2 changes: 1 addition & 1 deletion components/ui/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const buttonStyles = tv(
medium:
"h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6",
large:
"h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5",
"h-10 [&>[data-slot=icon]]:mx-[-3px] sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5",
"square-petite": "size-9 shrink-0 [&_[data-slot=icon]]:text-current"
},
shape: {
Expand Down
14 changes: 7 additions & 7 deletions components/ui/disclosure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,6 @@ const disclosureStyles = tv({
},
isExpanded: {
true: "pb-3"
},
hideBorder: {
true: "[&>[slot=trigger]]:py-2",
false: "[&>[slot=trigger]]:py-3"
}
},
compoundVariants: [
Expand All @@ -82,13 +78,12 @@ const disclosureStyles = tv({
})

const Disclosure = ({ className, ...props }: DisclosureProps) => {
const { hideBorder } = React.useContext(DisclosureGroupContext)
return (
<DisclosurePrimitive
data-slot="accordion-item"
{...props}
className={cr(className, (className, renderProps) =>
disclosureStyles({ ...renderProps, hideBorder, className })
disclosureStyles({ ...renderProps, className })
)}
>
{props.children}
Expand All @@ -101,6 +96,10 @@ const accordionTriggerStyles = tv({
"flex flex-1 group rounded-lg aria-expanded:text-fg text-muted-fg sm:text-sm items-center gap-x-2 font-medium"
],
variants: {
hideBorder: {
true: "py-2",
false: "py-3"
},
isFocused: {
true: "outline-none text-fg"
},
Expand All @@ -114,14 +113,15 @@ const accordionTriggerStyles = tv({
})

const Trigger = ({ className, ...props }: ButtonProps) => {
const { hideIndicator } = React.useContext(DisclosureGroupContext)
const { hideIndicator, hideBorder } = React.useContext(DisclosureGroupContext)
return (
<Button
{...props}
slot="trigger"
className={cr(className, (className, renderProps) =>
accordionTriggerStyles({
...renderProps,
hideBorder,
className
})
)}
Expand Down
1 change: 1 addition & 0 deletions components/ui/text-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const TextField = ({
{isRevealable ? (
<ButtonPrimitive
type="button"
aria-label="Toggle password visibility"
onPress={handleTogglePasswordVisibility}
className="atrs relative [&>[data-slot=icon]]:text-muted-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded"
>
Expand Down
Loading

0 comments on commit 1b0e7f3

Please sign in to comment.