diff --git a/README.md b/README.md index d669f20..4941679 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -# JSON Visualiser +# DevLab A sophisticated, TypeScript-powered tool designed to parse JSON data and visualise **JSONPath** queries with precision. This tool allows developers to navigate complex data structures, highlight specific fields, and extract data efficiently. ## Access the App You can use the live version of the application directly in your browser: -👉 **[https://json-visualiser.onixbyte.dev](https://json-visualiser.onixbyte.dev)** +👉 **[https://dev-hub.onixbyte.dev](https://dev-hub.onixbyte.dev)** ## New Features @@ -49,8 +49,8 @@ Ensure you have Node.js installed on your machine. 1. Clone the repository ```bash - git clone https://github.com/onixbyte/json-visualiser.git - cd json-visualiser + git clone https://github.com/onixbyte/dev-lab.git + cd dev-lab ``` 2. Install dependencies diff --git a/index.html b/index.html index e42e8cb..4f2dd6e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,63 @@ - JSON Visualiser + + + DevLab - Free Developer Tools Collection + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/package.json b/package.json index 1926775..2e371c6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-template", + "name": "dev-lab", "private": true, "version": "0.0.0", "type": "module", @@ -16,10 +16,13 @@ "@tailwindcss/vite": "^4.1.18", "axios": "^1.13.2", "dayjs": "^1.11.19", + "i18next": "^25.7.4", + "i18next-browser-languagedetector": "^8.2.0", "jsonpath": "^1.1.1", "lodash": "^4.17.21", "react": "^19.2.3", "react-dom": "^19.2.3", + "react-i18next": "^16.5.3", "react-redux": "^9.2.0", "react-router": "^7.12.0", "react-router-dom": "^7.12.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99c835e..26a2d54 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,12 @@ importers: dayjs: specifier: ^1.11.19 version: 1.11.19 + i18next: + specifier: ^25.7.4 + version: 25.7.4(typescript@5.9.3) + i18next-browser-languagedetector: + specifier: ^8.2.0 + version: 8.2.0 jsonpath: specifier: ^1.1.1 version: 1.1.1 @@ -32,6 +38,9 @@ importers: react-dom: specifier: ^19.2.3 version: 19.2.3(react@19.2.3) + react-i18next: + specifier: ^16.5.3 + version: 16.5.3(i18next@25.7.4(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3) react-redux: specifier: ^9.2.0 version: 9.2.0(@types/react@19.2.8)(react@19.2.3)(redux@5.0.1) @@ -152,6 +161,10 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/runtime@7.28.6': + resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} + engines: {node: '>=6.9.0'} + '@babel/template@7.28.6': resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} engines: {node: '>=6.9.0'} @@ -798,6 +811,20 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + html-parse-stringify@3.0.1: + resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} + + i18next-browser-languagedetector@8.2.0: + resolution: {integrity: sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==} + + i18next@25.7.4: + resolution: {integrity: sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==} + peerDependencies: + typescript: ^5 + peerDependenciesMeta: + typescript: + optional: true + immer@11.1.3: resolution: {integrity: sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==} @@ -959,6 +986,22 @@ packages: peerDependencies: react: ^19.2.3 + react-i18next@16.5.3: + resolution: {integrity: sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==} + peerDependencies: + i18next: '>= 25.6.2' + react: '>= 16.8.0' + react-dom: '*' + react-native: '*' + typescript: ^5 + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + typescript: + optional: true + react-redux@9.2.0: resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==} peerDependencies: @@ -1119,6 +1162,10 @@ packages: yaml: optional: true + void-elements@3.1.0: + resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} + engines: {node: '>=0.10.0'} + word-wrap@1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} @@ -1217,6 +1264,8 @@ snapshots: '@babel/core': 7.28.6 '@babel/helper-plugin-utils': 7.28.6 + '@babel/runtime@7.28.6': {} + '@babel/template@7.28.6': dependencies: '@babel/code-frame': 7.28.6 @@ -1733,6 +1782,20 @@ snapshots: dependencies: function-bind: 1.1.2 + html-parse-stringify@3.0.1: + dependencies: + void-elements: 3.1.0 + + i18next-browser-languagedetector@8.2.0: + dependencies: + '@babel/runtime': 7.28.6 + + i18next@25.7.4(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.28.6 + optionalDependencies: + typescript: 5.9.3 + immer@11.1.3: {} jiti@2.6.1: {} @@ -1857,6 +1920,17 @@ snapshots: react: 19.2.3 scheduler: 0.27.0 + react-i18next@16.5.3(i18next@25.7.4(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.28.6 + html-parse-stringify: 3.0.1 + i18next: 25.7.4(typescript@5.9.3) + react: 19.2.3 + use-sync-external-store: 1.6.0(react@19.2.3) + optionalDependencies: + react-dom: 19.2.3(react@19.2.3) + typescript: 5.9.3 + react-redux@9.2.0(@types/react@19.2.8)(react@19.2.3)(redux@5.0.1): dependencies: '@types/use-sync-external-store': 0.0.6 @@ -1987,6 +2061,8 @@ snapshots: jiti: 2.6.1 lightningcss: 1.30.2 + void-elements@3.1.0: {} + word-wrap@1.2.5: {} yallist@3.1.1: {} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..b7b2ce7 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,10 @@ +# robots.txt for DevLab +User-agent: * +Allow: / + +# Sitemap location +Sitemap: https://dev-lab.onixbyte.dev/sitemap.xml + +# Disallow admin or private areas if any +# Disallow: /admin/ +# Disallow: /private/ diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..7dd0b5b --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,53 @@ + + + + + https://dev-lab.onixbyte.dev/ + 2024-01-01 + weekly + 1.0 + + + + + + + https://dev-lab.onixbyte.dev/json-viewer + 2024-01-01 + monthly + 0.9 + + + + + + + https://dev-lab.onixbyte.dev/bmi-calculator + 2024-01-01 + monthly + 0.9 + + + + + + + https://dev-lab.onixbyte.dev/about + 2024-01-01 + monthly + 0.7 + + + + + + + https://dev-lab.onixbyte.dev/contact + 2024-01-01 + monthly + 0.6 + + + + diff --git a/src/components/language-switcher/index.tsx b/src/components/language-switcher/index.tsx new file mode 100644 index 0000000..6ded6d9 --- /dev/null +++ b/src/components/language-switcher/index.tsx @@ -0,0 +1,35 @@ +import { useTranslation } from "react-i18next" + +/** + * Language switcher component that allows users to switch between supported languages. + */ +export default function LanguageSwitcher() { + const { i18n, t } = useTranslation() + + const handleLanguageChange = (language: string) => { + void i18n.changeLanguage(language) + } + + const currentLanguage = i18n.language + + return ( +
+ +
+ + + +
+
+ ) +} diff --git a/src/init/i18n/index.ts b/src/init/i18n/index.ts new file mode 100644 index 0000000..3d3df12 --- /dev/null +++ b/src/init/i18n/index.ts @@ -0,0 +1,36 @@ +import i18n from "i18next" +import { initReactI18next } from "react-i18next" +import LanguageDetector from "i18next-browser-languagedetector" + +// Import translation files +import BritishEnglishTranslations from "./locales/BritishEnglish.json" +import SimplifiedChineseTranslations from "./locales/SimplifiedChinese.json" + +const resources = { + "en-GB": { + translation: BritishEnglishTranslations as Record, + }, + "zh-CN": { + translation: SimplifiedChineseTranslations as Record, + }, +} as const + +void i18n + .use(LanguageDetector) + .use(initReactI18next) + .init({ + resources, + fallbackLng: "en-GB", + debug: process.env.NODE_ENV === "development", + + interpolation: { + escapeValue: false, // React already does escaping + }, + + detection: { + order: ["localStorage", "navigator", "htmlTag"], + caches: ["localStorage"], + }, + }) + +export default i18n diff --git a/src/init/i18n/locales/BritishEnglish.json b/src/init/i18n/locales/BritishEnglish.json new file mode 100644 index 0000000..478d513 --- /dev/null +++ b/src/init/i18n/locales/BritishEnglish.json @@ -0,0 +1,131 @@ +{ + "app": { + "title": "DevLab", + "pageTitle": "DevLab", + "copyright": "© {{year}} OnixByte. Built with React & TypeScript." + }, + "navigation": { + "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.", + "weight": { + "label": "Weight", + "placeholder": "Enter your weight" + }, + "height": { + "label": "Height", + "placeholder": "Enter your height" + }, + "calculate": "Calculate BMI", + "reset": "Reset", + "result": { + "title": "Your BMI Result", + "emptyState": "Enter your weight and height to calculate your BMI" + }, + "category": { + "underweight": "Underweight", + "normal": "Normal Weight", + "overweight": "Overweight", + "obese": "Obese" + }, + "advice": { + "underweight": "You may need to gain weight. Consider consulting with a healthcare professional for personalised advice.", + "normal": "You have a healthy weight for your height. Maintain your current lifestyle with regular exercise and balanced nutrition.", + "overweight": "You may benefit from losing some weight. Consider increasing physical activity and improving your diet.", + "obese": "You may be at increased health risk. It's recommended to consult with a healthcare professional for guidance." + }, + "scale": { + "title": "BMI Categories" + } + } +} diff --git a/src/init/i18n/locales/SimplifiedChinese.json b/src/init/i18n/locales/SimplifiedChinese.json new file mode 100644 index 0000000..59f2009 --- /dev/null +++ b/src/init/i18n/locales/SimplifiedChinese.json @@ -0,0 +1,131 @@ +{ + "app": { + "title": "DevLab", + "pageTitle": "DevLab", + "copyright": "© {{year}} OnixByte。 使用 React 和 TypeScript 构建。" + }, + "navigation": { + "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）以评估您的体重状态和健康状况。", + "weight": { + "label": "体重", + "placeholder": "请输入您的体重" + }, + "height": { + "label": "身高", + "placeholder": "请输入您的身高" + }, + "calculate": "计算 BMI", + "reset": "重置", + "result": { + "title": "您的 BMI 结果", + "emptyState": "请输入您的体重和身高以计算 BMI" + }, + "category": { + "underweight": "体重过轻", + "normal": "正常体重", + "overweight": "超重", + "obese": "肥胖" + }, + "advice": { + "underweight": "您可能需要增加体重。建议咨询医疗专业人士获取个性化建议。", + "normal": "您的体重对于您的身高来说是健康的。保持目前的生活方式，规律运动和均衡营养。", + "overweight": "您可能需要减轻一些体重。建议增加体育活动并改善饮食。", + "obese": "您可能面临健康风险增加。建议咨询医疗专业人士获取指导。" + }, + "scale": { + "title": "BMI 分类" + } + } +} diff --git a/src/init/index.ts b/src/init/index.ts index fc6e552..c421129 100644 --- a/src/init/index.ts +++ b/src/init/index.ts @@ -1 +1,2 @@ -import "./dayjs" \ No newline at end of file +import "./dayjs" +import "./i18n" diff --git a/src/layout/hero-layout/index.tsx b/src/layout/hero-layout/index.tsx index 5f92388..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() {

- JSON Visualiser + {t("app.title")}

- +
+ + +
@@ -53,7 +59,7 @@ export default function HeroLayout() {

- © 2024-{today.year()} OnixByte. Built with React & TypeScript. + {t("app.copyright", { year: today.year() })}

diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx index 757afa0..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 JSON Visualiser application. + * About page component that displays information about the DevLab application. */ export default function About() { + const { t } = useTranslation() + return (
{/* Page Header */}
-

About JSON Visualiser

+

{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")}

- ⭐ 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 new file mode 100644 index 0000000..267a00b --- /dev/null +++ b/src/page/bmi-calculator/index.tsx @@ -0,0 +1,204 @@ +import { useState } from "react" +import { useTranslation } from "react-i18next" + +/** + * BMI Calculator page component that displays the BMI calculator tool. + */ +export default function BmiCalculator() { + const { t } = useTranslation() + + const [weight, setWeight] = useState("") + const [height, setHeight] = useState("") + const [bmi, setBmi] = useState(null) + const [bmiCategory, setBmiCategory] = useState("") + + const calculateBMI = () => { + const weightNum = parseFloat(weight) + const heightNum = parseFloat(height) / 100 // Convert cm to meters + + if (weightNum > 0 && heightNum > 0) { + const bmiValue = weightNum / (heightNum * heightNum) + setBmi(parseFloat(bmiValue.toFixed(1))) + + // Determine BMI category + if (bmiValue < 18.5) { + setBmiCategory("underweight") + } else if (bmiValue < 25) { + setBmiCategory("normal") + } else if (bmiValue < 30) { + setBmiCategory("overweight") + } else { + setBmiCategory("obese") + } + } + } + + const resetCalculator = () => { + setWeight("") + setHeight("") + setBmi(null) + setBmiCategory("") + } + + const getBmiColour = () => { + switch (bmiCategory) { + case "underweight": + return "text-blue-600" + case "normal": + return "text-green-600" + case "overweight": + return "text-yellow-600" + case "obese": + return "text-red-600" + default: + return "text-gray-600" + } + } + + 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 ( +
+ {/* 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")} + +
+ +
+ {bmi === null ? ( +
+
+

{t("bmi.description")}

+

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

+
+
+ ) : ( +
+ {/* BMI Value Display */} +
+
{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 54b2ce1..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 = "json-visualiser" + const repo = "dev-lab" const handleRedirect = (e: React.FormEvent) => { e.preventDefault() @@ -23,11 +25,11 @@ export default function Contact() { ${message} --- -*Generated via JSON Visualiser Contact Page* +*Generated via DevLab Contact Page* `.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")}