mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-03 06:42:27 +08:00
Merge pull request #11 from DayuanJiang/feature/seo-improvements
Feature/seo improvements
This commit is contained in:
Dayuan Jiang
336
app/about/page.tsx
Normal file
336
app/about/page.tsx
Normal file
@@ -0,0 +1,336 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { FaGithub } from "react-icons/fa";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "About - AI-Powered Diagram Generator | Next AI Draw.io",
|
||||||
|
description: "Learn about Next AI Draw.io, a free AI-powered diagram creation tool. Create AWS architecture diagrams, flowcharts, and UML diagrams using Claude Sonnet and GPT-4. No login required.",
|
||||||
|
keywords: ["about AI diagram generator", "diagram tool features", "how to create diagrams", "AI drawing tool capabilities", "draw.io integration"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function About() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Navigation */}
|
||||||
|
<header className="bg-white border-b border-gray-200">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
|
||||||
|
Next AI Draw.io
|
||||||
|
</Link>
|
||||||
|
<nav className="flex items-center gap-6 text-sm">
|
||||||
|
<Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
|
||||||
|
Editor
|
||||||
|
</Link>
|
||||||
|
<Link href="/about" className="text-blue-600 font-semibold">
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||||
|
aria-label="View on GitHub"
|
||||||
|
>
|
||||||
|
<FaGithub className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
<article>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<header className="mb-12">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
AI-Powered Diagram Generator | Create Professional Diagrams Instantly
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600">
|
||||||
|
Free, open-source diagram creation tool powered by AI. No login required, no installation needed.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Introduction */}
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-4">What is Next AI Draw.io?</h2>
|
||||||
|
<div className="prose prose-lg max-w-none text-gray-700">
|
||||||
|
<p className="mb-4">
|
||||||
|
<strong>Next AI Draw.io</strong> is a free, AI-powered diagram creation tool that integrates seamlessly with draw.io.
|
||||||
|
Generate AWS architecture diagrams, flowcharts, UML diagrams, and technical documentation diagrams using natural language
|
||||||
|
prompts. No login required, no installation needed—start creating professional diagrams instantly in your browser.
|
||||||
|
</p>
|
||||||
|
<p className="mb-4">
|
||||||
|
Our intelligent diagram generator uses advanced AI models including <strong>Claude Sonnet</strong> and <strong>GPT-4</strong> to
|
||||||
|
understand your requirements and automatically create properly structured diagrams with appropriate symbols, layouts, and connections.
|
||||||
|
Simply describe what you need, upload reference images, or ask the AI to modify existing diagrams with our targeted XML editing feature.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Whether you're a software architect designing system infrastructure, a developer documenting APIs, a business analyst creating
|
||||||
|
process flows, or a student working on technical assignments, Next AI Draw.io makes diagram creation fast, accurate, and effortless.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Key Features */}
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Key Features</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
AI-Powered Diagram Creation
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Generate diagrams from natural language descriptions using Claude Sonnet or GPT-4.
|
||||||
|
Describe your diagram in plain English, and watch the AI create it with proper symbols,
|
||||||
|
layouts, and connections automatically.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
AWS Architecture Diagrams
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Create professional cloud infrastructure diagrams with AWS-style icons and layouts.
|
||||||
|
Perfect for designing EC2 instances, Lambda functions, S3 buckets, RDS databases, VPCs,
|
||||||
|
and complete AWS solution architectures.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
Image-Based Diagram Replication
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Upload existing diagrams or sketches, and the AI will automatically recreate them in draw.io format.
|
||||||
|
Modify uploaded images by describing the changes you want—the AI handles the rest.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
Diagram History & Version Control
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Access previous versions of your diagrams and restore any version from your session history.
|
||||||
|
Never lose work—every AI modification is saved and can be undone with a single click.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
Targeted XML Editing
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Precise diagram modifications using intelligent XML manipulation. Unlike full diagram regeneration,
|
||||||
|
targeted edits preserve your existing layout while making specific changes, ensuring consistent
|
||||||
|
and predictable results.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
|
<span className="text-blue-600 mr-2">✓</span>
|
||||||
|
Multi-Provider AI Support
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Choose between Claude Sonnet, GPT-4, and other leading AI models for optimal results.
|
||||||
|
Each model has unique strengths—select the one that best fits your diagram complexity and style.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Use Cases */}
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Popular Use Cases</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
|
<div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">AWS Cloud Architecture</h3>
|
||||||
|
<p className="text-gray-700 mb-4">
|
||||||
|
Design scalable cloud infrastructure with EC2 instances, Lambda functions, S3 storage,
|
||||||
|
RDS databases, and VPC networking. Perfect for solution architects, cloud engineers,
|
||||||
|
and DevOps teams planning AWS deployments.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 italic">
|
||||||
|
Example: "Create an AWS diagram with an Application Load Balancer, two EC2 instances
|
||||||
|
in different availability zones, an RDS database, and an S3 bucket for static assets."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-green-50 p-6 rounded-lg border border-green-200">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">Flowcharts & Process Diagrams</h3>
|
||||||
|
<p className="text-gray-700 mb-4">
|
||||||
|
Create business process flows, decision trees, workflow diagrams, and algorithm flowcharts
|
||||||
|
for documentation, presentations, and process optimization. Ideal for business analysts,
|
||||||
|
project managers, and operations teams.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 italic">
|
||||||
|
Example: "Draw a flowchart for user authentication: check if user exists, verify password,
|
||||||
|
generate JWT token on success, show error message on failure."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-purple-50 p-6 rounded-lg border border-purple-200">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">System Design & UML Diagrams</h3>
|
||||||
|
<p className="text-gray-700 mb-4">
|
||||||
|
Generate system architecture diagrams, class diagrams, sequence diagrams, and
|
||||||
|
entity-relationship diagrams for software projects. Essential for software engineers,
|
||||||
|
system designers, and technical documentation.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 italic">
|
||||||
|
Example: "Create a class diagram for an e-commerce system with User, Product, Order,
|
||||||
|
and Payment classes showing their relationships and key methods."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How It Works */}
|
||||||
|
<section className="mb-12 bg-white p-8 rounded-lg border border-gray-200">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-6">How to Use Next AI Draw.io</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Open the Editor</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Navigate to the main page and you'll see the draw.io editor with an AI chat panel on the right.
|
||||||
|
No account creation or login required—start immediately.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Describe Your Diagram</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Type your diagram request in natural language. Be as detailed or as general as you like.
|
||||||
|
You can also upload reference images for the AI to analyze and replicate.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">AI Generates Your Diagram</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
The AI processes your request and automatically creates your diagram in seconds.
|
||||||
|
Watch as it appears in the editor with proper symbols, layouts, and connections.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Refine and Export</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Request modifications using the chat, manually edit in draw.io, or export to PNG, SVG,
|
||||||
|
or XML format. Access diagram history to restore previous versions anytime.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Benefits */}
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Why Choose Next AI Draw.io?</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">⚡</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Save Time</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Create complex diagrams in seconds instead of hours. No more dragging, aligning,
|
||||||
|
or searching for the right symbols—AI handles it all.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🎯</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Precision Editing</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Targeted XML editing ensures changes are precise and predictable, unlike tools
|
||||||
|
that regenerate entire diagrams and lose your layout.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🆓</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Completely Free</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
No subscriptions, no usage limits, no hidden costs. Open-source and free forever.
|
||||||
|
Use it for personal projects, work, or education.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🔒</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
No account required means your diagrams stay private. Work on sensitive
|
||||||
|
architecture designs without worrying about data storage or privacy policies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="bg-blue-600 text-white p-8 rounded-lg text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">Ready to Create Your First AI Diagram?</h2>
|
||||||
|
<p className="text-xl mb-6">
|
||||||
|
Start generating professional diagrams in seconds. No signup required.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
Open Editor
|
||||||
|
</Link>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-white border-t border-gray-200 mt-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div className="text-center text-gray-600 text-sm">
|
||||||
|
<p className="mb-2">
|
||||||
|
Next AI Draw.io - Free AI-Powered Diagram Generator
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Perfect for developers, architects, students, and business analysts.
|
||||||
|
Open source. No login required.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -16,8 +16,49 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Next-AI-Drawio",
|
title: "Next AI Draw.io - AI-Powered Diagram Generator",
|
||||||
description: "An AI-powered drawing tool that integrates with draw.io",
|
description: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
|
||||||
|
keywords: ["AI diagram generator", "AWS architecture", "flowchart creator", "draw.io", "AI drawing tool", "technical diagrams", "diagram automation", "free diagram generator", "online diagram maker"],
|
||||||
|
authors: [{ name: "Next AI Draw.io" }],
|
||||||
|
creator: "Next AI Draw.io",
|
||||||
|
publisher: "Next AI Draw.io",
|
||||||
|
metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
|
||||||
|
openGraph: {
|
||||||
|
title: "Next AI Draw.io - AI Diagram Generator",
|
||||||
|
description: "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
|
||||||
|
type: "website",
|
||||||
|
url: "https://next-ai-drawio.jiang.jp",
|
||||||
|
siteName: "Next AI Draw.io",
|
||||||
|
locale: "en_US",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: "/architecture.png",
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
alt: "Next AI Draw.io - AI-powered diagram creation tool",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: "summary_large_image",
|
||||||
|
title: "Next AI Draw.io - AI Diagram Generator",
|
||||||
|
description: "Create professional diagrams with AI assistance. Free, no login required.",
|
||||||
|
images: ["/architecture.png"],
|
||||||
|
},
|
||||||
|
robots: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
googleBot: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
"max-video-preview": -1,
|
||||||
|
"max-image-preview": "large",
|
||||||
|
"max-snippet": -1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
icon: "/favicon.ico",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -25,8 +66,29 @@ export default function RootLayout({
|
|||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
|
const jsonLd = {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'SoftwareApplication',
|
||||||
|
name: 'Next AI Draw.io',
|
||||||
|
applicationCategory: 'DesignApplication',
|
||||||
|
operatingSystem: 'Web Browser',
|
||||||
|
description: 'AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.',
|
||||||
|
url: 'https://next-ai-drawio.jiang.jp',
|
||||||
|
offers: {
|
||||||
|
'@type': 'Offer',
|
||||||
|
price: '0',
|
||||||
|
priceCurrency: 'USD',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<script
|
||||||
|
type="application/ld+json"
|
||||||
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
>
|
>
|
||||||
|
|||||||
12
app/robots.ts
Normal file
12
app/robots.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { MetadataRoute } from 'next'
|
||||||
|
|
||||||
|
export default function robots(): MetadataRoute.Robots {
|
||||||
|
return {
|
||||||
|
rules: {
|
||||||
|
userAgent: '*',
|
||||||
|
allow: '/',
|
||||||
|
disallow: '/api/',
|
||||||
|
},
|
||||||
|
sitemap: 'https://next-ai-drawio.jiang.jp/sitemap.xml',
|
||||||
|
}
|
||||||
|
}
|
||||||
18
app/sitemap.ts
Normal file
18
app/sitemap.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { MetadataRoute } from 'next'
|
||||||
|
|
||||||
|
export default function sitemap(): MetadataRoute.Sitemap {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
url: 'https://next-ai-drawio.jiang.jp',
|
||||||
|
lastModified: new Date(),
|
||||||
|
changeFrequency: 'weekly',
|
||||||
|
priority: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://next-ai-drawio.jiang.jp/about',
|
||||||
|
lastModified: new Date(),
|
||||||
|
changeFrequency: 'monthly',
|
||||||
|
priority: 0.8,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -187,7 +187,7 @@ export function ChatMessageDisplay({
|
|||||||
src={part.url}
|
src={part.url}
|
||||||
width={200}
|
width={200}
|
||||||
height={200}
|
height={200}
|
||||||
alt={`file-${index}`}
|
alt={`Uploaded diagram or image for AI analysis`}
|
||||||
className="rounded-md border"
|
className="rounded-md border"
|
||||||
style={{
|
style={{
|
||||||
objectFit: "contain",
|
objectFit: "contain",
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import type React from "react";
|
|||||||
import { useRef, useEffect, useState } from "react";
|
import { useRef, useEffect, useState } from "react";
|
||||||
import { FaGithub } from "react-icons/fa";
|
import { FaGithub } from "react-icons/fa";
|
||||||
import { PanelRightClose, PanelRightOpen } from "lucide-react";
|
import { PanelRightClose, PanelRightOpen } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -226,7 +227,12 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
|
|||||||
return (
|
return (
|
||||||
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
|
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
|
||||||
<CardHeader className="p-4 flex flex-row justify-between items-center">
|
<CardHeader className="p-4 flex flex-row justify-between items-center">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
<CardTitle>Next-AI-Drawio</CardTitle>
|
<CardTitle>Next-AI-Drawio</CardTitle>
|
||||||
|
<Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<ButtonWithTooltip
|
<ButtonWithTooltip
|
||||||
tooltipContent="Hide chat panel (Ctrl+B)"
|
tooltipContent="Hide chat panel (Ctrl+B)"
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
|
|||||||
<div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
|
<div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
|
||||||
<Image
|
<Image
|
||||||
src={selectedImage}
|
src={selectedImage}
|
||||||
alt="Preview"
|
alt="Full size preview of uploaded diagram or image"
|
||||||
width={1200}
|
width={1200}
|
||||||
height={900}
|
height={900}
|
||||||
className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
|
className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
|
||||||
|
|||||||
Reference in New Issue
Block a user