minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

Merge branch 'main' of https://gits.techvanguard.vn/UKSOURCE/hailearning.edu.vn into fea/thanh-02022026-news

Browse Source
This commit is contained in:
Wini_Fy
2026-02-05 16:01:26 +07:00
parent 11f435378f 774d531aa1
commit 9e6fc061a4
8 changed files with 213 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
api/footerApi.ts Normal file
View File

@@ -0,0 +1,62 @@
/**
* Footer API Functions
* Fetch footer data from external API
*/
const getApiUrl = (): string => {
return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
};
export interface FooterData {
top: {
bgImage: string;
phone: {
display: string;
href: string;
};
address: string;
logo: {
src: string;
alt: string;
href: string;
};
menuLinks: Array<{
label: string;
href: string;
}>;
socialLinks: Array<{
icon: string;
href: string;
}>;
};
bottom: {
copyright: {
text: string;
brand: string;
rights: string;
};
menuLinks: Array<{
label: string;
href: string;
}>;
};
}
export const footerApi = {
// Get footer data
getFooter: async (): Promise<FooterData> => {
try {
const apiUrl = getApiUrl();
const response = await fetch(`${apiUrl}/api/footer`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Error fetching footer data:", error);
// Fallback to static data if API fails
const fallbackData = await import("../app/components/layout/Footer/footer.json");
return fallbackData.default as FooterData;
}
},
};

5
api/index.ts
View File

@@ -1,5 +1,6 @@
/**
* Export all API functions
*/
export * from './blogsApi';
export * from './homeApi';
export * from "./blogsApi";
export * from "./footerApi";
export * from "./servicesApi";

114
app/blog/[slug]/page.tsx
View File

@@ -20,65 +20,67 @@ export async function generateStaticParams() {
}
interface BlogDetailsPageProps {
params: Promise<{
slug: string;
}> | {
slug: string;
};
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
}
// SEO metadata cho từng bài blog (Open Graph / thumbnail khi share)
export async function generateMetadata({
params,
params,
}: {
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
}): Promise<Metadata> {
const resolvedParams = params instanceof Promise ? await params : params;
const slug = resolvedParams.slug;
const resolvedParams = params instanceof Promise ? await params : params;
const slug = resolvedParams.slug;
try {
const blogResponse = await fetchBlogDetail(slug);
const post = blogResponse.data;
try {
const blogResponse = await fetchBlogDetail(slug);
const post = blogResponse.data;
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
const url = `${siteUrl}/blog/${post.slug}`;
const imageUrl = post.featuredImage
? getCmsImageUrl(post.featuredImage)
: `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
const url = `${siteUrl}/blog/${post.slug}`;
const imageUrl = post.featuredImage
? getCmsImageUrl(post.featuredImage)
: `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
url,
type: "article",
images: [
{
url: imageUrl,
alt: post.title,
},
],
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.excerpt,
images: [imageUrl],
},
};
} catch {
return {
title: "Blog Details",
};
}
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
url,
type: "article",
images: [
{
url: imageUrl,
alt: post.title,
},
],
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.excerpt,
images: [imageUrl],
},
};
} catch {
return {
title: "Blog Details",
};
}
}
export default async function BlogDetailsPage({ params }: BlogDetailsPageProps) {
@@ -100,18 +102,18 @@ export default async function BlogDetailsPage({ params }: BlogDetailsPageProps)
<div className="row g-4">
<div className="col-lg-8 col-12">
<div className="py-5">
<h2>Post not found</h2>
<p>The blog post you are looking for does not exist.</p>
<Link href="/blog" className="theme-btn mt-3">
Back to Blog <i className="fa-solid fa-arrow-right"></i>
</Link>
<h2>Post not found</h2>
<p>The blog post you are looking for does not exist.</p>
<Link href="/blog" className="theme-btn mt-3">
Back to Blog <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
{/* Sidebar on the right */}
<Sidebar />
</div>
</div>
</div>
</div>
</section>
</>
);

32
app/blog/category/[slug]/page.tsx
View File

@@ -4,22 +4,21 @@ import Sidebar from "@/app/blog/components/Sidebar";
import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blogsApi";
interface CategoryPageProps {
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
}
export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
// Handle both Promise and direct object
const resolvedParams = params instanceof Promise ? await params : params;
const slug = resolvedParams.slug;
const resolvedSearchParams =
searchParams instanceof Promise ? await searchParams : searchParams;
const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
const searchQuery = resolvedSearchParams?.search?.toString() || "";
const pageParam = resolvedSearchParams?.page?.toString() || "1";
const currentPage = Number.parseInt(pageParam, 10) || 1;
@@ -30,9 +29,9 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
[categoryResponse, blogsResponse] = await Promise.all([
fetchCategoryDetail(slug),
fetchBlogsByCategory(slug, {
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
}),
]);
} catch {
@@ -64,12 +63,7 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
return (
<>
<Breadcrumb title={category.name} current="Blog Category" />
<NewsSection
blogs={blogs}
categorySlug={slug}
searchQuery={searchQuery}
pagination={pagination}
/>
<NewsSection blogs={blogs} categorySlug={slug} searchQuery={searchQuery} pagination={pagination} />
</>
);
}

40
app/blog/page.tsx
View File

@@ -3,31 +3,27 @@ import NewsSection from "./components/NewsSection";
import { fetchBlogList } from "@/api/blogsApi";
interface NewsPageProps {
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
}
export default async function NewsPage({ searchParams }: NewsPageProps) {
const resolvedSearchParams =
searchParams instanceof Promise ? await searchParams : searchParams;
const searchQuery = resolvedSearchParams?.search?.toString() || "";
const pageParam = resolvedSearchParams?.page?.toString() || "1";
const currentPage = Number.parseInt(pageParam, 10) || 1;
const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
const searchQuery = resolvedSearchParams?.search?.toString() || "";
const pageParam = resolvedSearchParams?.page?.toString() || "1";
const currentPage = Number.parseInt(pageParam, 10) || 1;
// Fetch blog list from API
const blogResponse = await fetchBlogList({
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
});
const { blogs, pagination } = blogResponse.data;
// Fetch blog list from API
const blogResponse = await fetchBlogList({
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
});
const { blogs, pagination } = blogResponse.data;
return (
<>
<Breadcrumb
title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"}
current="Blog Standard"
/>
<NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
</>
);
return (
<>
<Breadcrumb title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"} current="Blog Standard" />
<NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
</>
);
}

25
app/blog/tag/[slug]/page.tsx
View File

@@ -4,22 +4,21 @@ import Sidebar from "@/app/blog/components/Sidebar";
import { fetchBlogsByTag, fetchTagDetail } from "@/api/blogsApi";
interface TagPageProps {
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
params:
| Promise<{
slug: string;
}>
| {
slug: string;
};
searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
}
export default async function TagPage({ params, searchParams }: TagPageProps) {
// Handle both Promise and direct object
const resolvedParams = params instanceof Promise ? await params : params;
const slug = resolvedParams.slug;
const resolvedSearchParams =
searchParams instanceof Promise ? await searchParams : searchParams;
const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
const searchQuery = resolvedSearchParams?.search?.toString() || "";
const pageParam = resolvedSearchParams?.page?.toString() || "1";
const currentPage = Number.parseInt(pageParam, 10) || 1;
@@ -30,9 +29,9 @@ export default async function TagPage({ params, searchParams }: TagPageProps) {
[tagResponse, blogsResponse] = await Promise.all([
fetchTagDetail(slug),
fetchBlogsByTag(slug, {
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
page: currentPage,
limit: 3,
...(searchQuery ? { search: searchQuery } : {}),
}),
]);
} catch {

26
app/components/layout/Footer/FooterBottom.tsx
View File

@@ -1,8 +1,28 @@
import Link from 'next/link';
import footerData from './footer.json';
"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { footerApi, FooterData } from "../../../../api/footerApi";
import footerData from "./footer.json";
const FooterBottom = () => {
const { bottom } = footerData;
const [data, setData] = useState<FooterData>(footerData as FooterData);
useEffect(() => {
const loadFooterData = async () => {
try {
const apiData = await footerApi.getFooter();
setData(apiData);
} catch (error) {
console.error("Failed to load footer data from API, using static data:", error);
// Keep using static data as fallback
}
};
loadFooterData();
}, []);
const { bottom } = data;
return (
<div className="footer-bottom">

26
app/components/layout/Footer/FooterTop.tsx
View File

@@ -1,8 +1,28 @@
import Link from 'next/link';
import footerData from './footer.json';
"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { footerApi, FooterData } from "../../../../api/footerApi";
import footerData from "./footer.json";
const FooterTop = () => {
const { top } = footerData;
const [data, setData] = useState<FooterData>(footerData as FooterData);
useEffect(() => {
const loadFooterData = async () => {
try {
const apiData = await footerApi.getFooter();
setData(apiData);
} catch (error) {
console.error("Failed to load footer data from API, using static data:", error);
// Keep using static data as fallback
}
};
loadFooterData();
}, []);
const { top } = data;
return (
<footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>