diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..cbb4fd28 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib", + "editor.gotoLocation.multipleDefinitions": "goto" +} \ No newline at end of file diff --git a/pkgs/luxdefi-ui/blocks/components/card-block.tsx b/pkgs/luxdefi-ui/blocks/components/card-block.tsx index 595b7261..17372b84 100644 --- a/pkgs/luxdefi-ui/blocks/components/card-block.tsx +++ b/pkgs/luxdefi-ui/blocks/components/card-block.tsx @@ -10,13 +10,11 @@ import { CardFooter, CardHeader, CardTitle, + LinkElement, type TypographySize } from '../../primitives' -import { - Icons, - LinkElement -} from '../../common' +import { Icons } from '../../common' import { getSpecifierData, diff --git a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx index 37da8004..92f00cf7 100644 --- a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx +++ b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx @@ -1,8 +1,7 @@ import React from 'react' import type { LinkDef, ButtonDef} from '../../types' -import type { ButtonSizes } from '../../primitives' -import { ActionButton, LinkElement } from '../../common' +import { type ButtonSizes, ActionButton, LinkElement } from '../../primitives' import type { Block, CTABlock } from '../def' const CtaBlockComponent: React.FC<{ diff --git a/pkgs/luxdefi-ui/common/copyright.tsx b/pkgs/luxdefi-ui/common/copyright.tsx index d15e3997..f06ac7ef 100644 --- a/pkgs/luxdefi-ui/common/copyright.tsx +++ b/pkgs/luxdefi-ui/common/copyright.tsx @@ -1,9 +1,11 @@ import React from 'react' +const FIRST = 2023 + const Copyright: React.FC = () => { const year = new Date().getFullYear() - const yearString = (year > 2023) ? `2023 - ${year}` : '2023' + const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString() return ( <>{`Copyright © ${yearString} Lux Partners Ltd. `}
All rights reserved. diff --git a/pkgs/luxdefi-ui/common/footer.tsx b/pkgs/luxdefi-ui/common/footer.tsx index c26d9543..30516a8d 100644 --- a/pkgs/luxdefi-ui/common/footer.tsx +++ b/pkgs/luxdefi-ui/common/footer.tsx @@ -1,17 +1,17 @@ import React from 'react' import type { ButtonVariants } from '../primitives' -import type { LinkDef, SiteConf } from '../types' +import type { LinkDef, SiteDef } from '../types' import { Copyright, NavItems } from '../common' import Logo from './logo' const Footer: React.FC<{ - conf: SiteConf, + siteDef: SiteDef, className?: string, noHorizPadding?: boolean }> = ({ - conf, + siteDef, className='', noHorizPadding=false }) => ( @@ -23,26 +23,29 @@ const Footer: React.FC<{ 'md:w-full md:mx-0 ' + 'lg:flex lg:flex-row lg:justify-between lg:gap-8 lg:w-full' + 'max-w-screen-2xl ' + - `lg:columns-${conf.footer.length + 1}` // must safelist these! see tailwind docs + `lg:columns-${siteDef.footer.length + 1}` // must safelist these! see tailwind docs }>
- {conf.footer.map((defs: LinkDef[], index, arr) => { + {siteDef.footer.map((defs: LinkDef[], index, arr) => { const colSpan = ((index === arr.length - 1) && (arr.length % 2 === 1)) ? 'col-span-2 mx-auto items-center sm:col-span-1 sm:mx-0 sm:items-start' : '' return ( - ( variant === 'linkFG' ? - 'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal' - : '')} - /> - )})} + ( + variant === 'linkFG' ? 'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal' : '' + ) + } + /> + ) + })}
diff --git a/pkgs/luxdefi-ui/common/head-metadata/index.tsx b/pkgs/luxdefi-ui/common/head-metadata/index.tsx index 0b5b3959..658ec0ab 100644 --- a/pkgs/luxdefi-ui/common/head-metadata/index.tsx +++ b/pkgs/luxdefi-ui/common/head-metadata/index.tsx @@ -13,6 +13,11 @@ import type { import type { OpenGraph, OGImage } from './from-next/opengraph-types' import type { Twitter, TwitterImage } from './from-next/twitter-types' +/* + NOTE: This is ONLY for sites that use the pages router in next. + The app router does this automatically +*/ + const getURLasString = (url: string | URL) => { return ( (typeof url === 'string') ? (url as string) : (url.href) @@ -170,10 +175,7 @@ export const TwitterComponent: React.FC<{ {tw.site && ()} )) - - // For use with pages router only. - // App router does this automatically if you export the metadata object - + /* See NOTE at top of file! */ // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment const HeadMetadataComponent: React.FC<{ metadata: Metadata @@ -185,7 +187,6 @@ const HeadMetadataComponent: React.FC<{ return (<> {mainTitle && ({mainTitle}) /* must be here, directly under Head component */} - {metadata.description && ( )} diff --git a/pkgs/luxdefi-ui/common/header/index.tsx b/pkgs/luxdefi-ui/common/header/index.tsx index 5a3de211..efcbe244 100644 --- a/pkgs/luxdefi-ui/common/header/index.tsx +++ b/pkgs/luxdefi-ui/common/header/index.tsx @@ -1,52 +1,48 @@ import React from 'react' -import type SiteConf from '../../types/site-conf' - +import type { SiteDef } from '../../types' import Logo from '../logo' -import type { ButtonVariants } from '../../primitives' -import { NavItems, LinkElement, DrawerMenu } from '../../common' +import { type ButtonVariants, LinkElement, DrawerMenu } from '../../primitives' +import { NavItems, Icons } from '../../common' import MobileNav from './mobile-nav' const Header: React.FC<{ - conf: SiteConf + siteDef: SiteDef }> = ({ - conf + siteDef }) => (
(variant === 'primary' ? 'min-w-[174px]' : '')} key='three' /> (variant === 'link' ? 'text-muted-1' : '')} key='four' /> - { conf.mainNav.aux && /* TODO unhack */ ( - + { siteDef.mainNav.aux && /* TODO unhack */ ( + )}
} > ) + export default Header diff --git a/pkgs/luxdefi-ui/common/header/mobile-nav.tsx b/pkgs/luxdefi-ui/common/header/mobile-nav.tsx index b71c3f5e..a845401d 100644 --- a/pkgs/luxdefi-ui/common/header/mobile-nav.tsx +++ b/pkgs/luxdefi-ui/common/header/mobile-nav.tsx @@ -1,36 +1,35 @@ 'use client' import React from 'react' -import { LinkElement } from '../../common' -import type { ButtonVariants } from '../../primitives' -import type { SiteConf } from '../../types' +import { type ButtonVariants, LinkElement } from '../../primitives' +import type { SiteDef } from '../../types' const MobileNav: React.FC<{ - conf: SiteConf + siteDef: SiteDef itemVariant?: ButtonVariants className?: string itemClassName?: string - onAction?: () => void // for close functionality + onAction?: () => void // eg, for close functionality }> = ({ - conf, + siteDef, onAction, className='', itemClassName='', itemVariant }) => ( - conf.mainNav.full.length ? ( + siteDef.mainNav.full.length ? ( + {siteDef.mainNav.full.map((el, index) => ( + + ))} + ) : null ) diff --git a/pkgs/luxdefi-ui/common/index.ts b/pkgs/luxdefi-ui/common/index.ts index f6856046..91f96b97 100644 --- a/pkgs/luxdefi-ui/common/index.ts +++ b/pkgs/luxdefi-ui/common/index.ts @@ -5,13 +5,9 @@ export { default as Main } from './main' export { default as Footer } from './footer' export { default as Header } from './header' export { default as MiniChart } from './mini-chart' -export { default as ActionButton } from './action-button' export { default as Copyright} from './copyright' -export { default as DrawerMenu} from './drawer-menu' -export { default as LinkElement} from './link-element' export { default as HeadMetadata, getTitleFromTemplateString, TwitterComponent} from './head-metadata' export { default as NavItems} from './nav-items' -export { default as YouTubeEmbed} from './youtube-embed' diff --git a/pkgs/luxdefi-ui/common/logo.tsx b/pkgs/luxdefi-ui/common/logo.tsx index 90e09282..6ed28507 100644 --- a/pkgs/luxdefi-ui/common/logo.tsx +++ b/pkgs/luxdefi-ui/common/logo.tsx @@ -12,7 +12,7 @@ const Logo: React.FC<{ className?: string }> = ({ size, - href, // no default please + href, // no default please! className='', logoOnly=false }) => { diff --git a/pkgs/luxdefi-ui/common/main.tsx b/pkgs/luxdefi-ui/common/main.tsx index a752f3af..0aa696ba 100644 --- a/pkgs/luxdefi-ui/common/main.tsx +++ b/pkgs/luxdefi-ui/common/main.tsx @@ -5,11 +5,7 @@ const c = 'max-w-screen-2xl 2xl:w-[1500px] lg:mx-auto ' + 'flex flex-col justify-start items-stretch ' + 'p-4 md:px-6 lg:px-8 ' -const Main: React.FC< - PropsWithChildren & { - className?: string - } -> = ({ +const Main: React.FC = ({ children, className='', }) => ( diff --git a/pkgs/luxdefi-ui/common/nav-items.tsx b/pkgs/luxdefi-ui/common/nav-items.tsx index 38f7e663..51a9a0fb 100644 --- a/pkgs/luxdefi-ui/common/nav-items.tsx +++ b/pkgs/luxdefi-ui/common/nav-items.tsx @@ -1,11 +1,9 @@ import React from 'react' import type { LinkDef } from '../types' -import type { ButtonVariants } from '../primitives/button' +import { type ButtonVariants, LinkElement } from '../primitives' import { cn } from '../util' -import LinkElement from './link-element' - const NavItems: React.FC<{ items: LinkDef[] className?: string, @@ -21,45 +19,44 @@ const NavItems: React.FC<{ itemClassNameFromVariant, currentAs }) => ( - items.length ? ( - - {items.map((item, index) => { + items.length ? ( + + {items.map((item, index) => { - const variant = item.variant ?? 'link' - let extraClasses = '' - // note that linkFG (or any other variant of 'link') - // will not get assigned these classes, - // and will remain styles is 'foreground' (hence the name) - if (variant === 'link') { - - extraClasses+= ' text-nav hover:text-nav-hover' - if (currentAs && currentAs === item.href) { - extraClasses += ' text-nav-current' - } - } - else { - extraClasses+= ' min-w-0' - } - if (currentAs && currentAs === item.href) { - extraClasses += ' pointer-events-none' - } + const variant = item.variant ?? 'link' + let extraClasses = '' + // note that linkFG (or any other variant of 'link') + // will not get assigned these classes, + // and will remain styles is 'foreground' (hence the name) + if (variant === 'link') { + extraClasses+= ' text-nav hover:text-nav-hover' + if (currentAs && currentAs === item.href) { + extraClasses += ' text-nav-current' + } + } + else { + extraClasses+= ' min-w-0' + } + if (currentAs && currentAs === item.href) { + extraClasses += ' pointer-events-none' + } - return ( - - ) - })} - - ) - : null - ) + return ( + + ) + })} + + ) + : null +) - export default NavItems +export default NavItems diff --git a/pkgs/luxdefi-ui/next-fonts/index.ts b/pkgs/luxdefi-ui/next-fonts/index.ts deleted file mode 100644 index 9d059992..00000000 --- a/pkgs/luxdefi-ui/next-fonts/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Inter } from 'next/font/google' -import localFont from 'next/font/local' - -const drukTextWide = localFont({ - src: [ - { - path: './fonts/DrukTextWide-Medium-Trial.otf', - weight: '500', - style: 'normal' - }, - { - path: './fonts/DrukTextWide-Bold-Trial.otf', - weight: '700', - style: 'normal' - }, - { - path: './fonts/DrukTextWide-Heavy-Trial.otf', - weight: '800', - style: 'normal', - }, - ], - display: 'swap', - variable: '--font-druk-text-wide' , -}) - -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", -}) - -export { - inter, - drukTextWide -} diff --git a/pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Bold-Trial.otf b/pkgs/luxdefi-ui/next/fonts/DrukTextWide-Bold-Trial.otf similarity index 100% rename from pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Bold-Trial.otf rename to pkgs/luxdefi-ui/next/fonts/DrukTextWide-Bold-Trial.otf diff --git a/pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Heavy-Trial.otf b/pkgs/luxdefi-ui/next/fonts/DrukTextWide-Heavy-Trial.otf similarity index 100% rename from pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Heavy-Trial.otf rename to pkgs/luxdefi-ui/next/fonts/DrukTextWide-Heavy-Trial.otf diff --git a/pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Medium-Trial.otf b/pkgs/luxdefi-ui/next/fonts/DrukTextWide-Medium-Trial.otf similarity index 100% rename from pkgs/luxdefi-ui/next-fonts/fonts/DrukTextWide-Medium-Trial.otf rename to pkgs/luxdefi-ui/next/fonts/DrukTextWide-Medium-Trial.otf diff --git a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts new file mode 100644 index 00000000..c47ddd84 --- /dev/null +++ b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts @@ -0,0 +1,18 @@ +import fontDescs from './lux-next-fonts' +import type NextFontDesc from './next-font-desc' + + // These will be injected for in app router app that uses our RootLayout + + // First is assumed to be mapped to the default font and is injected into + // as a normal tw font family class. +export default () => { + let nextFonts: NextFontDesc[] = [] + fontDescs.forEach((desc: NextFontDesc) => { + if (desc.nextFont) { + nextFonts.push(desc) + } + }) + return nextFonts.map( + (desc: NextFontDesc) => (desc.nextFont!.variable) + ).join(' ') + ` font-${nextFonts[0].twName}` +} diff --git a/pkgs/luxdefi-ui/next/index.ts b/pkgs/luxdefi-ui/next/index.ts index 9c8a9c41..ddf036f7 100644 --- a/pkgs/luxdefi-ui/next/index.ts +++ b/pkgs/luxdefi-ui/next/index.ts @@ -2,10 +2,19 @@ import { determineDeviceMiddleware } from './determine-device-middleware' import NotFoundMDX from './not-found-content.mdx' import NotFound from './not-found' import RootLayout from './root-layout' +import luxNextFonts from './lux-next-fonts' +import type {default as NextFontDesc, NextFontWithVariable,} from './next-font-desc' +import getAppRouterBodyFontClasses from './get-app-router-font-classes' +import PagesRouterFontVars from './pages-router-font-vars' export { determineDeviceMiddleware, NotFoundMDX, NotFound, - RootLayout + RootLayout, + getAppRouterBodyFontClasses, + PagesRouterFontVars, + luxNextFonts, + type NextFontDesc, + type NextFontWithVariable, } diff --git a/pkgs/luxdefi-ui/next/lux-next-fonts.ts b/pkgs/luxdefi-ui/next/lux-next-fonts.ts new file mode 100644 index 00000000..e9df80e9 --- /dev/null +++ b/pkgs/luxdefi-ui/next/lux-next-fonts.ts @@ -0,0 +1,64 @@ +import { Inter } from 'next/font/google' +import localFont from 'next/font/local' + +import type NextFontDesc from './next-font-desc' +import type TwFontDesc from '../tailwind/tw-font-desc' + +import twFonts from '../tailwind/lux-tw-fonts' + +const drukTextWide = localFont({ + src: [ + { + path: './fonts/DrukTextWide-Medium-Trial.otf', + weight: '500', + style: 'normal' + }, + { + path: './fonts/DrukTextWide-Bold-Trial.otf', + weight: '700', + style: 'normal' + }, + { + path: './fonts/DrukTextWide-Heavy-Trial.otf', + weight: '800', + style: 'normal', + }, + ], + display: 'swap', + variable: '--font-druk-text-wide' , +}) + +const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", +}) + + +/* + NextFontDesc and TwFontDesc have to be seperate because they are needed + at different times during the next compile / build. Otherwise a nasty + race condition happens! That's why they are in different files. +*/ + +export default [ + { + font: inter, + twName: 'sans' + }, + { + font: drukTextWide, + twName: 'heading' + } +].map ( + (el) => { + const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName)) + if (!twFont) { + throw new Error('lux-next-fonts: Next font is not paired to a TW font!') + } + + return ({ + ...twFont, + nextFont: el.font, + }) + } +) as NextFontDesc[] diff --git a/pkgs/luxdefi-ui/next/next-font-desc.ts b/pkgs/luxdefi-ui/next/next-font-desc.ts new file mode 100644 index 00000000..007cf920 --- /dev/null +++ b/pkgs/luxdefi-ui/next/next-font-desc.ts @@ -0,0 +1,28 @@ +import type TwFontDesc from '../tailwind/tw-font-desc' + +// from next repo +type NextFont = { + className: string + style: { fontFamily: string; fontWeight?: number; fontStyle?: string } +} + +// from next repo +type NextFontWithVariable = NextFont & { + variable: string +} + + +/* + NextFontDesc and TwFontDesc have to be seperate because they are needed + at different times during the next compile / build. Otherwise a nasty + race condition happens! That's why they are in different files. +*/ + +interface NextFontDesc extends TwFontDesc { + nextFont: NextFontWithVariable +} + +export { + type NextFontDesc as default, + type NextFontWithVariable, +} \ No newline at end of file diff --git a/pkgs/luxdefi-ui/next/not-found.tsx b/pkgs/luxdefi-ui/next/not-found.tsx index d0df9e52..d526452c 100644 --- a/pkgs/luxdefi-ui/next/not-found.tsx +++ b/pkgs/luxdefi-ui/next/not-found.tsx @@ -5,19 +5,19 @@ import Footer from '../common/footer' import { ApplyTypography } from '../primitives' import NotFoundMDX from './not-found-content.mdx' -import type { SiteConf } from '../types' +import type { SiteDef } from '../types' const NotFound: React.FC<{ - conf: SiteConf + siteDef: SiteDef }> = ({ - conf + siteDef }) => (<>
-