209 add headingstitles to blog satellite page also add common margins…

…paddin around most pages (#236)

* feat(frontend): ✨ padding and pageheader components, add to all layouts

* utilize pageHeader and subtitle

* wip blog posts refactor

* finally fix grid responsiveness

* add blocksrenderer back to blogcard

* blogs styling and refactoring

* fix(frontend): fix key prop warning

* run prettier

* refactor(frontend): ♻️ Refactor code in satellite page and move to satelliteCard component

* refactor(frontend): ♻️ Run prettier

---------

Co-authored-by: Lucas Tran <lucastra@stud.ntnu.no>

frontend/src/app/blog/blogDataCards.tsx

@@ -1,6 +1,7 @@
 import FullBlogCard from "@/components/fullBlogCard";
 import BlogpageButtons from "@/components/BlogpageButtons";
 import { BlogPost } from "./page";
+import React from "react";
 
 export default async function BlogDataCards({
     articles,
@@ -16,34 +17,34 @@ export default async function BlogDataCards({
     }
 
     return (
-        <div className="flex w-3/4 flex-row flex-wrap items-center justify-center self-center">
-            {articles.map((article: any) => {
-                return (
-                    <div
-                        key={article.id}
-                        className={
-                            article.firstArticle
-                                ? "flex w-full flex-col items-center justify-center"
-                                : "flex w-1/3 flex-col items-center justify-center"
-                        }
-                    >
-                        <FullBlogCard
-                            key={article.id}
-                            firstArticle={article.firstArticle}
-                            content={article.content}
-                            coverImage={article.coverImage}
-                            datePublished={article.datePublished}
-                            tag={article.tag}
-                            HOST_URL={article.HOST_URL}
-                            authorName={article.authorName}
-                            avatarURL={article.avatarURL}
-                            slug={article.slug}
-                            title={article.title}
-                        />{" "}
-                        {article.firstArticle ? <BlogpageButtons /> : null}
-                    </div>
-                );
-            })}
-        </div>
+        <>
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <BlogpageButtons className="col-span-full" />
+                {/* Only map fist article */}
+                {articles.map((article: BlogPost) => {
+                    if (article.firstArticle) {
+                        return (
+                            <React.Fragment key={article.key}>
+                                <FullBlogCard
+                                    className="col-span-full"
+                                    article={article}
+                                />
+                            </React.Fragment>
+                        );
+                    }
+                })}
+
+                {articles.map((article: BlogPost) => {
+                    if (article.firstArticle) {
+                        return;
+                    }
+                    return (
+                        <React.Fragment key={article.key}>
+                            <FullBlogCard article={article} />
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+        </>
     );
 }

frontend/src/app/blog/layout.tsx

@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}

frontend/src/app/blog/page.tsx

@@ -3,6 +3,11 @@ import BlogDataCards from "./blogDataCards";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import { Enum_Article_Tag } from "@/__generated__/graphql";
 import fetchArticlePages from "@/lib/data/fetchArticleInfo";
+import {
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+    PageHeader,
+} from "@/components/PageHeader";
 
 export interface BlogPost {
     key: string | null | undefined;
@@ -41,10 +46,19 @@ export default async function BlogPage({
     const { articleList, totalArticles } = result;
 
     return (
-        <div className="just flex flex-col content-center justify-center">
-            {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
-            <BlogDataCards articles={articleList} />
-            <BlogPaginator totalArticles={totalArticles} />
-        </div>
+        <>
+            <PageHeaderAndSubtitle>
+                <PageHeader>Blog</PageHeader>
+                <PageSubtitle>
+                    Welcome to the blog! Here you can find all of the articles
+                    we have written.
+                </PageSubtitle>
+            </PageHeaderAndSubtitle>
+            <div className="flex flex-col justify-center">
+                {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
+                <BlogDataCards articles={articleList} />
+                <BlogPaginator totalArticles={totalArticles} />
+            </div>
+        </>
     );
 }

frontend/src/app/projects/layout.tsx

@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}

frontend/src/app/projects/page.tsx

@@ -4,6 +4,11 @@ import { getClient } from "@/lib/ApolloClient";
 import Link from "next/link";
 import Image from "next/image";
 import { SlicePreviewText } from "@/components/SlicePreviewText";
+import {
+    PageHeader,
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+} from "@/components/PageHeader";
 import { OuiImage } from "@/components/fullBlogCard";
 const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
@@ -52,13 +57,15 @@ export default async function ProjectsPage() {
     return (
         <div>
             <div className="flex flex-col items-center justify-center">
-                <h1 className="text-4xl font-extrabold ">Our Projects</h1>
-                <p className="text-sm text-muted-foreground">
-                    Information about our various projects are shown here.
-                </p>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Our Projects</PageHeader>
+                    <PageSubtitle>
+                        Information about our various projects are shown here.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
             </div>
 
-            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
+            <div className="flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData.data.projects.data.map((project) => {
                     let previewImage =
                         project?.attributes?.previewImage?.data?.attributes

frontend/src/app/satellites/layout.tsx

@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}

frontend/src/app/satellites/page.tsx

@@ -1,6 +1,11 @@
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
 import SatelliteCard from "@/components/ui/satelliteCard";
+import {
+    PageHeader,
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+} from "@/components/PageHeader";
 
 const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 const GET_SATELLITES = gql(`
@@ -33,26 +38,42 @@ export default async function Satellites() {
         });
 
         return (
-            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                {graphqlData?.data?.satellites?.data?.map((satellite: any) => {
-                    let previewImage =
-                        satellite?.attributes?.previewImage?.data?.attributes
-                            ?.url;
-                    if (OUTSIDE_STRAPI_URL && previewImage != undefined) {
-                        previewImage = OUTSIDE_STRAPI_URL + previewImage;
-                    }
-                    let satelliteName = satellite?.attributes?.name ?? "";
-                    let missionStatus =
-                        satellite?.attributes?.missionStatus ?? "";
-                    return (
-                        // eslint-disable-next-line react/jsx-key
-                        <SatelliteCard
-                            satelliteName={satelliteName}
-                            missionStatus={missionStatus}
-                            previewImage={previewImage}
-                        ></SatelliteCard>
-                    );
-                })}
+            <div>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Satellites</PageHeader>
+                    <PageSubtitle>
+                        Theese are all the satellites we have worked on.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
+                <div className="flex flex-wrap justify-center gap-4 md:justify-start">
+                    {graphqlData?.data?.satellites?.data?.map(
+                        (satellite: any) => {
+                            let previewImage =
+                                satellite?.attributes?.previewImage?.data
+                                    ?.attributes?.url;
+                            if (
+                                OUTSIDE_STRAPI_URL &&
+                                previewImage != undefined
+                            ) {
+                                previewImage =
+                                    OUTSIDE_STRAPI_URL + previewImage;
+                            }
+                            let satelliteName =
+                                satellite?.attributes?.name ?? "";
+                            let missionStatus =
+                                satellite?.attributes?.missionStatus ?? "";
+                            return (
+                                // eslint-disable-next-line react/jsx-key
+                                <SatelliteCard
+                                    satelliteName={satelliteName}
+                                    missionStatus={missionStatus}
+                                    previewImage={previewImage}
+                                    satelliteId={satellite.id}
+                                ></SatelliteCard>
+                            );
+                        },
+                    )}
+                </div>
             </div>
         );
     } catch (error) {

frontend/src/components/BlogpageButtons.tsx

@@ -2,8 +2,9 @@
 import { useState } from "react";
 import { Button } from "./ui/button";
 import { useRouter, useSearchParams } from "next/navigation";
+import { cn } from "@/lib/utils";
 
-export default function BlogpageButtons() {
+export default function BlogpageButtons({ className }: { className?: string }) {
     const [activeButton, setActiveButton] = useState("All Posts");
     const router = useRouter();
     const page = useSearchParams().get("currentPage");
@@ -18,21 +19,26 @@ export default function BlogpageButtons() {
     };
 
     return (
-        <div className="m-10 flex w-1/3 flex-row items-center justify-center gap-4">
+        <div
+            className={cn(
+                "flex flex-row items-center justify-center gap-4",
+                className,
+            )}
+        >
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "All Posts" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "All Posts" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("All Posts")}
             >
                 All Posts
             </Button>
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "Updates" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "Updates" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("Updates")}
             >
                 Updates
             </Button>
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "News" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "News" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("News")}
             >
                 News

frontend/src/components/PageHeader.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+function PageHeader({ children }: { children?: React.ReactNode }) {
+    return <h1 className="text-center text-4xl font-bold">{children}</h1>;
+}
+
+function PageSubtitle({ children }: { children?: React.ReactNode }) {
+    return <h2 className="text-sm text-muted-foreground">{children}</h2>;
+}
+
+// Component that wraps both the header and the subtitle to be used together
+function PageHeaderAndSubtitle({ children }: { children?: React.ReactNode }) {
+    return (
+        <div className="mb-4 flex flex-col items-center justify-center gap-3">
+            {children}
+        </div>
+    );
+}
+
+export { PageHeader, PageSubtitle, PageHeaderAndSubtitle };

frontend/src/components/PagePadding.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+function VerticalPagePadding({ children }: { children: React.ReactNode }) {
+    return <div className="py-8">{children}</div>;
+}
+
+function HorizontalPagePadding({ children }: { children: React.ReactNode }) {
+    return <div className="px-8 md:px-10">{children}</div>;
+}
+
+function PagePadding({ children }: { children: React.ReactNode }) {
+    return (
+        <HorizontalPagePadding>
+            <VerticalPagePadding>{children}</VerticalPagePadding>
+        </HorizontalPagePadding>
+    );
+}
+
+export { VerticalPagePadding, HorizontalPagePadding, PagePadding };