Skip to content

Commit

Permalink
feat: preparing project to support internationalization
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabriel-logan
gabriel-logan committed May 28, 2024
1 parent 857e7fd commit 002a35e
Show file tree
Hide file tree
Showing 17 changed files with 362 additions and 309 deletions.
93 changes: 29 additions & 64 deletions docs/src/app/(doc-session)/documentation/js/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -11,6 +12,8 @@ import {
} from "./subComponents/MainPageSyntexHightlighter";

export default function DocumentationPageJs() {
const t = (text: string) => translation({ text, subject: "DocumentationJs" });

return (
<section className="min-h-screen bg-drawer-bg p-8 dark:bg-drawer-bg-dark">
<div>
Expand All @@ -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")}
</Link>
<DrawerComponent />
</div>
<div>
<h1 className="text-3xl font-medium">Official documentation</h1>
<p className="mt-4">
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&apos;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
</p>
<h1 className="text-3xl font-medium">
{t("Official documentation")}
</h1>
<p className="mt-4">{t("Welcome Introduction Text")}</p>
<div id="examples_code" className="mt-8">
<h1 className="mb-4 text-2xl font-semibold">
Multiform-validator
Expand Down Expand Up @@ -99,12 +76,13 @@ export default function DocumentationPageJs() {
</p>

<p>
This npm package provides JavaScript functions to validate
various forms fields.
{t(
"This npm package provides JavaScript functions to validate various forms fields.",
)}
</p>

<p className="mb-4">
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 (:")}
</p>

<p className="mb-6 mt-4 flex h-12 w-52">
Expand All @@ -123,22 +101,12 @@ export default function DocumentationPageJs() {
</p>

<strong>
<p className="mb-3">INFO: </p>
<p className="mb-3">
All functions that have the name &quot;validate&quot; return
an object with two properties, isValid: true|false and
errorMsg: &apos;String with errors&apos;
</p>
<p className="mb-3">
The remaining ones can return true|false|string|array, look at
the doc for each one
</p>
<p className="mb-3">{t("INFO: ")}</p>
<p className="mb-3">{t("FirstInfoText")}</p>
<p className="mb-3">{t("SecondInfoText")}</p>
</strong>

<p className="mb-3">
Feel free to find bugs and report them to me. Your feedback is
highly appreciated. Hugs from Gabriel Logan!
</p>
<p className="mb-3">{t("Feel free to find bugs Text Msg")} </p>

<h2 className="mb-2 mt-4 text-lg font-medium">CDN&apos;s</h2>

Expand All @@ -147,26 +115,27 @@ export default function DocumentationPageJs() {
</div>

<h2 className="mb-2 mt-4 text-lg font-medium">
Example of use with CDN
{t("Example of use with CDN")}
</h2>

<div className="mb-8">
<UsageCDNExample />
</div>

<h2 className="text-lg font-medium">Installation</h2>
<h2 className="text-lg font-medium">{t("Installation")}</h2>

<Installation />

<h1 className="mb-3 text-2xl">Data Validator</h1>
<h1 className="mb-3 text-2xl">{t("Data Validator")}</h1>

<p className="mb-3">
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:",
)}
</p>

<h3 className="mb-1 text-start font-medium">
Available Validation Modules
{t("Available Validation Modules")}
</h3>

<ul className="mb-5 text-start">
Expand Down Expand Up @@ -284,14 +253,16 @@ export default function DocumentationPageJs() {
</li>
</ul>

<p className="mb-3">if you prefer, you can use importing as:</p>
<p className="mb-3">
{t("if you prefer, you can use importing as:")}
</p>

<div className="p-2">
<UsageExample />
</div>

<p className="mb-4 mt-3">
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 (:")}
</p>

<p className="mb-6 mt-2 flex h-12 w-52">
Expand All @@ -309,15 +280,9 @@ export default function DocumentationPageJs() {
</Link>
</p>

<p className="mb-4">
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&apos;t hesitate to reach out
to me. Your feedback is valuable and helps improve the package.
Happy coding!
</p>
<p className="mb-4">{t("Feel free to explore msg")}</p>

<h2 className="mb-6">By - Gabriel Logan</h2>
<h2 className="mb-6">{t("By - Gabriel Logan")}</h2>
</div>
</div>
</div>
Expand Down
33 changes: 17 additions & 16 deletions docs/src/app/(doc-session)/documentation/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<MainBg>
<section className="p-2">
<h1 className="mb-4 mt-8 text-center text-2xl font-bold text-white sm:text-3xl md:text-start md:text-4xl lg:text-center">
Documentations Page
{t("doc_title")}
</h1>
<p className="mb-8 text-center text-base text-white sm:text-lg md:text-start lg:text-center">
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")}
</p>
<h2 className="mb-12 text-center text-xl font-semibold text-white sm:text-2xl md:text-start lg:text-center">
Here&apos;s all the languages that we support
{t("doc_subtitle")}
</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<Link
Expand All @@ -28,34 +31,32 @@ export default function DocumentationPage() {
>
<RiJavascriptFill size={64} color="gold" />
<h3 className="mb-2 mt-1 text-xl font-semibold text-black">
JavaScript
{t("doc_js_title")}
</h3>
<p className="text-black">
Here you can find the documentation for the JavaScript language.
</p>
<p className="text-black">{t("doc_js_text")}</p>
</Link>
<Link
href={`${basePath}/py`}
className="mx-auto max-w-96 cursor-pointer rounded border-black bg-white p-4 shadow hover:scale-105 active:scale-100"
>
<Image src={pythonIcon} alt="python-icon" />
<h3 className="mb-2 mt-1 text-xl font-semibold text-black">
Python
{t("doc_py_title")}
</h3>
<p className="text-black">
Here you can find the documentation for the Python language.
</p>
<p className="text-black">{t("doc_py_text")}</p>
</Link>
<Link
href={`${basePath}`}
className="mx-auto max-w-96 cursor-pointer rounded border-black bg-white p-4 shadow hover:scale-105 active:scale-100"
>
<Image src={javaIcon} alt="java-icon" />
<h3 className="mb-2 mt-1 text-xl font-semibold text-black">Java</h3>
<p className="text-black">
Here you can find the documentation for the Java language.
<h3 className="mb-2 mt-1 text-xl font-semibold text-black">
{t("doc_java_title")}
</h3>
<p className="text-black">{t("doc_java_text")}</p>
<p className="mt-2 text-center text-black">
{t("doc_java_coming")}
</p>
<p className="mt-2 text-center text-black">In coming ...</p>
</Link>
</div>
</section>
Expand Down
15 changes: 10 additions & 5 deletions docs/src/app/(doc-session)/documentation/py/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="min-h-screen bg-gray-800 p-6 text-white">
<h1 className="mb-4 text-4xl font-bold">Python Doc</h1>
<Link href="/" className="text-blue-500 hover:underline">
Back to home
{t("Back to home")}
</Link>
<p className="mb-6 mt-6 flex gap-2">
<a href="https://badge.fury.io/py/multiform-validator" target="_blank">
Expand Down Expand Up @@ -43,8 +48,8 @@ export default function DocumentationPagePy() {
</a>
</p>
<div className="mt-8">
<h2 className="mb-2 text-3xl font-semibold">Installation</h2>
<p className="mb-2 text-lg">Install the package using pip:</p>
<h2 className="mb-2 text-3xl font-semibold">{t("Installation")}</h2>
<p className="mb-2 text-lg">{t("Install the package using pip: ")}</p>
<SyntaxHighlighter language="bash" style={a11yDark}>
pip install multiform-validator
</SyntaxHighlighter>
Expand All @@ -64,7 +69,7 @@ export default function DocumentationPagePy() {
</SyntaxHighlighter>
</div>
<div className="mb-4 mt-8">
<h1 className="mb-2 text-3xl font-semibold">Methods</h1>
<h1 className="mb-2 text-3xl font-semibold">{t("Methods")}</h1>
<div className="mb-8">
<h2 className="text-lg">isEmail: </h2>
<SyntaxHighlighter language="python" style={a11yDark}>
Expand Down Expand Up @@ -169,7 +174,7 @@ print(isValidImage(file_buffer)) # True or False`}
</div>
<div>
<h1 className="text-3xl font-semibold">Functions signature</h1>
<p>All params with default values are optional.</p>
<p>{t("All params with default values are optional.")}</p>
<SyntaxHighlighter language="python" style={a11yDark}>
{`def isEmail(email: str) -> bool:
pass
Expand Down
11 changes: 8 additions & 3 deletions docs/src/app/(doc-session)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 002a35e

Please sign in to comment.