127 style individual blog post (#250)

* style(frontend): 💄 Fit content into blogcard and add image * style(frontend): 💄 Make small styling changes and remove subtitle from Strapi * feat(frontend): ✨ add shareButtons component for blog sharing * feat(frontend): ✨ Remove card from blog, and add functioning share functionality to blog. Also remove title and coverimage from individual blog post * fix(frontend): 🐛 remove image and host url from article slug page * fix(frontend): 🐛 remove next-share from root package and add to frontend package * fix(frontend): fix eslint unused variable error * fix(frontend): fix prettier --------- Co-authored-by: Jakob Grøtan Gregusson <55840686+Jakobgg1243@users.noreply.github.com> Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
NTNU-SmallSatLab · Apr 10, 2024 · 12dace8 · 12dace8
1 parent aff0771
commit 12dace8
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 58 deletions.
diff --git a/backend/src/api/article/content-types/article/schema.json b/backend/src/api/article/content-types/article/schema.json
@@ -12,19 +12,15 @@
   },
   "pluginOptions": {},
   "attributes": {
-    "title": {
+    "previewCardTitle": {
       "type": "string",
       "required": true,
       "unique": true
     },
     "slug": {
       "type": "uid",
-      "targetField": "title",
       "required": true
     },
-    "subtitle": {
-      "type": "string"
-    },
     "datePublished": {
       "type": "date",
       "required": true

diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts
@@ -800,9 +800,8 @@ export interface ApiArticleArticle extends Schema.CollectionType {
     draftAndPublish: true;
   };
   attributes: {
-    title: Attribute.String & Attribute.Required & Attribute.Unique;
-    slug: Attribute.UID<'api::article.article', 'title'> & Attribute.Required;
-    subtitle: Attribute.String;
+    previewCardTitle: Attribute.String & Attribute.Required & Attribute.Unique;
+    slug: Attribute.UID & Attribute.Required;
     datePublished: Attribute.Date & Attribute.Required;
     coverImage: Attribute.Media;
     body: Attribute.Blocks & Attribute.Required;

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,6 +46,7 @@
         "lucide-react": "^0.314.0",
         "luxon": "^3.4.4",
         "next": "14.1.0",
+        "next-share": "^0.27.0",
         "next-themes": "^0.2.1",
         "node-geometry-library": "^1.2.6",
         "ol": "^8.2.0",

diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts
diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts
diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -4,12 +4,15 @@ import { BlocksContent } from "@strapi/blocks-react-renderer";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
+import ShareButtons from "@/components/ShareButtons";
+
 const STRAPI_URL = process.env.STRAPI_URL;
 
 const GET_ARTICLE_BY_SLUG = gql(
     `query ArticleWithSlug($articlesFilters: ArticleFiltersInput) {
     articles(filters: $articlesFilters) {
       data {
+        id
         attributes {
           author {
             data {
@@ -34,8 +37,7 @@ const GET_ARTICLE_BY_SLUG = gql(
             }
           }
           datePublished
-          subtitle
-          title
+          previewCardTitle
         }
       }
     }
@@ -81,12 +83,12 @@ export default async function Page({
     const content: BlocksContent = article?.attributes?.body ?? [];
 
     return (
-        <>
-            <div className="flex flex-col items-center gap-4">
-                <h1 className="text-4xl font-extrabold">
-                    {article?.attributes?.title}
-                </h1>
-                <div className="flex flex-row items-center justify-center gap-1">
+        <div className="flex flex-col items-center gap-4">
+            <div className="w-1/2">
+                <BlockRendererClient content={content} />
+            </div>
+            <div className="flex w-1/2 flex-row items-center gap-1">
+                <div className="flex flex-1 justify-start gap-1">
                     {avatarURL && (
                         <Avatar className="">
                             <AvatarImage src={avatarURL} />
@@ -104,13 +106,10 @@ export default async function Page({
                         <p>{datePublished}</p>
                     </div>
                 </div>
-                <p className="text-sm text-muted-foreground">
-                    {article?.attributes?.subtitle}{" "}
-                </p>
-                <div className="w-1/2">
-                    <BlockRendererClient content={content} />
+                <div className="flex flex-1 justify-end gap-1">
+                    <ShareButtons slug={params.articleSlug} />
                 </div>
             </div>
-        </>
+        </div>
     );
 }
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -51,12 +51,8 @@ export default async function Satellites() {
                             let previewImage =
                                 satellite?.attributes?.previewImage?.data
                                     ?.attributes?.url;
-                            if (
-                                STRAPI_URL &&
-                                previewImage != undefined
-                            ) {
-                                previewImage =
-                                STRAPI_URL + previewImage;
+                            if (STRAPI_URL && previewImage != undefined) {
+                                previewImage = STRAPI_URL + previewImage;
                             }
                             let satelliteName =
                                 satellite?.attributes?.name ?? "";

diff --git a/frontend/src/components/ShareButtons.tsx b/frontend/src/components/ShareButtons.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import {
+    FacebookShareButton,
+    FacebookIcon,
+    LinkedinShareButton,
+    LinkedinIcon,
+    TwitterShareButton,
+    TwitterIcon,
+} from "next-share";
+
+export default function ShareButtons({ slug }: { slug: String }) {
+    return (
+        <>
+            <FacebookShareButton
+                url={`http://web.hypso.ies.ntnu.no:3000/blog/${slug}`}
+            >
+                <FacebookIcon size={32} round />
+            </FacebookShareButton>
+            <LinkedinShareButton
+                url={`http://web.hypso.ies.ntnu.no:3000/blog/${slug}`}
+            >
+                <LinkedinIcon size={32} round />
+            </LinkedinShareButton>
+            <TwitterShareButton
+                url={`http://web.hypso.ies.ntnu.no:3000/blog/${slug}`}
+            >
+                <TwitterIcon size={32} round />
+            </TwitterShareButton>
+        </>
+    );
+}
diff --git a/frontend/src/lib/data/fetchArticleInfo.tsx b/frontend/src/lib/data/fetchArticleInfo.tsx
@@ -26,7 +26,7 @@ query GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {
                         }
                     }
                 }
-                title
+                previewCardTitle
                 datePublished
                 body
                 coverImage {
@@ -39,7 +39,6 @@ query GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {
                 createdAt
                 publishedAt
                 slug
-                subtitle
                 Tag
             }
         }
@@ -122,7 +121,7 @@ export default async function fetchArticlePages({
         }
         let content: BlocksContent = article?.attributes?.body ?? [];
 
-        const title: string | undefined = article?.attributes?.title;
+        const title: string | undefined = article?.attributes?.previewCardTitle;
 
         for (const block of content) {
             if (block.type === "paragraph") {

diff --git a/package-lock.json b/package-lock.json