diff --git a/docs/src/app/(doc-session)/documentation/js/page.tsx b/docs/src/app/(doc-session)/documentation/js/page.tsx index 090ed9e..2635fb1 100644 --- a/docs/src/app/(doc-session)/documentation/js/page.tsx +++ b/docs/src/app/(doc-session)/documentation/js/page.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import Link from "next/link"; import DrawerComponent from "@/components/Drawer"; +import translation from "@/components/Internationalization"; import { Cdns, @@ -11,6 +12,8 @@ import { } from "./subComponents/MainPageSyntexHightlighter"; export default function DocumentationPageJs() { + const t = (text: string) => translation({ text, subject: "DocumentationJs" }); + return (
@@ -22,41 +25,15 @@ export default function DocumentationPageJs() { className="rounded bg-gray-700 px-4 py-2 text-white" id="menu-toggle" > - Back to home page + {t("Back to home page")}
-

Official documentation

-

- Welcome to the main page of Multiform Validator! Here, you will - find detailed documentation for various functions provided by - Multiform Validator, a useful JavaScript library for data - validation. Each function is designed to assist in validating - different types of data, making your code more robust and secure. - Multiform Validator consists of a series of specialized functions - that allow you to validate various data types, such as emails, - passwords, names, surnames, passport numbers, phone numbers, and - more. Each function has configurable parameters and provides - customizable error messages to suit your project's needs. On - each documentation page, you will find a comprehensive description - of the function, including its purpose, accepted parameters, and - usage examples. Additionally, you will have access to details - about default error messages and how to customize them to fit your - application. By using Multiform Validator, you can ensure that - user input in your forms is correct and compliant with the - established rules. This validation is essential to prevent issues - such as invalid entries, corrupted data, or security - vulnerabilities. We are continuously working to enhance and expand - Multiform Validator with new features and improvements to make it - an even more powerful and flexible tool for your validation needs. - We hope that these documentations prove to be helpful and simplify - the usage of Multiform Validator in your projects. Feel free to - explore the various available functions and do not hesitate to - reach out to us if you have any questions or suggestions. Thank - you for choosing Multiform Validator as your data validation tool, - and we wish you success in your projects! Multiform Validator Team -

+

+ {t("Official documentation")} +

+

{t("Welcome Introduction Text")}

Multiform-validator @@ -99,12 +76,13 @@ export default function DocumentationPageJs() {

- This npm package provides JavaScript functions to validate - various forms fields. + {t( + "This npm package provides JavaScript functions to validate various forms fields.", + )}

- If you want to help me, you can buy me a coffee (: + {t("If you want to help me, you can buy me a coffee (:")}

@@ -123,22 +101,12 @@ export default function DocumentationPageJs() {

-

INFO:

-

- All functions that have the name "validate" return - an object with two properties, isValid: true|false and - errorMsg: 'String with errors' -

-

- The remaining ones can return true|false|string|array, look at - the doc for each one -

+

{t("INFO: ")}

+

{t("FirstInfoText")}

+

{t("SecondInfoText")}

 -

- Feel free to find bugs and report them to me. Your feedback is - highly appreciated. Hugs from Gabriel Logan! -

+

{t("Feel free to find bugs Text Msg")}

CDN's

@@ -147,26 +115,27 @@ export default function DocumentationPageJs() {

- Example of use with CDN + {t("Example of use with CDN")}

-

Installation

+

{t("Installation")}

-

Data Validator

+

{t("Data Validator")}

- This package contains various modules for validating different - types of data. Below are the available validation modules: + {t( + "This package contains various modules for validating different types of data. Below are the available validation modules:", + )}

- Available Validation Modules + {t("Available Validation Modules")}

    @@ -284,14 +253,16 @@ export default function DocumentationPageJs() {
-

if you prefer, you can use importing as:

+

+ {t("if you prefer, you can use importing as:")} +

- If you want to help me, you can buy me a coffee (: + {t("If you want to help me, you can buy me a coffee (:")}

@@ -309,15 +280,9 @@ export default function DocumentationPageJs() {

-

- Feel free to explore the various functions and experiment with - different inputs to understand their behavior. If you encounter - any issues or have suggestions, don't hesitate to reach out - to me. Your feedback is valuable and helps improve the package. - Happy coding! -

+

{t("Feel free to explore msg")}

-

By - Gabriel Logan

+

{t("By - Gabriel Logan")}

diff --git a/docs/src/app/(doc-session)/documentation/page.tsx b/docs/src/app/(doc-session)/documentation/page.tsx index 21468d0..cb851af 100644 --- a/docs/src/app/(doc-session)/documentation/page.tsx +++ b/docs/src/app/(doc-session)/documentation/page.tsx @@ -4,22 +4,25 @@ import { RiJavascriptFill } from "react-icons/ri"; import javaIcon from "@/assets/icons/java-icon.svg"; import pythonIcon from "@/assets/icons/python-icon.svg"; +import translation from "@/components/Internationalization"; import MainBg from "@/components/MainBg"; export default function DocumentationPage() { + const t = (text: string) => + translation({ text, subject: "DocumentationPage" }); + const basePath = "/documentation"; return (

- Documentations Page + {t("doc_title")}

- Welcome to the documentation page. Here you can find all the languages - that we support and the documentation for each one of them. + {t("doc_intro")}

- Here's all the languages that we support + {t("doc_subtitle")}

- JavaScript + {t("doc_js_title")}

-

- Here you can find the documentation for the JavaScript language. -

+

{t("doc_js_text")}

python-icon

- Python + {t("doc_py_title")}

-

- Here you can find the documentation for the Python language. -

+

{t("doc_py_text")}

java-icon -

Java

-

- Here you can find the documentation for the Java language. +

+ {t("doc_java_title")} +

+

{t("doc_java_text")}

+

+ {t("doc_java_coming")}

-

In coming ...

diff --git a/docs/src/app/(doc-session)/documentation/py/page.tsx b/docs/src/app/(doc-session)/documentation/py/page.tsx index 58c6d83..19eeaef 100644 --- a/docs/src/app/(doc-session)/documentation/py/page.tsx +++ b/docs/src/app/(doc-session)/documentation/py/page.tsx @@ -3,12 +3,17 @@ import Link from "next/link"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism"; +import translation from "@/components/Internationalization"; + export default function DocumentationPagePy() { + const t = (text: string) => + translation({ text, subject: "DocumentationPython" }); + return (

Python Doc

- Back to home + {t("Back to home")}

@@ -43,8 +48,8 @@ export default function DocumentationPagePy() {

-

Installation

-

Install the package using pip:

+

{t("Installation")}

+

{t("Install the package using pip: ")}

pip install multiform-validator @@ -64,7 +69,7 @@ export default function DocumentationPagePy() {
-

Methods

+

{t("Methods")}

isEmail:

@@ -169,7 +174,7 @@ print(isValidImage(file_buffer)) # True or False`}

Functions signature

-

All params with default values are optional.

+

{t("All params with default values are optional.")}

{`def isEmail(email: str) -> bool: pass diff --git a/docs/src/app/(doc-session)/layout.tsx b/docs/src/app/(doc-session)/layout.tsx index 30a4ece..2a42144 100644 --- a/docs/src/app/(doc-session)/layout.tsx +++ b/docs/src/app/(doc-session)/layout.tsx @@ -2,12 +2,17 @@ import "react-modern-drawer/dist/index.css"; import type { Metadata } from "next"; +import translation from "@/components/Internationalization"; + +const t = (text: string) => + translation({ text, subject: "DocumentationLayout" }); + export const metadata: Metadata = { - title: "Documentation", - description: "Documentation for the Multiform Validator library.", + title: t("Documentation"), + description: t("Documentation for the Multiform Validator library."), }; -export default function RootLayout({ +export default function DocumentationLayout({ children, }: Readonly<{ children: React.ReactNode; diff --git a/docs/src/app/about/page.tsx b/docs/src/app/about/page.tsx index 915ad72..c9d8c42 100644 --- a/docs/src/app/about/page.tsx +++ b/docs/src/app/about/page.tsx @@ -1,71 +1,21 @@ -import MainBg from "@/components/MainBg"; - import "@/css/infos.css"; +import translation from "@/components/Internationalization"; +import MainBg from "@/components/MainBg"; export default function AboutPage() { + const t = (text: string) => translation({ text, subject: "About" }); + return (
-

Hello, I'm Gabriel Logan

-

- I consider myself a versatile programmer with a passion for both - front-end and back-end development. Crafting exceptional web - experiences is what drives me, and I take immense pride in the work I - produce. -

-

- As a front-end developer, I have a keen eye for user experience and - interface design. I love transforming creative concepts into visually - captivating and interactive web applications using HTML, CSS, and - JavaScript. From seamless navigation to smooth animations, I pay - attention to every detail to ensure that my front-end projects exude - elegance and functionality. -

-

- But my skills don't stop there. I am equally proficient in - back-end development, with expertise in languages such as Python, - Java, and JavaScript (Node.js). Building robust and secure web - applications is my forte, as I understand the intricacies of - server-side logic. My solutions are geared towards efficiency, - reliability, and scalability, making sure that even during peak times, - my applications deliver a smooth user experience. -

-

- One of my proudest achievements is the creation of a groundbreaking - web page that simplifies and speeds up form validation. This ingenious - solution is designed to help people and businesses streamline their - form validation process. By leveraging my extensive knowledge of web - development and incorporating cutting-edge technologies, my page - offers a lightning-fast and SUPER efficient way to validate forms. Its - user-friendly interface and intuitive functionalities make it an - indispensable tool for professionals seeking to enhance their - productivity and accuracy in data collection. -

-

- Apart from my technical skills, I thrive as a creative problem solver. - I love tackling challenges with an innovative mindset and am always on - the lookout for ways to enhance the user experience. My ability to - think outside the box and deliver inventive solutions sets me apart as - a true leader in the field of web development. -

-

- When I'm not engrossed in code, you might find me seeking - inspiration in the world around me. Whether I'm exploring the - outdoors, immersing myself in art and culture, or engaging in - thought-provoking discussions, I draw from a diverse range of - experiences that shape my approach to programming and my interactions - with colleagues and clients. -

-

- In conclusion, I am Gabriel Logan, a passionate programmer who - seamlessly weaves front-end and back-end skills to create exceptional - web experiences. My innovative mindset, attention to detail, and - dedication to efficiency have led me to develop a groundbreaking page - that I believe will make a significant impact on the world of form - validation. As the digital landscape continues to evolve, I stand at - the forefront, ready to embrace new challenges and make a difference - through my exceptional work in web development. -

+

{t("about_title")}

+

{t("about_intro")}

+

{t("about_frontend")}

+

{t("about_backend")}

+

{t("about_achievement")}

+

{t("about_creative")}

+

{t("about_inspiration")}

+

{t("about_conclusion")}

 ); diff --git a/docs/src/app/info/page.tsx b/docs/src/app/info/page.tsx index f57023c..5a2029d 100644 --- a/docs/src/app/info/page.tsx +++ b/docs/src/app/info/page.tsx @@ -1,57 +1,21 @@ -import MainBg from "@/components/MainBg"; - import "@/css/infos.css"; +import translation from "@/components/Internationalization"; +import MainBg from "@/components/MainBg"; export default function InfoPage() { + const t = (text: string) => translation({ text, subject: "Info" }); + return (
-

multiform-validator - Multi Library for Form Field Validation

-

- Introducing multiform-validator, a powerful Multi Library developed by - Gabriel Logan. This versatile library is designed to validate numerous - form fields, including email addresses, phone numbers, passwords, CPF - (Brazilian individual taxpayer registry numbers), credit card numbers, - and more. -

-

- With multiform-validator, you can ensure that the data submitted - through your forms is accurate and secure. Whether you're - building a registration form, checkout process, or any data input - system, this library has got you covered. -

-

- The multiform-validator library comes with an extensive set of - pre-built validation rules and customizable options. You can easily - integrate it into your web applications and enjoy the benefits of - client-side validation, reducing the number of invalid form - submissions and enhancing the overall user experience. -

-

- You can also use the multiform-validator to do validations in your - backend, it works for any type of form validation or functions that - use javascript, python, so feel free to use it -

-

- What sets multiform-validator apart is its flexibility and ease of - use. You can effortlessly apply validation rules to different form - fields by simply adding a few lines of JavaScript code. Additionally, - the library provides informative error messages, guiding users on how - to correct their inputs, thereby reducing frustration and form - abandonment rates. -

-

- Gabriel Logan takes pride in developing the multiform-validator - library with a focus on performance, efficiency, and reliability. The - library is optimized for various browsers, ensuring seamless - compatibility for your diverse audience. -

-

- So, if you're seeking a comprehensive solution for form field - validation, look no further than multiform-validator. Embrace the - power of this library, and rest assured that your data collection - process will be streamlined, accurate, and secure. -

+

{t("info_title")}

+

{t("info_intro")}

+

{t("info_ensure")}

+

{t("info_prebuilt_rules")}

+

{t("info_backend")}

+

{t("info_flexibility")}

+

{t("info_performance")}

+

{t("info_conclusion")}

 ); diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx index a0d7c34..caf3c63 100644 --- a/docs/src/app/layout.tsx +++ b/docs/src/app/layout.tsx @@ -6,15 +6,17 @@ import { Inter } from "next/font/google"; import Adsense from "@/components/Adsense"; import Footer from "@/components/Footer"; import Header from "@/components/Header"; +import translation from "@/components/Internationalization"; const inter = Inter({ subsets: ["latin"] }); +const t = (text: string) => translation({ text, subject: "HomeLayout" }); + export const metadata: Metadata = { - title: "Multiform Validator", - description: - "Multilingual library made for validation, various form fields, such as: email, telephone, password, cpf, cnpj, credit card, magic numbers for image mimetype validation and much more.", + title: t("Multiform Validator"), + description: t("Description"), authors: { name: "Gabriel Logan", url: "https://github.com/gabriel-logan" }, - classification: "Validation Library", + classification: t("Classification"), generator: "Gabriel Logan", keywords: [ "validation", @@ -45,11 +47,11 @@ export const metadata: Metadata = { ], verification: { google: process.env.GOOGLE_SEARCH_CONSOLE_API_KEY }, appleWebApp: { - title: "Multiform Validator", + title: t("Multiform Validator"), capable: true, statusBarStyle: "black-translucent", }, - applicationName: "Multiform Validator", + applicationName: t("Multiform Validator"), manifest: "/manifest.webmanifest", icons: [ { @@ -108,7 +110,7 @@ export default function RootLayout({ data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="gabriellogan" - data-description="Support me on Buy me a coffee!" + data-description={t("Support me on Buy me a coffee")} data-message="" data-color="#5F7FFF" data-position="Right" diff --git a/docs/src/app/manifest.ts b/docs/src/app/manifest.ts index 2b84834..77a1dd6 100644 --- a/docs/src/app/manifest.ts +++ b/docs/src/app/manifest.ts @@ -1,11 +1,14 @@ import { MetadataRoute } from "next"; +import translation from "@/components/Internationalization"; + export default function manifest(): MetadataRoute.Manifest { + const t = (text: string) => translation({ text, subject: "Manifest" }); + return { - name: "Multiform Validator - Your Multilingual Validation Library", - short_name: "Multiform Validator", - description: - "Multilingual library made for validation, various form fields, such as: email, telephone, password, cpf, cnpj, credit card, magic numbers for image mimetype validation and much more.", + name: t("Name"), + short_name: t("ShortName"), + description: t("Description"), start_url: "/", display: "standalone", background_color: "#121212", diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx index 8c22e50..f906d6d 100644 --- a/docs/src/app/page.tsx +++ b/docs/src/app/page.tsx @@ -1,33 +1,34 @@ import Image from "next/image"; import Link from "next/link"; +import translation from "@/components/Internationalization"; import MainBg from "@/components/MainBg"; import { merriweather, oswald, playfair, roboto100, sofiaPro } from "@/fonts"; export default function Home() { + const t = (text: string) => translation({ text, subject: "HomePage" }); + return (

- Welcome to the multiform-validator website + {t("Welcome")}

- Using my library, you can convert many lines of code into very few lines - and as a result you have a cleaner, stronger and safer code, you will - have several tools and functions that will do several form validations + {t("Intro")}

- Hello (: + {t("Hello")} (:

- follow the{" "} + {t("FollowThe")}{" "} - documentation + {t("Documentation").toLowerCase()} {" "} - for more information + {t("ForMoreInfo").toLowerCase()}

- See the github source + {t("SeeTheGithubSourceCode")} - See the npm page + {t("SeeTheNpmPage")} - See the pypi page + {t("SeeThePypiPage")}

- You can also help the programmer by buying a coffee at the link below, - thanks in advance (: + {t("HelpMsg")}

diff --git a/docs/src/app/privacity-polices/page.tsx b/docs/src/app/privacity-polices/page.tsx index 76511fb..2649d7f 100644 --- a/docs/src/app/privacity-polices/page.tsx +++ b/docs/src/app/privacity-polices/page.tsx @@ -1,56 +1,22 @@ +import "@/css/infos.css"; + +import translation from "@/components/Internationalization"; import MainBg from "@/components/MainBg"; -import "@/css/infos.css"; +export default function PrivacityPolicesPage() { + const t = (text: string) => translation({ text, subject: "PrivacyPolices" }); -export default function AboutPage() { return (
-

Privacy Policies - Your Data is Safe with Us

-

- At Gabriel Logan Web Services, we take your privacy seriously. We want - to assure you that we do not collect any data on our website, and we - do not use any data through the "multiform-validator" - library. Your information remains entirely confidential, and your - privacy is paramount to us. -

-

- When you visit our website, rest assured that no personal data, such - as your name, email address, or contact information, is gathered or - stored. We believe in providing you with a safe and anonymous browsing - experience. -

-

- The "multiform-validator" library is designed to validate - form fields on your web applications without accessing or transmitting - any data to external servers. All validation occurs locally within - your browser, ensuring that your sensitive information never leaves - your device. -

-

- We understand the importance of data security, and that's why we - have meticulously developed the "multiform-validator" - library to be 100% secure. Your data remains under your control, and - we do not have access to any information processed by the library. -

-

- Your trust is valuable to us, and we want you to feel confident in - using our services and the "multiform-validator" library. - Our commitment to your privacy is unwavering, and we will continue to - prioritize the security and protection of your data in all aspects of - our work. -

-

- If you have any questions or concerns about our privacy policies or - the use of the "multiform-validator" library, please - don't hesitate to contact us. We are here to address any - inquiries and ensure your peace of mind. -

-

- Thank you for choosing Gabriel Logan Web Services. We look forward to - providing you with exceptional solutions while safeguarding your - privacy every step of the way. -

+

{t("privacy_title")}

+

{t("privacy_intro")}

+

{t("privacy_no_personal_data")}

+

{t("validator_local")}

+

{t("validator_secure")}

+

{t("privacy_trust")}

+

{t("privacy_questions")}

+

{t("privacy_thanks")}

 ); diff --git a/docs/src/app/terms/page.tsx b/docs/src/app/terms/page.tsx index cdd7755..14248c6 100644 --- a/docs/src/app/terms/page.tsx +++ b/docs/src/app/terms/page.tsx @@ -1,39 +1,45 @@ +import "@/css/infos.css"; + +import translation from "@/components/Internationalization"; import MainBg from "@/components/MainBg"; -import "@/css/infos.css"; +export default function TermsPage() { + const t = (text: string) => translation({ text, subject: "Terms" }); -export default function AboutPage() { return (
-

Terms and Conditions

+

{t("Terms and Conditions")}

- Welcome to Gabriel Logan Web Services. By using this website, you - agree to the following terms and conditions: + {t( + "Welcome to Gabriel Logan Web Services. By using this website, you agree to the following terms and conditions:", + )}

- - The content provided on this website is for general information - purposes only, and we make no warranties or representations regarding - its accuracy or completeness. + {t( + "The content provided on this website is for general information purposes only, and we make no warranties or representations regarding its accuracy or completeness.", + )}

- - We use the "multiform-validator" library, licensed under - the MIT License, to enhance form field validation. However, we are not - responsible for its usage or any consequences resulting from - third-party use of the library. + {t( + 'We use the "multiform-validator" library, licensed under the MIT License, to enhance form field validation. However, we are not responsible for its usage or any consequences resulting from third-party use of the library.', + )}

- - We do not collect any personal data through this website, and your - privacy is important to us. + {t( + "We do not collect any personal data through this website, and your privacy is important to us.", + )}

-

- Unauthorized use of this website is strictly prohibited.

+

{t("Unauthorized use of this website is strictly prohibited.")}

- - Your use of this website and any disputes arising are subject to the - laws of [Your Country/Region]. + {t( + "Your use of this website and any disputes arising are subject to the laws of [Your Country/Region].", + )}

- Thank you for visiting our website and using our services. If you have - any questions or concerns, please don't hesitate to contact us. + {t( + "Thank you for visiting our website and using our services. If you have any questions or concerns, please don’t hesitate to contact us.", + )}

diff --git a/docs/src/components/Footer/index.tsx b/docs/src/components/Footer/index.tsx index c77a34e..bdb16fa 100644 --- a/docs/src/components/Footer/index.tsx +++ b/docs/src/components/Footer/index.tsx @@ -6,7 +6,11 @@ import { FaYoutube, FaInstagram, FaGithub, FaLinkedin } from "react-icons/fa"; import { playfair, sofiaPro } from "@/fonts"; +import translation from "../Internationalization"; + export default function Footer() { + const t = (text: string) => translation({ text, subject: "Footer" }); + const path = usePathname(); const show = @@ -41,7 +45,7 @@ export default function Footer() { href="/" className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`} > - Home + {t("Home")}
  • @@ -49,7 +53,7 @@ export default function Footer() { href="/documentation/" className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`} > - Services + {t("Services")}
  • @@ -57,7 +61,7 @@ export default function Footer() { href="/about/" className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`} > - About + {t("About")}
  • @@ -65,7 +69,7 @@ export default function Footer() { href="/terms/" className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`} > - Terms + {t("Terms")}
  • @@ -73,14 +77,14 @@ export default function Footer() { href="/privacity-polices/" className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`} > - Privacy Policy + {t("Privacy Policy")}

    • - Multiform validator © 2023 - Gabriel Logan + {t("CopyRightMsg")}

    )} diff --git a/docs/src/components/Header/index.tsx b/docs/src/components/Header/index.tsx index aca1814..8eeb6c3 100644 --- a/docs/src/components/Header/index.tsx +++ b/docs/src/components/Header/index.tsx @@ -8,7 +8,11 @@ import { FaCaretDown } from "react-icons/fa"; import { roboto700 } from "@/fonts"; +import translation from "../Internationalization"; + export default function Header() { + const t = (text: string) => translation({ text, subject: "Header" }); + const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const path = usePathname(); @@ -23,7 +27,7 @@ export default function Header() { <>

    - Multiform validator + {t("header_title")}

    {isSubMenuOpen && ( @@ -51,7 +55,9 @@ export default function Header() { className="nav-link text-blue-500" href={path === "/" ? "#" : "/"} > - {path === "/" ? "You are already here (:" : "Go home"} + {path === "/" + ? t("header_already_here") + : t("header_go_home")} setIsSubMenuOpen(false)} @@ -59,7 +65,7 @@ export default function Header() { target="_blank" href="https://www.buymeacoffee.com/gabriellogan" > - buy me a coffee ? + {t("header_buy_coffee")} setIsSubMenuOpen(false)} @@ -67,7 +73,7 @@ export default function Header() { target="_blank" href="https://github.com/gabriel-logan/multiform-validator#readme" > - My github + {t("header_github")}
    )} @@ -75,12 +81,12 @@ export default function Header() {
  • - Documentation + {t("header_docs")}
  • - Info + {t("header_info")}
    • @@ -94,7 +100,7 @@ export default function Header() { onClick={() => setIsSubMenuOpen(!isSubMenuOpen)} className="ml-4 cursor-pointer list-disc text-white" > - Home + {t("header_home")} {isSubMenuOpen && (
    @@ -103,7 +109,9 @@ export default function Header() { className="text-blue-500" href={path === "/" ? "#" : "/"} > - {path === "/" ? "You are already here (:" : "Go home"} + {path === "/" + ? t("header_already_here") + : t("header_go_home")} setIsSubMenuOpen(false)} @@ -111,7 +119,7 @@ export default function Header() { target="_blank" href="https://www.buymeacoffee.com/gabriellogan" > - buy me a coffee ? + {t("header_buy_coffee")} setIsSubMenuOpen(false)} @@ -119,19 +127,19 @@ export default function Header() { target="_blank" href="https://github.com/gabriel-logan/multiform-validator#readme" > - My github + {t("header_github")}
    )}
  • - Documentation + {t("header_docs")}
  • - Info + {t("header_info")}
    • diff --git a/docs/src/components/Internationalization/index.ts b/docs/src/components/Internationalization/index.ts new file mode 100644 index 0000000..990d3c7 --- /dev/null +++ b/docs/src/components/Internationalization/index.ts @@ -0,0 +1,35 @@ +import enJson from "@/locales/en/en.json"; + +type Langs = "en" | "pt"; + +interface TranslationProps { + text: string; + subject?: keyof typeof enJson | ""; + language?: Langs; +} + +interface Locale { + [key: string]: any; +} + +function translation({ + text, + language = "en", + subject = "", +}: TranslationProps): string { + const english: Locale = enJson; + + let enText: string | object = english[text]; + + if (subject && text in english[subject]) { + enText = english[subject][text]; + } + + if (typeof enText === "object" || !enText) { + return text; + } + + return enText; +} + +export default translation; diff --git a/docs/src/components/SidebarWrapper/js/index.tsx b/docs/src/components/SidebarWrapper/js/index.tsx index 4be4224..89aafb3 100644 --- a/docs/src/components/SidebarWrapper/js/index.tsx +++ b/docs/src/components/SidebarWrapper/js/index.tsx @@ -1,7 +1,12 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; +import translation from "@/components/Internationalization"; + export default function SidebarWrapper() { + const t = (text: string) => + translation({ text, subject: "SidebarWrapperJs" }); + const path = usePathname(); const basePath = "/documentation/js/functions"; return ( @@ -10,14 +15,14 @@ export default function SidebarWrapper() { className={`mb-6 mt-2 rounded p-2 text-center text-white ${path === "/documentation/js" && "bg-hoverLi"}`} > - Documentation + {t("Documentation")}
  • - Home + {t("Home")}