diff --git a/bun.lock b/bun.lock index b339d1d..fbd5d84 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "daleui", @@ -50,12 +51,12 @@ "remark-frontmatter": "^5.0.0", "remark-gfm": "^4.0.1", "remark-mdx-frontmatter": "^5.2.0", + "satori": "^0.26.0", "typescript": "^6.0.3", "typescript-eslint": "^8.62.0", "vite": "^8.1.0", "vite-plugin-svgr": "^5.2.0", "vitest": "^4.1.9", - "satori": "^0.26.0", "wrangler": "^4.104.0", }, }, @@ -443,7 +444,6 @@ "@remix-run/node-fetch-server": ["@remix-run/node-fetch-server@0.13.3", "", {}, "sha512-UfjOXed/DQteaM5VyTfqTeGpHwyL2J5aoRGY6cydip4tt1ehNNeSwuXCC7AEGE0RWBs/7bgKxYkL/B/+UDe4AA=="], - "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.1.3", "", { "os": "android", "cpu": "arm64" }, "sha512-DT6Z3PhvioeHMvxo+xHc3KtqggrI7CCTXCmC2h/5zUlp5jVitv7XEy+9q5/7v8IolhlioawpMo8Kg0EEBy7J0g=="], "@resvg/resvg-js": ["@resvg/resvg-js@2.6.2", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.6.2", "@resvg/resvg-js-android-arm64": "2.6.2", "@resvg/resvg-js-darwin-arm64": "2.6.2", "@resvg/resvg-js-darwin-x64": "2.6.2", "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2", "@resvg/resvg-js-linux-arm64-gnu": "2.6.2", "@resvg/resvg-js-linux-arm64-musl": "2.6.2", "@resvg/resvg-js-linux-x64-gnu": "2.6.2", "@resvg/resvg-js-linux-x64-musl": "2.6.2", "@resvg/resvg-js-win32-arm64-msvc": "2.6.2", "@resvg/resvg-js-win32-ia32-msvc": "2.6.2", "@resvg/resvg-js-win32-x64-msvc": "2.6.2" } }, "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q=="], "@resvg/resvg-js-android-arm-eabi": ["@resvg/resvg-js-android-arm-eabi@2.6.2", "", { "os": "android", "cpu": "arm" }, "sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA=="], @@ -470,6 +470,8 @@ "@resvg/resvg-js-win32-x64-msvc": ["@resvg/resvg-js-win32-x64-msvc@2.6.2", "", { "os": "win32", "cpu": "x64" }, "sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ=="], + "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.1.3", "", { "os": "android", "cpu": "arm64" }, "sha512-DT6Z3PhvioeHMvxo+xHc3KtqggrI7CCTXCmC2h/5zUlp5jVitv7XEy+9q5/7v8IolhlioawpMo8Kg0EEBy7J0g=="], + "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.1.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0NwgwsjM7LrsuVnXMK3koTpagBNOhloc/BNjKqZjv4V5zI5r13qx69uVhRx+o5Z0yy4Hzq+lpy7TAgUG/ocvrw=="], "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.1.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-YtiBp4disu6V560loT6PjMdiRaWmVvDNrUunAalbiFx2ggeJwxdAsgZMcoGP17uyAsTwAj5V1niksxlHnVQ1Sw=="], @@ -968,10 +970,10 @@ "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="], - "baseline-browser-mapping": ["baseline-browser-mapping@2.10.38", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-31/02mVB4yuQU6adKk5SlY6m+mxDwUq5KZkyYgnLrrKl7TEm1+3PyDtDBz2kOv/wxZz41GHsvV1A/u6RmiyBvw=="], - "base64-js": ["base64-js@0.0.8", "", {}, "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw=="], + "baseline-browser-mapping": ["baseline-browser-mapping@2.10.38", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-31/02mVB4yuQU6adKk5SlY6m+mxDwUq5KZkyYgnLrrKl7TEm1+3PyDtDBz2kOv/wxZz41GHsvV1A/u6RmiyBvw=="], + "bcp-47-match": ["bcp-47-match@2.0.3", "", {}, "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ=="], "before-after-hook": ["before-after-hook@4.0.0", "", {}, "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="], @@ -1004,10 +1006,10 @@ "camelcase": ["camelcase@6.3.0", "", {}, "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="], - "caniuse-lite": ["caniuse-lite@1.0.30001799", "", {}, "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw=="], - "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="], + "caniuse-lite": ["caniuse-lite@1.0.30001799", "", {}, "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw=="], + "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="], "chai": ["chai@6.2.2", "", {}, "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg=="], diff --git a/src/components/UnderConstruction.tsx b/src/components/UnderConstruction.tsx index 572a726..4b3ee51 100644 --- a/src/components/UnderConstruction.tsx +++ b/src/components/UnderConstruction.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router"; import { css } from "../../styled-system/css"; interface UnderConstructionProps { - /** 페이지 이름 (예: "문서", "쇼케이스") */ + /** 페이지 이름 (예: "문서", "모범사례") */ title: string; } diff --git a/src/root.tsx b/src/root.tsx index 8bf0e0e..50f2d74 100644 --- a/src/root.tsx +++ b/src/root.tsx @@ -1,6 +1,7 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"; import "daleui/styles.css"; import "./index.css"; +import { Navigation } from "./sections/common/Navigation"; export function Layout({ children }: { children: React.ReactNode }) { return ( @@ -27,6 +28,7 @@ export function Layout({ children }: { children: React.ReactNode }) { + {children} diff --git a/src/routes/blog.$slug.tsx b/src/routes/blog.$slug.tsx index 62e764f..e9a532d 100644 --- a/src/routes/blog.$slug.tsx +++ b/src/routes/blog.$slug.tsx @@ -7,7 +7,6 @@ import { findBlog, listBlog } from "../content/blog/loader"; import { UserProfile } from "../components/UserProfile"; import { Giscus } from "../components/Giscus"; import DirectionalLink from "../components/DirectionalLink"; -import { Navigation } from "../sections/blog/Navigation"; import { SITE_URL, blogOgImageUrl } from "../og/ogImage"; import { SeoMeta } from "../components/SeoMeta"; @@ -53,15 +52,14 @@ export default function BlogSlug({ loaderData }: Route.ComponentProps) { return ( <> - + - - -
diff --git a/src/routes/showcase._index.tsx b/src/routes/showcase._index.tsx index 4c230ed..546d8f6 100644 --- a/src/routes/showcase._index.tsx +++ b/src/routes/showcase._index.tsx @@ -3,9 +3,9 @@ import { UnderConstruction } from "../components/UnderConstruction"; export default function ShowcaseIndex() { return ( <> - 쇼케이스 | Dale UI - - + 모범사례 | Dale UI + + ); } diff --git a/src/sections/blog/Navigation/NavExternalLinks.tsx b/src/sections/common/Navigation/NavExternalLinks.tsx similarity index 65% rename from src/sections/blog/Navigation/NavExternalLinks.tsx rename to src/sections/common/Navigation/NavExternalLinks.tsx index 2e6627c..c8f3668 100644 --- a/src/sections/blog/Navigation/NavExternalLinks.tsx +++ b/src/sections/common/Navigation/NavExternalLinks.tsx @@ -1,42 +1,15 @@ -import { Icon, type IconProps, Link } from "daleui"; +import { Icon, Link } from "daleui"; import { css } from "../../../../styled-system/css"; import { useTheme } from "../../../hooks/useTheme"; - -type IconName = IconProps["name"]; - -const LINK_ITEMS: { - id: number; - label: string; - href: string; - icon: IconName; -}[] = [ - { - id: 1, - label: "깃허브", - href: "https://github.com/DaleStudy/daleui", - icon: "GitHub", - }, - { - id: 2, - label: "스토리북", - href: "https://main--675790d317ba346348aa3490.chromatic.com/", - icon: "Storybook", - }, - { - id: 3, - label: "피그마 디자인", - href: "https://www.figma.com/community/file/1559487636467651573", - icon: "Figma", - }, -]; +import { EXTERNAL_LINKS } from "./links"; export function NavExternalLinks() { const { isDark, toggleTheme } = useTheme(); return (
    - {LINK_ITEMS.map((item) => ( + {EXTERNAL_LINKS.map((item) => (
  • void }) { return (
      - {LINK_ITEMS.map((item) => ( + {INTERNAL_LINKS.map((item) => (
    • void }) { const navLinksStyle = css({ display: "flex", + flexShrink: 0, gap: "24", flexDirection: { base: "column", lg: "row" }, - justifyContent: { base: "stretch", lg: "end" }, - alignItems: { base: "stretch", lg: "center" }, - width: "100%", px: { base: "16", lg: "24" }, }); diff --git a/src/sections/blog/Navigation/NavLogo.tsx b/src/sections/common/Navigation/NavLogo.tsx similarity index 54% rename from src/sections/blog/Navigation/NavLogo.tsx rename to src/sections/common/Navigation/NavLogo.tsx index 341ac7e..5a52b74 100644 --- a/src/sections/blog/Navigation/NavLogo.tsx +++ b/src/sections/common/Navigation/NavLogo.tsx @@ -1,16 +1,24 @@ import { Flex, Tag } from "daleui"; -import { Link } from "react-router"; +import { Link, useLocation } from "react-router"; import { css } from "../../../../styled-system/css"; import { useTheme } from "../../../hooks/useTheme"; +function getSectionLabel(pathname: string): string | null { + if (pathname.startsWith("/docs")) return "문서"; + if (pathname.startsWith("/showcase")) return "모범사례"; + if (pathname.startsWith("/blog")) return "블로그"; + return null; +} + export function NavLogo() { const { isDark } = useTheme(); + const { pathname } = useLocation(); + const sectionLabel = getSectionLabel(pathname); return ( - Blog + {sectionLabel ? {sectionLabel} : null} ); } diff --git a/src/sections/common/Navigation/SponsorsButton.tsx b/src/sections/common/Navigation/SponsorsButton.tsx new file mode 100644 index 0000000..d7a658d --- /dev/null +++ b/src/sections/common/Navigation/SponsorsButton.tsx @@ -0,0 +1,27 @@ +import { Box, Button, Icon, Link } from "daleui"; +import { css } from "../../../../styled-system/css"; +import { SPONSOR_URL } from "./links"; + +export function SponsorsButton() { + return ( + + + + + + ); +} diff --git a/src/sections/blog/Navigation/index.tsx b/src/sections/common/Navigation/index.tsx similarity index 63% rename from src/sections/blog/Navigation/index.tsx rename to src/sections/common/Navigation/index.tsx index 65bb3c0..d6bb596 100644 --- a/src/sections/blog/Navigation/index.tsx +++ b/src/sections/common/Navigation/index.tsx @@ -1,11 +1,12 @@ -import { Icon } from "daleui"; +import { HStack, Icon } from "daleui"; import { useEffect, useState } from "react"; import { css, cva } from "../../../../styled-system/css"; import { NavLogo } from "./NavLogo"; import { NavExternalLinks } from "./NavExternalLinks"; import { NavLinks } from "./NavLinks"; +import { SponsorsButton } from "./SponsorsButton"; -const MENU_ID = "blog-nav-menu"; +const MENU_ID = "site-nav-menu"; export function Navigation() { const [isOpenMenu, setIsOpenMenu] = useState(false); @@ -32,42 +33,46 @@ export function Navigation() { }, [isOpenMenu]); return ( - +
      + + + +
      + + ); } @@ -89,7 +94,7 @@ const menuPanelStyle = cva({ flex: 1, flexDirection: "row", alignItems: "center", - justifyContent: "space-between", + justifyContent: "end", position: "static", boxShadow: "none", backgroundColor: "transparent", diff --git a/src/sections/common/Navigation/links.ts b/src/sections/common/Navigation/links.ts new file mode 100644 index 0000000..e0c6465 --- /dev/null +++ b/src/sections/common/Navigation/links.ts @@ -0,0 +1,28 @@ +import type { IconProps } from "daleui"; + +type IconName = IconProps["name"]; + +export const INTERNAL_LINKS: { label: string; href: string }[] = [ + { label: "문서", href: "/docs" }, + { label: "모범사례", href: "/showcase" }, + { label: "블로그", href: "/blog" }, +]; + +export const EXTERNAL_LINKS: { + label: string; + href: string; + icon: IconName; +}[] = [ + { + label: "피그마 디자인", + href: "https://www.figma.com/community/file/1559487636467651573", + icon: "Figma", + }, + { + label: "깃허브", + href: "https://github.com/DaleStudy/daleui", + icon: "GitHub", + }, +]; + +export const SPONSOR_URL = "https://github.com/sponsors/DaleStudy"; diff --git a/src/sections/marketing/Navigation.tsx b/src/sections/marketing/Navigation.tsx deleted file mode 100644 index 7966d8d..0000000 --- a/src/sections/marketing/Navigation.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { Button, Icon, Link } from "daleui"; -import { useState } from "react"; -import { css } from "../../../styled-system/css"; -import { stack } from "../../../styled-system/patterns"; -import { useTheme } from "../../hooks/useTheme"; - -const LINK_ITEMS = [ - { id: 1, label: "깃허브", href: "https://github.com/DaleStudy/daleui" }, - { - id: 2, - label: "스토리북", - href: "https://main--675790d317ba346348aa3490.chromatic.com/", - }, - { - id: 3, - label: "피그마 디자인", - href: "https://www.figma.com/community/file/1559487636467651573", - }, -]; - -export function Navigation() { - const [isOpenMenu, setIsOpenMenu] = useState(false); - const { isDark, toggleTheme } = useTheme(); - - const handleToggleMenu = () => { - setIsOpenMenu((v) => !v); - }; - - const handleSponsorClick = () => { - window.open("https://github.com/sponsors/DaleStudy", "_blank"); - }; - - return ( -
      - -
      - ); -}