Skip to content

Refactor landing #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
owjs3901 merged 1 commit into from
Jun 9, 2025
Merged

Refactor landing #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions apps/landing/src/app/(detail)/docs/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

import { URL_PREFIX } from '../../../constants'
import { OpenMenuItem } from './OpenMenuItem'

export interface MenuItemProps {
Expand All @@ -19,12 +18,8 @@ export function MenuItem(props: MenuItemProps) {
const { children, to, subMenu } = props
const path = usePathname()
const selected = to
? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
: !!subMenu?.some((item) =>
item.to
? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
: false,
)
? path.startsWith(to)
: !!subMenu?.some((item) => (item.to ? path.startsWith(item.to) : false))

if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
const inner = (
Expand Down Expand Up @@ -61,7 +56,7 @@ export function MenuItem(props: MenuItemProps) {
className={css({
textDecoration: 'none',
})}
href={URL_PREFIX + to}
href={to}
>
{inner}
</Link>
Expand Down
13 changes: 4 additions & 9 deletions apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Fragment, useReducer } from 'react'

import { URL_PREFIX } from '../../../constants'
import { MenuItemProps } from './MenuItem'

export function OpenMenuItem({
Expand All @@ -14,9 +13,7 @@ export function OpenMenuItem({
Required<Pick<MenuItemProps, 'subMenu'>>) {
const path = usePathname()
const selected = subMenu.some((item) =>
item.to
? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
: false,
item.to ? path.startsWith(item.to) : false,
)
const [open, handleOpen] = useReducer((state) => !state, selected)
return (
Expand Down Expand Up @@ -45,7 +42,7 @@ export function OpenMenuItem({
{subMenu && (
<Image
boxSize="16px"
src={URL_PREFIX + '/menu-arrow.svg'}
src="/menu-arrow.svg"
transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
transition="transform 0.2s"
/>
Expand All @@ -56,9 +53,7 @@ export function OpenMenuItem({
<Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
<VStack flex="1" gap="4px">
{subMenu.map(({ children, to }, idx) => {
const selected = to
? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
: false
const selected = to ? path.startsWith(to) : false
const inner = (
<Flex
_hover={{
Expand Down Expand Up @@ -90,7 +85,7 @@ export function OpenMenuItem({
className={css({
textDecoration: 'none',
})}
href={URL_PREFIX + to}
href={to}
>
{inner}
</Link>
Expand Down
4 changes: 1 addition & 3 deletions apps/landing/src/app/FeatureCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Flex, Image, Text, VStack } from '@devup-ui/react'

import { URL_PREFIX } from '../constants'

interface FeatureCardProps {
title: string
description: string
Expand All @@ -12,7 +10,7 @@ export function FeatureCard({ icon, description, title }: FeatureCardProps) {
return (
<Flex bg="$cardBg" borderRadius="20px" flex="1" gap="10px" p="24px">
<Flex px="8px">
<Image boxSize="32px" src={URL_PREFIX + icon} />
<Image boxSize="32px" src={icon} />
</Flex>
<VStack flex="1" gap="10px">
<Text color="$title" typography="h6">
Expand Down
23 changes: 20 additions & 3 deletions apps/landing/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import type { Metadata } from 'next'
import { Footer } from '../components/Footer'
import { Header } from '../components/Header'
import { SearchModal } from '../components/SearchModal'
import { URL_PREFIX } from '../constants'

export const metadata: Metadata = {
title: 'Devup UI',
Expand All @@ -22,17 +21,35 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html: `<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PSRKC4QZ');</script>
<!-- End Google Tag Manager -->`,
}}
/>
<ThemeScript auto />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
{URL_PREFIX && <base href={URL_PREFIX} />}
<link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
<link href="/favicon.ico" rel="shortcut icon" />
</head>
<body
className={css({
bg: '$background',
color: '$text',
})}
>
<noscript>
<iframe
height="0"
src="https://www.googletagmanager.com/ns.html?id=GTM-PSRKC4QZ"
style={{ display: 'none', visibility: 'hidden' }}
width="0"
/>
</noscript>
<SearchModal />
<Header />
{children}
Expand Down
12 changes: 4 additions & 8 deletions apps/landing/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import Link from 'next/link'
import { CodeBoard } from '../components/CodeBoard'
import { Container } from '../components/Container'
import { Discord } from '../components/Discord'
import { URL_PREFIX } from '../constants'
import { FeatureCard } from './FeatureCard'

export default function HomePage() {
return (
<>
<link href="https://devup-ui.com" rel="canonical" />
<Box
h="80dvh"
pointerEvents="none"
Expand Down Expand Up @@ -66,7 +66,7 @@ export default function HomePage() {
<Box pt={['100px', '150px']}>
<VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
<VStack alignItems="center" gap="24px">
<Image h="50px" src={URL_PREFIX + '/icon.svg'} w="52px" />
<Image h="50px" src="/icon.svg" w="52px" />
<Text color="$title" textAlign="center" typography="h1">
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
</Text>
Expand All @@ -81,7 +81,7 @@ export default function HomePage() {
className={css({
textDecoration: 'none',
})}
href={URL_PREFIX + '/docs/overview'}
href="/docs/overview"
>
<Flex
_active={{
Expand Down Expand Up @@ -112,11 +112,7 @@ export default function HomePage() {
<Text color="$base" typography="buttonL">
Get started
</Text>
<Image
bg="$base"
boxSize="24px"
maskImage={`url(${URL_PREFIX + '/arrow.svg'})`}
/>
<Image bg="$base" boxSize="24px" maskImage="url(/arrow.svg)" />
</Flex>
</Flex>
</Link>
Expand Down
6 changes: 2 additions & 4 deletions apps/landing/src/components/Discord.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { css, Flex, Image, Text, VStack } from '@devup-ui/react'
import Link from 'next/link'

import { URL_PREFIX } from '../constants'

export function Discord() {
return (
<VStack
alignItems="center"
bgColor="$joinBg"
bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
bgImage="url(/discord-bg.svg)"
bgPositionX={['-20vw', null, '-30%']}
bgPositionY="bottom"
bgSize={['contain', null, '70%']}
Expand Down Expand Up @@ -56,7 +54,7 @@ export function Discord() {
<Text color="#FFF" typography="buttonLbold">
Join our Discord
</Text>
<Image boxSize="24px" src={URL_PREFIX + '/outlink.svg'} />
<Image boxSize="24px" src="/outlink.svg" />
</Flex>
</Flex>
</Link>
Expand Down
23 changes: 9 additions & 14 deletions apps/landing/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
import Link from 'next/link'

import { URL_PREFIX } from '../constants'

export function Footer() {
return (
<Box as="footer" bg="$footerBg" px="16px" py={['30px', '60px']}>
Expand All @@ -15,7 +13,7 @@ export function Footer() {
<VStack flex="1" gap={[1, 0]}>
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/overview'}
href="/docs/overview"
>
<Text color="$footerTitle" typography="buttonS">
Docs
Expand All @@ -24,7 +22,7 @@ export function Footer() {
<VStack gap="14px">
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/overview'}
href="/docs/overview"
>
<Text color="$footerText" typography="footerMenu">
Overview
Expand All @@ -33,31 +31,31 @@ export function Footer() {

<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/installation'}
href="/docs/installation"
>
<Text color="$footerText" typography="footerMenu">
Installation
</Text>
</Link>
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/features'}
href="/docs/features"
>
<Text color="$footerText" typography="footerMenu">
Features
</Text>
</Link>
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/api/box'}
href="/docs/api/box"
>
<Text color="$footerText" typography="footerMenu">
API
</Text>
</Link>
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/docs/devup/devup-json'}
href="/docs/devup/devup-json"
>
<Text color="$footerText" typography="footerMenu">
Devup
Expand All @@ -66,10 +64,7 @@ export function Footer() {
</VStack>
</VStack>
<VStack flex="1" gap="20px">
<Link
className={css({ textDecoration: 'none' })}
href={URL_PREFIX + '/team'}
>
<Link className={css({ textDecoration: 'none' })} href="/team">
<Text color="$footerTitle" typography="buttonS">
Team
</Text>
Expand All @@ -81,10 +76,10 @@ export function Footer() {
flexDir={['column', 'row']}
justifyContent="space-between"
>
<Link href={URL_PREFIX + '/'}>
<Link href="/">
<Image
alt="white-logo"
src={URL_PREFIX + '/white-logo.svg'}
src="/white-logo.svg"
w={['164px', '204px']}
/>
</Link>
Expand Down
4 changes: 1 addition & 3 deletions apps/landing/src/components/Header/HeaderInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Flex, Image, Input } from '@devup-ui/react'

import { URL_PREFIX } from '../../constants'

export function HeaderInput(props: React.ComponentProps<'input'>) {
return (
<Flex
Expand All @@ -12,7 +10,7 @@ export function HeaderInput(props: React.ComponentProps<'input'>) {
p="8px 8px 6px"
w="100%"
>
<Image boxSize="24px" src={URL_PREFIX + '/search.svg'} />
<Image boxSize="24px" src="/search.svg" />
<Input
_placeholder={{
color: '$caption',
Expand Down
6 changes: 1 addition & 5 deletions apps/landing/src/components/Header/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@
import { Text } from '@devup-ui/react'
import { usePathname } from 'next/navigation'

import { URL_PREFIX } from '../../constants'

interface MenuProps {
children?: React.ReactNode
keyword: string
}

export function Menu({ children, keyword }: MenuProps) {
const path = usePathname()
const selected =
path.startsWith(`${URL_PREFIX}/${keyword}`) ||
path.startsWith(`/${keyword}`)
const selected = path.startsWith(`/${keyword}`)
return (
<Text
_active={{
Expand Down
5 changes: 2 additions & 3 deletions apps/landing/src/components/Header/MobMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
import Link from 'next/link'

import { LeftMenu } from '../../app/(detail)/docs/LeftMenu'
import { URL_PREFIX } from '../../constants'
import { HeaderInput } from './HeaderInput'
import { HeaderInputWrap } from './HeaderInputWrap'
import { MobMenuWrap } from './MobMenuWrap'
Expand All @@ -20,7 +19,7 @@ export function MobMenu() {
className={css({
textDecoration: 'none',
})}
href={URL_PREFIX + '/docs/overview'}
href="/docs/overview"
>
<Flex alignItems="center" py="10px">
<Text color="$title" textAlign="right" typography="buttonM">
Expand All @@ -33,7 +32,7 @@ export function MobMenu() {
className={css({
textDecoration: 'none',
})}
href={URL_PREFIX + '/team'}
href="/team"
>
<Flex alignItems="center" py="10px">
<Text color="$title" textAlign="right" typography="buttonM">
Expand Down
Loading