20 Commits

Author SHA1 Message Date
typist
35cccf6a8f 0.0.26
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m29s
2025-10-29 14:45:03 +08:00
c5616600fa Merge pull request 'feat: add Google Fonts for improved typography' (#11) from feat/update-fonts into main
Reviewed-on: #11
2025-10-29 14:43:59 +08:00
typist
986708fbb4 feat: add Google Fonts for improved typography
- Included preconnect links for Google Fonts to optimize loading.
- Added 'Roboto Mono' and 'Noto Sans SC' font families to enhance text presentation in the application.
2025-10-29 14:44:30 +08:00
typist
6a1b68ed2c 0.0.25
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m32s
2025-10-29 10:05:58 +08:00
typist
32970acf32 chore: support Cloudflare Web Analytics 2025-10-29 10:05:43 +08:00
typist
812bb8c248 0.0.24
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m21s
2025-10-29 09:35:10 +08:00
typist
09f9e6588f fix: update caching strategy for ipinfo API in Vite config
- Changed caching handler from 'CacheFirst' to 'NetworkFirst' to prioritize network responses.
- This adjustment aims to improve data freshness while still utilizing caching effectively.
2025-10-29 09:34:59 +08:00
typist
10a167febd chore: remove SEO-README.md as part of project restructuring
- Deleted the SEO-README.md file which contained outdated SEO optimization details and instructions.
- This change is part of a broader effort to streamline project documentation and improve clarity.
2025-10-29 09:27:54 +08:00
typist
91c0686a46 0.0.23
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m11s
2025-10-29 09:24:17 +08:00
typist
40bfde8e57 feat: implement ID generator component for UUIDs and Nano ID
- Added IDGenerator component to handle the display and regeneration of UUIDs and Nano ID.
- Integrated clipboard functionality to copy generated IDs with user feedback via toast notifications.
- Refactored the Tool component to utilize the new IDGenerator for improved user interaction and code organization.
2025-10-29 09:24:01 +08:00
typist
b4ba7a2219 0.0.22
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m52s
2025-10-29 09:11:11 +08:00
typist
25e42e3af5 fix: update caching strategy for ipinfo API in Vite config
- Changed caching handler from 'NetworkFirst' to 'CacheFirst' for improved performance.
- Extended cache expiration time from 5 minutes to 1 hour to enhance data availability.
2025-10-29 09:10:59 +08:00
typist
4398b53ea7 0.0.21
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m14s
2025-10-29 09:07:27 +08:00
typist
3e14bc652f feat: add terser for advanced minification and improve React chunking
- Added terser as a dependency for enhanced code minification.
- Updated Vite configuration to enable aggressive minification using terser with options to drop console logs and unused code.
- Refined manual chunking for React libraries to improve code splitting and loading efficiency.
2025-10-29 09:06:56 +08:00
typist
aca7e11835 0.0.20
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m10s
2025-10-29 08:58:11 +08:00
typist
782de6e38a feat: integrate PWA support and service worker registration
- Added vite-plugin-pwa for Progressive Web App capabilities.
- Configured service worker with caching strategies for improved offline support.
- Registered service worker in main.tsx to handle updates and caching.
- Updated package.json to include new dependencies for PWA functionality.
2025-10-29 08:58:02 +08:00
typist
7646830194 0.0.19
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m6s
2025-10-29 08:50:18 +08:00
typist
59f998e8e3 feat: enhance tool loading and performance optimization
- Added DNS prefetch and preconnect links in index.html for improved API loading times.
- Implemented lazy loading for tool components to optimize performance and reduce initial load time.
- Wrapped tool components in Suspense with a loading fallback to enhance user experience during loading.
- Refactored Vite configuration to create manual chunks for better code splitting of React and UI libraries.
2025-10-29 08:49:25 +08:00
typist
55207beff5 0.0.18
All checks were successful
Build and Push Docker Image / build (push) Successful in 1m39s
2025-10-29 08:33:42 +08:00
typist
e98a344b95 feat: enhance sidebar component with recursive submenu rendering
- Implemented recursive rendering of submenu items in the sidebar for better navigation.
- Added support for collapsible submenus, improving user experience with nested tools.
- Refactored menu item rendering logic to utilize a new renderSubMenuContent function for cleaner code.
2025-10-29 08:33:22 +08:00
13 changed files with 3105 additions and 237 deletions

View File

@@ -1,171 +0,0 @@
# SEO 优化说明
本项目已完成基础 SEO 优化,以下是已实施的改动。
## 已完成的优化项
### 1. HTML Meta 标签优化 ✅
`index.html` 中添加了完整的 SEO 元数据:
- **基础 Meta 标签**
- title, description, keywords
- author, theme-color
- canonical URL
- **Open Graph 标签**(社交媒体分享优化)
- og:type, og:url, og:title
- og:description, og:image, og:site_name
- **Twitter Card 标签**
- twitter:card, twitter:title
- twitter:description, twitter:image
- **结构化数据**JSON-LD
- Schema.org WebSite 类型标记
- 提升搜索引擎理解能力
### 2. SEO 配置文件 ✅
- **`public/robots.txt`** - 搜索引擎爬虫规则
- 允许所有爬虫访问
- 指定 sitemap 位置
- **`public/sitemap.xml`** - 站点地图(自动生成)
- 包含所有工具页面 URL
- 设置更新频率和优先级
- 通过 `scripts/generate-sitemap.ts` 自动生成
- **`public/manifest.json`** - PWA 配置
- 支持渐进式 Web 应用
- 改善移动端体验
### 3. 构建流程优化 ✅
- **`package.json`**
- 构建时自动生成 sitemap
- 添加 tsx 依赖用于运行生成脚本
## 文件清单
### 新增文件
```
public/
├── robots.txt # 爬虫规则
├── sitemap.xml # 站点地图(自动生成)
└── manifest.json # PWA 配置
scripts/
└── generate-sitemap.ts # Sitemap 生成脚本
```
### 修改文件
```
index.html # 添加 SEO meta 标签和结构化数据
package.json # 添加 sitemap 生成命令
```
## 使用说明
### 开发
```bash
pnpm install # 安装依赖
pnpm dev # 启动开发服务器
```
### 构建
```bash
pnpm run build # 构建项目(自动生成 sitemap
pnpm run generate:sitemap # 单独生成 sitemap
```
### 部署前检查
⚠️ **重要:部署前必须更新配置文件中的域名!**
需要将以下文件中的 `https://litek.typist.cc` 替换为你的实际域名:
1. **`index.html`**
- canonical URL
- Open Graph URL 和 image
- Twitter Card image
- Structured Data URL
2. **`public/robots.txt`**
- Sitemap URL
3. **`scripts/generate-sitemap.ts`**
- BASE_URL 常量
更新后重新构建:
```bash
pnpm run build
```
## SEO 验证
### 部署后验证
1. **提交 sitemap 到 Google Search Console**
- 访问 https://search.google.com/search-console
- 添加网站资源
- 提交 sitemap: `https://你的域名/sitemap.xml`
2. **测试结构化数据**
- 访问 https://validator.schema.org/
- 输入网站 URL
- 检查是否有错误
3. **测试 Open Graph 预览**
- Facebook: https://developers.facebook.com/tools/debug/
- Twitter: https://cards-dev.twitter.com/validator
4. **性能测试**
- Google PageSpeed Insights: https://pagespeed.web.dev/
- 目标分数: SEO > 95
## 可访问的 URL
部署后,以下 URL 应该可以正常访问:
- `https://你的域名/` - 主页
- `https://你的域名/robots.txt` - 爬虫规则
- `https://你的域名/sitemap.xml` - 站点地图
- `https://你的域名/manifest.json` - PWA 配置
- `https://你的域名/tool/uuid` - UUID 工具
- `https://你的域名/tool/json` - JSON 工具
- `https://你的域名/tool/base64` - Base64 工具
- `https://你的域名/tool/network/dns` - DNS 工具
- ... 其他工具页面
## 添加新工具时更新 SEO
当添加新工具时,需要更新 `scripts/generate-sitemap.ts`
```typescript
const tools = [
// 现有工具...
{ path: '/tool/你的新工具', priority: '0.9' },
];
```
然后重新构建项目。
## SEO 效果预期
- **1-2 周**:搜索引擎开始索引页面
- **1-2 月**:主要关键词开始有排名
- **3-6 月**:稳定的搜索排名和自然流量增长
## 技术栈
- React 19 + TypeScript
- Vite (Rolldown)
- React Router v7
- Radix UI + Tailwind CSS 4
- Nginx
## 联系方式
需要更多工具或有建议联系litek@mail.typist.cc

View File

@@ -14,6 +14,15 @@
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/lite.svg" />
<!-- DNS Prefetch & Preconnect for external APIs -->
<link rel="dns-prefetch" href="https://ipinfo.io">
<link rel="preconnect" href="https://ipinfo.io" crossorigin>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://litek.typist.cc/" />
@@ -55,5 +64,9 @@
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>
<!-- End Cloudflare Web Analytics -->
</body>
</html>

View File

@@ -1,7 +1,7 @@
{
"name": "litek",
"private": true,
"version": "0.0.17",
"version": "0.0.26",
"type": "module",
"scripts": {
"dev": "vite",
@@ -44,11 +44,14 @@
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.22",
"globals": "^16.4.0",
"terser": "^5.44.0",
"tsx": "^4.19.2",
"tw-animate-css": "^1.4.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.45.0",
"vite": "npm:rolldown-vite@7.1.14"
"vite": "npm:rolldown-vite@7.1.14",
"vite-plugin-pwa": "^1.1.0",
"workbox-window": "^7.3.0"
},
"pnpm": {
"overrides": {

2811
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -13,6 +13,46 @@ export const AppSidebar = () => {
return `/tool/${pathSegments.join("/")}`;
};
// 递归渲染子菜单内容
const renderSubMenuContent = (child: Tool, currentPaths: string[]): ReactNode => {
if (child.children) {
// 子菜单内的可折叠项
return (
<Collapsible defaultOpen={false} className="group/collapsible">
<CollapsibleTrigger asChild>
<SidebarMenuSubButton>
{child.icon}
<span>{child.name}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</SidebarMenuSubButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{child.children.map((subChild) => (
<SidebarMenuSubItem key={subChild.name}>
{renderSubMenuContent(subChild, [...currentPaths, child.path])}
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</Collapsible>
);
}
// 叶子节点
return (
<SidebarMenuSubButton asChild>
<Link
to={buildFullPath([...currentPaths, child.path])}
title={child.description}
>
{child.icon}
<span>{child.name}</span>
</Link>
</SidebarMenuSubButton>
);
};
// 递归渲染菜单项
const renderMenuItem = (tool: Tool, parentPaths: string[] = []): ReactNode => {
const currentPaths = [...parentPaths, tool.path];
@@ -20,12 +60,11 @@ export const AppSidebar = () => {
if (tool.children) {
// 有子菜单的项目
return (
<Collapsible
key={tool.name}
defaultOpen={false}
className="group/collapsible"
>
<SidebarMenuItem>
<SidebarMenuItem key={tool.name}>
<Collapsible
defaultOpen={false}
className="group/collapsible"
>
<CollapsibleTrigger asChild>
<SidebarMenuButton tooltip={tool.description}>
{tool.icon}
@@ -37,25 +76,13 @@ export const AppSidebar = () => {
<SidebarMenuSub>
{tool.children.map((child) => (
<SidebarMenuSubItem key={child.name}>
{child.children ? (
renderMenuItem(child, currentPaths)
) : (
<SidebarMenuSubButton asChild>
<Link
to={buildFullPath([...currentPaths, child.path])}
title={child.description}
>
{child.icon}
<span>{child.name}</span>
</Link>
</SidebarMenuSubButton>
)}
{renderSubMenuContent(child, currentPaths)}
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
</Collapsible>
</SidebarMenuItem>
);
}

View File

@@ -1,17 +1,22 @@
import type { ReactNode } from 'react';
import { lazy, type ReactNode, type ComponentType } from 'react';
import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin } from 'lucide-react'
import UUID from './uuid'
import JSON from './json'
import Base64 from './base64'
import { DNS, Ping, TCPing, SpeedTest, IPQuery } from './network'
// 懒加载工具组件
const UUID = lazy(() => import('./uuid'))
const JSON = lazy(() => import('./json'))
const Base64 = lazy(() => import('./base64'))
const DNS = lazy(() => import('./network/dns'))
const Ping = lazy(() => import('./network/ping'))
const TCPing = lazy(() => import('./network/tcping'))
const SpeedTest = lazy(() => import('./network/speedtest'))
const IPQuery = lazy(() => import('./network/ipquery'))
export interface Tool {
path: string;
name: string;
icon: ReactNode;
description: string;
component?: ReactNode;
component?: ComponentType;
children?: Tool[];
}
@@ -21,21 +26,21 @@ export const tools: Tool[] = [
name: "UUID Generator",
description: "Generate a UUID",
icon: <Hash />,
component: <UUID />,
component: UUID,
},
{
path: "json",
name: "JSON Formatter",
description: "Format and validate JSON",
icon: <FileJson />,
component: <JSON />,
component: JSON,
},
{
path: "base64",
name: "Base64 Encoder/Decoder",
description: "Encode and decode Base64",
icon: <Binary />,
component: <Base64 />,
component: Base64,
},
{
path: "network",
@@ -48,35 +53,35 @@ export const tools: Tool[] = [
name: "DNS Lookup",
description: "DNS query tool",
icon: <Globe />,
component: <DNS />,
component: DNS,
},
{
path: "ping",
name: "Ping",
description: "Ping test tool",
icon: <Activity />,
component: <Ping />,
component: Ping,
},
{
path: "tcping",
name: "TCPing",
description: "TCP port connectivity test",
icon: <Wifi />,
component: <TCPing />,
component: TCPing,
},
{
path: "speedtest",
name: "Speed Test",
description: "Website speed test",
icon: <Gauge />,
component: <SpeedTest />,
component: SpeedTest,
},
{
path: "ipquery",
name: "IP Query",
description: "Query IP location, quality and risk info",
icon: <MapPin />,
component: <IPQuery />,
component: IPQuery,
},
],
},

View File

@@ -1,6 +0,0 @@
export { default as DNS } from './dns';
export { default as Ping } from './ping';
export { default as TCPing } from './tcping';
export { default as SpeedTest } from './speedtest';
export { default as IPQuery } from './ipquery';

View File

@@ -1,22 +1,94 @@
import { type FC } from "react";
import { type FC, useState } from "react";
import { RefreshCw, Copy } from "lucide-react";
import * as uuid from 'uuid'
import { nanoid } from 'nanoid'
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
interface IDGeneratorProps {
label: string;
value: string;
onRegenerate: () => void;
}
const IDGenerator: FC<IDGeneratorProps> = ({ label, value, onRegenerate }) => {
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(value);
toast(`${label} has been copied to clipboard`);
} catch (err) {
toast.error("Copy failed");
}
};
return (
<div className="flex flex-col gap-2">
<label className="font-medium">{label}</label>
<div className="flex items-center gap-2">
<span className="flex-1 px-3 py-2 bg-muted rounded-md font-mono text-sm break-all max-w-[400px]">
{value}
</span>
<Button
size="icon"
variant="outline"
onClick={onRegenerate}
title="Regenerate"
>
<RefreshCw className="h-4 w-4" />
</Button>
<Button
size="icon"
variant="outline"
onClick={copyToClipboard}
title="Copy"
>
<Copy className="h-4 w-4" />
</Button>
</div>
</div>
);
};
const Tool: FC = () => {
const [uuidV1, setUuidV1] = useState(() => uuid.v1());
const [uuidV4, setUuidV4] = useState(() => uuid.v4());
const [uuidV6, setUuidV6] = useState(() => uuid.v6());
const [uuidV7, setUuidV7] = useState(() => uuid.v7());
const [nanoId, setNanoId] = useState(() => nanoid());
return (
<div className="flex flex-col gap-4">
<span className="text-sm text-muted-foreground">Refresh the page to generate new UUID</span>
<label>UUID Version 1</label>
<span>{uuid.v1()}</span>
<label>UUID Version 4</label>
<span>{uuid.v4()}</span>
<label>UUID Version 6</label>
<span>{uuid.v6()}</span>
<label>UUID Version 7</label>
<span>{uuid.v7()}</span>
<label>Nano ID</label>
<span>{nanoid()}</span>
<span className="text-sm text-muted-foreground">Click the refresh button to regenerate the corresponding ID</span>
<IDGenerator
label="UUID Version 1"
value={uuidV1}
onRegenerate={() => setUuidV1(uuid.v1())}
/>
<IDGenerator
label="UUID Version 4"
value={uuidV4}
onRegenerate={() => setUuidV4(uuid.v4())}
/>
<IDGenerator
label="UUID Version 6"
value={uuidV6}
onRegenerate={() => setUuidV6(uuid.v6())}
/>
<IDGenerator
label="UUID Version 7"
value={uuidV7}
onRegenerate={() => setUuidV7(uuid.v7())}
/>
<IDGenerator
label="Nano ID"
value={nanoId}
onRegenerate={() => setNanoId(nanoid())}
/>
</div>
);
};

View File

@@ -116,6 +116,7 @@
}
body {
@apply bg-background text-foreground;
font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
}
}

View File

@@ -13,3 +13,21 @@ createRoot(document.getElementById('root')!).render(
<Toaster />
</StrictMode>
)
// 注册 Service Worker
if ('serviceWorker' in navigator && import.meta.env.PROD) {
import('workbox-window').then(({ Workbox }) => {
const wb = new Workbox('/sw.js')
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
console.log('New service worker installed, reloading page...')
window.location.reload()
}
})
wb.register()
}).catch((error) => {
console.error('Failed to register service worker:', error)
})
}

View File

@@ -1,3 +1,4 @@
import { Suspense, createElement } from "react";
import {
createBrowserRouter,
redirect,
@@ -8,6 +9,19 @@ import {
import { tools, type Tool } from "@/components/tool";
import { Layout } from "./layout";
// 加载中的占位组件
const LoadingFallback = () => (
<div className="flex items-center justify-center h-full">
<div className="text-center flex flex-col items-center gap-3">
<div className="relative">
<div className="h-12 w-12 rounded-full border-4 border-muted"></div>
<div className="absolute top-0 left-0 h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
</div>
<p className="text-sm text-muted-foreground font-medium">Loading...</p>
</div>
</div>
);
const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
return tools.map((tool) => {
const route: RouteObject = {
@@ -15,7 +29,12 @@ const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
};
if (tool.component) {
route.element = tool.component;
// 使用 Suspense 包裹懒加载组件
route.element = (
<Suspense fallback={<LoadingFallback />}>
{createElement(tool.component)}
</Suspense>
);
}
if (tool.children && tool.children.length > 0) {

3
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/client" />

View File

@@ -2,13 +2,102 @@ import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "@tailwindcss/vite"
import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
plugins: [
react(),
tailwindcss(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
manifest: {
name: 'Lite Kit - Lightweight Online Tools',
short_name: 'Lite Kit',
description: 'Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more',
theme_color: '#000000',
background_color: '#000000',
display: 'standalone',
icons: [
{
src: '/lite.svg',
type: 'image/svg+xml',
sizes: 'any'
}
]
},
workbox: {
globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
handler: "NetworkFirst",
options: {
cacheName: 'ipinfo-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 // 延长到 1 小时
},
cacheableResponse: {
statuses: [0, 200]
}
}
}
],
cleanupOutdatedCaches: true,
clientsClaim: true,
skipWaiting: true
}
})
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
// React 核心拆分得更细
if (id.includes('node_modules/react/') && !id.includes('node_modules/react-dom')) {
return 'react-core';
}
if (id.includes('node_modules/react-dom/')) {
return 'react-dom';
}
if (id.includes('node_modules/react-router-dom')) {
return 'react-router';
}
// Radix UI组件
if (id.includes('node_modules/@radix-ui')) {
return 'ui-vendor';
}
// 图标库
if (id.includes('node_modules/lucide-react')) {
return 'icons';
}
// 其他工具库
if (id.includes('node_modules/')) {
return 'vendor';
}
},
},
},
// 启用更激进的压缩
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'],
// 移除未使用的代码
unused: true,
// 移除死代码
dead_code: true,
},
},
chunkSizeWarningLimit: 500,
},
})