From ad86f2e79e3e61590f8d960226486ba4ba0e3bc1 Mon Sep 17 00:00:00 2001 From: Alibek Date: Thu, 14 Mar 2024 04:13:08 +0600 Subject: [PATCH] improved seo, made not-found page, fixed bugs in news details and in report datails pages --- src/app/[locale]/about-us/page.tsx | 17 ++++++- src/app/[locale]/layout.tsx | 3 +- src/app/[locale]/news/[id]/error.tsx | 9 ++++ src/app/[locale]/news/[id]/page.tsx | 24 +++++++++- src/app/[locale]/not-found.tsx | 9 ++++ src/app/[locale]/page.tsx | 19 +++++++- src/app/[locale]/report/[id]/error.tsx | 9 ++++ src/app/[locale]/report/[id]/page.tsx | 44 +++++++++++++----- src/app/[locale]/statistics/page.tsx | 16 +++++-- src/app/[locale]/volunteers/page.tsx | 2 +- src/app/{[locale] => }/globals.scss | 0 src/app/not-found.tsx | 8 ++-- src/entities/NewsCard/NewsCard.tsx | 2 +- src/features/BreadCrumbs/BreadCrumbs.tsx | 2 +- src/widgets/NotFound/NotFound.scss | 51 +++++++++++++++++++++ src/widgets/NotFound/NotFound.tsx | 21 +++++++++ src/widgets/NotFound/assets/not-found.svg | 16 +++++++ src/widgets/forms/SignInForm/SignInForm.tsx | 2 - 18 files changed, 224 insertions(+), 30 deletions(-) create mode 100644 src/app/[locale]/news/[id]/error.tsx create mode 100644 src/app/[locale]/not-found.tsx create mode 100644 src/app/[locale]/report/[id]/error.tsx rename src/app/{[locale] => }/globals.scss (100%) create mode 100644 src/widgets/NotFound/NotFound.scss create mode 100644 src/widgets/NotFound/NotFound.tsx create mode 100644 src/widgets/NotFound/assets/not-found.svg diff --git a/src/app/[locale]/about-us/page.tsx b/src/app/[locale]/about-us/page.tsx index 9ed59b9..f259970 100644 --- a/src/app/[locale]/about-us/page.tsx +++ b/src/app/[locale]/about-us/page.tsx @@ -7,7 +7,22 @@ import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; export const metadata: Metadata = { title: "KG ROAD | О нас", - description: 'Страница "О Нас" KG ROAD', + description: + "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.", + keywords: [ + "Миссия Transparency International - Кыргызстан", + "Цели и приоритеты ТИ-Кыргызстан", + ], + openGraph: { + images: [ + { + url: header.src, + }, + ], + title: "KG ROAD | О нас", + description: + "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.", + }, }; const AboutUs = () => { diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 2c463f6..41aa513 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -1,5 +1,4 @@ -import type { Metadata } from "next"; -import "./globals.scss"; +import "../globals.scss"; import "./App.scss"; import "@/shared/fonts/fonts.scss"; import Navbar from "@/widgets/Navbar/Navbar"; diff --git a/src/app/[locale]/news/[id]/error.tsx b/src/app/[locale]/news/[id]/error.tsx new file mode 100644 index 0000000..bfad1b1 --- /dev/null +++ b/src/app/[locale]/news/[id]/error.tsx @@ -0,0 +1,9 @@ +"use client"; + +import NotFound from "@/widgets/NotFound/NotFound"; + +const error = () => { + return ; +}; + +export default error; diff --git a/src/app/[locale]/news/[id]/page.tsx b/src/app/[locale]/news/[id]/page.tsx index aee5392..ea5b351 100644 --- a/src/app/[locale]/news/[id]/page.tsx +++ b/src/app/[locale]/news/[id]/page.tsx @@ -7,11 +7,33 @@ import message from "./icons/message.svg"; import calendar from "./icons/calendar.svg"; import ReviewSection from "@/widgets/ReviewSection/ReviewSection"; import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; +import { Metadata } from "next"; + +export async function generateMetadata({ + params, +}: { + params: { id: string }; +}): Promise { + const response = await apiInstance.get( + `/news/${params.id}/` + ); + + return { + title: response.data.title, + description: response.data.description, + openGraph: { + images: [response.data.image], + type: "article", + publishedTime: response.data.created_at, + }, + keywords: ["Новости КР", "Дорожные происшествия", "Кыргызстан"], + }; +} const NewsDetails = async ({ params, }: { - params: { id: string }; + params: { id: string; новость: string }; }) => { const getNewsById = async () => { const response = await apiInstance.get( diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx new file mode 100644 index 0000000..b5a4f3f --- /dev/null +++ b/src/app/[locale]/not-found.tsx @@ -0,0 +1,9 @@ +"use client"; + +import NotFound from "@/widgets/NotFound/NotFound"; +import "../globals.scss"; +import "@/shared/fonts/fonts.scss"; + +export default function NotFoundPage() { + return ; +} diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index 914479a..a414579 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -8,7 +8,24 @@ import { Metadata } from "next"; export const metadata: Metadata = { title: "KG ROAD | Главная", description: - "Главная страница KG ROAD", + "Главная страница KG ROAD | Сделаем дороги безопасными!", + keywords: [ + "Новости", + "Разбитые дороги", + "Очаги аварийности", + "Локальные дефекты", + "Дороги В планах ремонта", + "Отремонтированные дороги", + "Исправленные локальные дефекты", + "Карта дорог", + "Рейтинг", + ], + openGraph: { + title: "KG ROAD | Главная", + description: + "Главная страница KG ROAD | Сделаем дороги безопасными!", + type: "website", + }, }; const Home = async ({ diff --git a/src/app/[locale]/report/[id]/error.tsx b/src/app/[locale]/report/[id]/error.tsx new file mode 100644 index 0000000..bfad1b1 --- /dev/null +++ b/src/app/[locale]/report/[id]/error.tsx @@ -0,0 +1,9 @@ +"use client"; + +import NotFound from "@/widgets/NotFound/NotFound"; + +const error = () => { + return ; +}; + +export default error; diff --git a/src/app/[locale]/report/[id]/page.tsx b/src/app/[locale]/report/[id]/page.tsx index 4e56ddb..ac2d6a2 100644 --- a/src/app/[locale]/report/[id]/page.tsx +++ b/src/app/[locale]/report/[id]/page.tsx @@ -6,6 +6,8 @@ import ReportInformation from "@/widgets/report-details/ReportInformation/Report import ReportImages from "@/widgets/report-details/ReportImages/ReportImages"; import dynamic from "next/dynamic"; import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; +import NotFound from "@/widgets/NotFound/NotFound"; +import { apiInstance } from "@/shared/config/apiConfig"; const DynamicMap = dynamic( () => import("@/widgets/report-details/ReportMap/ReportMap"), @@ -14,27 +16,45 @@ const DynamicMap = dynamic( } ); -export const metadata: Metadata = { - title: "KG ROAD | Обращение", - description: - "Страница обращения Kyrgyzstan Transperency International", -}; +export async function generateMetadata({ + params, +}: { + params: { id: string }; +}): Promise { + const response = await apiInstance.get( + `/report/${params.id}/` + ); + + return { + title: `KG ROAD | ${response.data.location[0].address}`, + description: response.data.description, + openGraph: { + title: `KG ROAD | ${response.data.location[0].address}`, + description: response.data.description, + images: [response.data.image[0].image], + type: "website", + }, + }; +} const ReportDetails = async ({ params, }: { params: { id: string }; }) => { - console.log(JSON.parse(params.id)); const getReportDetails = async () => { - const res = await fetch( - `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`, - { cache: "no-store" } - ); + try { + const res = await fetch( + `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`, + { cache: "no-store" } + ); - return res.json(); + return res.json(); + } catch (error) { + console.log(error); + } }; - const report: IReport = (await getReportDetails()) || {}; + const report: IReport = await getReportDetails(); return (
diff --git a/src/app/[locale]/statistics/page.tsx b/src/app/[locale]/statistics/page.tsx index a4a2868..763bebf 100644 --- a/src/app/[locale]/statistics/page.tsx +++ b/src/app/[locale]/statistics/page.tsx @@ -4,11 +4,17 @@ import StatisticsTable from "@/widgets/tables/StatisticsTable/StatisticsTable"; import { Metadata } from "next"; import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; -export const metadata: Metadata = { - title: "KG ROAD | Статистика", - description: "Страница статистики KG ROAD", -}; - +export async function generateMetadata({ + searchParams, +}: { + searchParams: { "поиск-населенного-пункта": string }; +}): Promise { + return { + title: "KG ROAD | Статистика", + description: `Статистика по ${searchParams["поиск-населенного-пункта"]} KG ROAD`, + keywords: ["Бишкек", "Чуй", "Кыргызстан", "Дороги"], + }; +} const Statistics = ({ searchParams, }: { diff --git a/src/app/[locale]/volunteers/page.tsx b/src/app/[locale]/volunteers/page.tsx index 9f2c50e..d5ed4ac 100644 --- a/src/app/[locale]/volunteers/page.tsx +++ b/src/app/[locale]/volunteers/page.tsx @@ -6,7 +6,7 @@ import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; export const metadata: Metadata = { title: "KG ROAD | Волонтеры", - description: "Страница волонтеров KG ROAD", + description: "Страница лучших волонтеров Кыргызской Республики!", }; const Volunteers = () => { diff --git a/src/app/[locale]/globals.scss b/src/app/globals.scss similarity index 100% rename from src/app/[locale]/globals.scss rename to src/app/globals.scss diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 23405db..fd13021 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,12 +1,14 @@ "use client"; -import Error from "next/error"; +import NotFound from "@/widgets/NotFound/NotFound"; +import "./globals.scss"; +import "@/shared/fonts/fonts.scss"; -export default function NotFound() { +export default function NotFoundPage() { return ( - + ); diff --git a/src/entities/NewsCard/NewsCard.tsx b/src/entities/NewsCard/NewsCard.tsx index 43ba62b..1d866d2 100644 --- a/src/entities/NewsCard/NewsCard.tsx +++ b/src/entities/NewsCard/NewsCard.tsx @@ -61,7 +61,7 @@ const NewsCard: React.FC = ({ diff --git a/src/features/BreadCrumbs/BreadCrumbs.tsx b/src/features/BreadCrumbs/BreadCrumbs.tsx index d6ca14b..e421cb0 100644 --- a/src/features/BreadCrumbs/BreadCrumbs.tsx +++ b/src/features/BreadCrumbs/BreadCrumbs.tsx @@ -14,7 +14,7 @@ const BreadCrumbs: React.FC = ({ homeRequired, }: IBreadcrumbsProps) => { const pathname = usePathname(); - const query = useSearchParams().get("title"); + const query = useSearchParams().get("новость"); const routes = pathname.split("/").filter((route) => route !== ""); const tRoutes: Record = { "about-us": "О нас", diff --git a/src/widgets/NotFound/NotFound.scss b/src/widgets/NotFound/NotFound.scss new file mode 100644 index 0000000..8cfd3d5 --- /dev/null +++ b/src/widgets/NotFound/NotFound.scss @@ -0,0 +1,51 @@ +.not-found { + padding: 16px; + margin-bottom: 200px; + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 100%; + height: 497px; + aspect-ratio: 1 / 1; + } + + div { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + text-align: center; + + h2 { + color: rgb(11, 31, 51); + font-size: 20px; + font-weight: 800; + line-height: 24px; + } + + p { + color: rgb(131, 130, 130); + font-size: 20px; + font-weight: 400; + line-height: 24px; + } + } + + a { + max-width: 320px; + width: 100%; + height: 55px; + margin-top: 62px; + display: flex; + align-items: center; + justify-content: center; + color: rgb(255, 255, 255); + font-size: 20px; + font-weight: 800; + line-height: 24px; + border-radius: 13px; + background-color: rgb(57, 152, 232); + } +} diff --git a/src/widgets/NotFound/NotFound.tsx b/src/widgets/NotFound/NotFound.tsx new file mode 100644 index 0000000..f4d3313 --- /dev/null +++ b/src/widgets/NotFound/NotFound.tsx @@ -0,0 +1,21 @@ +import Link from "next/link"; +import not_found from "./assets/not-found.svg"; +import "./NotFound.scss"; + +const NotFound = () => { + return ( +
+ Not Found Image +
+

Страница не найдена (404)

+

+ Неправильно набран адрес или такой страницы не существует. +

+
+ + На главную +
+ ); +}; + +export default NotFound; diff --git a/src/widgets/NotFound/assets/not-found.svg b/src/widgets/NotFound/assets/not-found.svg new file mode 100644 index 0000000..5c5309a --- /dev/null +++ b/src/widgets/NotFound/assets/not-found.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/widgets/forms/SignInForm/SignInForm.tsx b/src/widgets/forms/SignInForm/SignInForm.tsx index 2f9b431..71a84a2 100644 --- a/src/widgets/forms/SignInForm/SignInForm.tsx +++ b/src/widgets/forms/SignInForm/SignInForm.tsx @@ -48,8 +48,6 @@ const SignInForm = () => { setLoader(false); - console.log(res); - if (res?.ok && !res.error) { router.push("/profile/personal"); } else if (res?.status.toString().slice(0, 1) === "4") {