├── .env.example ├── .eslintrc.json ├── .gitignore ├── .npmrc ├── .vscode └── settings.json ├── README-zh.md ├── README.md ├── app ├── GoogleAnalytics.tsx └── [locale] │ ├── layout.tsx │ └── page.tsx ├── components.json ├── components ├── TailwindIndicator.tsx ├── ThemeProvider.tsx ├── ThemedButton.tsx ├── footer │ ├── Footer.tsx │ ├── FooterLinks.tsx │ └── FooterProducts.tsx ├── header │ ├── Header.tsx │ ├── HeaderLinks.tsx │ └── LanguageSwitcher.tsx ├── icons │ ├── expanding-arrow.tsx │ ├── eye.tsx │ ├── index.tsx │ ├── loading-circle.tsx │ ├── loading-dots.module.css │ ├── loading-dots.tsx │ ├── loading-spinner.module.css │ ├── loading-spinner.tsx │ ├── moon.tsx │ └── sun.tsx └── social-icons │ ├── icons.tsx │ └── index.tsx ├── config └── site.ts ├── gtag.js ├── i18n ├── request.ts └── routing.ts ├── lib ├── logger.ts └── utils.ts ├── messages ├── en.json └── zh.json ├── middleware.ts ├── next-env.d.ts ├── next-sitemap.config.js ├── next.config.mjs ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── afd.png ├── card.png ├── favicon.ico ├── logo.png ├── logo.svg └── og.png ├── styles ├── globals.css └── loading.css ├── tailwind.config.ts ├── tsconfig.json └── types └── siteConfig.ts /.env.example: -------------------------------------------------------------------------------- 1 | SITE_URL= 2 | NEXT_PUBLIC_GOOGLE_ID= -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### Node template 2 | .idea 3 | .DS_Store 4 | dist 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | .temp 14 | yarn.lock 15 | 16 | # Diagnostic reports (https://nodejs.org/api/report.html) 17 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | *.lcov 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (https://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | jspm_packages/ 50 | 51 | # Snowpack dependency directory (https://snowpack.dev/) 52 | web_modules/ 53 | 54 | # TypeScript cache 55 | *.tsbuildinfo 56 | 57 | # Optional npm cache directory 58 | .npm 59 | 60 | # Optional eslint cache 61 | .eslintcache 62 | 63 | # Microbundle cache 64 | .rpt2_cache/ 65 | .rts2_cache_cjs/ 66 | .rts2_cache_es/ 67 | .rts2_cache_umd/ 68 | 69 | # Optional REPL history 70 | .node_repl_history 71 | 72 | # Output of 'npm pack' 73 | *.tgz 74 | 75 | # Yarn Integrity file 76 | .yarn-integrity 77 | 78 | # dotenv environment variables file 79 | .env 80 | .env.test 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the assets line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # assets 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # Serverless directories 104 | .serverless/ 105 | 106 | # FuseBox cache 107 | .fusebox/ 108 | 109 | # DynamoDB Local files 110 | .dynamodb/ 111 | 112 | # TernJS port file 113 | .tern-port 114 | 115 | # Stores VSCode versions used for testing VSCode extensions 116 | .vscode-test 117 | 118 | # yarn v2 119 | .yarn/cache 120 | .yarn/unplugged 121 | .yarn/build-state.yml 122 | .yarn/install-state.gz 123 | .pnp.* 124 | 125 | /.vuepress/dist/ 126 | 127 | # sitemap 128 | */sitemap*.xml 129 | */robots.txt -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # if use pnpm 2 | enable-pre-post-scripts=true -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": false, 3 | "editor.formatOnSave": true, 4 | "editor.tabSize": 2, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": "explicit", 7 | "source.organizeImports": "explicit" 8 | }, 9 | "headwind.runOnSave": false, 10 | "typescript.preferences.importModuleSpecifier": "non-relative", 11 | "eslint.validate": ["javascript", "javascriptreact", "typescript"], 12 | "typescript.tsdk": "node_modules/typescript/lib", 13 | "commentTranslate.source": "Bing", 14 | "cSpell.words": ["contentlayer", "lemonsqueezy"], 15 | "i18n-ally.localesPaths": ["i18n", "messages"] 16 | } 17 | -------------------------------------------------------------------------------- /README-zh.md: -------------------------------------------------------------------------------- 1 | # 文字转图片生成器 2 | 3 | 一个基于 Next.js 14+ 和 TypeScript 构建的现代网页应用，可以将文字转换成精美的图片，支持自定义样式和模板。 4 | 5 | ⭐ 如果您觉得这个项目有用，请考虑在 GitHub 上给我们一个星标！您的支持将帮助我们不断改进这个项目。 6 | 7 | [English](README.md) | [中文](README-zh.md) 8 | 9 | ![Byte Text Image Generator](./public/card.png) 10 | 11 | ## 特性 12 | 13 | - 🎨 多种背景模板（纯色、渐变、图案） 14 | - 🖌️ 文字马克笔高亮效果 15 | - 🌈 柔和色调的文字颜色自定义 16 | - 📏 多种图片尺寸选项 17 | - 🌓 明暗主题切换 18 | - 🌍 国际化支持（中文和英文） 19 | - 📊 集成 Google Analytics 20 | - 💅 使用 Tailwind CSS 构建的响应式设计 21 | 22 | ## 演示 23 | 24 | 访问 [https://text-image.tool.vin](https://text-image.tool.vin) 查看在线演示。 25 | 26 | ## 快速开始 27 | 28 | ### Vercel 部署 29 | 30 | [![使用 Vercel 部署](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/shadowDragons/text-image-generator) 31 | 32 | ### 本地开发 33 | 34 | 1. 克隆仓库 35 | 36 | ```bash 37 | git clone https://github.com/shadowDragons/text-image-generator.git 38 | cd text-image-generator 39 | ``` 40 | 41 | 2. 安装依赖 42 | 43 | ```bash 44 | npm install 45 | # 或 46 | yarn install 47 | # 或 48 | pnpm install 49 | ``` 50 | 51 | 3. 创建环境变量文件 52 | 53 | ```bash 54 | cp .env.example .env.local 55 | ``` 56 | 57 | 4. 启 开发服务器 58 | 59 | ```bash 60 | npm run dev 61 | # 或 62 | yarn dev 63 | # 或 64 | pnpm dev 65 | ``` 66 | 67 | 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看结果。 68 | 69 | ## 环境变量 70 | 71 | 在根目录创建 `.env.local` 文件，包含以下变量： 72 | 73 | ```env 74 | NEXT_PUBLIC_GA_ID=你的GA跟踪ID 75 | ``` 76 | 77 | ## 技术栈 78 | 79 | - [Next.js 14](https://nextjs.org/) - React 框架 80 | - [TypeScript](https://www.typescriptlang.org/) - 类型安全 81 | - [Tailwind CSS](https://tailwindcss.com/) - 样式框架 82 | - [next-intl](https://next-intl-docs.vercel.app/) - 国际化 83 | - [next-themes](https://github.com/pacocoursey/next-themes) - 主题管理 84 | 85 | ## 项目结构 86 | 87 | ``` 88 | . 89 | ├── app/ # Next.js 应用目录 90 | ├── components/ # React 组件 91 | ├── config/ # 站点配置 92 | ├── lib/ # 工具函数 93 | ├── messages/ # 国际化翻译文件 94 | ├── public/ # 静态资源 95 | └── styles/ # 全局样式 96 | ``` 97 | 98 | ## 贡献 99 | 100 | 欢迎提交 Pull Request！ 101 | 102 | ## 许可证 103 | 104 | 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。 105 | 106 | ## 作者 107 | 108 | Junexus ([https://sphrag.com](https://sphrag.com)) 109 | 110 | ## 支持项目 111 | 112 | 如果这个项目对您有帮助，可以请我喝杯咖啡： 113 | 114 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://sphrag.com/zh/sponsor) 115 | 116 | ## 开发计划 117 | 118 | - [ ] 社交媒体卡片 119 | - [ ] 文章封面图 120 | - [ ] 多字体支持 121 | - [ ] 表情符号支持 122 | 123 | ## 致谢 124 | 125 | - [Next.js](https://nextjs.org/) 126 | - [Tailwind CSS](https://tailwindcss.com/) 127 | - [next-intl](https://next-intl-docs.vercel.app/) 128 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Text to Image Generator 2 | 3 | A modern web application that converts text into beautiful images with customizable styles and templates. Built with Next.js 14+ and TypeScript. 4 | 5 | ⭐ If you find this project useful, please consider giving it a star on GitHub! Your support helps us grow and improve the project. 6 | 7 | [English](README.md) | [中文](README-zh.md) 8 | 9 | ![Byte Text Image Generator](./public/card.png) 10 | 11 | ## Features 12 | 13 | - 🎨 Multiple background templates (solid colors, gradients, patterns) 14 | - 🖌️ Text highlighting with marker effects 15 | - 🌈 Text color customization with soft palette options 16 | - 📏 Multiple image size options 17 | - 🌓 Dark/Light mode support 18 | - 🌍 i18n support (English & Chinese) 19 | - 📊 Google Analytics integration 20 | - 💅 Responsive design with Tailwind CSS 21 | 22 | ## Demo 23 | 24 | Visit [https://text-image.tool.vin](https://text-image.tool.vin) to see the live demo. 25 | 26 | ## Quick Start 27 | 28 | ### Deploy on Vercel 29 | 30 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/shadowDragons/text-image-generator) 31 | 32 | ### Local Development 33 | 34 | 1. Clone the repository 35 | 36 | ```bash 37 | git clone https://github.com/shadowDragons/text-image-generator.git 38 | cd text-image-generator 39 | ``` 40 | 41 | 2. Install dependencies 42 | 43 | ```bash 44 | npm install 45 | or 46 | yarn install 47 | or 48 | pnpm install 49 | ``` 50 | 51 | 3. Create environment variables file 52 | 53 | ```bash 54 | cp .env.example .env.local 55 | ``` 56 | 57 | 4. Start the development server 58 | 59 | ```bash 60 | npm run dev 61 | or 62 | yarn dev 63 | or 64 | pnpm dev 65 | ``` 66 | 67 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 68 | 69 | ## Environment Variables 70 | 71 | Create a `.env.local` file in the root directory with the following variables: 72 | 73 | ```env 74 | NEXT_PUBLIC_GA_ID=your-ga-id 75 | ``` 76 | 77 | ## Tech Stack 78 | 79 | - [Next.js 14](https://nextjs.org/) - React framework 80 | - [TypeScript](https://www.typescriptlang.org/) - Type safety 81 | - [Tailwind CSS](https://tailwindcss.com/) - Styling 82 | - [next-intl](https://next-intl-docs.vercel.app/) - Internationalization 83 | - [next-themes](https://github.com/pacocoursey/next-themes) - Theme management 84 | 85 | ## Project Structure 86 | 87 | ``` 88 | . 89 | ├── app/ # Next.js app directory 90 | ├── components/ # React components 91 | ├── config/ # Site configuration 92 | ├── lib/ # Utility functions 93 | ├── messages/ # i18n translation files 94 | ├── public/ # Static assets 95 | └── styles/ # Global styles 96 | ``` 97 | 98 | ## Contributing 99 | 100 | We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change. 101 | 102 | 1. Fork the repository 103 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 104 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 105 | 4. Push to the branch (`git push origin feature/AmazingFeature`) 106 | 5. Open a Pull Request 107 | 108 | ## License 109 | 110 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 111 | 112 | ## Author 113 | 114 | Junexus ([https://sphrag.com](https://sphrag.com)) 115 | 116 | ## Support 117 | 118 | If you find this project helpful, consider buying me a coffee: 119 | 120 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://sphrag.com/en/sponsor) 121 | 122 | ## Roadmap 123 | 124 | - [ ] Social Media Cards 125 | - [ ] Article Covers 126 | - [ ] Multiple Font Support 127 | - [ ] Emoji Support 128 | 129 | ## Acknowledgments 130 | 131 | - [Next.js](https://nextjs.org/) 132 | - [Tailwind CSS](https://tailwindcss.com/) 133 | - [next-intl](https://next-intl-docs.vercel.app/) 134 | -------------------------------------------------------------------------------- /app/GoogleAnalytics.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Script from "next/script"; 4 | import * as gtag from "../gtag.js"; 5 | 6 | const GoogleAnalytics = () => { 7 | return ( 8 | <> 9 | {gtag.GA_TRACKING_ID ? ( 10 | <> 11 |