diff --git a/src/init/i18n/locales/BritishEnglish.json b/src/init/i18n/locales/BritishEnglish.json index 32e95d0..478d513 100644 --- a/src/init/i18n/locales/BritishEnglish.json +++ b/src/init/i18n/locales/BritishEnglish.json @@ -1,17 +1,100 @@ { "app": { - "title": "DevHub", - "pageTitle": "DevHub", + "title": "DevLab", + "pageTitle": "DevLab", "copyright": "© {{year}} OnixByte. Built with React & TypeScript." }, "navigation": { - "home": "Home" + "home": "Home", + "about": "About", + "contact": "Contact" }, "language": { "switch": "Switch Language", "english": "English (Great Britain)", "chinese": "简体中文" }, + "home": { + "title": "DevLab", + "description": "A collection of powerful, privacy-focused developer tools. All processing happens locally in your browser.", + "getStarted": "Get Started", + "getStartedDescription": "Start visualising and querying your JSON data with our intuitive JSONPath-based tool.", + "openJsonViewer": "Open JSON Viewer", + "openBmiCalculator": "Open BMI Calculator", + "bmiCalculatorDescription": "Calculate your Body Mass Index (BMI) to assess your weight status and health. Get instant results with personalised advice based on your BMI category.", + "features": { + "tools": { + "title": "🛠️ Developer Tools", + "description": "A growing collection of practical tools for developers and everyday use." + }, + "privacy": { + "title": "🔒 Privacy First", + "description": "All processing happens locally in your browser. No data is ever sent to servers." + }, + "free": { + "title": "✨ Free & Open", + "description": "Completely free to use with no limitations. Open source and transparent." + } + } + }, + "jsonViewer": { + "jsonSource": "JSON Source", + "jsonPathExpression": "JSONPath Expression", + "invalidSyntax": "— Invalid syntax", + "placeholder": "e.g. $..roles", + "visualisedResult": "Visualised Result", + "matches": "matches", + "copied": "Copied!", + "copyAsCsv": "Copy as CSV", + "error": "Error:" + }, + "about": { + "title": "About DevLab", + "description": "A powerful, privacy-focused tool for debugging and visualising complex JSON data structures.", + "openSource": { + "title": "📦 Open Source & Deployment", + "description": "This project is open source and available on GitHub. You can view the source code, contribute, or deploy your own instance.", + "viewOnGitHub": "View on GitHub", + "starUs": "⭐ Star us on GitHub:", + "starUsDescription": "If you find this project helpful, we'd greatly appreciate it if you could give us a star on GitHub. It helps others discover the project and motivates us to keep improving!", + "selfHosting": "💡 Self-Hosting:", + "selfHostingDescription": "You can deploy this application yourself! The repository includes all necessary configuration files. Simply clone the repository, install dependencies, and deploy to your preferred hosting platform (Vercel, Netlify, or any static hosting service)." + }, + "privacy": { + "title": "🔒 Privacy & Data Security", + "description": "We believe that your data belongs to you. This application is designed as a purely client-side tool. All JSON parsing, path evaluation, and visual rendering are performed locally within your browser. No data is ever uploaded to any server, ensuring that sensitive configuration or user data remains entirely private." + } + }, + "contact": { + "title": "Get in Touch", + "description": "The best way to reach us is via our GitHub repository.", + "whyGitHub": { + "title": "🤝 Why GitHub Issues?", + "description": "We use GitHub to track all bug reports and feature requests. This ensures our development process remains transparent and that your feedback is properly prioritised by the community." + }, + "howItWorks": { + "title": "How it works:", + "step1": "Fill in the enquiry details in the form provided.", + "step2": "Click \"Prepare GitHub Issue\".", + "step3": "You will be redirected to GitHub with the data pre-filled.", + "step4": "Simply hit \"Submit new issue\" on their site." + }, + "email": "Alternatively, you can email us directly at:", + "form": { + "subject": "Subject", + "subjectPlaceholder": "Bug report / Feature request", + "type": "Enquiry Type", + "typeHelp": "Selecting a type helps us categorise and prioritise your issue.", + "message": "Message Details", + "messagePlaceholder": "Describe your enquiry here...", + "submit": "Prepare GitHub Issue" + }, + "types": { + "helpWanted": "General Enquiry", + "enhancement": "Feature Request", + "bug": "Bug" + } + }, "bmi": { "title": "BMI Calculator", "description": "Calculate your Body Mass Index (BMI) to assess your weight status and health.", @@ -26,7 +109,8 @@ "calculate": "Calculate BMI", "reset": "Reset", "result": { - "title": "Your BMI Result" + "title": "Your BMI Result", + "emptyState": "Enter your weight and height to calculate your BMI" }, "category": { "underweight": "Underweight", diff --git a/src/init/i18n/locales/SimplifiedChinese.json b/src/init/i18n/locales/SimplifiedChinese.json index 5e14132..59f2009 100644 --- a/src/init/i18n/locales/SimplifiedChinese.json +++ b/src/init/i18n/locales/SimplifiedChinese.json @@ -1,17 +1,100 @@ { "app": { - "title": "DevHub", - "pageTitle": "DevHub", + "title": "DevLab", + "pageTitle": "DevLab", "copyright": "© {{year}} OnixByte。 使用 React 和 TypeScript 构建。" }, "navigation": { - "home": "首页" + "home": "首页", + "about": "关于", + "contact": "联系" }, "language": { "switch": "切换语言", "english": "English (Great Britain)", "chinese": "简体中文" }, + "home": { + "title": "DevLab", + "description": "一系列强大的、注重隐私的开发者工具集合。所有处理都在您的浏览器本地进行。", + "getStarted": "开始使用", + "getStartedDescription": "使用我们直观的基于 JSONPath 的工具开始可视化和查询您的 JSON 数据。", + "openJsonViewer": "打开 JSON 查看器", + "openBmiCalculator": "打开 BMI 计算器", + "bmiCalculatorDescription": "计算您的身体质量指数（BMI）以评估您的体重状态和健康状况。根据您的 BMI 分类获得即时结果和个性化建议。", + "features": { + "tools": { + "title": "🛠️ 开发者工具", + "description": "不断增长的实用工具集合，适用于开发者和日常使用。" + }, + "privacy": { + "title": "🔒 隐私优先", + "description": "所有处理都在您的浏览器本地进行。数据永远不会发送到服务器。" + }, + "free": { + "title": "✨ 免费开源", + "description": "完全免费使用，无任何限制。开源且透明。" + } + } + }, + "jsonViewer": { + "jsonSource": "JSON 源", + "jsonPathExpression": "JSONPath 表达式", + "invalidSyntax": "— 语法无效", + "placeholder": "例如：$..roles", + "visualisedResult": "可视化结果", + "matches": "个匹配", + "copied": "已复制！", + "copyAsCsv": "复制为 CSV", + "error": "错误：" + }, + "about": { + "title": "关于 DevLab", + "description": "一个强大的、注重隐私的工具，用于调试和可视化复杂的 JSON 数据结构。", + "openSource": { + "title": "📦 开源与部署", + "description": "这个项目是开源的，可在 GitHub 上获取。您可以查看源代码、贡献代码或部署您自己的实例。", + "viewOnGitHub": "在 GitHub 上查看", + "starUs": "⭐ 在 GitHub 上为我们加星：", + "starUsDescription": "如果您觉得这个项目有帮助，我们非常感激您能在 GitHub 上为我们加星。这有助于其他人发现这个项目，并激励我们不断改进！", + "selfHosting": "💡 自托管：", + "selfHostingDescription": "您可以自己部署这个应用程序！仓库包含所有必要的配置文件。只需克隆仓库、安装依赖，然后部署到您首选的托管平台（Vercel、Netlify 或任何静态托管服务）。" + }, + "privacy": { + "title": "🔒 隐私与数据安全", + "description": "我们相信您的数据属于您。此应用程序设计为纯客户端工具。所有 JSON 解析、路径评估和可视化渲染都在您的浏览器本地执行。数据永远不会上传到任何服务器，确保敏感配置或用户数据完全私密。" + } + }, + "contact": { + "title": "联系我们", + "description": "联系我们的最佳方式是通过我们的 GitHub 仓库。", + "whyGitHub": { + "title": "🤝 为什么使用 GitHub Issues？", + "description": "我们使用 GitHub 来跟踪所有错误报告和功能请求。这确保我们的开发过程保持透明，并且您的反馈会被社区正确优先处理。" + }, + "howItWorks": { + "title": "使用方法：", + "step1": "在提供的表单中填写查询详情。", + "step2": "点击 \"准备 GitHub Issue\"。", + "step3": "您将被重定向到 GitHub，数据已预填。", + "step4": "只需在他们的网站上点击 \"提交新问题\"。" + }, + "email": "或者，您可以直接发送电子邮件至：", + "form": { + "subject": "主题", + "subjectPlaceholder": "错误报告 / 功能请求", + "type": "查询类型", + "typeHelp": "选择类型有助于我们分类和优先处理您的问题。", + "message": "消息详情", + "messagePlaceholder": "在此描述您的查询...", + "submit": "准备 GitHub Issue" + }, + "types": { + "helpWanted": "一般查询", + "enhancement": "功能请求", + "bug": "错误" + } + }, "bmi": { "title": "BMI 计算器", "description": "计算您的身体质量指数（BMI）以评估您的体重状态和健康状况。", @@ -26,7 +109,8 @@ "calculate": "计算 BMI", "reset": "重置", "result": { - "title": "您的 BMI 结果" + "title": "您的 BMI 结果", + "emptyState": "请输入您的体重和身高以计算 BMI" }, "category": { "underweight": "体重过轻", diff --git a/src/layout/hero-layout/index.tsx b/src/layout/hero-layout/index.tsx index 4cd0c46..9002178 100644 --- a/src/layout/hero-layout/index.tsx +++ b/src/layout/hero-layout/index.tsx @@ -1,6 +1,8 @@ import { Outlet, Link, useLocation } from "react-router-dom" import { useMemo } from "react" +import { useTranslation } from "react-i18next" import dayjs from "dayjs" +import LanguageSwitcher from "@/components/language-switcher" /** * Main application component that serves as the root layout. @@ -8,6 +10,7 @@ import dayjs from "dayjs" */ export default function HeroLayout() { const today = useMemo(() => dayjs(), []) + const { t } = useTranslation() return (
@@ -17,29 +20,32 @@ export default function HeroLayout() {

- DevLab + {t("app.title")}

- +
+ + +
@@ -53,7 +59,7 @@ export default function HeroLayout() { diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx index a39f7fd..d9bd874 100644 --- a/src/page/about/index.tsx +++ b/src/page/about/index.tsx @@ -1,31 +1,33 @@ +import { useTranslation } from "react-i18next" + /** * About page component that displays information about the DevLab application. */ export default function About() { + const { t } = useTranslation() + return (
{/* Page Header */}
-

About DevLab

+

{t("about.title")}

- A powerful, privacy-focused tool for debugging and visualising complex JSON data - structures. + {t("about.description")}

{/* GitHub & Deployment */}

- 📦 Open Source & Deployment + 📦 {t("about.openSource.title")}

- This project is open source and available on GitHub. You can view the source code, - contribute, or deploy your own instance. + {t("about.openSource.description")}

@@ -36,22 +38,17 @@ export default function About() { clipRule="evenodd" /> - View on GitHub + {t("about.openSource.viewOnGitHub")}

- ⭐ Star us on GitHub: If you find this project helpful, we'd greatly - appreciate it if you could give us a star on GitHub. It helps others discover the - project and motivates us to keep improving! + {t("about.openSource.starUs")} {t("about.openSource.starUsDescription")}

- 💡 Self-Hosting: You can deploy this application yourself! The - repository includes all necessary configuration files. Simply clone the repository, - install dependencies, and deploy to your preferred hosting platform (Vercel, Netlify, - or any static hosting service). + {t("about.openSource.selfHosting")} {t("about.openSource.selfHostingDescription")}

@@ -60,13 +57,10 @@ export default function About() { {/* Privacy Commitment */}

- 🔒 Privacy & Data Security + 🔒 {t("about.privacy.title")}

- We believe that your data belongs to you. This application is designed as a{" "} - purely client-side tool. All JSON parsing, path evaluation, and visual - rendering are performed locally within your browser. No data is ever uploaded to any - server, ensuring that sensitive configuration or user data remains entirely private. + {t("about.privacy.description")}

diff --git a/src/page/bmi-calculator/index.tsx b/src/page/bmi-calculator/index.tsx index ea82ebc..267a00b 100644 --- a/src/page/bmi-calculator/index.tsx +++ b/src/page/bmi-calculator/index.tsx @@ -2,7 +2,7 @@ import { useState } from "react" import { useTranslation } from "react-i18next" /** - * Home page component that displays the BMI calculator. + * BMI Calculator page component that displays the BMI calculator tool. */ export default function BmiCalculator() { const { t } = useTranslation() @@ -55,115 +55,149 @@ export default function BmiCalculator() { } } + const getBmiBgColour = () => { + switch (bmiCategory) { + case "underweight": + return "bg-blue-50 border-blue-100" + case "normal": + return "bg-green-50 border-green-100" + case "overweight": + return "bg-yellow-50 border-yellow-100" + case "obese": + return "bg-red-50 border-red-100" + default: + return "bg-gray-50 border-gray-100" + } + } + return ( -
-
- {/* Header */} -
-

{t("bmi.title")}

-

{t("bmi.description")}

+
+ {/* Left panel - 30% */} +
+ {/* Input Form - fills remaining height */} +
+
+ + {t("bmi.title")} + +
+
+
+

{t("bmi.description")}

+ + {/* Weight Input */} +
+ +
+ setWeight(e.target.value)} + placeholder={t("bmi.weight.placeholder")} + className="w-full p-3 text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm" + min="1" + max="500" + /> + kg +
+
+ + {/* Height Input */} +
+ +
+ setHeight(e.target.value)} + placeholder={t("bmi.height.placeholder")} + className="w-full p-3 text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm" + min="50" + max="300" + /> + cm +
+
+ + {/* Action Buttons */} +
+ + +
+
+
+
+
+ + {/* Right result panel - 70% */} +
+
+ + {t("bmi.result.title")} +
- {/* Calculator Form */} -
-
- {/* Weight Input */} -
- -
- setWeight(e.target.value)} - placeholder={t("bmi.weight.placeholder")} - className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-base" - min="1" - max="500" - /> - kg +
+ {bmi === null ? ( +
+
+

{t("bmi.description")}

+

{t("bmi.result.emptyState")}

+ ) : ( +
+ {/* BMI Value Display */} +
+
{bmi}
+
+ {t(`bmi.category.${bmiCategory}`)} +
+
+ {t(`bmi.advice.${bmiCategory}`)} +
+
- {/* Height Input */} -
- -
- setHeight(e.target.value)} - placeholder={t("bmi.height.placeholder")} - className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-base" - min="50" - max="300" - /> - cm + {/* BMI Scale */} +
+

+ {t("bmi.scale.title")} +

+
+
+ {t("bmi.category.underweight")} + < 18.5 +
+
+ {t("bmi.category.normal")} + 18.5 - 24.9 +
+
+ {t("bmi.category.overweight")} + 25.0 - 29.9 +
+
+ {t("bmi.category.obese")} + ≥ 30.0 +
+
-
- - {/* Action Buttons */} -
- - -
+ )}
- - {/* BMI Result */} - {bmi !== null && ( -
-
-

- {t("bmi.result.title")} -

-
{bmi}
-
- {t(`bmi.category.${bmiCategory}`)} -
-
- {t(`bmi.advice.${bmiCategory}`)} -
-
- - {/* BMI Scale */} -
-

{t("bmi.scale.title")}

-
-
- {t("bmi.category.underweight")} - < 18.5 -
-
- {t("bmi.category.normal")} - 18.5 - 24.9 -
-
- - {t("bmi.category.overweight")} - - 25.0 - 29.9 -
-
- {t("bmi.category.obese")} - ≥ 30.0 -
-
-
-
- )}
) diff --git a/src/page/contact/index.tsx b/src/page/contact/index.tsx index e25cdd3..9f74b60 100644 --- a/src/page/contact/index.tsx +++ b/src/page/contact/index.tsx @@ -1,11 +1,13 @@ import React from "react" +import { useTranslation } from "react-i18next" /** * Contact page component that encourages manual GitHub Issue submission. */ export default function Contact() { + const { t } = useTranslation() const owner = "onixbyte" - const repo = "dev-hub" + const repo = "dev-lab" const handleRedirect = (e: React.FormEvent) => { e.preventDefault() @@ -27,7 +29,7 @@ ${message} `.trim() const githubUrl = `https://github.com/${owner}/${repo}/issues/new?title=${encodeURIComponent( - `[${type == "help wanted" ? "General Enquiry" : (type == "enhancement" ? "Feature request" : "Bug")}] ${subject}` + `[${type == "help wanted" ? t("contact.types.helpWanted") : (type == "enhancement" ? t("contact.types.enhancement") : t("contact.types.bug"))}] ${subject}` )}&body=${encodeURIComponent(issueBody)}&labels=${type}` // Open in a new tab so they don't lose their place on your site @@ -38,9 +40,9 @@ ${message}
{/* Header */}
-

Get in Touch

+

{t("contact.title")}

- The best way to reach us is via our GitHub repository. + {t("contact.description")}

@@ -49,32 +51,30 @@ ${message}

- 🤝 Why GitHub Issues? + 🤝 {t("contact.whyGitHub.title")}

- We use GitHub to track all bug reports and feature requests. This ensures our - development process remains transparent and that - your feedback is properly prioritised by the community. + {t("contact.whyGitHub.description")}

-

How it works:

+

{t("contact.howItWorks.title")}

    -
  1. Fill in the enquiry details in the form provided.
    2. +
  2. {t("contact.howItWorks.step1")}
  3. - Click "Prepare GitHub Issue". + {t("contact.howItWorks.step2")}
    4. -
  4. You will be redirected to GitHub with the data pre-filled.
    5. +
  5. {t("contact.howItWorks.step3")}
  6. - Simply hit "Submit new issue" on their site. + {t("contact.howItWorks.step4")}