Skip to content

Commit 3ce59b3

Browse files
lorant-onelorant-one
committed
refact: move font settings to config and use Schema and Meta
1 parent d48a008 commit 3ce59b3

File tree

5 files changed

+109
-98
lines changed

5 files changed

+109
-98
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# Once UI for Next.js
22

3-
A thoughtfully crafted design system that eliminates complexity while maximizing flexibility.
3+
A design system for indie builders who move fast and break limits without neglecting quality.
44

55

6-
![Once UI](public/images/cover.jpg)
6+
![Once UI](public/images/og/home.jpg)
77

88
# Features
99

‎public/images/cover.jpg renamed to ‎public/images/og/home.jpg

File renamed without changes.

‎src/app/layout.tsx

Lines changed: 48 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,19 @@ import "@/once-ui/styles/index.scss";
22
import "@/once-ui/tokens/index.scss";
33

44
import classNames from "classnames";
5-
import { headers } from "next/headers";
65

7-
import { baseURL, meta, og, schema, style } from "@/app/resources/config";
8-
import { Background, Column, Flex, ThemeProvider, ToastProvider } from "@/once-ui/components";
9-
import { Meta, Schema } from "@/once-ui/modules";
10-
11-
import { Geist } from "next/font/google";
12-
import { Geist_Mono } from "next/font/google";
13-
14-
const primary = Geist({
15-
variable: "--font-primary",
16-
subsets: ["latin"],
17-
display: "swap",
18-
});
19-
20-
const code = Geist_Mono({
21-
variable: "--font-code",
22-
subsets: ["latin"],
23-
display: "swap",
24-
});
6+
import { baseURL, style, meta, font, effects } from "@/app/resources/config";
7+
import { Background, Column, Flex, ToastProvider, ThemeProvider } from "@/once-ui/components";
258

26-
type FontConfig = {
27-
variable: string;
28-
};
29-
30-
/*
31-
Replace with code for secondary and tertiary fonts
32-
from https://once-ui.com/customize
33-
*/
34-
const secondary: FontConfig | undefined = undefined;
35-
const tertiary: FontConfig | undefined = undefined;
36-
/*
37-
*/
9+
import { opacity, SpacingToken } from "@/once-ui/types";
10+
import { Meta, Schema } from "@/once-ui/modules";
3811

3912
export async function generateMetadata() {
4013
return Meta.generate({
41-
title: meta.title,
42-
description: meta.description,
43-
baseURL,
44-
path: "/",
45-
image: og.image
14+
title: meta.home.title,
15+
description: meta.home.description,
16+
baseURL: baseURL,
17+
path: meta.home.path,
4618
});
4719
}
4820

@@ -68,19 +40,18 @@ export default function RootLayout({
6840
data-transition={style.transition}
6941
data-scaling={style.scaling}
7042
className={classNames(
71-
primary.variable,
72-
code.variable,
73-
secondary ? secondary.variable : "",
74-
tertiary ? tertiary.variable : "",
43+
font.primary.variable,
44+
font.secondary.variable,
45+
font.tertiary.variable,
46+
font.code.variable,
7547
)}
7648
>
7749
<Schema
78-
as="organization"
79-
title={schema.name}
80-
description={schema.description}
50+
as="webPage"
8151
baseURL={baseURL}
82-
path="/"
83-
image={schema.logo}
52+
title={meta.home.title}
53+
description={meta.home.description}
54+
path={meta.home.path}
8455
/>
8556
<head>
8657
<script
@@ -110,27 +81,42 @@ export default function RootLayout({
11081
<Background
11182
position="absolute"
11283
mask={{
113-
x: 100,
114-
y: 0,
115-
radius: 100,
84+
x: effects.mask.x,
85+
y: effects.mask.y,
86+
radius: effects.mask.radius,
87+
cursor: effects.mask.cursor
11688
}}
11789
gradient={{
118-
display: true,
119-
x: 100,
120-
y: 60,
121-
width: 70,
122-
height: 50,
123-
tilt: -40,
124-
opacity: 90,
125-
colorStart: "accent-background-strong",
126-
colorEnd: "page-background",
90+
display: effects.gradient.display,
91+
opacity: effects.gradient.opacity as opacity,
92+
x: effects.gradient.x,
93+
y: effects.gradient.y,
94+
width: effects.gradient.width,
95+
height: effects.gradient.height,
96+
tilt: effects.gradient.tilt,
97+
colorStart: effects.gradient.colorStart,
98+
colorEnd: effects.gradient.colorEnd,
99+
}}
100+
dots={{
101+
display: effects.dots.display,
102+
opacity: effects.dots.opacity as opacity,
103+
size: effects.dots.size as SpacingToken,
104+
color: effects.dots.color,
127105
}}
128106
grid={{
129-
display: true,
130-
opacity: 100,
131-
width: "0.25rem",
132-
color: "neutral-alpha-medium",
133-
height: "0.25rem",
107+
display: effects.grid.display,
108+
opacity: effects.grid.opacity as opacity,
109+
color: effects.grid.color,
110+
width: effects.grid.width,
111+
height: effects.grid.height,
112+
}}
113+
lines={{
114+
display: effects.lines.display,
115+
opacity: effects.lines.opacity as opacity,
116+
size: effects.lines.size as SpacingToken,
117+
thickness: effects.lines.thickness,
118+
angle: effects.lines.angle,
119+
color: effects.lines.color,
134120
}}
135121
/>
136122
{children}

‎src/app/page.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Example page: delete the content or rework the blocks
12
"use client";
23

34
import React, { useState } from "react";
@@ -106,7 +107,7 @@ export default function Home() {
106107
zIndex={3}
107108
pattern={{
108109
display: true,
109-
size: "4",
110+
size: "2",
110111
}}
111112
position="fixed"
112113
top="0"

‎src/app/resources/config.js

Lines changed: 57 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
1-
const baseURL = "demo.once-ui.com";
1+
// IMPORTANT: Replace with your own domain address - it's used for SEO in meta tags and schema
2+
const baseURL = "https://demo.once-ui.com";
3+
4+
// Import and set font for each variant
5+
import { Geist } from "next/font/google";
6+
import { Geist_Mono } from "next/font/google";
7+
8+
const primaryFont = Geist({
9+
variable: "--font-primary",
10+
subsets: ["latin"],
11+
display: "swap",
12+
});
13+
14+
const monoFont = Geist_Mono({
15+
variable: "--font-code",
16+
subsets: ["latin"],
17+
display: "swap",
18+
});
19+
20+
const font = {
21+
primary: primaryFont,
22+
secondary: primaryFont,
23+
tertiary: primaryFont,
24+
code: monoFont,
25+
};
226

327
// default customization applied to the HTML in the main layout.tsx
428
const style = {
@@ -17,61 +41,61 @@ const style = {
1741
const effects = {
1842
mask: {
1943
cursor: false,
20-
x: 50,
44+
x: 100,
2145
y: 0,
2246
radius: 100,
2347
},
2448
gradient: {
25-
display: false,
26-
x: 50,
27-
y: 0,
28-
width: 100,
29-
height: 100,
30-
tilt: 0,
31-
colorStart: "brand-background-strong",
32-
colorEnd: "static-transparent",
33-
opacity: 50,
49+
display: true,
50+
opacity: 90,
51+
x: 100,
52+
y: 60,
53+
width: 70,
54+
height: 50,
55+
tilt: -40,
56+
colorStart: "accent-background-strong",
57+
colorEnd: "page-background",
3458
},
3559
dots: {
3660
display: true,
37-
size: 2,
38-
color: "brand-on-background-weak",
3961
opacity: 20,
62+
size: "2",
63+
color: "brand-on-background-weak",
4064
},
41-
lines: {
42-
display: false,
43-
color: "neutral-alpha-weak",
65+
grid: {
66+
display: true,
4467
opacity: 100,
68+
color: "accent-alpha-weak",
69+
width: "0.25rem",
70+
height: "0.25rem",
4571
},
46-
grid: {
72+
lines: {
4773
display: false,
48-
color: "neutral-alpha-weak",
49-
width: "24",
50-
height: "24",
5174
opacity: 100,
75+
color: "neutral-alpha-weak",
76+
size: "16",
77+
thickness: 1,
78+
angle: 45,
5279
},
5380
};
5481

55-
// default metadata
82+
// metadata for pages
5683
const meta = {
57-
title: "Once UI for Next.js",
58-
description:
59-
"An open-source design system and component library for Next.js that emphasizes easy styling and accessibility in UI development.",
60-
};
61-
62-
// default open graph data
63-
const og = {
64-
title: meta.title,
65-
description: meta.description,
66-
image: "/images/cover.jpg",
84+
home: {
85+
path: "/",
86+
title: "Once UI for Next.js",
87+
description: "An open-source design system and component library for Next.js that emphasizes easy styling and accessibility in UI development.",
88+
image: "/og/home.jpg",
89+
},
90+
// add more routes and reference them in page.tsx
6791
};
6892

6993
// default schema data
7094
const schema = {
7195
logo: "",
7296
type: "Organization",
7397
name: "Once UI",
74-
description: meta.description,
98+
description: meta.home.description,
7599
email: "[email protected]",
76100
};
77101

@@ -82,4 +106,4 @@ const social = {
82106
discord: "https://discord.com/invite/5EyAQ4eNdS",
83107
};
84108

85-
export { baseURL, style, meta, og, schema, social, effects };
109+
export { baseURL, font, style, meta, schema, social, effects };

0 commit comments

Comments
 (0)