-
+
+
-
+
+
{post.title}
-
+
{post.primary_author?.profile_image && (
-
+
{post.primary_author.twitter ? (
) : (
@@ -274,25 +284,28 @@ export default async function BlogPostPage({ params }: Props) {
href={`https://twitter.com/${post.primary_author.twitter}`}
target="_blank"
rel="noopener noreferrer"
- className="hover:text-primary transition-colors"
+ className="transition-colors hover:text-primary"
>
- {post.primary_author.name || "Unknown Author"}
+ {post.primary_author.name ||
+ 'Unknown Author'}
) : (
- post.primary_author?.name || "Unknown Author"
+ post.primary_author?.name ||
+ 'Unknown Author'
)}
- {formattedDate} • {post.reading_time} min read
+ {formattedDate} • {post.reading_time} min
+ read
{post.feature_image && (
-
+
{t("tags")}
+
+
+ {t('tags')}
+
{post.tags.map((tag) => (
{tag.name}
@@ -329,7 +344,7 @@ export default async function BlogPostPage({ params }: Props) {
)}
-
+
{t("relatedPosts")}
-
+
+ {t('relatedPosts')}
+
+
{relatedPosts.map((relatedPost) => {
const relatedPostDate = new Date(
relatedPost.published_at,
- ).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ ).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
return (
-
+
{relatedPost.feature_image && (
)}
-
+
{relatedPost.title}
-
- {relatedPostDate} • {relatedPost.reading_time} min read
+
+ {relatedPostDate} •{' '}
+ {relatedPost.reading_time} min
+ read
-
+
{relatedPost.excerpt}
- );
+ )
})}
)}
- );
+ )
}
diff --git a/apps/website/app/blog/components/BlogPostCard.tsx b/apps/website/app/blog/components/BlogPostCard.tsx
index c610dd8..a67968f 100644
--- a/apps/website/app/blog/components/BlogPostCard.tsx
+++ b/apps/website/app/blog/components/BlogPostCard.tsx
@@ -1,53 +1,53 @@
-"use client";
+'use client'
-import type { Post } from "@/lib/ghost";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import type { Post } from '@/lib/ghost'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
interface BlogPostCardProps {
- post: Post;
+ post: Post
}
export function BlogPostCard({ post }: BlogPostCardProps) {
- const router = useRouter();
- const formattedDate = new Date(post.published_at).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ const router = useRouter()
+ const formattedDate = new Date(post.published_at).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
const handleTwitterClick = (e: React.MouseEvent) => {
if (post.primary_author?.twitter) {
- router.push(`https://twitter.com/${post.primary_author.twitter}`);
+ router.push(`https://twitter.com/${post.primary_author.twitter}`)
}
- e.preventDefault();
- e.stopPropagation();
- };
+ e.preventDefault()
+ e.stopPropagation()
+ }
return (
-
-
+
+
-
-
+
+
{post.title}
-
+
{post.custom_excerpt || post.excerpt}
-
+
{post.primary_author?.profile_image && (
-
+
{post.primary_author.twitter ? (
) : (
@@ -71,18 +77,22 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
)}
{post.primary_author?.twitter ? (
) : (
- {post.primary_author?.name || "Unknown Author"}
+
+ {post.primary_author?.name ||
+ 'Unknown Author'}
+
)}
in
- {post.primary_tag?.name || "General"}
+ {post.primary_tag?.name || 'General'}
•
{post.reading_time} min read
•
@@ -91,5 +101,5 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
- );
+ )
}
diff --git a/apps/website/app/blog/components/SearchAndFilter.tsx b/apps/website/app/blog/components/SearchAndFilter.tsx
index 9f2ddef..26b2596 100644
--- a/apps/website/app/blog/components/SearchAndFilter.tsx
+++ b/apps/website/app/blog/components/SearchAndFilter.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client'
import {
Select,
@@ -6,27 +6,27 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { useDebounce } from "@/lib/hooks/use-debounce";
-import { Search } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useTransition } from "react";
+} from '@/components/ui/select'
+import { useDebounce } from '@/lib/hooks/use-debounce'
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useTransition } from 'react'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
interface SearchAndFilterProps {
- tags: Tag[];
- initialSearch: string;
- initialTag: string;
- searchPlaceholder: string;
- allTagsText: string;
+ tags: Tag[]
+ initialSearch: string
+ initialTag: string
+ searchPlaceholder: string
+ allTagsText: string
}
-const ALL_TAGS_VALUE = "all";
+const ALL_TAGS_VALUE = 'all'
export function SearchAndFilter({
tags,
@@ -35,44 +35,44 @@ export function SearchAndFilter({
searchPlaceholder,
allTagsText,
}: SearchAndFilterProps) {
- const router = useRouter();
- const [isPending, startTransition] = useTransition();
+ const router = useRouter()
+ const [isPending, startTransition] = useTransition()
const handleTagChange = (value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value && value !== ALL_TAGS_VALUE) {
- searchParams.set("tag", value);
+ searchParams.set('tag', value)
} else {
- searchParams.delete("tag");
+ searchParams.delete('tag')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- };
+ router.push(`?${searchParams.toString()}`)
+ })
+ }
const debouncedCallback = useDebounce((value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value) {
- searchParams.set("search", value);
+ searchParams.set('search', value)
} else {
- searchParams.delete("search");
+ searchParams.delete('search')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- }, 300);
+ router.push(`?${searchParams.toString()}`)
+ })
+ }, 300)
const handleSearch = useCallback(
(e: React.ChangeEvent) => {
- debouncedCallback(e.target.value);
+ debouncedCallback(e.target.value)
},
[debouncedCallback],
- );
+ )
return (
-
+
-
+
- {allTagsText}
+
+ {allTagsText}
+
{tags.map((tag) => (
{tag.name}
@@ -102,5 +104,5 @@ export function SearchAndFilter({
- );
+ )
}
diff --git a/apps/website/app/blog/page.tsx b/apps/website/app/blog/page.tsx
index 195108a..df37259 100644
--- a/apps/website/app/blog/page.tsx
+++ b/apps/website/app/blog/page.tsx
@@ -1,57 +1,60 @@
-import { getPosts, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import { RssIcon } from "lucide-react";
-import type { Metadata } from "next";
-import Link from "next/link";
-import { BlogPostCard } from "./components/BlogPostCard";
-import { SearchAndFilter } from "./components/SearchAndFilter";
-import { useTranslations } from "@/lib/intl";
+import { getPosts, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import { RssIcon } from 'lucide-react'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { BlogPostCard } from './components/BlogPostCard'
+import { SearchAndFilter } from './components/SearchAndFilter'
+import { useTranslations } from '@/lib/intl'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
export const metadata: Metadata = {
- title: "Blog | Dokploy",
- description: "Latest news, updates, and articles from Dokploy",
-};
+ title: 'Blog | Dokploy',
+ description: 'Latest news, updates, and articles from Dokploy',
+}
export default async function BlogPage({
searchParams,
}: {
- searchParams: { [key: string]: string | string[] | undefined };
+ searchParams: { [key: string]: string | string[] | undefined }
}) {
- const searchParams2 = await searchParams;
- const t = useTranslations("blog");
- const posts = await getPosts();
- const tags = (await getTags()) as Tag[];
+ const searchParams2 = await searchParams
+ const t = useTranslations('blog')
+ const posts = await getPosts()
+ const tags = (await getTags()) as Tag[]
const search =
- typeof searchParams2.search === "string" ? searchParams2.search : "";
+ typeof searchParams2.search === 'string' ? searchParams2.search : ''
const selectedTag =
- typeof searchParams2.tag === "string" ? searchParams2.tag : "";
+ typeof searchParams2.tag === 'string' ? searchParams2.tag : ''
const filteredPosts = posts.filter((post) => {
const matchesSearch =
- search === "" ||
+ search === '' ||
post.title.toLowerCase().includes(search.toLowerCase()) ||
- post.excerpt.toLowerCase().includes(search.toLowerCase());
+ post.excerpt.toLowerCase().includes(search.toLowerCase())
const matchesTag =
- selectedTag === "" || post.tags?.some((tag) => tag.slug === selectedTag);
+ selectedTag === '' ||
+ post.tags?.some((tag) => tag.slug === selectedTag)
- return matchesSearch && matchesTag;
- });
+ return matchesSearch && matchesTag
+ })
return (
-
-
+
+
-
+
BLOG
- Dokploy Latest News & Updates
+
+ Dokploy Latest News & Updates
+
{filteredPosts.length === 0 ? (
-
+
- {search || selectedTag ? t("noResults") : t("noPosts")}
+ {search || selectedTag ? t('noResults') : t('noPosts')}
) : (
@@ -83,5 +86,5 @@ export default async function BlogPage({
)}
- );
+ )
}
diff --git a/apps/website/app/blog/tag/[tag]/page.tsx b/apps/website/app/blog/tag/[tag]/page.tsx
index a1aeb84..490cd9d 100644
--- a/apps/website/app/blog/tag/[tag]/page.tsx
+++ b/apps/website/app/blog/tag/[tag]/page.tsx
@@ -1,51 +1,52 @@
-import { getPostsByTag, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import type { Metadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { useTranslations } from "@/lib/intl";
+import { getPostsByTag, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import type { Metadata } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { useTranslations } from '@/lib/intl'
type Props = {
- params: { tag: string };
-};
+ params: { tag: string }
+}
export async function generateMetadata({ params }: Props): Promise {
- const { tag } = await params;
- const t = useTranslations("blog");
+ const { tag } = await params
+ const t = useTranslations('blog')
return {
- title: `${t("tagTitle", { tag })}`,
- description: t("tagDescription", { tag }),
- };
+ title: `${t('tagTitle', { tag })}`,
+ description: t('tagDescription', { tag }),
+ }
}
export async function generateStaticParams() {
- const tags = await getTags();
- return tags.map((tag: { slug: string }) => ({ tag: tag.slug }));
+ const tags = await getTags()
+ return tags.map((tag: { slug: string }) => ({ tag: tag.slug }))
}
export default async function TagPage({ params }: Props) {
- const { tag } = await params;
- const t = useTranslations("blog");
- const posts = await getPostsByTag(tag);
+ const { tag } = await params
+ const t = useTranslations('blog')
+ const posts = await getPostsByTag(tag)
if (!posts || posts.length === 0) {
- notFound();
+ notFound()
}
const tagName =
- posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name || tag;
+ posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name ||
+ tag
return (
- {t("backToBlog")}
+ {t('backToBlog')}
-
- {t("postsTaggedWith")}{" "}
+
+ {t('postsTaggedWith')}{' '}
"{tagName}"
- {t("foundPosts", { count: posts.length })}
+ {t('foundPosts', { count: posts.length })}
-
+
{posts.map((post: Post) => (
)}
-
+
{post.title}
-
+
{formattedDate} • {post.reading_time} min read
-
+
{post.custom_excerpt || post.excerpt}
{post.primary_author?.profile_image && (
-
+
- {post.primary_author?.name || "Unknown Author"}
+ {post.primary_author?.name || 'Unknown Author'}
- );
+ )
}
diff --git a/apps/website/app/contact/page.tsx b/apps/website/app/contact/page.tsx
index 7c2343e..b56e51b 100644
--- a/apps/website/app/contact/page.tsx
+++ b/apps/website/app/contact/page.tsx
@@ -1,126 +1,126 @@
-"use client";
+'use client'
-import { useState } from "react";
-import { Container } from "@/components/Container";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useState } from 'react'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { trackGAEvent } from "@/components/analitycs";
-import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/select'
+import { trackGAEvent } from '@/components/analitycs'
+import AnimatedGridPattern from '@/components/ui/animated-grid-pattern'
+import { cn } from '@/lib/utils'
interface ContactFormData {
- inquiryType: "" | "support" | "sales" | "other";
- firstName: string;
- lastName: string;
- email: string;
- company: string;
- message: string;
+ inquiryType: '' | 'support' | 'sales' | 'other'
+ firstName: string
+ lastName: string
+ email: string
+ company: string
+ message: string
}
export default function ContactPage() {
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [isSubmitted, setIsSubmitted] = useState(false)
const [formData, setFormData] = useState({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- const [errors, setErrors] = useState>({});
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ const [errors, setErrors] = useState>({})
const validateForm = (): boolean => {
- const newErrors: Record = {};
+ const newErrors: Record = {}
if (!formData.inquiryType) {
- newErrors.inquiryType = "Please select what we can help you with";
+ newErrors.inquiryType = 'Please select what we can help you with'
}
if (!formData.firstName.trim()) {
- newErrors.firstName = "First name is required";
+ newErrors.firstName = 'First name is required'
}
if (!formData.lastName.trim()) {
- newErrors.lastName = "Last name is required";
+ newErrors.lastName = 'Last name is required'
}
if (!formData.email.trim()) {
- newErrors.email = "Email is required";
+ newErrors.email = 'Email is required'
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
- newErrors.email = "Please enter a valid email address";
+ newErrors.email = 'Please enter a valid email address'
}
if (!formData.company.trim()) {
- newErrors.company = "Company name is required";
+ newErrors.company = 'Company name is required'
}
if (!formData.message.trim()) {
- newErrors.message = "Message is required";
+ newErrors.message = 'Message is required'
}
- setErrors(newErrors);
- return Object.keys(newErrors).length === 0;
- };
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
+ e.preventDefault()
if (!validateForm()) {
- return;
+ return
}
- setIsSubmitting(true);
+ setIsSubmitting(true)
try {
- const response = await fetch("/api/contact", {
- method: "POST",
+ const response = await fetch('/api/contact', {
+ method: 'POST',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
- });
+ })
if (response.ok) {
trackGAEvent({
- action: "Contact Form Submitted",
- category: "Contact",
+ action: 'Contact Form Submitted',
+ category: 'Contact',
label: formData.inquiryType,
- });
+ })
setFormData({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- setErrors({});
- setIsSubmitted(true);
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ setErrors({})
+ setIsSubmitted(true)
} else {
- throw new Error("Failed to submit form");
+ throw new Error('Failed to submit form')
}
} catch (error) {
- console.error("Error submitting form:", error);
- alert("There was an error sending your message. Please try again.");
+ console.error('Error submitting form:', error)
+ alert('There was an error sending your message. Please try again.')
} finally {
- setIsSubmitting(false);
+ setIsSubmitting(false)
}
- };
+ }
const handleInputChange = (field: keyof ContactFormData, value: any) => {
- setFormData((prev) => ({ ...prev, [field]: value }));
+ setFormData((prev) => ({ ...prev, [field]: value }))
if (errors[field]) {
setErrors((prev) => {
- const newErrors = { ...prev };
- delete newErrors[field];
- return newErrors;
- });
+ const newErrors = { ...prev }
+ delete newErrors[field]
+ return newErrors
+ })
}
- };
+ }
if (isSubmitted) {
return (
@@ -131,22 +131,25 @@ export default function ContactPage() {
Thank you for contacting us!
- We've received your message and will get back to you as soon as
- possible.
+ We've received your message and will get back to you
+ as soon as possible.
-
- );
+ )
}
return (
-
+
-
+
Contact Us
- Get in touch with our team. We're here to help with any questions
- about Dokploy.
+ Get in touch with our team. We're here to help with
+ any questions about Dokploy.
@@ -177,15 +180,15 @@ export default function ContactPage() {
htmlFor="inquiryType"
className="block text-sm font-medium text-foreground"
>
- What can we help you with today?{" "}
+ What can we help you with today?{' '}
*
{errors.inquiryType && (
- {errors.inquiryType}
+
+ {errors.inquiryType}
+
)}
@@ -209,19 +216,25 @@ export default function ContactPage() {
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
- First Name *
+ First Name{' '}
+ *
- handleInputChange("firstName", e.target.value)
+ handleInputChange(
+ 'firstName',
+ e.target.value,
+ )
}
placeholder="Your first name"
/>
{errors.firstName && (
- {errors.firstName}
+
+ {errors.firstName}
+
)}
@@ -230,19 +243,25 @@ export default function ContactPage() {
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
- Last Name *
+ Last Name{' '}
+ *
- handleInputChange("lastName", e.target.value)
+ handleInputChange(
+ 'lastName',
+ e.target.value,
+ )
}
placeholder="Your last name"
/>
{errors.lastName && (
- {errors.lastName}
+
+ {errors.lastName}
+
)}
@@ -258,11 +277,15 @@ export default function ContactPage() {
id="email"
type="email"
value={formData.email}
- onChange={(e) => handleInputChange("email", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('email', e.target.value)
+ }
placeholder="your.email@company.com"
/>
{errors.email && (
- {errors.email}
+
+ {errors.email}
+
)}
@@ -271,17 +294,22 @@ export default function ContactPage() {
htmlFor="company"
className="block text-sm font-medium text-foreground"
>
- Company Name *
+ Company Name{' '}
+ *
handleInputChange("company", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('company', e.target.value)
+ }
placeholder="Your company name"
/>
{errors.company && (
- {errors.company}
+
+ {errors.company}
+
)}
@@ -290,18 +318,23 @@ export default function ContactPage() {
htmlFor="message"
className="block text-sm font-medium text-foreground"
>
- How can we help? *
+ How can we help?{' '}
+ *
{post.primary_author?.profile_image && (
-
+
{post.feature_image && (
-
{post.primary_author.twitter ? (
) : (
@@ -274,25 +284,28 @@ export default async function BlogPostPage({ params }: Props) {
href={`https://twitter.com/${post.primary_author.twitter}`}
target="_blank"
rel="noopener noreferrer"
- className="hover:text-primary transition-colors"
+ className="transition-colors hover:text-primary"
>
- {post.primary_author.name || "Unknown Author"}
+ {post.primary_author.name ||
+ 'Unknown Author'}
) : (
- post.primary_author?.name || "Unknown Author"
+ post.primary_author?.name ||
+ 'Unknown Author'
)}
- {formattedDate} • {post.reading_time} min read + {formattedDate} • {post.reading_time} min + read
+
{post.tags && post.tags.length > 0 && (
-
-
{t("tags")}
+
+
+ {t('tags')} +
{post.tags.map((tag) => (
{tag.name}
@@ -329,7 +344,7 @@ export default async function BlogPostPage({ params }: Props) {
)}
-
+
-
{t("relatedPosts")}
-
+
-
+ {t('relatedPosts')} +
+
{relatedPosts.map((relatedPost) => {
const relatedPostDate = new Date(
relatedPost.published_at,
- ).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ ).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
return (
-
)}
- );
+ )
}
diff --git a/apps/website/app/blog/components/BlogPostCard.tsx b/apps/website/app/blog/components/BlogPostCard.tsx
index c610dd8..a67968f 100644
--- a/apps/website/app/blog/components/BlogPostCard.tsx
+++ b/apps/website/app/blog/components/BlogPostCard.tsx
@@ -1,53 +1,53 @@
-"use client";
+'use client'
-import type { Post } from "@/lib/ghost";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import type { Post } from '@/lib/ghost'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
interface BlogPostCardProps {
- post: Post;
+ post: Post
}
export function BlogPostCard({ post }: BlogPostCardProps) {
- const router = useRouter();
- const formattedDate = new Date(post.published_at).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ const router = useRouter()
+ const formattedDate = new Date(post.published_at).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
const handleTwitterClick = (e: React.MouseEvent) => {
if (post.primary_author?.twitter) {
- router.push(`https://twitter.com/${post.primary_author.twitter}`);
+ router.push(`https://twitter.com/${post.primary_author.twitter}`)
}
- e.preventDefault();
- e.stopPropagation();
- };
+ e.preventDefault()
+ e.stopPropagation()
+ }
return (
-
+
{relatedPost.feature_image && (
)}
- );
+ )
})}
-
+
+
{relatedPost.title}
-
- {relatedPostDate} • {relatedPost.reading_time} min read +
+ {relatedPostDate} •{' '} + {relatedPost.reading_time} min + read
-+
{relatedPost.excerpt}
+
+
-
-
+
+
+
{post.title}
-
+
{post.custom_excerpt || post.excerpt}
-
+
{post.primary_author?.profile_image && (
-
+
{post.primary_author.twitter ? (
) : (
@@ -71,18 +77,22 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
)}
{post.primary_author?.twitter ? (
) : (
- {post.primary_author?.name || "Unknown Author"}
+
+ {post.primary_author?.name ||
+ 'Unknown Author'}
+
)}
in
- {post.primary_tag?.name || "General"}
+ {post.primary_tag?.name || 'General'}
•
{post.reading_time} min read
•
@@ -91,5 +101,5 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
- );
+ )
}
diff --git a/apps/website/app/blog/components/SearchAndFilter.tsx b/apps/website/app/blog/components/SearchAndFilter.tsx
index 9f2ddef..26b2596 100644
--- a/apps/website/app/blog/components/SearchAndFilter.tsx
+++ b/apps/website/app/blog/components/SearchAndFilter.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client'
import {
Select,
@@ -6,27 +6,27 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { useDebounce } from "@/lib/hooks/use-debounce";
-import { Search } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useTransition } from "react";
+} from '@/components/ui/select'
+import { useDebounce } from '@/lib/hooks/use-debounce'
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useTransition } from 'react'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
interface SearchAndFilterProps {
- tags: Tag[];
- initialSearch: string;
- initialTag: string;
- searchPlaceholder: string;
- allTagsText: string;
+ tags: Tag[]
+ initialSearch: string
+ initialTag: string
+ searchPlaceholder: string
+ allTagsText: string
}
-const ALL_TAGS_VALUE = "all";
+const ALL_TAGS_VALUE = 'all'
export function SearchAndFilter({
tags,
@@ -35,44 +35,44 @@ export function SearchAndFilter({
searchPlaceholder,
allTagsText,
}: SearchAndFilterProps) {
- const router = useRouter();
- const [isPending, startTransition] = useTransition();
+ const router = useRouter()
+ const [isPending, startTransition] = useTransition()
const handleTagChange = (value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value && value !== ALL_TAGS_VALUE) {
- searchParams.set("tag", value);
+ searchParams.set('tag', value)
} else {
- searchParams.delete("tag");
+ searchParams.delete('tag')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- };
+ router.push(`?${searchParams.toString()}`)
+ })
+ }
const debouncedCallback = useDebounce((value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value) {
- searchParams.set("search", value);
+ searchParams.set('search', value)
} else {
- searchParams.delete("search");
+ searchParams.delete('search')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- }, 300);
+ router.push(`?${searchParams.toString()}`)
+ })
+ }, 300)
const handleSearch = useCallback(
(e: React.ChangeEvent) => {
- debouncedCallback(e.target.value);
+ debouncedCallback(e.target.value)
},
[debouncedCallback],
- );
+ )
return (
-
+
-
+
- {allTagsText}
+
+ {allTagsText}
+
{tags.map((tag) => (
{tag.name}
@@ -102,5 +104,5 @@ export function SearchAndFilter({
- );
+ )
}
diff --git a/apps/website/app/blog/page.tsx b/apps/website/app/blog/page.tsx
index 195108a..df37259 100644
--- a/apps/website/app/blog/page.tsx
+++ b/apps/website/app/blog/page.tsx
@@ -1,57 +1,60 @@
-import { getPosts, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import { RssIcon } from "lucide-react";
-import type { Metadata } from "next";
-import Link from "next/link";
-import { BlogPostCard } from "./components/BlogPostCard";
-import { SearchAndFilter } from "./components/SearchAndFilter";
-import { useTranslations } from "@/lib/intl";
+import { getPosts, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import { RssIcon } from 'lucide-react'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { BlogPostCard } from './components/BlogPostCard'
+import { SearchAndFilter } from './components/SearchAndFilter'
+import { useTranslations } from '@/lib/intl'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
export const metadata: Metadata = {
- title: "Blog | Dokploy",
- description: "Latest news, updates, and articles from Dokploy",
-};
+ title: 'Blog | Dokploy',
+ description: 'Latest news, updates, and articles from Dokploy',
+}
export default async function BlogPage({
searchParams,
}: {
- searchParams: { [key: string]: string | string[] | undefined };
+ searchParams: { [key: string]: string | string[] | undefined }
}) {
- const searchParams2 = await searchParams;
- const t = useTranslations("blog");
- const posts = await getPosts();
- const tags = (await getTags()) as Tag[];
+ const searchParams2 = await searchParams
+ const t = useTranslations('blog')
+ const posts = await getPosts()
+ const tags = (await getTags()) as Tag[]
const search =
- typeof searchParams2.search === "string" ? searchParams2.search : "";
+ typeof searchParams2.search === 'string' ? searchParams2.search : ''
const selectedTag =
- typeof searchParams2.tag === "string" ? searchParams2.tag : "";
+ typeof searchParams2.tag === 'string' ? searchParams2.tag : ''
const filteredPosts = posts.filter((post) => {
const matchesSearch =
- search === "" ||
+ search === '' ||
post.title.toLowerCase().includes(search.toLowerCase()) ||
- post.excerpt.toLowerCase().includes(search.toLowerCase());
+ post.excerpt.toLowerCase().includes(search.toLowerCase())
const matchesTag =
- selectedTag === "" || post.tags?.some((tag) => tag.slug === selectedTag);
+ selectedTag === '' ||
+ post.tags?.some((tag) => tag.slug === selectedTag)
- return matchesSearch && matchesTag;
- });
+ return matchesSearch && matchesTag
+ })
return (
-
-
+
+
-
+
BLOG
- Dokploy Latest News & Updates
+
+ Dokploy Latest News & Updates
+
{filteredPosts.length === 0 ? (
-
+
- {search || selectedTag ? t("noResults") : t("noPosts")}
+ {search || selectedTag ? t('noResults') : t('noPosts')}
) : (
@@ -83,5 +86,5 @@ export default async function BlogPage({
)}
- );
+ )
}
diff --git a/apps/website/app/blog/tag/[tag]/page.tsx b/apps/website/app/blog/tag/[tag]/page.tsx
index a1aeb84..490cd9d 100644
--- a/apps/website/app/blog/tag/[tag]/page.tsx
+++ b/apps/website/app/blog/tag/[tag]/page.tsx
@@ -1,51 +1,52 @@
-import { getPostsByTag, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import type { Metadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { useTranslations } from "@/lib/intl";
+import { getPostsByTag, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import type { Metadata } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { useTranslations } from '@/lib/intl'
type Props = {
- params: { tag: string };
-};
+ params: { tag: string }
+}
export async function generateMetadata({ params }: Props): Promise {
- const { tag } = await params;
- const t = useTranslations("blog");
+ const { tag } = await params
+ const t = useTranslations('blog')
return {
- title: `${t("tagTitle", { tag })}`,
- description: t("tagDescription", { tag }),
- };
+ title: `${t('tagTitle', { tag })}`,
+ description: t('tagDescription', { tag }),
+ }
}
export async function generateStaticParams() {
- const tags = await getTags();
- return tags.map((tag: { slug: string }) => ({ tag: tag.slug }));
+ const tags = await getTags()
+ return tags.map((tag: { slug: string }) => ({ tag: tag.slug }))
}
export default async function TagPage({ params }: Props) {
- const { tag } = await params;
- const t = useTranslations("blog");
- const posts = await getPostsByTag(tag);
+ const { tag } = await params
+ const t = useTranslations('blog')
+ const posts = await getPostsByTag(tag)
if (!posts || posts.length === 0) {
- notFound();
+ notFound()
}
const tagName =
- posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name || tag;
+ posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name ||
+ tag
return (
- {t("backToBlog")}
+ {t('backToBlog')}
-
- {t("postsTaggedWith")}{" "}
+
+ {t('postsTaggedWith')}{' '}
"{tagName}"
- {t("foundPosts", { count: posts.length })}
+ {t('foundPosts', { count: posts.length })}
-
+
{posts.map((post: Post) => (
)}
-
+
{post.title}
-
+
{formattedDate} • {post.reading_time} min read
-
+
{post.custom_excerpt || post.excerpt}
{post.primary_author?.profile_image && (
-
+
- {post.primary_author?.name || "Unknown Author"}
+ {post.primary_author?.name || 'Unknown Author'}
- );
+ )
}
diff --git a/apps/website/app/contact/page.tsx b/apps/website/app/contact/page.tsx
index 7c2343e..b56e51b 100644
--- a/apps/website/app/contact/page.tsx
+++ b/apps/website/app/contact/page.tsx
@@ -1,126 +1,126 @@
-"use client";
+'use client'
-import { useState } from "react";
-import { Container } from "@/components/Container";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useState } from 'react'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { trackGAEvent } from "@/components/analitycs";
-import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/select'
+import { trackGAEvent } from '@/components/analitycs'
+import AnimatedGridPattern from '@/components/ui/animated-grid-pattern'
+import { cn } from '@/lib/utils'
interface ContactFormData {
- inquiryType: "" | "support" | "sales" | "other";
- firstName: string;
- lastName: string;
- email: string;
- company: string;
- message: string;
+ inquiryType: '' | 'support' | 'sales' | 'other'
+ firstName: string
+ lastName: string
+ email: string
+ company: string
+ message: string
}
export default function ContactPage() {
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [isSubmitted, setIsSubmitted] = useState(false)
const [formData, setFormData] = useState({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- const [errors, setErrors] = useState>({});
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ const [errors, setErrors] = useState>({})
const validateForm = (): boolean => {
- const newErrors: Record = {};
+ const newErrors: Record = {}
if (!formData.inquiryType) {
- newErrors.inquiryType = "Please select what we can help you with";
+ newErrors.inquiryType = 'Please select what we can help you with'
}
if (!formData.firstName.trim()) {
- newErrors.firstName = "First name is required";
+ newErrors.firstName = 'First name is required'
}
if (!formData.lastName.trim()) {
- newErrors.lastName = "Last name is required";
+ newErrors.lastName = 'Last name is required'
}
if (!formData.email.trim()) {
- newErrors.email = "Email is required";
+ newErrors.email = 'Email is required'
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
- newErrors.email = "Please enter a valid email address";
+ newErrors.email = 'Please enter a valid email address'
}
if (!formData.company.trim()) {
- newErrors.company = "Company name is required";
+ newErrors.company = 'Company name is required'
}
if (!formData.message.trim()) {
- newErrors.message = "Message is required";
+ newErrors.message = 'Message is required'
}
- setErrors(newErrors);
- return Object.keys(newErrors).length === 0;
- };
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
+ e.preventDefault()
if (!validateForm()) {
- return;
+ return
}
- setIsSubmitting(true);
+ setIsSubmitting(true)
try {
- const response = await fetch("/api/contact", {
- method: "POST",
+ const response = await fetch('/api/contact', {
+ method: 'POST',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
- });
+ })
if (response.ok) {
trackGAEvent({
- action: "Contact Form Submitted",
- category: "Contact",
+ action: 'Contact Form Submitted',
+ category: 'Contact',
label: formData.inquiryType,
- });
+ })
setFormData({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- setErrors({});
- setIsSubmitted(true);
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ setErrors({})
+ setIsSubmitted(true)
} else {
- throw new Error("Failed to submit form");
+ throw new Error('Failed to submit form')
}
} catch (error) {
- console.error("Error submitting form:", error);
- alert("There was an error sending your message. Please try again.");
+ console.error('Error submitting form:', error)
+ alert('There was an error sending your message. Please try again.')
} finally {
- setIsSubmitting(false);
+ setIsSubmitting(false)
}
- };
+ }
const handleInputChange = (field: keyof ContactFormData, value: any) => {
- setFormData((prev) => ({ ...prev, [field]: value }));
+ setFormData((prev) => ({ ...prev, [field]: value }))
if (errors[field]) {
setErrors((prev) => {
- const newErrors = { ...prev };
- delete newErrors[field];
- return newErrors;
- });
+ const newErrors = { ...prev }
+ delete newErrors[field]
+ return newErrors
+ })
}
- };
+ }
if (isSubmitted) {
return (
@@ -131,22 +131,25 @@ export default function ContactPage() {
Thank you for contacting us!
- We've received your message and will get back to you as soon as
- possible.
+ We've received your message and will get back to you
+ as soon as possible.
-
- );
+ )
}
return (
-
+
-
+
Contact Us
- Get in touch with our team. We're here to help with any questions
- about Dokploy.
+ Get in touch with our team. We're here to help with
+ any questions about Dokploy.
@@ -177,15 +180,15 @@ export default function ContactPage() {
htmlFor="inquiryType"
className="block text-sm font-medium text-foreground"
>
- What can we help you with today?{" "}
+ What can we help you with today?{' '}
*
{errors.inquiryType && (
- {errors.inquiryType}
+
+ {errors.inquiryType}
+
)}
@@ -209,19 +216,25 @@ export default function ContactPage() {
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
- First Name *
+ First Name{' '}
+ *
- handleInputChange("firstName", e.target.value)
+ handleInputChange(
+ 'firstName',
+ e.target.value,
+ )
}
placeholder="Your first name"
/>
{errors.firstName && (
- {errors.firstName}
+
+ {errors.firstName}
+
)}
@@ -230,19 +243,25 @@ export default function ContactPage() {
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
- Last Name *
+ Last Name{' '}
+ *
- handleInputChange("lastName", e.target.value)
+ handleInputChange(
+ 'lastName',
+ e.target.value,
+ )
}
placeholder="Your last name"
/>
{errors.lastName && (
- {errors.lastName}
+
+ {errors.lastName}
+
)}
@@ -258,11 +277,15 @@ export default function ContactPage() {
id="email"
type="email"
value={formData.email}
- onChange={(e) => handleInputChange("email", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('email', e.target.value)
+ }
placeholder="your.email@company.com"
/>
{errors.email && (
- {errors.email}
+
+ {errors.email}
+
)}
@@ -271,17 +294,22 @@ export default function ContactPage() {
htmlFor="company"
className="block text-sm font-medium text-foreground"
>
- Company Name *
+ Company Name{' '}
+ *
handleInputChange("company", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('company', e.target.value)
+ }
placeholder="Your company name"
/>
{errors.company && (
- {errors.company}
+
+ {errors.company}
+
)}
@@ -290,18 +318,23 @@ export default function ContactPage() {
htmlFor="message"
className="block text-sm font-medium text-foreground"
>
- How can we help? *
+ How can we help?{' '}
+ *
{post.title}
-+
{post.custom_excerpt || post.excerpt}
-
+
{post.primary_author?.profile_image && (
- ) => {
- debouncedCallback(e.target.value);
+ debouncedCallback(e.target.value)
},
[debouncedCallback],
- );
+ )
return (
-
+
- );
+ )
}
diff --git a/apps/website/app/blog/components/SearchAndFilter.tsx b/apps/website/app/blog/components/SearchAndFilter.tsx
index 9f2ddef..26b2596 100644
--- a/apps/website/app/blog/components/SearchAndFilter.tsx
+++ b/apps/website/app/blog/components/SearchAndFilter.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client'
import {
Select,
@@ -6,27 +6,27 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { useDebounce } from "@/lib/hooks/use-debounce";
-import { Search } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useTransition } from "react";
+} from '@/components/ui/select'
+import { useDebounce } from '@/lib/hooks/use-debounce'
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useTransition } from 'react'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
interface SearchAndFilterProps {
- tags: Tag[];
- initialSearch: string;
- initialTag: string;
- searchPlaceholder: string;
- allTagsText: string;
+ tags: Tag[]
+ initialSearch: string
+ initialTag: string
+ searchPlaceholder: string
+ allTagsText: string
}
-const ALL_TAGS_VALUE = "all";
+const ALL_TAGS_VALUE = 'all'
export function SearchAndFilter({
tags,
@@ -35,44 +35,44 @@ export function SearchAndFilter({
searchPlaceholder,
allTagsText,
}: SearchAndFilterProps) {
- const router = useRouter();
- const [isPending, startTransition] = useTransition();
+ const router = useRouter()
+ const [isPending, startTransition] = useTransition()
const handleTagChange = (value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value && value !== ALL_TAGS_VALUE) {
- searchParams.set("tag", value);
+ searchParams.set('tag', value)
} else {
- searchParams.delete("tag");
+ searchParams.delete('tag')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- };
+ router.push(`?${searchParams.toString()}`)
+ })
+ }
const debouncedCallback = useDebounce((value: string) => {
- const searchParams = new URLSearchParams(window.location.search);
+ const searchParams = new URLSearchParams(window.location.search)
if (value) {
- searchParams.set("search", value);
+ searchParams.set('search', value)
} else {
- searchParams.delete("search");
+ searchParams.delete('search')
}
startTransition(() => {
- router.push(`?${searchParams.toString()}`);
- });
- }, 300);
+ router.push(`?${searchParams.toString()}`)
+ })
+ }, 300)
const handleSearch = useCallback(
(e: React.ChangeEvent
{post.primary_author.twitter ? (
) : (
@@ -71,18 +77,22 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
)}
{post.primary_author?.twitter ? (
) : (
- {post.primary_author?.name || "Unknown Author"}
+
+ {post.primary_author?.name ||
+ 'Unknown Author'}
+
)}
in
- {post.primary_tag?.name || "General"}
+ {post.primary_tag?.name || 'General'}
•
{post.reading_time} min read
•
@@ -91,5 +101,5 @@ export function BlogPostCard({ post }: BlogPostCardProps) {
+
-
- );
+ )
}
diff --git a/apps/website/app/blog/page.tsx b/apps/website/app/blog/page.tsx
index 195108a..df37259 100644
--- a/apps/website/app/blog/page.tsx
+++ b/apps/website/app/blog/page.tsx
@@ -1,57 +1,60 @@
-import { getPosts, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import { RssIcon } from "lucide-react";
-import type { Metadata } from "next";
-import Link from "next/link";
-import { BlogPostCard } from "./components/BlogPostCard";
-import { SearchAndFilter } from "./components/SearchAndFilter";
-import { useTranslations } from "@/lib/intl";
+import { getPosts, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import { RssIcon } from 'lucide-react'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { BlogPostCard } from './components/BlogPostCard'
+import { SearchAndFilter } from './components/SearchAndFilter'
+import { useTranslations } from '@/lib/intl'
interface Tag {
- id: string;
- name: string;
- slug: string;
+ id: string
+ name: string
+ slug: string
}
export const metadata: Metadata = {
- title: "Blog | Dokploy",
- description: "Latest news, updates, and articles from Dokploy",
-};
+ title: 'Blog | Dokploy',
+ description: 'Latest news, updates, and articles from Dokploy',
+}
export default async function BlogPage({
searchParams,
}: {
- searchParams: { [key: string]: string | string[] | undefined };
+ searchParams: { [key: string]: string | string[] | undefined }
}) {
- const searchParams2 = await searchParams;
- const t = useTranslations("blog");
- const posts = await getPosts();
- const tags = (await getTags()) as Tag[];
+ const searchParams2 = await searchParams
+ const t = useTranslations('blog')
+ const posts = await getPosts()
+ const tags = (await getTags()) as Tag[]
const search =
- typeof searchParams2.search === "string" ? searchParams2.search : "";
+ typeof searchParams2.search === 'string' ? searchParams2.search : ''
const selectedTag =
- typeof searchParams2.tag === "string" ? searchParams2.tag : "";
+ typeof searchParams2.tag === 'string' ? searchParams2.tag : ''
const filteredPosts = posts.filter((post) => {
const matchesSearch =
- search === "" ||
+ search === '' ||
post.title.toLowerCase().includes(search.toLowerCase()) ||
- post.excerpt.toLowerCase().includes(search.toLowerCase());
+ post.excerpt.toLowerCase().includes(search.toLowerCase())
const matchesTag =
- selectedTag === "" || post.tags?.some((tag) => tag.slug === selectedTag);
+ selectedTag === '' ||
+ post.tags?.some((tag) => tag.slug === selectedTag)
- return matchesSearch && matchesTag;
- });
+ return matchesSearch && matchesTag
+ })
return (
-
+
@@ -92,7 +92,9 @@ export function SearchAndFilter({
- {allTagsText}
+
+ {allTagsText}
+
{tags.map((tag) => (
{tag.name}
@@ -102,5 +104,5 @@ export function SearchAndFilter({
-
+
+
- );
+ )
}
diff --git a/apps/website/app/blog/tag/[tag]/page.tsx b/apps/website/app/blog/tag/[tag]/page.tsx
index a1aeb84..490cd9d 100644
--- a/apps/website/app/blog/tag/[tag]/page.tsx
+++ b/apps/website/app/blog/tag/[tag]/page.tsx
@@ -1,51 +1,52 @@
-import { getPostsByTag, getTags } from "@/lib/ghost";
-import type { Post } from "@/lib/ghost";
-import type { Metadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { useTranslations } from "@/lib/intl";
+import { getPostsByTag, getTags } from '@/lib/ghost'
+import type { Post } from '@/lib/ghost'
+import type { Metadata } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { useTranslations } from '@/lib/intl'
type Props = {
- params: { tag: string };
-};
+ params: { tag: string }
+}
export async function generateMetadata({ params }: Props): Promise {
- const { tag } = await params;
- const t = useTranslations("blog");
+ const { tag } = await params
+ const t = useTranslations('blog')
return {
- title: `${t("tagTitle", { tag })}`,
- description: t("tagDescription", { tag }),
- };
+ title: `${t('tagTitle', { tag })}`,
+ description: t('tagDescription', { tag }),
+ }
}
export async function generateStaticParams() {
- const tags = await getTags();
- return tags.map((tag: { slug: string }) => ({ tag: tag.slug }));
+ const tags = await getTags()
+ return tags.map((tag: { slug: string }) => ({ tag: tag.slug }))
}
export default async function TagPage({ params }: Props) {
- const { tag } = await params;
- const t = useTranslations("blog");
- const posts = await getPostsByTag(tag);
+ const { tag } = await params
+ const t = useTranslations('blog')
+ const posts = await getPostsByTag(tag)
if (!posts || posts.length === 0) {
- notFound();
+ notFound()
}
const tagName =
- posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name || tag;
+ posts[0].tags?.find((t: { slug: string }) => t.slug === tag)?.name ||
+ tag
return (
-
{filteredPosts.length === 0 ? (
- +
BLOG
-Dokploy Latest News & Updates
++ Dokploy Latest News & Updates +
+
) : (
@@ -83,5 +86,5 @@ export default async function BlogPage({
)}
- {search || selectedTag ? t("noResults") : t("noPosts")} + {search || selectedTag ? t('noResults') : t('noPosts')}
- {t("backToBlog")}
+ {t('backToBlog')}
@@ -290,18 +318,23 @@ export default function ContactPage() {
htmlFor="message"
className="block text-sm font-medium text-foreground"
>
- How can we help? *
+ How can we help?{' '}
+ *
-
- {t("postsTaggedWith")}{" "}
+
-
- {t("postsTaggedWith")}{" "}
+
+ {t('postsTaggedWith')}{' '}
"{tagName}"
- {t("foundPosts", { count: posts.length })} + {t('foundPosts', { count: posts.length })}
+
- );
+ )
}
function BlogPostCard({ post }: { post: Post }) {
- const formattedDate = new Date(post.published_at).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ const formattedDate = new Date(post.published_at).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
return (
-
{posts.map((post: Post) => (
+
@@ -271,17 +294,22 @@ export default function ContactPage() {
htmlFor="company"
className="block text-sm font-medium text-foreground"
>
- Company Name *
+ Company Name{' '}
+ *
handleInputChange("company", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('company', e.target.value)
+ }
placeholder="Your company name"
/>
{errors.company && (
-
{post.feature_image && (
)}
({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- const [errors, setErrors] = useState>({});
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ const [errors, setErrors] = useState>({})
const validateForm = (): boolean => {
- const newErrors: Record = {};
+ const newErrors: Record = {}
if (!formData.inquiryType) {
- newErrors.inquiryType = "Please select what we can help you with";
+ newErrors.inquiryType = 'Please select what we can help you with'
}
if (!formData.firstName.trim()) {
- newErrors.firstName = "First name is required";
+ newErrors.firstName = 'First name is required'
}
if (!formData.lastName.trim()) {
- newErrors.lastName = "Last name is required";
+ newErrors.lastName = 'Last name is required'
}
if (!formData.email.trim()) {
- newErrors.email = "Email is required";
+ newErrors.email = 'Email is required'
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
- newErrors.email = "Please enter a valid email address";
+ newErrors.email = 'Please enter a valid email address'
}
if (!formData.company.trim()) {
- newErrors.company = "Company name is required";
+ newErrors.company = 'Company name is required'
}
if (!formData.message.trim()) {
- newErrors.message = "Message is required";
+ newErrors.message = 'Message is required'
}
- setErrors(newErrors);
- return Object.keys(newErrors).length === 0;
- };
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
+ e.preventDefault()
if (!validateForm()) {
- return;
+ return
}
- setIsSubmitting(true);
+ setIsSubmitting(true)
try {
- const response = await fetch("/api/contact", {
- method: "POST",
+ const response = await fetch('/api/contact', {
+ method: 'POST',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
- });
+ })
if (response.ok) {
trackGAEvent({
- action: "Contact Form Submitted",
- category: "Contact",
+ action: 'Contact Form Submitted',
+ category: 'Contact',
label: formData.inquiryType,
- });
+ })
setFormData({
- inquiryType: "",
- firstName: "",
- lastName: "",
- email: "",
- company: "",
- message: "",
- });
- setErrors({});
- setIsSubmitted(true);
+ inquiryType: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ company: '',
+ message: '',
+ })
+ setErrors({})
+ setIsSubmitted(true)
} else {
- throw new Error("Failed to submit form");
+ throw new Error('Failed to submit form')
}
} catch (error) {
- console.error("Error submitting form:", error);
- alert("There was an error sending your message. Please try again.");
+ console.error('Error submitting form:', error)
+ alert('There was an error sending your message. Please try again.')
} finally {
- setIsSubmitting(false);
+ setIsSubmitting(false)
}
- };
+ }
const handleInputChange = (field: keyof ContactFormData, value: any) => {
- setFormData((prev) => ({ ...prev, [field]: value }));
+ setFormData((prev) => ({ ...prev, [field]: value }))
if (errors[field]) {
setErrors((prev) => {
- const newErrors = { ...prev };
- delete newErrors[field];
- return newErrors;
- });
+ const newErrors = { ...prev }
+ delete newErrors[field]
+ return newErrors
+ })
}
- };
+ }
if (isSubmitted) {
return (
@@ -131,22 +131,25 @@ export default function ContactPage() {
Thank you for contacting us!
- );
+ )
}
return (
-
-
+
- );
+ )
}
diff --git a/apps/website/app/contact/page.tsx b/apps/website/app/contact/page.tsx
index 7c2343e..b56e51b 100644
--- a/apps/website/app/contact/page.tsx
+++ b/apps/website/app/contact/page.tsx
@@ -1,126 +1,126 @@
-"use client";
+'use client'
-import { useState } from "react";
-import { Container } from "@/components/Container";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useState } from 'react'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import { trackGAEvent } from "@/components/analitycs";
-import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/select'
+import { trackGAEvent } from '@/components/analitycs'
+import AnimatedGridPattern from '@/components/ui/animated-grid-pattern'
+import { cn } from '@/lib/utils'
interface ContactFormData {
- inquiryType: "" | "support" | "sales" | "other";
- firstName: string;
- lastName: string;
- email: string;
- company: string;
- message: string;
+ inquiryType: '' | 'support' | 'sales' | 'other'
+ firstName: string
+ lastName: string
+ email: string
+ company: string
+ message: string
}
export default function ContactPage() {
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [isSubmitted, setIsSubmitted] = useState(false)
const [formData, setFormData] = useState
+
{post.title}
-
+
{formattedDate} • {post.reading_time} min read
-+
{post.custom_excerpt || post.excerpt}
{post.primary_author?.profile_image && (
-
+
- {post.primary_author?.name || "Unknown Author"} + {post.primary_author?.name || 'Unknown Author'}
- We've received your message and will get back to you as soon as - possible. + We've received your message and will get back to you + as soon as possible.
-
+
-
@@ -258,11 +277,15 @@ export default function ContactPage() {
id="email"
type="email"
value={formData.email}
- onChange={(e) => handleInputChange("email", e.target.value)}
+ onChange={(e) =>
+ handleInputChange('email', e.target.value)
+ }
placeholder="your.email@company.com"
/>
{errors.email && (
-
+
@@ -177,15 +180,15 @@ export default function ContactPage() {
htmlFor="inquiryType"
className="block text-sm font-medium text-foreground"
>
- What can we help you with today?{" "}
+ What can we help you with today?{' '}
*
{errors.inquiryType && (
-
@@ -209,19 +216,25 @@ export default function ContactPage() {
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
- First Name *
+ First Name{' '}
+ *
- handleInputChange("firstName", e.target.value)
+ handleInputChange(
+ 'firstName',
+ e.target.value,
+ )
}
placeholder="Your first name"
/>
{errors.firstName && (
-
@@ -230,19 +243,25 @@ export default function ContactPage() {
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
- Last Name *
+ Last Name{' '}
+ *
- handleInputChange("lastName", e.target.value)
+ handleInputChange(
+ 'lastName',
+ e.target.value,
+ )
}
placeholder="Your last name"
/>
{errors.lastName && (
- Contact Us
- Get in touch with our team. We're here to help with any questions - about Dokploy. + Get in touch with our team. We're here to help with + any questions about Dokploy.
{errors.inquiryType}
++ {errors.inquiryType} +
)}{errors.firstName}
++ {errors.firstName} +
)}{errors.lastName}
++ {errors.lastName} +
)}{errors.email}
++ {errors.email} +
)}{errors.company}
++ {errors.company} +
)}