Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit a55f9c8

Browse files
nikolovlazarnikolovlazar
authored
Merge pull request #37 from wattanx/feature/replace-hardcoded-strings
docs: replace hardcoded strings
2 parents 62c0b2f + dfd57fa commit a55f9c8

22 files changed

+361
-131
lines changed

‎i18n/ui.json

+173-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,91 @@
11
{
22
"homepage": {
3-
"title1": "Create accessible React apps",
4-
"title2": "with speed",
3+
"title": "Create accessible React apps<1> with speed</1>",
54
"message": "Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.",
5+
"get-started": "Get Started",
6+
"supported-and-backed-by": "Supported and Backed by",
7+
"your-company": "Your company",
8+
"less-code-more-speed": "Less code. More speed",
9+
"less-code-description": "Spend less time writing UI code and more time building a great experience for your customers.",
10+
"feature-section": {
11+
"title": "An experience you'd expect from a design system",
12+
"description": "Opinionated and designed for daily use.",
13+
"accessible": {
14+
"title": "Accessible",
15+
"description": "Chakra UI strictly follows WAI-ARIA standards for all components."
16+
},
17+
"themeable": {
18+
"title": "Themeable",
19+
"description": "Customize any part of our components to match your design needs."
20+
},
21+
"composable": {
22+
"title": "Composable",
23+
"description": "Designed with composition in mind. Compose new components with ease."
24+
},
25+
"light-and-dark-ui": {
26+
"title": "Light and Dark UI",
27+
"description": "Optimized for multiple color modes. Use light or dark, your choice."
28+
},
29+
"developer-experience": {
30+
"title": "Developer Experience",
31+
"description": "Guaranteed to boost your productivity when building your app or website."
32+
},
33+
"active-community": {
34+
"title": "Active Community",
35+
"description": "We're a team of active maintainers ready to help you whenever you need."
36+
}
37+
},
38+
"growing-section": {
39+
"title": "Chakra is growing quickly",
40+
"description": "We're dedicated to improving the experience and performance of Chakra UI.",
41+
"downloads-per-month": "Downloads per month",
42+
"github-stars": "Github stars",
43+
"core-contributors": "Core contributors",
44+
"discord-members": "Discord members",
45+
"chakra-heroes": "Chakra Heroes 🥇"
46+
},
47+
"loved-by-product-people-section": {
48+
"title": "Loved by product people like you"
49+
},
50+
"support-chakra-ui-section": {
51+
"title": "Support Chakra UI 💖",
52+
"description": "Our maintainers devote their time, effort, and heart to ensure Chakra UI keeps getting better. Support us by donating to our collective 🙏",
53+
"sponsor-the-chakra-ui-maintainers": "Sponsor the Chakra UI maintainers",
54+
"sponsor-the-creator": "Sponsor the creator, Segun Adebayo",
55+
"organization-sponsors": "Organization Sponsors 🏦",
56+
"individual-sponsors": "Individual Sponsors 🥇"
57+
},
58+
"event-section": {
59+
"title": "Invite us to speak at your next event",
60+
"description": "Want a Chakra UI core team member to speak at your next event? Invite us to create a memorable and engaging experience for your attendees.",
61+
"invite-us-to-speak": "Invite us to speak"
62+
},
663
"seo": {
764
"title": "Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.",
865
"description": "Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System"
966
}
1067
},
68+
"notfound": {
69+
"title": "404: Not found",
70+
"description": "Page not found",
71+
"heading": "404 | Page Not Found",
72+
"message": "You just hit a route that doesn't exist... the sadness.😢",
73+
"back-to-home": "Back to Home"
74+
},
75+
"resources": {
76+
"title": "Community Resources",
77+
"description": "A rich compilation of technical descriptions and detailed information of how Chakra UI works.",
78+
"message": "A rich compilation of technical descriptions and detailed information of how Chakra UI works.",
79+
"talks": {
80+
"title": "Talks"
81+
},
82+
"videos": {
83+
"title": "Videos"
84+
},
85+
"blogs": {
86+
"title": "Blogs"
87+
}
88+
},
1189
"team": {
1290
"title": "Chakra UI Team",
1391
"message": "Amazing engineers who have contributed time, effort, and thought to Chakra UI. Without them, this project would not be possible.",
@@ -20,5 +98,97 @@
2098
"title": "Chakra UI Team and Contributors",
2199
"description": "List of team members and contributors that make the Chakra UI project possible"
22100
}
101+
},
102+
"component": {
103+
"chakra-pro": {
104+
"ad-banner": {
105+
"message": "Build faster with Premium Chakra UI Components 💎",
106+
"learn-more": "Learn more"
107+
},
108+
"docs-page-ad": {
109+
"message-bold": "Chakra UI Pro:",
110+
"message": "Start your application or marketing site with a growing collection of beautiful and responsive UI components.",
111+
"ads-via-chakra-ui": "Ads via Chakra UI"
112+
},
113+
"home-page-ad": {
114+
"premium-components": "Premium components",
115+
"new": "New",
116+
"build-fasler": "Build faster",
117+
"with-chakra-ui-pro": "with Chakra UI Pro 💎",
118+
"description": "Beautiful and responsive React components to build your application or marketing pages quicker.",
119+
"learn-more": "Learn more"
120+
}
121+
},
122+
"mdx-components": {
123+
"copy-button": {
124+
"copy": "copy",
125+
"copied": "copied"
126+
},
127+
"react-live-block": {
128+
"editable-example": "Editable Example"
129+
},
130+
"egghead-course-banner": {
131+
"heading": "Build a Modern User Interface with Chakra UI",
132+
"description": "In this free course, you will learn the basics of Chakra UI and how to build well-designed, accessible user interfaces with speed!",
133+
"start-learning": "Start learning"
134+
},
135+
"carbon-ad": {
136+
"message-bold": "Chakra UI Pro:",
137+
"message": "Start your application or marketing site with a growing collection of beautiful and responsive UI components.",
138+
"ads-via-chakra-ui": "Ads via Chakra UI"
139+
},
140+
"component-links": {
141+
"view-source": "View source",
142+
"view-storybook": "View storybook",
143+
"view-theme-source": "View theme source"
144+
}
145+
},
146+
"algolia-search": {
147+
"search-the-docs": "Search the docs",
148+
"press": "Press",
149+
"and": "and",
150+
"to-search": "to-search"
151+
},
152+
"discord-strip": {
153+
"heading": "Connect with the community",
154+
"description": "Feel free to ask questions, report issues, and meet new people.",
155+
"join-the-chakra-discord": "Join the #Chakra Discord!"
156+
},
157+
"edit-page-button": {
158+
"edit-this-page": "Edit this page"
159+
},
160+
"footer": {
161+
"title": "Nigeria",
162+
"proudly-made-in": "Proudly made in"
163+
},
164+
"mobile-nav": {
165+
"docs": "Docs",
166+
"guides": "Guides",
167+
"faq": "FAQ",
168+
"team": "Team"
169+
},
170+
"page-container": {
171+
"skip-to-content": "Skip to Content"
172+
},
173+
"props-table": {
174+
"required": "required",
175+
"description": "Description",
176+
"type": "Type",
177+
"default": "Default",
178+
"for": "for",
179+
"are-not-implemented-in-the-default-theme": "are not implemented in the default theme.",
180+
"you-can": "You can",
181+
"extend-the-theme": "extend the theme",
182+
"to-implement-them": "to implement them."
183+
},
184+
"sponsor-button": {
185+
"sponsor": "Sponsor"
186+
},
187+
"table-of-content": {
188+
"on-this-page": "On this page"
189+
},
190+
"vercel-callout": {
191+
"deployed-by": "Deployed by"
192+
}
23193
}
24-
}
194+
}

‎pages/404.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ import Header from "components/header"
55
import SEO from "components/seo"
66
import * as React from "react"
77
import NextLink from "next/link"
8+
import { t } from "utils/i18n"
89

910
const NotFoundPage = () => {
1011
return (
1112
<>
12-
<SEO title="404: Not found" description="Page not found" />
13+
<SEO
14+
title={t("notfound.title")}
15+
description={t("notfound.description")}
16+
/>
1317
<AdBanner />
1418
<Header />
1519
<VStack
@@ -19,10 +23,8 @@ const NotFoundPage = () => {
1923
mt={["20", null, "40"]}
2024
textAlign="center"
2125
>
22-
<Heading>404 | Page Not Found</Heading>
23-
<Text fontSize={{ md: "xl" }}>
24-
You just hit a route that doesn&#39;t exist... the sadness.😢
25-
</Text>
26+
<Heading>{t("notfound.heading")}</Heading>
27+
<Text fontSize={{ md: "xl" }}>{t("notfound.message")}</Text>
2628
<NextLink href="/" passHref>
2729
<Button
2830
as="a"
@@ -31,7 +33,7 @@ const NotFoundPage = () => {
3133
colorScheme="teal"
3234
size="lg"
3335
>
34-
Back to Home
36+
{t("notfound.back-to-home")}
3537
</Button>
3638
</NextLink>
3739
</VStack>

0 commit comments

Comments
 (0)