@luxfi/core 5.3.0 → 5.3.2
Sign up to get free protection for your applications and to get access to all the features.
- package/commerce/ui/conf.ts +13 -13
- package/commerce/ui/context.tsx +123 -123
- package/commerce/ui/store.ts +289 -289
- package/components/access-code-input.tsx +71 -71
- package/components/auth/auth-listener.tsx +29 -29
- package/components/auth/auth-token/clear-auth-token.tsx +12 -12
- package/components/auth/auth-token/set-auth-token.tsx +16 -16
- package/components/auth/common-auth-domains.ts +16 -16
- package/components/auth/login-panel.tsx +107 -107
- package/components/back-button.tsx +49 -49
- package/components/chat-widget.tsx +85 -85
- package/components/commerce/_to_deprecate_checkout-widget/const.ts +13 -13
- package/components/commerce/_to_deprecate_checkout-widget/index.tsx_ +188 -188
- package/components/commerce/_to_deprecate_checkout-widget/obs-string-set.ts +48 -48
- package/components/commerce/_to_deprecate_checkout-widget/use-anim-clx-set.ts +58 -58
- package/components/commerce/bag-button.tsx +98 -98
- package/components/commerce/buy-button.tsx +34 -34
- package/components/commerce/checkout-button.tsx +129 -129
- package/components/commerce/checkout-panel/cart-accordian.tsx +66 -66
- package/components/commerce/checkout-panel/checkout-panel-props.ts +9 -9
- package/components/commerce/checkout-panel/desktop-bag-carousel.tsx +36 -36
- package/components/commerce/checkout-panel/desktop-cp.tsx +82 -82
- package/components/commerce/checkout-panel/index.tsx +126 -126
- package/components/commerce/checkout-panel/mobile-cp.tsx +66 -66
- package/components/commerce/checkout-panel/policy-links.tsx +29 -29
- package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
- package/components/commerce/checkout-panel/thank-you.tsx +18 -18
- package/components/commerce/desktop-bag-popup.tsx +78 -78
- package/components/commerce/desktop-nav-menu.tsx +130 -130
- package/components/commerce/drawer/index.tsx +88 -88
- package/components/commerce/drawer/micro.tsx +144 -144
- package/components/commerce/drawer/shell.tsx +85 -85
- package/components/commerce/mobile-bag-drawer.tsx +51 -51
- package/components/commerce/mobile-login-button.tsx +107 -101
- package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
- package/components/commerce/mobile-nav-menu-ai.tsx +50 -47
- package/components/commerce/mobile-nav-menu-item.tsx +49 -49
- package/components/commerce/mobile-nav-menu.tsx +101 -101
- package/components/contact-dialog/contact-form.tsx +113 -113
- package/components/contact-dialog/disclaimer.tsx +13 -13
- package/components/contact-dialog/index.tsx +64 -64
- package/components/copyright.tsx +21 -21
- package/components/drawer-margin.tsx +25 -25
- package/components/footer.tsx +77 -77
- package/components/header/desktop.tsx +51 -50
- package/components/header/index.tsx +50 -52
- package/components/header/mobile.tsx +163 -163
- package/components/header/theme-toggle.tsx +26 -26
- package/components/icons/24k-gold-card.tsx +43 -43
- package/components/icons/ai-chat-act.tsx +47 -47
- package/components/icons/ai-chat.tsx +29 -29
- package/components/icons/anodized-titanium.tsx +45 -45
- package/components/icons/avatar.tsx +11 -11
- package/components/icons/bag-icon.tsx +10 -10
- package/components/icons/blog-act.tsx +14 -14
- package/components/icons/blog.tsx +20 -20
- package/components/icons/bridge-act.tsx +18 -18
- package/components/icons/bridge.tsx +68 -68
- package/components/icons/changelog-act.tsx +15 -15
- package/components/icons/changelog.tsx +21 -21
- package/components/icons/chrome.tsx +45 -45
- package/components/icons/coins-act.tsx +29 -29
- package/components/icons/coins.tsx +20 -20
- package/components/icons/compare-cards-act.tsx +30 -30
- package/components/icons/compare-cards.tsx +21 -21
- package/components/icons/credit-act.tsx +29 -29
- package/components/icons/credit.tsx +20 -20
- package/components/icons/customer-support-act.tsx +27 -27
- package/components/icons/customer-support.tsx +21 -21
- package/components/icons/customers-act.tsx +65 -65
- package/components/icons/customers.tsx +33 -33
- package/components/icons/developer-docs-act.tsx +26 -26
- package/components/icons/developer-docs.tsx +20 -20
- package/components/icons/exchange-act.tsx +27 -27
- package/components/icons/exchange.tsx +21 -21
- package/components/icons/explorer-act.tsx +27 -27
- package/components/icons/explorer.tsx +22 -22
- package/components/icons/faqs-act.tsx +27 -27
- package/components/icons/faqs.tsx +21 -21
- package/components/icons/github.tsx +14 -14
- package/components/icons/guides-act.tsx +26 -26
- package/components/icons/guides.tsx +21 -21
- package/components/icons/gun-metal.tsx +44 -44
- package/components/icons/index.tsx +43 -43
- package/components/icons/integrations-act.tsx +41 -41
- package/components/icons/integrations.tsx +25 -25
- package/components/icons/irradescent.tsx +41 -41
- package/components/icons/launch-subnet.tsx +21 -21
- package/components/icons/launchsubnet-act.tsx +29 -29
- package/components/icons/left-arrow.tsx +11 -11
- package/components/icons/lux-finance-act.tsx +34 -34
- package/components/icons/lux-finance.tsx +23 -23
- package/components/icons/lux-logo.tsx +10 -10
- package/components/icons/lux-pass-act.tsx +41 -41
- package/components/icons/lux-pass.tsx +25 -25
- package/components/icons/lux-quests-act.tsx +15 -15
- package/components/icons/lux-quests.tsx +21 -21
- package/components/icons/market-act.tsx +39 -39
- package/components/icons/market.tsx +24 -24
- package/components/icons/mirrored-titanium.tsx +46 -46
- package/components/icons/more-benefits-act.tsx +29 -29
- package/components/icons/more-benefits.tsx +21 -21
- package/components/icons/open-source-act.tsx +41 -41
- package/components/icons/open-source.tsx +26 -26
- package/components/icons/right-arrow.tsx +10 -10
- package/components/icons/safe-act.tsx +77 -77
- package/components/icons/safe.tsx +37 -37
- package/components/icons/search.tsx +12 -12
- package/components/icons/secure-delivery.tsx +13 -13
- package/components/icons/shop-act.tsx +29 -29
- package/components/icons/shop.tsx +20 -20
- package/components/icons/social-icon.tsx +35 -35
- package/components/icons/social-svg.css +3 -3
- package/components/icons/sterling-silver-card.tsx +44 -44
- package/components/icons/templates-act.tsx +29 -29
- package/components/icons/templates.tsx +21 -21
- package/components/icons/validators-act.tsx +42 -42
- package/components/icons/validators.tsx +41 -41
- package/components/icons/view-all-card-act.tsx +28 -28
- package/components/icons/view-all-card.tsx +20 -20
- package/components/icons/wallet-act.tsx +29 -29
- package/components/icons/wallet.tsx +20 -20
- package/components/icons/warpcast.tsx +58 -58
- package/components/icons/youtube-logo.tsx +59 -59
- package/components/index.ts +25 -25
- package/components/logo.tsx +89 -89
- package/components/main.tsx +27 -27
- package/components/mini-chart/index.tsx +7 -7
- package/components/mini-chart/mini-chart-props.ts +43 -43
- package/components/mini-chart/mini-chart.tsx +85 -85
- package/components/mini-chart/wrapper.tsx +23 -23
- package/components/not-found/index.tsx +28 -28
- package/components/not-found/not-found-content.mdx +5 -5
- package/components/scripts.tsx +24 -24
- package/components/tooltip.tsx +31 -31
- package/environment.d.ts +5 -5
- package/next/analytics/fpixel.ts +15 -15
- package/next/analytics/google-analytics.ts +13 -13
- package/next/analytics/index.ts +3 -3
- package/next/analytics/pixel-analytics.tsx +54 -54
- package/next/font/get-app-router-font-classes.ts +12 -12
- package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
- package/next/font/next-font-desc.ts +27 -27
- package/next/font/pages-router-font-vars.tsx +18 -18
- package/next/head-metadata/from-next/metadata-types.ts +158 -158
- package/next/head-metadata/from-next/opengraph-types.ts +267 -267
- package/next/head-metadata/from-next/twitter-types.ts +92 -92
- package/next/head-metadata/index.tsx +208 -208
- package/next/middleware/determine-device-mw.ts +16 -16
- package/package.json +79 -79
- package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
- package/root-layout/index.tsx +112 -112
- package/server-actions/firebase-app.ts +14 -14
- package/server-actions/index.ts +5 -5
- package/server-actions/store-contact.ts +51 -51
- package/site-def/footer/community.tsx +67 -67
- package/site-def/footer/company.ts +37 -37
- package/site-def/footer/ecosystem.ts +37 -37
- package/site-def/footer/index.tsx +26 -26
- package/site-def/footer/legal.ts +28 -28
- package/site-def/footer/network.ts +45 -45
- package/site-def/footer/svg/warpcast-logo.svg +11 -11
- package/site-def/index.ts +2 -2
- package/site-def/main-nav.tsx +458 -458
- package/style/cart-animation.css +29 -29
- package/style/checkout-animation.css +23 -23
- package/style/drawer-handle-overrides.css +160 -160
- package/style/lux-colors.css +85 -85
- package/style/lux-global.css +50 -47
- package/tailwind/fontFamily.tailwind.lux.ts +18 -18
- package/tailwind/index.ts +2 -2
- package/tailwind/lux-tw-fonts.ts +39 -39
- package/tailwind/tailwind.config.lux-preset.ts +10 -10
- package/tsconfig.json +15 -15
- package/types/chatbot-config.ts +6 -6
- package/types/chatbot-suggested-question.ts +7 -7
- package/types/contact-info.ts +10 -10
- package/types/index.ts +4 -4
- package/types/site-def.ts +43 -43
@@ -1,5 +1,5 @@
|
|
1
|
-
### ...Huh?
|
2
|
-
#### Sorry, we're fresh out of those.
|
3
|
-
<br/>
|
4
|
-
#### ...try something from the [Home Page](/)?
|
5
|
-
|
1
|
+
### ...Huh?
|
2
|
+
#### Sorry, we're fresh out of those.
|
3
|
+
<br/>
|
4
|
+
#### ...try something from the [Home Page](/)?
|
5
|
+
|
package/components/scripts.tsx
CHANGED
@@ -1,24 +1,24 @@
|
|
1
|
-
'use client'
|
2
|
-
|
3
|
-
import { useEffect } from 'react'
|
4
|
-
import { GoogleAnalytics } from '@next/third-parties/google'
|
5
|
-
import { FacebookPixel } from '../next/analytics'
|
6
|
-
|
7
|
-
// TODO: Rename this component, since Next has one called Script
|
8
|
-
const Scripts = () => {
|
9
|
-
|
10
|
-
useEffect(() => {
|
11
|
-
document.body.style.display = 'flex'
|
12
|
-
}, [])
|
13
|
-
|
14
|
-
return (
|
15
|
-
<>
|
16
|
-
<FacebookPixel />
|
17
|
-
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
18
|
-
</>
|
19
|
-
)
|
20
|
-
}
|
21
|
-
|
22
|
-
export {
|
23
|
-
Scripts as default
|
24
|
-
}
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
import { useEffect } from 'react'
|
4
|
+
import { GoogleAnalytics } from '@next/third-parties/google'
|
5
|
+
import { FacebookPixel } from '../next/analytics'
|
6
|
+
|
7
|
+
// TODO: Rename this component, since Next has one called Script
|
8
|
+
const Scripts = () => {
|
9
|
+
|
10
|
+
useEffect(() => {
|
11
|
+
document.body.style.display = 'flex'
|
12
|
+
}, [])
|
13
|
+
|
14
|
+
return (
|
15
|
+
<>
|
16
|
+
<FacebookPixel />
|
17
|
+
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
18
|
+
</>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export {
|
23
|
+
Scripts as default
|
24
|
+
}
|
package/components/tooltip.tsx
CHANGED
@@ -1,31 +1,31 @@
|
|
1
|
-
'use client'
|
2
|
-
import React from 'react'
|
3
|
-
import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
|
4
|
-
|
5
|
-
const Tooltip: React.FC<{
|
6
|
-
select: string
|
7
|
-
text: string
|
8
|
-
position?: PlacesType // https://react-tooltip.com/docs/options
|
9
|
-
clx?: string
|
10
|
-
offset?: number
|
11
|
-
}> = ({
|
12
|
-
select,
|
13
|
-
text,
|
14
|
-
clx='',
|
15
|
-
position='bottom',
|
16
|
-
offset=2
|
17
|
-
}) => (
|
18
|
-
<RTTooltip
|
19
|
-
anchorSelect={select}
|
20
|
-
noArrow
|
21
|
-
opacity={1}
|
22
|
-
content={text}
|
23
|
-
place={position}
|
24
|
-
offset={offset}
|
25
|
-
delayShow={100}
|
26
|
-
delayHide={100}
|
27
|
-
className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
|
28
|
-
/>
|
29
|
-
)
|
30
|
-
|
31
|
-
export default Tooltip
|
1
|
+
'use client'
|
2
|
+
import React from 'react'
|
3
|
+
import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
|
4
|
+
|
5
|
+
const Tooltip: React.FC<{
|
6
|
+
select: string
|
7
|
+
text: string
|
8
|
+
position?: PlacesType // https://react-tooltip.com/docs/options
|
9
|
+
clx?: string
|
10
|
+
offset?: number
|
11
|
+
}> = ({
|
12
|
+
select,
|
13
|
+
text,
|
14
|
+
clx='',
|
15
|
+
position='bottom',
|
16
|
+
offset=2
|
17
|
+
}) => (
|
18
|
+
<RTTooltip
|
19
|
+
anchorSelect={select}
|
20
|
+
noArrow
|
21
|
+
opacity={1}
|
22
|
+
content={text}
|
23
|
+
place={position}
|
24
|
+
offset={offset}
|
25
|
+
delayShow={100}
|
26
|
+
delayHide={100}
|
27
|
+
className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
|
28
|
+
/>
|
29
|
+
)
|
30
|
+
|
31
|
+
export default Tooltip
|
package/environment.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
namespace NodeJS {
|
2
|
-
interface ProcessEnv {
|
3
|
-
NEXT_PUBLIC_GA_MEASUREMENT_ID: string;
|
4
|
-
NEXT_PUBLIC_FACEBOOK_PIXEL_ID: string;
|
5
|
-
}
|
1
|
+
namespace NodeJS {
|
2
|
+
interface ProcessEnv {
|
3
|
+
NEXT_PUBLIC_GA_MEASUREMENT_ID: string;
|
4
|
+
NEXT_PUBLIC_FACEBOOK_PIXEL_ID: string;
|
5
|
+
}
|
6
6
|
}
|
package/next/analytics/fpixel.ts
CHANGED
@@ -1,16 +1,16 @@
|
|
1
|
-
declare global {
|
2
|
-
interface Window {
|
3
|
-
fbq: Function;
|
4
|
-
}
|
5
|
-
}
|
6
|
-
|
7
|
-
export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
|
8
|
-
|
9
|
-
export const pageview = () => {
|
10
|
-
window.fbq('track', 'PageView')
|
11
|
-
}
|
12
|
-
|
13
|
-
// https://developers.facebook.com/docs/meta-pixel/reference
|
14
|
-
export const sendFBEvent = (name: string, options = {}) => {
|
15
|
-
window.fbq('track', name, options)
|
1
|
+
declare global {
|
2
|
+
interface Window {
|
3
|
+
fbq: Function;
|
4
|
+
}
|
5
|
+
}
|
6
|
+
|
7
|
+
export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
|
8
|
+
|
9
|
+
export const pageview = () => {
|
10
|
+
window.fbq('track', 'PageView')
|
11
|
+
}
|
12
|
+
|
13
|
+
// https://developers.facebook.com/docs/meta-pixel/reference
|
14
|
+
export const sendFBEvent = (name: string, options = {}) => {
|
15
|
+
window.fbq('track', name, options)
|
16
16
|
}
|
@@ -1,14 +1,14 @@
|
|
1
|
-
declare global {
|
2
|
-
interface Window {
|
3
|
-
gtag: Function;
|
4
|
-
}
|
5
|
-
}
|
6
|
-
|
7
|
-
// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
|
8
|
-
const sendGAEvent = (name: string, options = {}) => {
|
9
|
-
window.gtag('event', name, options)
|
10
|
-
}
|
11
|
-
|
12
|
-
export {
|
13
|
-
sendGAEvent as default
|
1
|
+
declare global {
|
2
|
+
interface Window {
|
3
|
+
gtag: Function;
|
4
|
+
}
|
5
|
+
}
|
6
|
+
|
7
|
+
// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
|
8
|
+
const sendGAEvent = (name: string, options = {}) => {
|
9
|
+
window.gtag('event', name, options)
|
10
|
+
}
|
11
|
+
|
12
|
+
export {
|
13
|
+
sendGAEvent as default
|
14
14
|
}
|
package/next/analytics/index.ts
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
export { sendFBEvent } from './fpixel'
|
2
|
-
export { default as sendGAEvent } from './google-analytics'
|
3
|
-
export { FacebookPixel } from './pixel-analytics'
|
1
|
+
export { sendFBEvent } from './fpixel'
|
2
|
+
export { default as sendGAEvent } from './google-analytics'
|
3
|
+
export { FacebookPixel } from './pixel-analytics'
|
@@ -1,55 +1,55 @@
|
|
1
|
-
'use client'
|
2
|
-
|
3
|
-
import { usePathname } from 'next/navigation'
|
4
|
-
import Script from 'next/script'
|
5
|
-
import { useEffect, useState } from 'react'
|
6
|
-
import * as fbq from './fpixel'
|
7
|
-
|
8
|
-
const FacebookPixelHead = () => {
|
9
|
-
return (
|
10
|
-
<noscript>
|
11
|
-
<img
|
12
|
-
height='1'
|
13
|
-
width='1'
|
14
|
-
style={{ display: 'none' }}
|
15
|
-
src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
|
16
|
-
/>
|
17
|
-
</noscript>
|
18
|
-
)
|
19
|
-
}
|
20
|
-
|
21
|
-
const FacebookPixel = () => {
|
22
|
-
const [loaded, setLoaded] = useState(false)
|
23
|
-
const pathname = usePathname()
|
24
|
-
|
25
|
-
useEffect(() => {
|
26
|
-
if (!loaded) return
|
27
|
-
|
28
|
-
fbq.pageview()
|
29
|
-
}, [pathname, loaded])
|
30
|
-
|
31
|
-
return (
|
32
|
-
<div>
|
33
|
-
<Script
|
34
|
-
id='fb-pixel'
|
35
|
-
strategy='afterInteractive'
|
36
|
-
onLoad={() => setLoaded(true)}
|
37
|
-
dangerouslySetInnerHTML={{
|
38
|
-
__html: `
|
39
|
-
!function(f,b,e,v,n,t,s)
|
40
|
-
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
41
|
-
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
42
|
-
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
43
|
-
n.queue=[];t=b.createElement(e);t.async=!0;
|
44
|
-
t.src=v;s=b.getElementsByTagName(e)[0];
|
45
|
-
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
46
|
-
'https://connect.facebook.net/en_US/fbevents.js');
|
47
|
-
fbq('init', ${fbq.FB_PIXEL_ID});
|
48
|
-
`,
|
49
|
-
}}
|
50
|
-
/>
|
51
|
-
</div>
|
52
|
-
)
|
53
|
-
}
|
54
|
-
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
import { usePathname } from 'next/navigation'
|
4
|
+
import Script from 'next/script'
|
5
|
+
import { useEffect, useState } from 'react'
|
6
|
+
import * as fbq from './fpixel'
|
7
|
+
|
8
|
+
const FacebookPixelHead = () => {
|
9
|
+
return (
|
10
|
+
<noscript>
|
11
|
+
<img
|
12
|
+
height='1'
|
13
|
+
width='1'
|
14
|
+
style={{ display: 'none' }}
|
15
|
+
src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
|
16
|
+
/>
|
17
|
+
</noscript>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
const FacebookPixel = () => {
|
22
|
+
const [loaded, setLoaded] = useState(false)
|
23
|
+
const pathname = usePathname()
|
24
|
+
|
25
|
+
useEffect(() => {
|
26
|
+
if (!loaded) return
|
27
|
+
|
28
|
+
fbq.pageview()
|
29
|
+
}, [pathname, loaded])
|
30
|
+
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<Script
|
34
|
+
id='fb-pixel'
|
35
|
+
strategy='afterInteractive'
|
36
|
+
onLoad={() => setLoaded(true)}
|
37
|
+
dangerouslySetInnerHTML={{
|
38
|
+
__html: `
|
39
|
+
!function(f,b,e,v,n,t,s)
|
40
|
+
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
41
|
+
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
42
|
+
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
43
|
+
n.queue=[];t=b.createElement(e);t.async=!0;
|
44
|
+
t.src=v;s=b.getElementsByTagName(e)[0];
|
45
|
+
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
46
|
+
'https://connect.facebook.net/en_US/fbevents.js');
|
47
|
+
fbq('init', ${fbq.FB_PIXEL_ID});
|
48
|
+
`,
|
49
|
+
}}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
|
55
55
|
export {FacebookPixelHead, FacebookPixel}
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
2
|
-
import type NextFontDesc from './next-font-desc'
|
3
|
-
|
4
|
-
// These will be injected for <body> in app router app that uses our RootLayout
|
5
|
-
|
6
|
-
// First is assumed to be mapped to the default font and is injected into <body>
|
7
|
-
// as a normal tw font family class.
|
8
|
-
export default () => (
|
9
|
-
nextFonts.map(
|
10
|
-
(desc: NextFontDesc) => (desc.nextFont!.variable)
|
11
|
-
).join(' ') + ` font-${nextFonts[0].twName}`
|
12
|
-
)
|
1
|
+
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
2
|
+
import type NextFontDesc from './next-font-desc'
|
3
|
+
|
4
|
+
// These will be injected for <body> in app router app that uses our RootLayout
|
5
|
+
|
6
|
+
// First is assumed to be mapped to the default font and is injected into <body>
|
7
|
+
// as a normal tw font family class.
|
8
|
+
export default () => (
|
9
|
+
nextFonts.map(
|
10
|
+
(desc: NextFontDesc) => (desc.nextFont!.variable)
|
11
|
+
).join(' ') + ` font-${nextFonts[0].twName}`
|
12
|
+
)
|
@@ -1,68 +1,68 @@
|
|
1
|
-
// import { Inter } from 'next/font/google'
|
2
|
-
import localFont from 'next/font/local'
|
3
|
-
|
4
|
-
import type { TwFontDesc } from '@hanzo/ui/tailwind' // TODO
|
5
|
-
import type NextFontDesc from './next-font-desc'
|
6
|
-
|
7
|
-
import twFonts from '../../tailwind/lux-tw-fonts'
|
8
|
-
|
9
|
-
/*
|
10
|
-
Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed
|
11
|
-
at different times during the next compile / build. Otherwise a nasty
|
12
|
-
race condition happens!
|
13
|
-
|
14
|
-
Also, requires that "Font loaders must be called and assigned to a const in the module scope"
|
15
|
-
|
16
|
-
*/
|
17
|
-
|
18
|
-
const drukWide = localFont({
|
19
|
-
src: [
|
20
|
-
{
|
21
|
-
path: './local/Druk-Wide-Bold.ttf',
|
22
|
-
weight: '700',
|
23
|
-
style: 'normal'
|
24
|
-
},
|
25
|
-
{
|
26
|
-
path: './local/Druk-Wide-Medium.ttf',
|
27
|
-
weight: '500',
|
28
|
-
style: 'normal',
|
29
|
-
},
|
30
|
-
],
|
31
|
-
display: 'swap',
|
32
|
-
variable: '--font-druk-wide',
|
33
|
-
})
|
34
|
-
|
35
|
-
const inter = localFont({
|
36
|
-
src: './local/InterVariable.ttf',
|
37
|
-
display: 'swap',
|
38
|
-
variable: '--font-inter',
|
39
|
-
})
|
40
|
-
|
41
|
-
export default [
|
42
|
-
{
|
43
|
-
font: inter,
|
44
|
-
twName: 'sans'
|
45
|
-
},
|
46
|
-
{
|
47
|
-
font: inter,
|
48
|
-
twName: 'nav'
|
49
|
-
},
|
50
|
-
{
|
51
|
-
font: drukWide,
|
52
|
-
twName: 'heading'
|
53
|
-
}
|
54
|
-
].map (
|
55
|
-
(el) => {
|
56
|
-
const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
|
57
|
-
if (!twFont) {
|
58
|
-
throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
|
59
|
-
}
|
60
|
-
|
61
|
-
return ({
|
62
|
-
...twFont,
|
63
|
-
nextFont: el.font,
|
64
|
-
})
|
65
|
-
}
|
66
|
-
) satisfies NextFontDesc[]
|
67
|
-
|
68
|
-
|
1
|
+
// import { Inter } from 'next/font/google'
|
2
|
+
import localFont from 'next/font/local'
|
3
|
+
|
4
|
+
import type { TwFontDesc } from '@hanzo/ui/tailwind' // TODO
|
5
|
+
import type NextFontDesc from './next-font-desc'
|
6
|
+
|
7
|
+
import twFonts from '../../tailwind/lux-tw-fonts'
|
8
|
+
|
9
|
+
/*
|
10
|
+
Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed
|
11
|
+
at different times during the next compile / build. Otherwise a nasty
|
12
|
+
race condition happens!
|
13
|
+
|
14
|
+
Also, requires that "Font loaders must be called and assigned to a const in the module scope"
|
15
|
+
|
16
|
+
*/
|
17
|
+
|
18
|
+
const drukWide = localFont({
|
19
|
+
src: [
|
20
|
+
{
|
21
|
+
path: './local/Druk-Wide-Bold.ttf',
|
22
|
+
weight: '700',
|
23
|
+
style: 'normal'
|
24
|
+
},
|
25
|
+
{
|
26
|
+
path: './local/Druk-Wide-Medium.ttf',
|
27
|
+
weight: '500',
|
28
|
+
style: 'normal',
|
29
|
+
},
|
30
|
+
],
|
31
|
+
display: 'swap',
|
32
|
+
variable: '--font-druk-wide',
|
33
|
+
})
|
34
|
+
|
35
|
+
const inter = localFont({
|
36
|
+
src: './local/InterVariable.ttf',
|
37
|
+
display: 'swap',
|
38
|
+
variable: '--font-inter',
|
39
|
+
})
|
40
|
+
|
41
|
+
export default [
|
42
|
+
{
|
43
|
+
font: inter,
|
44
|
+
twName: 'sans'
|
45
|
+
},
|
46
|
+
{
|
47
|
+
font: inter,
|
48
|
+
twName: 'nav'
|
49
|
+
},
|
50
|
+
{
|
51
|
+
font: drukWide,
|
52
|
+
twName: 'heading'
|
53
|
+
}
|
54
|
+
].map (
|
55
|
+
(el) => {
|
56
|
+
const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
|
57
|
+
if (!twFont) {
|
58
|
+
throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
|
59
|
+
}
|
60
|
+
|
61
|
+
return ({
|
62
|
+
...twFont,
|
63
|
+
nextFont: el.font,
|
64
|
+
})
|
65
|
+
}
|
66
|
+
) satisfies NextFontDesc[]
|
67
|
+
|
68
|
+
|
@@ -1,28 +1,28 @@
|
|
1
|
-
import type { TwFontDesc } from '@hanzo/ui/tailwind'
|
2
|
-
|
3
|
-
// from next repo
|
4
|
-
type NextFont = {
|
5
|
-
className: string
|
6
|
-
style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
|
7
|
-
}
|
8
|
-
|
9
|
-
// from next repo
|
10
|
-
type NextFontWithVariable = NextFont & {
|
11
|
-
variable: string
|
12
|
-
}
|
13
|
-
|
14
|
-
|
15
|
-
/*
|
16
|
-
NextFontDesc and TwFontDesc have to be seperate because they are needed
|
17
|
-
at different times during the next compile / build. Otherwise a nasty
|
18
|
-
race condition happens! That's why they are in different files.
|
19
|
-
*/
|
20
|
-
|
21
|
-
interface NextFontDesc extends TwFontDesc {
|
22
|
-
nextFont: NextFontWithVariable
|
23
|
-
}
|
24
|
-
|
25
|
-
export {
|
26
|
-
type NextFontDesc as default,
|
27
|
-
type NextFontWithVariable,
|
1
|
+
import type { TwFontDesc } from '@hanzo/ui/tailwind'
|
2
|
+
|
3
|
+
// from next repo
|
4
|
+
type NextFont = {
|
5
|
+
className: string
|
6
|
+
style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
|
7
|
+
}
|
8
|
+
|
9
|
+
// from next repo
|
10
|
+
type NextFontWithVariable = NextFont & {
|
11
|
+
variable: string
|
12
|
+
}
|
13
|
+
|
14
|
+
|
15
|
+
/*
|
16
|
+
NextFontDesc and TwFontDesc have to be seperate because they are needed
|
17
|
+
at different times during the next compile / build. Otherwise a nasty
|
18
|
+
race condition happens! That's why they are in different files.
|
19
|
+
*/
|
20
|
+
|
21
|
+
interface NextFontDesc extends TwFontDesc {
|
22
|
+
nextFont: NextFontWithVariable
|
23
|
+
}
|
24
|
+
|
25
|
+
export {
|
26
|
+
type NextFontDesc as default,
|
27
|
+
type NextFontWithVariable,
|
28
28
|
}
|
@@ -1,18 +1,18 @@
|
|
1
|
-
|
2
|
-
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
3
|
-
import type NextFontDesc from './next-font-desc'
|
4
|
-
|
5
|
-
const PagesRouterFontVars: React.FC = () => {
|
6
|
-
|
7
|
-
const fontVars = nextFonts.map((fd: NextFontDesc) => (
|
8
|
-
`${fd.cssVar}: ${fd.nextFont.style.fontFamily};`
|
9
|
-
)).join('\n')
|
10
|
-
|
11
|
-
return <style jsx global>{`
|
12
|
-
html {
|
13
|
-
${fontVars}
|
14
|
-
}
|
15
|
-
`}</style>
|
16
|
-
}
|
17
|
-
|
18
|
-
export default PagesRouterFontVars
|
1
|
+
|
2
|
+
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
3
|
+
import type NextFontDesc from './next-font-desc'
|
4
|
+
|
5
|
+
const PagesRouterFontVars: React.FC = () => {
|
6
|
+
|
7
|
+
const fontVars = nextFonts.map((fd: NextFontDesc) => (
|
8
|
+
`${fd.cssVar}: ${fd.nextFont.style.fontFamily};`
|
9
|
+
)).join('\n')
|
10
|
+
|
11
|
+
return <style jsx global>{`
|
12
|
+
html {
|
13
|
+
${fontVars}
|
14
|
+
}
|
15
|
+
`}</style>
|
16
|
+
}
|
17
|
+
|
18
|
+
export default PagesRouterFontVars
|