From 82c6249a738e4c21530130751f8f131395267cf6 Mon Sep 17 00:00:00 2001 From: EliasKnudsen <38568225+EliasKnudsen@users.noreply.github.com> Date: Sat, 13 Apr 2024 12:46:35 +0200 Subject: [PATCH] 269 create a hero section on the front page (#271) * Fix window not defined error #269 * Fix window not defined * Nice * Hero on website displaying team, fix window not defined, maybe fixed epileptic epileptic seizure from globe? * Prettier and lint --- .../api/hero/content-types/hero/schema.json | 30 +++ backend/src/api/hero/controllers/hero.js | 9 + backend/src/api/hero/routes/hero.js | 9 + backend/src/api/hero/services/hero.js | 9 + backend/types/generated/contentTypes.d.ts | 32 ++- frontend/src/__generated__/gql.ts | 5 + frontend/src/__generated__/graphql.ts | 224 +++++++++++++++++- frontend/src/app/page.tsx | 20 +- frontend/src/components/HeroWithAnimation.tsx | 54 ----- frontend/src/components/HeroWrapper.tsx | 49 ++++ .../components/homeComponents/homeGlobe.tsx | 14 +- frontend/src/components/ui/hero.tsx | 54 ++--- 12 files changed, 402 insertions(+), 107 deletions(-) create mode 100644 backend/src/api/hero/content-types/hero/schema.json create mode 100644 backend/src/api/hero/controllers/hero.js create mode 100644 backend/src/api/hero/routes/hero.js create mode 100644 backend/src/api/hero/services/hero.js delete mode 100644 frontend/src/components/HeroWithAnimation.tsx create mode 100644 frontend/src/components/HeroWrapper.tsx diff --git a/backend/src/api/hero/content-types/hero/schema.json b/backend/src/api/hero/content-types/hero/schema.json new file mode 100644 index 0000000..1a88722 --- /dev/null +++ b/backend/src/api/hero/content-types/hero/schema.json @@ -0,0 +1,30 @@ +{ + "kind": "singleType", + "collectionName": "heroes", + "info": { + "singularName": "hero", + "pluralName": "heroes", + "displayName": "Hero", + "description": "" + }, + "options": { + "draftAndPublish": true + }, + "pluginOptions": {}, + "attributes": { + "image": { + "type": "media", + "multiple": false, + "required": true, + "allowedTypes": [ + "images", + "files", + "videos", + "audios" + ] + }, + "text": { + "type": "text" + } + } +} diff --git a/backend/src/api/hero/controllers/hero.js b/backend/src/api/hero/controllers/hero.js new file mode 100644 index 0000000..f31655d --- /dev/null +++ b/backend/src/api/hero/controllers/hero.js @@ -0,0 +1,9 @@ +'use strict'; + +/** + * hero controller + */ + +const { createCoreController } = require('@strapi/strapi').factories; + +module.exports = createCoreController('api::hero.hero'); diff --git a/backend/src/api/hero/routes/hero.js b/backend/src/api/hero/routes/hero.js new file mode 100644 index 0000000..d4f5a55 --- /dev/null +++ b/backend/src/api/hero/routes/hero.js @@ -0,0 +1,9 @@ +'use strict'; + +/** + * hero router + */ + +const { createCoreRouter } = require('@strapi/strapi').factories; + +module.exports = createCoreRouter('api::hero.hero'); diff --git a/backend/src/api/hero/services/hero.js b/backend/src/api/hero/services/hero.js new file mode 100644 index 0000000..c15984e --- /dev/null +++ b/backend/src/api/hero/services/hero.js @@ -0,0 +1,9 @@ +'use strict'; + +/** + * hero service + */ + +const { createCoreService } = require('@strapi/strapi').factories; + +module.exports = createCoreService('api::hero.hero'); diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts index abd7518..ff27751 100644 --- a/backend/types/generated/contentTypes.d.ts +++ b/backend/types/generated/contentTypes.d.ts @@ -512,12 +512,6 @@ export interface PluginContentReleasesRelease extends Schema.CollectionType { attributes: { name: Attribute.String & Attribute.Required; releasedAt: Attribute.DateTime; - scheduledAt: Attribute.DateTime; - timezone: Attribute.String; - status: Attribute.Enumeration< - ['ready', 'blocked', 'failed', 'done', 'empty'] - > & - Attribute.Required; actions: Attribute.Relation< 'plugin::content-releases.release', 'oneToMany', @@ -572,7 +566,6 @@ export interface PluginContentReleasesReleaseAction 'manyToOne', 'plugin::content-releases.release' >; - isEntryValid: Attribute.Boolean; createdAt: Attribute.DateTime; updatedAt: Attribute.DateTime; createdBy: Attribute.Relation< @@ -865,6 +858,30 @@ export interface ApiAuthorAuthor extends Schema.CollectionType { }; } +export interface ApiHeroHero extends Schema.SingleType { + collectionName: 'heroes'; + info: { + singularName: 'hero'; + pluralName: 'heroes'; + displayName: 'Hero'; + description: ''; + }; + options: { + draftAndPublish: true; + }; + attributes: { + image: Attribute.Media & Attribute.Required; + text: Attribute.Text; + createdAt: Attribute.DateTime; + updatedAt: Attribute.DateTime; + publishedAt: Attribute.DateTime; + createdBy: Attribute.Relation<'api::hero.hero', 'oneToOne', 'admin::user'> & + Attribute.Private; + updatedBy: Attribute.Relation<'api::hero.hero', 'oneToOne', 'admin::user'> & + Attribute.Private; + }; +} + export interface ApiMostRecentImageMostRecentImage extends Schema.CollectionType { collectionName: 'most_recent_images'; @@ -1006,6 +1023,7 @@ declare module '@strapi/types' { 'plugin::users-permissions.user': PluginUsersPermissionsUser; 'api::article.article': ApiArticleArticle; 'api::author.author': ApiAuthorAuthor; + 'api::hero.hero': ApiHeroHero; 'api::most-recent-image.most-recent-image': ApiMostRecentImageMostRecentImage; 'api::project.project': ApiProjectProject; 'api::satellite.satellite': ApiSatelliteSatellite; diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts index 55667a4..b1133d2 100644 --- a/frontend/src/__generated__/gql.ts +++ b/frontend/src/__generated__/gql.ts @@ -17,6 +17,7 @@ const documents = { "\nquery Projects($projectFilters: ProjectFiltersInput) {\n projects(filters: $projectFilters) {\n data {\n attributes {\n title\n content\n satellites {\n data {\n id\n attributes {\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n slug\n previewImage {\n data {\n id\n attributes {\n url\n }\n }\n }\n }\n }\n }\n}": types.ProjectsDocument, "\n query GET_PROJECTS {\n projects(sort: [\"publishedAt:desc\"]) {\n data {\n id\n attributes {\n title\n content\n satellites {\n data {\n attributes {\n catalogNumberNORAD\n }\n }\n }\n slug\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }": types.Get_ProjectsDocument, "\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n missionStatus\n }\n }\n }\n }\n": types.Get_SatellitesDocument, + "\nquery Query($publicationState: PublicationState) {\n hero(publicationState: $publicationState) {\n data {\n attributes {\n text\n image {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }": types.QueryDocument, "\nquery GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination, filters: $filters) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n previewCardTitle\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n Tag\n }\n }\n meta {\n pagination {\n total\n }\n }\n }\n}\n": types.Get_ArticlesDocument, "\nquery MostRecentImages {\n mostRecentImages(sort: [\"publishedAt:desc\"]) {\n data {\n attributes {\n mostRecentImage {\n data {\n attributes {\n url\n }\n }\n }\n satellite {\n data {\n attributes {\n catalogNumberNORAD\n name\n }\n }\n }\n createdAt\n updatedAt\n publishedAt\n }\n }\n }\n}\n\n": types.MostRecentImagesDocument, "query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n content\n name\n projects {\n data {\n attributes {\n title\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n slug\n }\n id\n }\n }\n }\n }\n }\n }\n ": types.Get_Satellite_InfoDocument, @@ -52,6 +53,10 @@ export function gql(source: "\n query GET_PROJECTS {\n projects(sort: [\"publ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function gql(source: "\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n missionStatus\n }\n }\n }\n }\n"): (typeof documents)["\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n missionStatus\n }\n }\n }\n }\n"]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "\nquery Query($publicationState: PublicationState) {\n hero(publicationState: $publicationState) {\n data {\n attributes {\n text\n image {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }"): (typeof documents)["\nquery Query($publicationState: PublicationState) {\n hero(publicationState: $publicationState) {\n data {\n attributes {\n text\n image {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts index 185b978..5c51fce 100644 --- a/frontend/src/__generated__/graphql.ts +++ b/frontend/src/__generated__/graphql.ts @@ -166,6 +166,110 @@ export type BooleanFilterInput = { startsWith?: InputMaybe; }; +export type ContentReleasesRelease = { + __typename?: 'ContentReleasesRelease'; + actions?: Maybe; + createdAt?: Maybe; + name: Scalars['String']['output']; + releasedAt?: Maybe; + updatedAt?: Maybe; +}; + + +export type ContentReleasesReleaseActionsArgs = { + filters?: InputMaybe; + pagination?: InputMaybe; + sort?: InputMaybe>>; +}; + +export type ContentReleasesReleaseAction = { + __typename?: 'ContentReleasesReleaseAction'; + contentType: Scalars['String']['output']; + createdAt?: Maybe; + entry?: Maybe; + locale?: Maybe; + release?: Maybe; + type: Enum_Contentreleasesreleaseaction_Type; + updatedAt?: Maybe; +}; + +export type ContentReleasesReleaseActionEntity = { + __typename?: 'ContentReleasesReleaseActionEntity'; + attributes?: Maybe; + id?: Maybe; +}; + +export type ContentReleasesReleaseActionEntityResponse = { + __typename?: 'ContentReleasesReleaseActionEntityResponse'; + data?: Maybe; +}; + +export type ContentReleasesReleaseActionEntityResponseCollection = { + __typename?: 'ContentReleasesReleaseActionEntityResponseCollection'; + data: Array; + meta: ResponseCollectionMeta; +}; + +export type ContentReleasesReleaseActionFiltersInput = { + and?: InputMaybe>>; + contentType?: InputMaybe; + createdAt?: InputMaybe; + id?: InputMaybe; + locale?: InputMaybe; + not?: InputMaybe; + or?: InputMaybe>>; + release?: InputMaybe; + type?: InputMaybe; + updatedAt?: InputMaybe; +}; + +export type ContentReleasesReleaseActionInput = { + contentType?: InputMaybe; + locale?: InputMaybe; + release?: InputMaybe; + type?: InputMaybe; +}; + +export type ContentReleasesReleaseActionRelationResponseCollection = { + __typename?: 'ContentReleasesReleaseActionRelationResponseCollection'; + data: Array; +}; + +export type ContentReleasesReleaseEntity = { + __typename?: 'ContentReleasesReleaseEntity'; + attributes?: Maybe; + id?: Maybe; +}; + +export type ContentReleasesReleaseEntityResponse = { + __typename?: 'ContentReleasesReleaseEntityResponse'; + data?: Maybe; +}; + +export type ContentReleasesReleaseEntityResponseCollection = { + __typename?: 'ContentReleasesReleaseEntityResponseCollection'; + data: Array; + meta: ResponseCollectionMeta; +}; + +export type ContentReleasesReleaseFiltersInput = { + actions?: InputMaybe; + and?: InputMaybe>>; + createdAt?: InputMaybe; + id?: InputMaybe; + name?: InputMaybe; + not?: InputMaybe; + or?: InputMaybe>>; + releasedAt?: InputMaybe; + updatedAt?: InputMaybe; +}; + +export type ContentReleasesReleaseInput = { + actions?: InputMaybe>>; + name?: InputMaybe; + releasedAt?: InputMaybe; +}; + export type DateFilterInput = { and?: InputMaybe>>; between?: InputMaybe>>; @@ -222,6 +326,11 @@ export enum Enum_Article_Tag { Updates = 'Updates' } +export enum Enum_Contentreleasesreleaseaction_Type { + Publish = 'publish', + Unpublish = 'unpublish' +} + export type FileInfoInput = { alternativeText?: InputMaybe; caption?: InputMaybe; @@ -253,7 +362,33 @@ export type FloatFilterInput = { startsWith?: InputMaybe; }; -export type GenericMorph = Article | Author | I18NLocale | MostRecentImage | Project | Satellite | UploadFile | UploadFolder | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsUser; +export type GenericMorph = Article | Author | ContentReleasesRelease | ContentReleasesReleaseAction | Hero | I18NLocale | MostRecentImage | Project | Satellite | UploadFile | UploadFolder | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsUser; + +export type Hero = { + __typename?: 'Hero'; + createdAt?: Maybe; + image?: Maybe; + publishedAt?: Maybe; + text?: Maybe; + updatedAt?: Maybe; +}; + +export type HeroEntity = { + __typename?: 'HeroEntity'; + attributes?: Maybe; + id?: Maybe; +}; + +export type HeroEntityResponse = { + __typename?: 'HeroEntityResponse'; + data?: Maybe; +}; + +export type HeroInput = { + image?: InputMaybe; + publishedAt?: InputMaybe; + text?: InputMaybe; +}; export type I18NLocale = { __typename?: 'I18NLocale'; @@ -420,6 +555,8 @@ export type Mutation = { changePassword?: Maybe; createArticle?: Maybe; createAuthor?: Maybe; + createContentReleasesRelease?: Maybe; + createContentReleasesReleaseAction?: Maybe; createMostRecentImage?: Maybe; createProject?: Maybe; createSatellite?: Maybe; @@ -431,6 +568,9 @@ export type Mutation = { createUsersPermissionsUser: UsersPermissionsUserEntityResponse; deleteArticle?: Maybe; deleteAuthor?: Maybe; + deleteContentReleasesRelease?: Maybe; + deleteContentReleasesReleaseAction?: Maybe; + deleteHero?: Maybe; deleteMostRecentImage?: Maybe; deleteProject?: Maybe; deleteSatellite?: Maybe; @@ -453,7 +593,10 @@ export type Mutation = { resetPassword?: Maybe; updateArticle?: Maybe; updateAuthor?: Maybe; + updateContentReleasesRelease?: Maybe; + updateContentReleasesReleaseAction?: Maybe; updateFileInfo: UploadFileEntityResponse; + updateHero?: Maybe; updateMostRecentImage?: Maybe; updateProject?: Maybe; updateSatellite?: Maybe; @@ -484,6 +627,16 @@ export type MutationCreateAuthorArgs = { }; +export type MutationCreateContentReleasesReleaseArgs = { + data: ContentReleasesReleaseInput; +}; + + +export type MutationCreateContentReleasesReleaseActionArgs = { + data: ContentReleasesReleaseActionInput; +}; + + export type MutationCreateMostRecentImageArgs = { data: MostRecentImageInput; }; @@ -529,6 +682,16 @@ export type MutationDeleteAuthorArgs = { }; +export type MutationDeleteContentReleasesReleaseArgs = { + id: Scalars['ID']['input']; +}; + + +export type MutationDeleteContentReleasesReleaseActionArgs = { + id: Scalars['ID']['input']; +}; + + export type MutationDeleteMostRecentImageArgs = { id: Scalars['ID']['input']; }; @@ -616,12 +779,29 @@ export type MutationUpdateAuthorArgs = { }; +export type MutationUpdateContentReleasesReleaseArgs = { + data: ContentReleasesReleaseInput; + id: Scalars['ID']['input']; +}; + + +export type MutationUpdateContentReleasesReleaseActionArgs = { + data: ContentReleasesReleaseActionInput; + id: Scalars['ID']['input']; +}; + + export type MutationUpdateFileInfoArgs = { id: Scalars['ID']['input']; info?: InputMaybe; }; +export type MutationUpdateHeroArgs = { + data: HeroInput; +}; + + export type MutationUpdateMostRecentImageArgs = { data: MostRecentImageInput; id: Scalars['ID']['input']; @@ -763,6 +943,11 @@ export type Query = { articles?: Maybe; author?: Maybe; authors?: Maybe; + contentReleasesRelease?: Maybe; + contentReleasesReleaseAction?: Maybe; + contentReleasesReleaseActions?: Maybe; + contentReleasesReleases?: Maybe; + hero?: Maybe; i18NLocale?: Maybe; i18NLocales?: Maybe; me?: Maybe; @@ -809,6 +994,35 @@ export type QueryAuthorsArgs = { }; +export type QueryContentReleasesReleaseArgs = { + id?: InputMaybe; +}; + + +export type QueryContentReleasesReleaseActionArgs = { + id?: InputMaybe; +}; + + +export type QueryContentReleasesReleaseActionsArgs = { + filters?: InputMaybe; + pagination?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type QueryContentReleasesReleasesArgs = { + filters?: InputMaybe; + pagination?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type QueryHeroArgs = { + publicationState?: InputMaybe; +}; + + export type QueryI18NLocaleArgs = { id?: InputMaybe; }; @@ -1416,6 +1630,13 @@ export type Get_SatellitesQueryVariables = Exact<{ [key: string]: never; }>; export type Get_SatellitesQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', id?: string | null, attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null, name: string, missionStatus?: string | null, previewImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; +export type QueryQueryVariables = Exact<{ + publicationState?: InputMaybe; +}>; + + +export type QueryQuery = { __typename?: 'Query', hero?: { __typename?: 'HeroEntityResponse', data?: { __typename?: 'HeroEntity', attributes?: { __typename?: 'Hero', text?: string | null, image?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null } | null } | null }; + export type Get_ArticlesQueryVariables = Exact<{ pagination?: InputMaybe; filters?: InputMaybe; @@ -1441,6 +1662,7 @@ export const ArticleWithSlugDocument = {"kind":"Document","definitions":[{"kind" export const ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Projects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_PROJECTS"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"publishedAt:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITES"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"missionStatus"}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const QueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Query"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"publicationState"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PublicationState"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hero"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"publicationState"},"value":{"kind":"Variable","name":{"kind":"Name","value":"publicationState"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_ArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_ARTICLES"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationArg"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ArticleFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"datePublished:desc","block":false}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"previewCardTitle"}},{"kind":"Field","name":{"kind":"Name","value":"datePublished"}},{"kind":"Field","name":{"kind":"Name","value":"body"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"Tag"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"meta"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pagination"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const MostRecentImagesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MostRecentImages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mostRecentImages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"publishedAt:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mostRecentImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"satellite"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_Satellite_InfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITE_INFO"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SatelliteFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index db4ceaf..5ff61c4 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -8,7 +8,15 @@ import fetchMostRecentImage from "@/lib/data/fetchMostRecentImage"; import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome"; import SatelliteSelector from "@/components/homeComponents/SatelliteSelector"; -import SatelliteGlobe from "@/components/homeComponents/homeGlobe"; +import dynamic from "next/dynamic"; +import HeroWrapper from "@/components/HeroWrapper"; + +const SatelliteGlobeNoSSR = dynamic( + () => import("@/components/homeComponents/homeGlobe"), + { + ssr: false, + }, +); export default async function Home() { const mostRecentImageURL = await fetchMostRecentImage(); @@ -30,7 +38,7 @@ export default async function Home() { {/* Globe Container */}
- +
@@ -72,7 +80,7 @@ export default async function Home() { -
+

Projects

@@ -99,6 +107,12 @@ export default async function Home() { {mostRecentImageURL}

+ +
+
+ +
+
); } diff --git a/frontend/src/components/HeroWithAnimation.tsx b/frontend/src/components/HeroWithAnimation.tsx deleted file mode 100644 index e3999d2..0000000 --- a/frontend/src/components/HeroWithAnimation.tsx +++ /dev/null @@ -1,54 +0,0 @@ -"use client"; -import { gsap } from "gsap"; -import { useGSAP } from "@gsap/react"; - -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import { ScrollToPlugin } from "gsap/ScrollToPlugin"; - -import Hero from "@/components/ui/hero"; -gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); - -export default function HeroWithAnimation() { - useGSAP(() => { - gsap.fromTo( - "#rocket", - { y: 100, rotation: 45, zIndex: 1 }, - { - y: -200, - x: 300, - opacity: 1, - duration: 1, - scrollTrigger: { - trigger: "#rocket", - start: "top center", - end: "bottom top", - scrub: true, - }, - }, - ); - }); - - function handleClick(): void { - gsap.to(window, { duration: 1, scrollTo: "#about-us" }); - } - - return ( - - {/* eslint-disable-next-line @next/next/no-img-element */} - rocket launching - - ); -} diff --git a/frontend/src/components/HeroWrapper.tsx b/frontend/src/components/HeroWrapper.tsx new file mode 100644 index 0000000..30ea1a0 --- /dev/null +++ b/frontend/src/components/HeroWrapper.tsx @@ -0,0 +1,49 @@ +import { gql } from "@/__generated__/gql"; +import { getClient } from "@/lib/ApolloClient"; +import Hero from "@/components/ui/hero"; + +const STRAPI_URL = process.env.STRAPI_URL; + +const GET_HERO_DATA = gql(` +query Query($publicationState: PublicationState) { + hero(publicationState: $publicationState) { + data { + attributes { + text + image { + data { + attributes { + url + } + } + } + } + } + } + }`); + +export default async function HeroWrapper() { + const graphqlData = await getClient().query({ + query: GET_HERO_DATA, + }); + + if (graphqlData.data === null || graphqlData.data === undefined) { + return
There are no projects to show.
; + } + + return ( + <> + + + ); +} diff --git a/frontend/src/components/homeComponents/homeGlobe.tsx b/frontend/src/components/homeComponents/homeGlobe.tsx index 932ef9f..3d95bc9 100644 --- a/frontend/src/components/homeComponents/homeGlobe.tsx +++ b/frontend/src/components/homeComponents/homeGlobe.tsx @@ -68,7 +68,13 @@ export default function SatelliteGlobe() { setGlobeSize(); // Resize listener to update the globe size - window.addEventListener("resize", setGlobeSize); + + if (typeof window !== "undefined") { + window.addEventListener("resize", setGlobeSize); + return () => { + window.removeEventListener("resize", setGlobeSize); + }; + } // Set initial positions of satellites let currentDate = new Date().toISOString(); @@ -90,10 +96,12 @@ export default function SatelliteGlobe() { globeRef.current.objectsData(initialPositions); return () => { - window.removeEventListener("resize", setGlobeSize); + if (typeof window !== "undefined") { + window.removeEventListener("resize", setGlobeSize); + } }; } - }, []); + }); // Update satellite positions periodically, or when satelliteData changes useEffect(() => { diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx index 1b2196c..572c293 100644 --- a/frontend/src/components/ui/hero.tsx +++ b/frontend/src/components/ui/hero.tsx @@ -1,51 +1,27 @@ -import Link from "next/link"; -import { Button } from "@components/ui/button"; -import { cn } from "@/lib/utils"; import React from "react"; - +import Image from "next/image"; interface HeroProps extends React.HTMLAttributes { title: string; description: string; - buttonLink: string; - buttonText: string; - handleClick: () => void; + imageUrl: string; className?: string; } const Hero = React.forwardRef( - ( - { - title, - description, - buttonLink, - buttonText, - handleClick, - className, - children, - ...props - }, - ref, - ) => ( -
+ ({ title, description, imageUrl, className, children, ...props }, ref) => ( +
+

Our Team

-
-

- {title} -

-

- {description} -

-
-
- - - -
+ {title} +

{description}

{children}
@@ -53,6 +29,6 @@ const Hero = React.forwardRef( ), ); -Hero.displayName = "Hero"; // Add display name +Hero.displayName = "Hero"; export default Hero;