diff --git a/README.md b/README.md index 7d96391..f422b8d 100644 --- a/README.md +++ b/README.md @@ -1,268 +1,37 @@ -# Next.js 15 Template with i18n and Shadcn UI +# Fast3DText -A modern, SEO-optimized template for Next.js 15 applications featuring server components, internationalization support, shadcn UI components, and theme switching capabilities. Perfect for building performant, accessible, and multilingual web applications. +[![Website](https://img.shields.io/badge/website-fast3dtext.com-blue)](https://fast3dtext.com) +An online **3D text generator** that allows you to create beautiful 3D lettering in your browser. +No installation required — just open and start creating! ## ✨ Features -- **Next.js 15**: Built on the latest [Next.js 15](https://nextjs.org/) React framework with App Router and Server Components for optimal performance -- **SEO Optimization**: Includes metadata API, structured data, and optimized page loading strategies -- **Internationalization**: Full i18n support using middleware-based routing with [next-intl](https://next-intl-docs.vercel.app/) -- **Shadcn UI**: Pre-configured [shadcn UI](https://ui.shadcn.com/) components using the new React Server Components pattern -- **Theme System**: CSS Variables-based theme system with light/dark mode toggle and system preference detection -- **Language Switching**: Seamless switching between languages (including RTL support for Arabic and other RTL languages) -- **OmitRTL Utility**: Helper component to control elements that should maintain LTR (left-to-right) rendering in RTL contexts -- **TypeScript**: Type-safe codebase with TypeScript configuration optimized for Next.js 15 -- **Metadata API**: Built-in SEO metadata management using Next.js 15's metadata API +- 🎨 **3D Text Creation** — Type your text and instantly see it in 3D. +- 🖌 **Customizable Styles** — Change fonts, colors, gradients, background, and more. +- 🖼 **Export Options** — Save your design as PNG, JPG, or GLB for 3D use. +- 📂 **Custom Fonts Support** — Upload your own font files (JSON from facetype.js). +- 🌐 **No Signup Needed** — Everything runs in your browser. +- 🚀 **Fast and Lightweight** — Built with WebGL / Three.js for smooth rendering. -## 🚀 Getting Started +## 🖼 Screenshots -Clone the repository: +![Fast3DText Screenshot](public/og-image.png) + +## 🌍 Live Demo + +Visit: **[https://fast3dtext.com](https://fast3dtext.com)** + +## 🛠 Tech Stack + +- **Frontend**: React, Three.js, TypeScript +- **Rendering**: WebGL, Three.js TextGeometry +- **Build Tool**: Vite / Next.js (update with your actual stack) + +## 📦 Installation + +Clone the repo: ```bash -git clone https://github.com/S0vers/next-app-i18n-starter.git +git clone https://github.com/wms-why/fast3dtextonline.git +cd fast3dtextonline ``` - -Install dependencies: - -```bash -npm install -# or -yarn -# or -pnpm install -# or -bun install -``` - -Start the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) in your browser to see the result. - -## 📋 Project Structure - -The project follows Next.js 15's recommended App Router structure with additions for internationalization: - -``` -├── .next # Next.js build output -├── dictionary # i18n translation files -│ ├── ar.json # Arabic translations -│ └── en.json # English translations -├── node_modules # Dependencies -├── public # Static assets -├── src # Source code -│ ├── app # Next.js App Router -│ │ ├── [locale] # Dynamic locale routing -│ │ │ ├── page.tsx # Home page -│ │ │ ├── error.tsx # Error handling -│ │ │ ├── favicon.ico # Favicon -│ │ │ ├── globals.css # Global styles -│ │ │ ├── robots.txt # SEO robots file -│ │ │ └── sitemap.ts # Dynamic sitemap generation -│ │ └── components # Application components -│ │ ├── ui # shadcn UI components -│ │ ├── LanguageSwitcher.tsx # Language toggle component -│ │ ├── ModeToggle.tsx # Theme toggle component -│ │ ├── OmitRTL.tsx # RTL handling utility -│ │ └── theme-provider.tsx # Theme context provider -│ ├── i18n # Internationalization utilities -│ │ ├── navigation.ts # Localized navigation helpers -│ │ ├── requests.ts # i18n-aware API request helpers -│ │ └── routing.ts # Locale routing utilities -│ ├── lib # Utility functions and shared code -│ │ └── middleware.ts # i18n middleware for route handling -│ └── components.json # shadcn UI component configuration -├── .eslintrc.json # ESLint configuration -├── global.d.ts # Global TypeScript declarations -├── LICENSE # Project license -├── next-env.d.ts # Next.js TypeScript declarations -├── next.config.js # Next.js configuration -├── package.json # Project dependencies and scripts -├── bun.lock # Bun lock file -├── postcss.config.js # PostCSS configuration -├── README.md # Project documentation -└── tsconfig.json # TypeScript configuration -``` - -## 🌐 Internationalization - -This template uses middleware-based i18n routing with Next.js 15. Language files are stored in the `dictionary/` directory. - -### Adding a New Language - -1. Create a new JSON file in the `dictionary/` directory (e.g., `fr.json`) -2. Add the language to the supported locales in `middleware.ts` and `lib/i18n.ts` -3. Add language option to the `LanguageSwitcher` component - -## 🎨 Shadcn UI Components - -Shadcn UI components are configured to work with Next.js 15 Server Components. Import them from the `components/ui/` directory: - -```jsx -import { Button } from "@/components/ui/button"; - -export default function Home() { - return ; -} -``` - -## 🔄 OmitRTL Utility - -The `OmitRTL` utility helps you control which elements should maintain LTR direction even when the site is in RTL mode. - -### How to use the function: - -```jsx -import { OmitRTL } from "@/components/OmitRTL"; - -function MyComponent() { - return ( -
-

This text will follow the website's direction.

- - Logo -
-

This heading and content will always be LTR

-

Regardless of the website's direction.

-
- -
- ); -} -``` - -### NPM Package - -If you just need the OmitRTL function, it's also available as an npm package: - -```bash -npm i react-omit-rtl -``` - -```jsx -import React from "react"; -import OmitRTL from "react-omit-rtl"; - -function App() { - return ( - -

This text will not have RTL direction.

- - ); -} -export default App; -``` - -## 🔍 SEO Optimization - -The template provides comprehensive SEO features with the Next.js 15 Metadata API: - -```jsx -export async function generateMetadata({ - params, -}: { - params: { locale: string }, -}): Promise { - const { locale } = await params; - const t = await getTranslations({ locale, namespace: "Metadata" }); - - return { - title: t("title"), - description: t("description"), - other: { - "google-site-verification": "********", - }, - openGraph: { - title: t("title"), - description: t("description"), - url: `next-app-i18n-starter.vercel.app`, - siteName: "Next.js i18n Template", - images: [ - { - url: "next-app-i18n-starter.vercel.app/og-image.png", - width: 1200, - height: 630, - }, - ], - locale: locale, - type: "website", - }, - twitter: { - card: "summary_large_image", - title: t("title"), - description: t("description"), - images: ["next-app-i18n-starter.vercel.app/og-image.png"], - }, - alternates: { - canonical: `next-app-i18n-starter.vercel.app`, - languages: { - en: "next-app-i18n-starter.vercel.app", - ar: "next-app-i18n-starter.vercel.app", - }, - }, - robots: { - index: true, - follow: true, - googleBot: { - index: true, - follow: true, - "max-video-preview": -1, - "max-image-preview": "large", - "max-snippet": -1, - }, - }, - }; -} -``` - -Additionally, structured data is implemented using react-schemaorg for better search engine understanding: - -```jsx -