From 2696fc1384643af0eaa64b1652569d14670e823c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 14:25:11 +0200 Subject: [PATCH 01/12] remove edge runtime --- frontend/src/app/blog/[articleSlug]/page.tsx | 1 - frontend/src/app/blog/blogDataCards.tsx | 1 - frontend/src/app/projects/[projectSlug]/page.tsx | 1 - frontend/src/app/projects/page.tsx | 1 - frontend/src/app/satellites/page.tsx | 1 - 5 files changed, 5 deletions(-) diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx index c149149..14ae711 100644 --- a/frontend/src/app/blog/[articleSlug]/page.tsx +++ b/frontend/src/app/blog/[articleSlug]/page.tsx @@ -1,4 +1,3 @@ -export const runtime = "edge"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { BlocksContent } from "@strapi/blocks-react-renderer"; diff --git a/frontend/src/app/blog/blogDataCards.tsx b/frontend/src/app/blog/blogDataCards.tsx index d40a1d2..9b7bebd 100644 --- a/frontend/src/app/blog/blogDataCards.tsx +++ b/frontend/src/app/blog/blogDataCards.tsx @@ -1,4 +1,3 @@ -export const runtime = "edge"; import FullBlogCard from "@/components/fullBlogCard"; import BlogpageButtons from "@/components/BlogpageButtons"; import { BlogPost } from "./page"; diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx index 24cc2e0..0a7825f 100644 --- a/frontend/src/app/projects/[projectSlug]/page.tsx +++ b/frontend/src/app/projects/[projectSlug]/page.tsx @@ -1,4 +1,3 @@ -export const runtime = "edge"; import { gql } from "@/__generated__/gql"; import BlockRendererClient from "@/components/BlockRendererClient"; import { getClient } from "@/lib/ApolloClient"; diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx index 76d8257..422b108 100644 --- a/frontend/src/app/projects/page.tsx +++ b/frontend/src/app/projects/page.tsx @@ -1,4 +1,3 @@ -export const runtime = "edge"; import { gql } from "@/__generated__/gql"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { getClient } from "@/lib/ApolloClient"; diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx index 037a43c..0454403 100644 --- a/frontend/src/app/satellites/page.tsx +++ b/frontend/src/app/satellites/page.tsx @@ -1,4 +1,3 @@ -export const runtime = "edge"; import { gql } from "@/__generated__/gql"; import { getClient } from "@/lib/ApolloClient"; import SatelliteCard from "@/components/ui/satelliteCard"; From d561952dbbc79962e83a12aa556f6e76302df058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 15:02:42 +0200 Subject: [PATCH 02/12] test image rendering, switched in github vars as well as env file --- frontend/.env.production | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/.env.production b/frontend/.env.production index 8bdef3f..f4fc667 100644 --- a/frontend/.env.production +++ b/frontend/.env.production @@ -2,4 +2,4 @@ OUTSIDE_STRAPI_URL=http://web.hypso.ies.ntnu.no:1337 # Database url for internal requests between the docker containers, set in github repo variables -INTERNAL_STRAPI_URL=http://backend:1337 +INTERNAL_STRAPI_URL=http://web.hypso.ies.ntnu.no:1337 From 18d0da3a73c994832bb889a753341b6364435ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 15:14:33 +0200 Subject: [PATCH 03/12] revert env change --- frontend/.env.production | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/.env.production b/frontend/.env.production index f4fc667..8bdef3f 100644 --- a/frontend/.env.production +++ b/frontend/.env.production @@ -2,4 +2,4 @@ OUTSIDE_STRAPI_URL=http://web.hypso.ies.ntnu.no:1337 # Database url for internal requests between the docker containers, set in github repo variables -INTERNAL_STRAPI_URL=http://web.hypso.ies.ntnu.no:1337 +INTERNAL_STRAPI_URL=http://backend:1337 From c89c09a7343ab75f04dad2420b2d3dc43ac1ebf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 15:29:09 +0200 Subject: [PATCH 04/12] test changing internal to outside strapi url --- frontend/src/lib/ApolloClient.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/ApolloClient.js b/frontend/src/lib/ApolloClient.js index e56aa2e..8e07292 100644 --- a/frontend/src/lib/ApolloClient.js +++ b/frontend/src/lib/ApolloClient.js @@ -1,14 +1,14 @@ import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc"; -const INTERNAL_STRAPI_URL = process.env.INTERNAL_STRAPI_URL; +const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL; export const { getClient } = registerApolloClient(() => { return new ApolloClient({ cache: new InMemoryCache(), link: new HttpLink({ // this needs to be an absolute url, as relative urls cannot be used in SSR - uri: INTERNAL_STRAPI_URL + "/graphql", + uri: OUTSIDE_STRAPI_URL + "/graphql", // you can disable result caching here if you want to // (this does not work if you are rendering your page with `export const dynamic = "force-static"`) fetchOptions: { cache: "no-store" }, From c360e920d41856794cdcce87313b6997f174ebf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 15:39:37 +0200 Subject: [PATCH 05/12] revert apollo strapi url change --- frontend/src/lib/ApolloClient.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/ApolloClient.js b/frontend/src/lib/ApolloClient.js index 8e07292..e56aa2e 100644 --- a/frontend/src/lib/ApolloClient.js +++ b/frontend/src/lib/ApolloClient.js @@ -1,14 +1,14 @@ import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc"; -const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL; +const INTERNAL_STRAPI_URL = process.env.INTERNAL_STRAPI_URL; export const { getClient } = registerApolloClient(() => { return new ApolloClient({ cache: new InMemoryCache(), link: new HttpLink({ // this needs to be an absolute url, as relative urls cannot be used in SSR - uri: OUTSIDE_STRAPI_URL + "/graphql", + uri: INTERNAL_STRAPI_URL + "/graphql", // you can disable result caching here if you want to // (this does not work if you are rendering your page with `export const dynamic = "force-static"`) fetchOptions: { cache: "no-store" }, From c702a312fd6ebdb136a4144cf6bab496cd3e7afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 15:55:04 +0200 Subject: [PATCH 06/12] try to add backend as remote pattern --- frontend/next.config.mjs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index e9dd4da..44d1354 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -14,6 +14,10 @@ const nextConfig = { protocol: "http", hostname: "web.hypso.ies.ntnu.no", }, + { + protocol: "http", + hostname: "backend", + }, ], }, }; From f1fcdd1372c2329db37992dbc68d77ffb9e6775b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Wed, 10 Apr 2024 16:00:55 +0200 Subject: [PATCH 07/12] 209 add headingstitles to blog satellite page also add common marginspaddin around most pages (#236) * feat(frontend): :sparkles: 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): :recycle: Refactor code in satellite page and move to satelliteCard component * refactor(frontend): :recycle: Run prettier --------- Co-authored-by: Lucas Tran --- frontend/src/app/blog/blogDataCards.tsx | 59 ++++++------ frontend/src/app/blog/layout.tsx | 5 + frontend/src/app/blog/page.tsx | 24 ++++- frontend/src/app/projects/layout.tsx | 5 + frontend/src/app/projects/page.tsx | 17 +++- frontend/src/app/satellites/layout.tsx | 5 + frontend/src/app/satellites/page.tsx | 61 ++++++++---- frontend/src/components/BlogpageButtons.tsx | 16 +++- frontend/src/components/PageHeader.tsx | 20 ++++ frontend/src/components/PagePadding.tsx | 19 ++++ frontend/src/components/fullBlogCard.tsx | 95 ++++++++++--------- .../components/homeComponents/homeGlobe.tsx | 3 +- frontend/src/components/ui/blogCard.tsx | 27 +----- frontend/src/components/ui/satelliteCard.tsx | 23 ++--- 14 files changed, 231 insertions(+), 148 deletions(-) create mode 100644 frontend/src/app/blog/layout.tsx create mode 100644 frontend/src/app/projects/layout.tsx create mode 100644 frontend/src/app/satellites/layout.tsx create mode 100644 frontend/src/components/PageHeader.tsx create mode 100644 frontend/src/components/PagePadding.tsx diff --git a/frontend/src/app/blog/blogDataCards.tsx b/frontend/src/app/blog/blogDataCards.tsx index 9b7bebd..c9d38f9 100644 --- a/frontend/src/app/blog/blogDataCards.tsx +++ b/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 ( -
- {articles.map((article: any) => { - return ( -
- {" "} - {article.firstArticle ? : null} -
- ); - })} -
+ <> +
+ + {/* Only map fist article */} + {articles.map((article: BlogPost) => { + if (article.firstArticle) { + return ( + + + + ); + } + })} + + {articles.map((article: BlogPost) => { + if (article.firstArticle) { + return; + } + return ( + + + + ); + })} +
+ ); } diff --git a/frontend/src/app/blog/layout.tsx b/frontend/src/app/blog/layout.tsx new file mode 100644 index 0000000..3eab227 --- /dev/null +++ b/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 {children}; +} diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx index 9b5422b..f09dca9 100644 --- a/frontend/src/app/blog/page.tsx +++ b/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 ( -
- {/* */} - - -
+ <> + + Blog + + Welcome to the blog! Here you can find all of the articles + we have written. + + +
+ {/* */} + + +
+ ); } diff --git a/frontend/src/app/projects/layout.tsx b/frontend/src/app/projects/layout.tsx new file mode 100644 index 0000000..3eab227 --- /dev/null +++ b/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 {children}; +} diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx index 422b108..be85fd6 100644 --- a/frontend/src/app/projects/page.tsx +++ b/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 (
-

Our Projects

-

- Information about our various projects are shown here. -

+ + Our Projects + + Information about our various projects are shown here. + +
-
+
{graphqlData.data.projects.data.map((project) => { let previewImage = project?.attributes?.previewImage?.data?.attributes diff --git a/frontend/src/app/satellites/layout.tsx b/frontend/src/app/satellites/layout.tsx new file mode 100644 index 0000000..3eab227 --- /dev/null +++ b/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 {children}; +} diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx index 0454403..8b342fe 100644 --- a/frontend/src/app/satellites/page.tsx +++ b/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 ( -
- {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 - - ); - })} +
+ + Satellites + + Theese are all the satellites we have worked on. + + +
+ {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 + + ); + }, + )} +
); } catch (error) { diff --git a/frontend/src/components/BlogpageButtons.tsx b/frontend/src/components/BlogpageButtons.tsx index ddb342d..ca5010d 100644 --- a/frontend/src/components/BlogpageButtons.tsx +++ b/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 ( -
+