feat(app): changes in SEO across entire app

not-byte · May 1, 2024 · 712903b · 712903b
1 parent 36cf766
commit 712903b
Show file tree

Hide file tree

Showing 30 changed files with 353 additions and 93 deletions.
diff --git a/public/lukasz.png b/public/lukasz.png
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"notByte website","short_name":"notByte","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png", "purpose": "any"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png", "purpose": "maskable"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -78,7 +78,7 @@ export const metadata = {
   metadataBase: new URL(baseUrl),
   title: {
     default: "notByte",
-    template: `%s | notByte`,
+    template: `notByte | %s`,
   },
   description: "Unleash the digital future, with our Web Alchemy.",
   keywords:
@@ -106,6 +106,9 @@ export default function RootLayout({
       <body className="bg-white dark:bg-night overflow-x-hidden">
         <Providers>
           <Navbar />
+          {/* not yet used, will be used for some external api calls */}
+          <div id="progress_bar"></div>
+          <div id="dialog"></div>
           {children}
           <Toaster position="bottom-right" reverseOrder={false} />
           <Footer />

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const NotFound = () => {
+  return (
+    <div className="h-[100vh] flex justify-center items-center text-7xl">
+      <h1>not found</h1>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -34,9 +34,9 @@ export default function Home() {
       <Header />
       <About
         heading={
-          <h1 className="text-5xl wqhd:text-7xl font-semibold text-gray-800 dark:text-gray-200 mb-[5vh]">
+          <h2 className="text-5xl wqhd:text-7xl font-semibold text-gray-800 dark:text-gray-200 mb-[5vh]">
             Meet our team!
-          </h1>
+          </h2>
         }
       >
         <ProfileWrapper profiles={smallProfiles} />

diff --git a/src/app/profiles/[profileID]/page.tsx b/src/app/profiles/[profileID]/page.tsx
@@ -11,20 +11,49 @@ import { EducationSectionAnimationWrapper } from "@/components/Pages/Profile/com
 import { EducationSection } from "@/components/Pages/Profile/components/Education";
 import { ProfileFallback } from "@/components/Pages/Profile/profileShell";
 
-interface PageProps {
+interface Props {
   params: {
     profileID: string;
   };
 }
 
-//the reason we are passing components as children is to render them on the server, for example basicInfo is not rendered on the server but infoServer is,
-const ProfilePage = ({ params }: PageProps) => {
+export async function generateStaticParams() {
+  return profiles.map((profile) => ({
+    profileID: profile.id,
+  }));
+}
+
+export async function generateMetadata({ params }: Props) {
+  const id = params.profileID;
+  const profile = profiles.find((item) => item.id === id);
+
+  if (!profile) {
+    return {
+      title: "profile not found",
+      description: "no description beacuse profile was not found",
+    };
+  }
+
+  return {
+    title: {
+      default: `profile of ${profile.name}`,
+      template: `%s | Profile of ${profile.name}`,
+    },
+    description: profile.shortDescription,
+    alternates: {
+      canonical: `/profiles/${profile.id}`,
+    },
+  };
+}
+
+const ProfilePage = ({ params }: Props) => {
   const id = params.profileID;
   const profile = profiles.find((item) => item.id === id);
 
   if (!profile) {
     return <ProfileFallback />;
   }
+
   return (
     <ProfileComp
       profile={profile}
@@ -40,9 +69,13 @@ const ProfilePage = ({ params }: PageProps) => {
         </EducationSectionAnimationWrapper>
       }
       ProfileSummary={
-        <SkillsSectionAnimationWrapper>
-          <SkillsSection awards={profile.awards!} />
-        </SkillsSectionAnimationWrapper>
+        <>
+          {profile.awards ? (
+            <SkillsSectionAnimationWrapper>
+              <SkillsSection awards={profile.awards!} />
+            </SkillsSectionAnimationWrapper>
+          ) : null}
+        </>
       }
     />
   );

diff --git a/src/app/projects/[projectID]/opengraph-image.tsx b/src/app/projects/[projectID]/opengraph-image.tsx
@@ -1,6 +1,46 @@
 //opengraph image creation for dynamic metadata
+import { projects } from "@/lib/data/projects/projectsData";
 import React from "react";
+import { ImageResponse } from "next/og";
+import Image from "next/image";
 
-export default function Opengraph() {
-  return <div>opengraph-image</div>;
+interface PageProps {
+  params: {
+    projectID: number;
+  };
+}
+
+export const size = {
+  width: 500,
+  height: 500,
+};
+
+export default function og({ params }: PageProps) {
+  const id = params.projectID;
+  const project = projects.find((item) => item.id == id);
+
+  if (!project) {
+    return new ImageResponse(
+      (
+        <Image
+          src={"/logo-black.png"}
+          alt={"profile does not exist"}
+          width={500}
+          height={500}
+        />
+      ),
+      size
+    );
+  }
+  return new ImageResponse(
+    (
+      <Image
+        src={project.bannerUrl}
+        alt={project.title}
+        width={500}
+        height={500}
+      />
+    ),
+    { width: 1024, height: 500 }
+  );
 }
diff --git a/src/app/projects/[projectID]/page.tsx b/src/app/projects/[projectID]/page.tsx
@@ -2,14 +2,45 @@ import ProjectDetails from "@/components/Pages/Project";
 import { projects } from "@/lib/data/projects/projectsData";
 import React from "react";
 
-//generowanie metadaty itd itp
-interface PageProps {
+interface Props {
   params: {
     projectID: number;
   };
 }
 
-const ProjectPage = ({ params }: PageProps) => {
+export async function generateStaticParams() {
+  return projects.map((project) => ({
+    projectID: String(project.id),
+  }));
+}
+
+export async function generateMetadata({ params }: Props) {
+  const id = params.projectID;
+  const project = projects.find((item) => item.id === id);
+
+  if (!project) {
+    return {
+      title: "project not found",
+      description: "no description beacuse project was not found",
+    };
+  }
+
+  return {
+    title: {
+      default: `project ${project.title}`,
+      template: `%s | project ${project.title}`,
+    },
+    description: project.description,
+    alternates: {
+      canonical: `/projects/${project.id}`,
+    },
+  };
+}
+
+const ProjectPage = ({ params }: Props) => {
+  if (!projects[params.projectID - 5]) {
+    return <></>;
+  }
   return <ProjectDetails project={projects[params.projectID - 5]} />;
 };
 

diff --git a/src/components/Content/About/index.tsx b/src/components/Content/About/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { motion, useAnimation } from "framer-motion";
 import { useInView } from "react-intersection-observer";
 import useResponsiveRootMargin from "@/hooks/responsiveRootMargin";

diff --git a/src/components/Content/FAQ/index.tsx b/src/components/Content/FAQ/index.tsx
@@ -4,9 +4,9 @@ import { FAQItem } from "./FAQItem";
 const FaqSection = () => {
   return (
     <div className="p-6 space-y-6 w-full flex justify-center flex-col items-center overflow-hidden mt-[30vh]">
-      <h1 className="text-5xl wqhd:text-7xl text-black dark:text-white mb-20 font-semibold">
+      <h2 className="text-5xl wqhd:text-7xl text-black dark:text-white mb-20 font-semibold">
         FAQ
-      </h1>
+      </h2>
       {faqs.map((faq, index) => (
         <FAQItem key={index} faq={faq} />
       ))}

diff --git a/src/components/Content/Plans/index.tsx b/src/components/Content/Plans/index.tsx
@@ -71,9 +71,9 @@ interface TimelineProps {}
 const Timeline: React.FC<TimelineProps> = () => {
   return (
     <div className="relative container mx-auto px-4 py-8 overflow-hidden mt-[30vh] ">
-      <h1 className="text-5xl wqhd:text-7xl pb-20 text-center dark:text-white text-black font-semibold">
+      <h2 className="text-5xl wqhd:text-7xl pb-20 text-center dark:text-white text-black font-semibold">
         Future development plans
-      </h1>
+      </h2>
       <div className="absolute sm:opacity-0 md:opacity-100 md:left-[50%] transform -translate-x-[50%] w-[1px] bg-black dark:bg-grey-darkest h-full z-0"></div>
 
       <div className="space-y-8 flex flex-col items-center py-8 ">

diff --git a/src/components/Pages/Profile/components/BasicInfo/AnimationWrapper.tsx b/src/components/Pages/Profile/components/BasicInfo/AnimationWrapper.tsx
@@ -11,7 +11,7 @@ export const BasicInfoAnimationWrapper = ({
 }) => {
   return (
     <motion.div
-      className="ml-10 mt-10 md:mt-0  p-6 rounded-lg flex justify-centerh-full  flex-col w-[90vw] xl:w-[50vw]  "
+      className="ml-10 mt-10 md:mt-0  p-6 rounded-lg flex justify-centerh-full  flex-col w-[90vw] xl:w-[50vw] "
       {...slideAnimation("right")}
     >
       {children}

diff --git a/src/components/Pages/Profile/components/BasicInfo/index.tsx b/src/components/Pages/Profile/components/BasicInfo/index.tsx
@@ -4,7 +4,7 @@ import { SocialIcon } from "react-social-icons";
 
 export const BasicInfoSection = async ({ profile }: { profile: Profile }) => {
   return (
-    <div className="">
+    <div className="overflow-hidden">
       <h1 className="text-2xl md:text-3xl lg:text-4xl wqhd:text-5xl font-extrabold dark:text-white text-gray-800 text-center md:text-left">
         {profile.name}
       </h1>

diff --git a/src/components/Pages/Profile/components/Education/index.tsx b/src/components/Pages/Profile/components/Education/index.tsx
@@ -10,7 +10,7 @@ export const EducationSection = ({
   educations: Education[];
 }) => {
   return (
-    <div className="container mx-auto px-4 lg:px-8">
+    <div className="container mx-auto px-4 lg:px-8 overflow-hidden">
       <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl wqhd:text-7xl 4k:text-7xl  font-bold text-center text-black dark:text-white mb-10">
         Education
       </h1>

diff --git a/src/components/Pages/Profile/components/Experience/index.tsx b/src/components/Pages/Profile/components/Experience/index.tsx
@@ -11,7 +11,7 @@ export const ExperienceSection: React.FC<ExperienceProps> = ({
   experience,
 }) => {
   return (
-    <section className="w-full py-8 overflow-hidden mt-[25vh]">
+    <section className="w-full py-8 overflow-hidden mt-[25vh] overflow-y-hidden">
       <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
         <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl wqhd:text-7xl 4k:text-7xl font-bold text-center text-gray-900 dark:text-white mb-8">
           Experience

diff --git a/src/components/Pages/Profile/components/Skills/index.tsx b/src/components/Pages/Profile/components/Skills/index.tsx
@@ -21,7 +21,7 @@ export const SkillsSection = ({ awards }: ProfileSummaryProps) => {
       </h2>
 
       <div className="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5 lg:gap-6 w-full ">
-        {awards.map((award, index) => (
+        {awards?.map((award, index) => (
           <div
             key={index}
             className="flex flex-col justify-between bg-colors dark:bg-darkModeColors rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 hover:scale-105 transition-transform ease-in-out duration-300 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-[48%]   mx-auto"

diff --git a/src/components/Pages/Profile/index.tsx b/src/components/Pages/Profile/index.tsx
@@ -32,7 +32,7 @@ const ProfileComp = ({
   }, []);
 
   return (
-    <div className="overflow-x-hidden">
+    <div className="overflow-hidden">
       <div className="flex flex-col items-center sm:flex-row  justify-start p-4 sm:p-6 md:p-8 lg:p-10 w-full h-full text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white 2xl:pt-[20vh]">
         <motion.div
           className={styles.block}

diff --git a/src/components/Pages/Profile/profileShell.tsx b/src/components/Pages/Profile/profileShell.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from "react";
 
-export const ProfileShell = () => {
+export const ProfileFallback = () => {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center ">
       <div className="max-w-md w-full  rounded-lg shadow-md p-8 ">

diff --git a/src/components/Pages/Project/components/Collaborators/index.tsx b/src/components/Pages/Project/components/Collaborators/index.tsx
@@ -8,7 +8,7 @@ type Props = {
 };
 export const Collabarators = ({ collaborators }: Props) => {
   return (
-    <div className="mt-[25vh]">
+    <div className="mt-[30vh]">
       {" "}
       <h2 className="text-7xl text-black dark:text-white  text-center font-semibold ">
         Collaborators

diff --git a/src/components/Pages/Project/components/Feedback/index.tsx b/src/components/Pages/Project/components/Feedback/index.tsx
diff --git a/src/components/Pages/Project/components/Gallery/Dialog/helper.ts b/src/components/Pages/Project/components/Gallery/Dialog/helper.ts
@@ -0,0 +1,6 @@
+import { Dimmension } from "./model";
+
+export const shouldImageBeScaled = (dimmensions: Dimmension) => {
+  if (dimmensions.width * 0.7 < dimmensions.height) return true;
+  else return false;
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
		{"name":"notByte website","short_name":"notByte","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png", "purpose": "any"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png", "purpose": "maskable"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}