Refactor landing page and release workflow

fluid-design-io · Jan 25, 2025 · 8d87c46 · 8d87c46
1 parent c70066f
commit 8d87c46
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 307 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -15,10 +15,10 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v3
 
-      - name: Setup Node.js 20
+      - name: Setup Node.js 22
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
@@ -29,7 +29,6 @@ jobs:
       - name: Create Release Pull Request
         uses: changesets/action@v1
         with:
-          publish: bun run release
-          version: bun run version
+          version: bun run ver
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # vision-pro-ui
 
+## 1.1.1
+
+### Patch Changes
+
+- Update Node.js version to 22 in release workflow
+  Remove unused landing page components and files
+  Update landing page layout and add documentation links
+  Improve sidebar and grid layout styling
+  Remove app store and hero-related components
+
 ## 1.1.0
 
 ### Minor Changes

diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/core/button";
 import {
   Ornament,
   OrnamentContentBase,
@@ -8,6 +9,7 @@ import {
 import { AppStoreIcon, EnvironmentsIcon, PeopleIcon } from "@/components/icons";
 import HomeView from "@/components/landing/home-view";
 import { Text } from "@/components/ui/typography";
+import Link from "next/dist/client/link";
 
 export const dynamic = "force-dynamic";
 
@@ -19,10 +21,30 @@ function LandingPage() {
           <HomeView />
         </OrnamentContentBase>
         <OrnamentContentBase value="people" key="people">
-          <div className="text-center">
+          <div className="flex flex-col items-center justify-center gap-4 text-center">
             <Text variant="secondary" size="XLTitle2">
               Coming Soon...
             </Text>
+            <Link href="/docs">
+              <Button>View Docs</Button>
+            </Link>
+            <p className="text-xs opacity-50">
+              Created by{" "}
+              <Link
+                href="https://twitter.com/useOptimistic"
+                className="font-semibold text-fd-foreground underline"
+              >
+                Oliver
+              </Link>
+              <br />
+              Docs powered by{" "}
+              <Link
+                href="https://fumadocs.vercel.app/"
+                className="font-semibold text-fd-foreground underline"
+              >
+                Fumadocs
+              </Link>
+            </p>
           </div>
         </OrnamentContentBase>
         <OrnamentContentBase value="environments" key="environments">

diff --git a/app/__page.tsx b/app/__page.tsx
diff --git a/components/core/grid-layout.tsx b/components/core/grid-layout.tsx
@@ -606,11 +606,20 @@ function HoneycombCell({
               </span>
             )}
             {item.background && (
-              <div className="pointer-events-none absolute inset-0">
+              <div className={"pointer-events-none absolute inset-0"}>
                 {item.background}
+                <div
+                  className={cn(
+                    "absolute inset-0 z-10 bg-white/5 opacity-0 transition-opacity",
+                    "bg-blend-overlay",
+                    "group-hover/cell:opacity-100",
+                  )}
+                />
               </div>
             )}
-            {item.icon && <div className="absolute inset-0">{item.icon}</div>}
+            {item.icon && (
+              <div className="absolute inset-0 z-[11]">{item.icon}</div>
+            )}
           </div>
         </Window>
       </motion.div>
@@ -635,7 +644,7 @@ function HoneycombCell({
 }
 
 export const honeycombIconClassName = cn(
-  "object-contain p-3 transition-all duration-300",
+  "object-contain p-3 transition-all duration-300 pointer-events-none touch-none",
   "translate-y-0 translate-x-0 group-hover/cell:!translate-y-[var(--cell-y,-1px)] group-hover/cell:!translate-x-[var(--cell-x,-1px)]",
   "[filter:drop-shadow(0px_0px_1px_rgba(12,12,12,0))] group-hover/cell:[filter:drop-shadow(calc(var(--cell-x,-1px)*-1.5)_calc(var(--cell-y,-1px)*-1.5)_1px_rgba(0,0,0,0.33))]",
 );
diff --git a/components/core/sidebar.tsx b/components/core/sidebar.tsx
@@ -14,9 +14,6 @@ import { useWindow } from "./window";
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContext = {
@@ -84,10 +81,8 @@ const SidebarProvider = React.forwardRef<
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+      setOpen((open) => !open);
+    }, [setOpen]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
@@ -133,15 +128,10 @@ const SidebarProvider = React.forwardRef<
     return (
       <SidebarContext.Provider value={contextValue}>
         <div
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
+          style={style}
           className={cn(
-            "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-[600px] w-full",
+            "group/sidebar-wrapper flex min-h-[600px] w-full has-[[data-variant=inset]]:bg-sidebar",
+            "[--sidebar-width:10rem] sm:[--sidebar-width:16rem]",
             className,
           )}
           ref={ref}
@@ -166,7 +156,7 @@ const Sidebar = React.forwardRef<
   return (
     <div
       ref={ref}
-      className="text-sidebar-foreground group peer"
+      className="group peer text-sidebar-foreground"
       data-state={state}
       data-collapsible={state === "collapsed" ? "offcanvas" : ""}
       data-side={side}
@@ -194,7 +184,7 @@ const Sidebar = React.forwardRef<
       >
         <div
           data-sidebar="sidebar"
-          className="bg-sidebar/30 group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col overflow-y-auto backdrop-brightness-[0.35] group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          className="flex h-full w-full flex-col overflow-y-auto bg-sidebar/30 backdrop-brightness-[0.35] group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
           style={{
             maxHeight: height ? height : "100%",
           }}
@@ -285,7 +275,7 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   );
@@ -340,7 +330,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
@@ -361,7 +351,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -483,15 +473,15 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-5 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
         className,
       )}
       {...props}
@@ -508,7 +498,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -567,7 +557,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className,
     )}
@@ -599,7 +589,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",

diff --git a/components/landing/app-store.client.tsx b/components/landing/app-store.client.tsx