Dev (#38)
* ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * D branch 1 (#32) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * 🚀 fix: update Docker run commands to use specific network * D branch 1 (#34) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * 🚀 fix: update Docker run commands to use specific network * ✨ fix: add error handling for invalid project data * D branch 2 (#35) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ fix: format code for better readability in Contact and Footer components * D branch 2 (#36) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ fix: format code for better readability in Contact and Footer components * 🚀 fix: update Docker commands and remove hardcoded API URL * Update main.yml * Update main.yml * Update main.yml * D branch 1 (#37) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ feat: display base URL in Hero component * Update main.yml * Update next.config.ts * next.config.ts aktualisieren * Update main.yml * ✨ chore: refactor environment variable handling in workflow * ✨ chore: update GitHub Actions workflow for improved security and caching * 🚀 chore: update Trivy action version and enhance config * ✨ chore: update GitHub Actions workflows and add linter * 🚫 chore: remove Docker image vulnerability scan step * ✨ chore: update environment variable logging in workflow * ✨ chore: add dynamic environment for deployment jobs * 🚀 chore: set deployment environment to GitHub ref name * 🎉 chore: remove environment variable exposure in CI/CD * ✨ chore: remove sensitive environment variable logging and update variable references * ✨ chore: log environment variables for debugging purposes * ✨ chore: create .env file for environment variables setup * ✨ feat: copy .env file to Docker image for config * ✨ refactor: update environment variables to public scope * ✨ chore: remove environment variable from Hero component * ✨ fix: update environment variable references in workflow * ✨ chore: add folder structure display to workflow steps * ✨ chore: reorder CI steps for improved workflow clarity * ✨ fix: remove unnecessary console logs and correct base URL variable
This commit is contained in:
denshooter
@@ -1,12 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useRouter,
|
||||
useSearchParams,
|
||||
useParams,
|
||||
usePathname,
|
||||
useRouter,
|
||||
useSearchParams,
|
||||
useParams,
|
||||
usePathname,
|
||||
} from "next/navigation";
|
||||
import {useEffect, useState} from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -16,154 +16,156 @@ import Image from "next/image";
|
||||
import "@/app/styles/ghostContent.css"; // Import the global styles
|
||||
|
||||
interface Project {
|
||||
slug: string;
|
||||
id: string;
|
||||
title: string;
|
||||
feature_image: string;
|
||||
visibility: string;
|
||||
published_at: string;
|
||||
updated_at: string;
|
||||
html: string;
|
||||
reading_time: number;
|
||||
meta_description: string;
|
||||
slug: string;
|
||||
id: string;
|
||||
title: string;
|
||||
feature_image: string;
|
||||
visibility: string;
|
||||
published_at: string;
|
||||
updated_at: string;
|
||||
html: string;
|
||||
reading_time: number;
|
||||
meta_description: string;
|
||||
}
|
||||
|
||||
const ProjectDetails = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const params = useParams();
|
||||
const pathname = usePathname();
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const params = useParams();
|
||||
const pathname = usePathname();
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 150); // Delay to start the animation
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 150); // Delay to start the animation
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const projectData = searchParams.get("project");
|
||||
if (projectData) {
|
||||
setProject(JSON.parse(projectData as string));
|
||||
// Remove the project data from the URL without reloading the page
|
||||
if (typeof window !== "undefined") {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete("project");
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
}
|
||||
} else {
|
||||
// Fetch project data based on slug from URL
|
||||
const slug = params.slug as string;
|
||||
try {
|
||||
fetchProjectData(slug);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setError("Failed to fetch project data");
|
||||
}
|
||||
}
|
||||
}, [searchParams, router, params, pathname]);
|
||||
|
||||
const fetchProjectData = async (slug: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/fetchProject?slug=${slug}`);
|
||||
if (!response.ok) {
|
||||
setError("Failed to fetch project Data");
|
||||
}
|
||||
const projectData = (await response.json()) as { posts: Project[] };
|
||||
if (projectData.posts.length === 0) {
|
||||
setError("Project not found");
|
||||
}
|
||||
setProject(projectData.posts[0]);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch project data:", error);
|
||||
setError("Project not found");
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-radiant">
|
||||
<Header/>
|
||||
<div className="flex-grow flex items-center justify-center">
|
||||
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
||||
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
||||
404
|
||||
</h1>
|
||||
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
||||
{error}
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-6 inline-block text-blue-500 hover:underline"
|
||||
>
|
||||
Go Back Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer_Back/>
|
||||
</div>
|
||||
);
|
||||
useEffect(() => {
|
||||
const projectData = searchParams.get("project");
|
||||
if (projectData) {
|
||||
setProject(JSON.parse(projectData as string));
|
||||
// Remove the project data from the URL without reloading the page
|
||||
if (typeof window !== "undefined") {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete("project");
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
}
|
||||
} else {
|
||||
// Fetch project data based on slug from URL
|
||||
const slug = params.slug as string;
|
||||
try {
|
||||
fetchProjectData(slug);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setError("Failed to fetch project data");
|
||||
}
|
||||
}
|
||||
}, [searchParams, router, params, pathname]);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-radiant">
|
||||
<Header/>
|
||||
<div className="flex-grow flex items-center justify-center">
|
||||
<div
|
||||
className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
|
||||
</div>
|
||||
<Footer_Back/>
|
||||
</div>
|
||||
);
|
||||
const fetchProjectData = async (slug: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/fetchProject?slug=${slug}`);
|
||||
if (!response.ok) {
|
||||
setError("Failed to fetch project Data");
|
||||
}
|
||||
const projectData = (await response.json()) as { posts: Project[] };
|
||||
if (
|
||||
!projectData ||
|
||||
!projectData.posts ||
|
||||
projectData.posts.length === 0
|
||||
) {
|
||||
setError("Project not found");
|
||||
}
|
||||
setProject(projectData.posts[0]);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch project data:", error);
|
||||
setError("Project not found");
|
||||
}
|
||||
};
|
||||
|
||||
const featureImageUrl = project.feature_image
|
||||
? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
|
||||
: "";
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||
>
|
||||
<Header/>
|
||||
<div className="flex-grow">
|
||||
<div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
|
||||
{featureImageUrl && (
|
||||
<div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={featureImageUrl}
|
||||
alt={project.title}
|
||||
fill
|
||||
style={{objectFit: "cover"}}
|
||||
className="rounded-2xl"
|
||||
priority={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-center mt-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-600">
|
||||
{project.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Project Content */}
|
||||
<div className="p-10 pt-12">
|
||||
<div
|
||||
className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
|
||||
<div
|
||||
className="content mt-4 text-gray-600 text-lg leading-relaxed"
|
||||
dangerouslySetInnerHTML={{__html: project.html}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer_Back/>
|
||||
<div className="min-h-screen flex flex-col bg-radiant">
|
||||
<Header />
|
||||
<div className="flex-grow flex items-center justify-center">
|
||||
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
||||
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
||||
404
|
||||
</h1>
|
||||
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
||||
{error}
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-6 inline-block text-blue-500 hover:underline"
|
||||
>
|
||||
Go Back Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer_Back />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-radiant">
|
||||
<Header />
|
||||
<div className="flex-grow flex items-center justify-center">
|
||||
<div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
|
||||
</div>
|
||||
<Footer_Back />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const featureImageUrl = project.feature_image
|
||||
? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||
>
|
||||
<Header />
|
||||
<div className="flex-grow">
|
||||
<div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
|
||||
{featureImageUrl && (
|
||||
<div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={featureImageUrl}
|
||||
alt={project.title}
|
||||
fill
|
||||
style={{ objectFit: "cover" }}
|
||||
className="rounded-2xl"
|
||||
priority={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-center mt-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-600">
|
||||
{project.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Project Content */}
|
||||
<div className="p-10 pt-12">
|
||||
<div className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
|
||||
<div
|
||||
className="content mt-4 text-gray-600 text-lg leading-relaxed"
|
||||
dangerouslySetInnerHTML={{ __html: project.html }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer_Back />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetails;
|
||||
|
||||
Reference in New Issue
Block a user