Merge pull request #109 from canopas/design-author-details-ui

feat : design author more details UI
canopas · Aug 9, 2023 · 932bc06 · 932bc06
2 parents 10a32a6 + 22d573e
commit 932bc06
Show file tree

Hide file tree

Showing 10 changed files with 412 additions and 516 deletions.
diff --git a/.github/workflows/admin.yml b/.github/workflows/admin.yml
@@ -47,4 +47,4 @@ jobs:
           sed -i "s|ADMIN_PANEL_URL|${{ secrets.ADMIN_PANEL_URL }}|g" admin/nginx/conf.d/website-blog.conf
           scp -o StrictHostKeyChecking=no -i ssh_private_key -r admin/nginx ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_ADDRESS }}:blog-admin-deployment
           cat admin/deploy.sh | ssh -o StrictHostKeyChecking=no -i ssh_private_key ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_ADDRESS }} 'cat > ./blog-admin-deployment/deploy.sh'
-          cat admin/docker-compose.yaml | ssh -o StrictHostKeyChecking=no -i ssh_private_key ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_ADDRESS }} sudo PUBLISH_PORT=${{secrets.PUBLISH_PORT}} APP_KEYS=${{secrets.APP_KEYS}} API_TOKEN_SALT=${{secrets.API_TOKEN_SALT}} ADMIN_JWT_SECRET=${{secrets.ADMIN_JWT_SECRET}} JWT_SECRET=${{secrets.JWT_SECRET}} DATABASE_CLIENT=${{secrets.DATABASE_CLIENT}} DATABASE_HOST=${{secrets.DATABASE_HOST}} DATABASE_PORT=${{secrets.DATABASE_PORT}} DATABASE_NAME=${{secrets.DATABASE_NAME}} DATABASE_USERNAME=${{secrets.DATABASE_USERNAME}} DATABASE_PASSWORD=${{secrets.DATABASE_PASSWORD}} DATABASE_SSL=${{secrets.DATABASE_SSL}} AWS_ACCOUNT_ID=${{secrets.AWS_ACCOUNT_ID}} AWS_ACCESS_KEY_ID=${{secrets.AWS_ACCESS_KEY_ID}} AWS_SECRET_ACCESS_KEY=${{secrets.AWS_SECRET_ACCESS_KEY}} AWS_REGION=${{secrets.AWS_REGION}} AWS_BUCKET=${{secrets.AWS_BUCKET}} AWS_BUCKET_URL=${{secrets.AWS_BUCKET_URL}} GITHUB_SHA=${{github.sha}} GITHUB_RUN_ATTEMPT=${{github.run_attempt}} SENTRY_DSN=${{secrets.SENTRY_DSN}} 'bash -c "cd blog-admin-deployment && cat > docker-compose.yaml && chmod -R 755 ./deploy.sh && ./deploy.sh && cd .. && rm -rf blog-admin-deployment"'
+          cat admin/docker-compose.yaml | ssh -o StrictHostKeyChecking=no -i ssh_private_key ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_ADDRESS }} sudo PUBLISH_PORT=${{secrets.PUBLISH_PORT}} APP_KEYS=${{secrets.APP_KEYS}} API_TOKEN_SALT=${{secrets.API_TOKEN_SALT}} ADMIN_JWT_SECRET=${{secrets.ADMIN_JWT_SECRET}} JWT_SECRET=${{secrets.JWT_SECRET}} DATABASE_CLIENT=${{secrets.DATABASE_CLIENT}} DATABASE_HOST=${{secrets.DATABASE_HOST}} DATABASE_PORT=${{secrets.DATABASE_PORT}} DATABASE_NAME=${{secrets.DATABASE_NAME}} DATABASE_USERNAME=${{secrets.DATABASE_USERNAME}} DATABASE_PASSWORD=${{secrets.DATABASE_PASSWORD}} DATABASE_SSL=${{secrets.DATABASE_SSL}} AWS_ACCOUNT_ID=${{secrets.AWS_ACCOUNT_ID}} AWS_ACCESS_KEY_ID=${{secrets.AWS_ACCESS_KEY_ID}} AWS_SECRET_ACCESS_KEY=${{secrets.AWS_SECRET_ACCESS_KEY}} AWS_REGION=${{secrets.AWS_REGION}} AWS_BUCKET=${{secrets.AWS_BUCKET}} AWS_BUCKET_URL=${{secrets.AWS_BUCKET_URL}} GITHUB_SHA=${{github.sha}} GITHUB_RUN_ATTEMPT=${{github.run_attempt}} SENTRY_DSN=${{secrets.SENTRY_DSN}} HR_FROM_MAIL=${{secrets.HR_FROM_MAIL}} 'bash -c "cd blog-admin-deployment && cat > docker-compose.yaml && chmod -R 755 ./deploy.sh && ./deploy.sh && cd .. && rm -rf blog-admin-deployment"'
diff --git a/admin/.env.example b/admin/.env.example
@@ -17,4 +17,6 @@ DATABASE_USERNAME=
 DATABASE_PASSWORD=
 DATABASE_SSL=
 IFRAMELY_API_KEY=
+HR_FROM_MAIL=
+SENTRY_DSN=
 
diff --git a/admin/docker-compose.yaml b/admin/docker-compose.yaml
@@ -28,6 +28,7 @@ services:
       AWS_BUCKET: ${AWS_BUCKET}
       AWS_BUCKET_URL: ${AWS_BUCKET_URL}
       SENTRY_DSN: ${SENTRY_DSN}
+      HR_FROM_MAIL: ${HR_FROM_MAIL}
 
   db:
     image: postgres:15.1-alpine

diff --git a/admin/src/api/author/content-types/author/schema.json b/admin/src/api/author/content-types/author/schema.json
@@ -43,6 +43,15 @@
       "multiple": false,
       "required": false,
       "allowedTypes": ["images"]
+    },
+    "role": {
+      "type": "string"
+    },
+    "bio": {
+      "type": "text",
+      "required": true,
+      "maxLength": 250,
+      "minLength": 30
     }
   }
 }
diff --git a/admin/src/api/comment/controllers/comment.js b/admin/src/api/comment/controllers/comment.js
@@ -100,7 +100,7 @@ module.exports = createCoreController("api::comment.comment", ({ strapi }) => ({
     const authorEmail = newComment.post.author.email;
     let emailData = {
       to: authorEmail,
-      from: env("HR_FROM_MAIL"),
+      from: process.env.HR_FROM_MAIL,
       subject: `New comment: ${newComment.post.title}.`,
       html: emailTemplate,
     };

diff --git a/admin/src/api/post/content-types/post/lifecycles.js b/admin/src/api/post/content-types/post/lifecycles.js
@@ -49,7 +49,7 @@ module.exports = {
           });
           let emailData = {
             to: user[i].email,
-            from: env("HR_FROM_MAIL"),
+            from: process.env.HR_FROM_MAIL,
             subject: event.result.title,
             html: emailTemplate,
           };

diff --git a/admin/yarn.lock b/admin/yarn.lock
diff --git a/components/authorDetails.js b/components/authorDetails.js
@@ -0,0 +1,76 @@
+import Image from "next/image";
+
+export default function AuthorDetails({ postData }) {
+  return (
+    <div className="w-full mt-16 bg-[#f7f7f7] py-0.5 text-[#374151]">
+      <div className="sm:hidden container mx-5">
+        <hr className="bg-gray-600 w-full py-[0.7px] !mt-2 mb-0" />
+        <div className="flex flex-col items-center my-5">
+          <div className="relative w-48 h-40 mx-auto">
+            <Image
+              width={150}
+              height={100}
+              className="absolute inset-x-5 !my-0 rounded-full object-cover"
+              src={postData.authorImage}
+              alt={postData.authorAltText}
+            />
+          </div>
+          <div className="flex flex-col space-y-3 items-center">
+            <div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
+              {postData.authorName}
+            </div>
+            {postData.authorBio ? (
+              <>
+                <div className="text-[1rem] leading-snug tracking-wide text-center">
+                  {postData.authorBio}
+                </div>
+                <div className="!mt-7 text-[0.9rem] capitalize">
+                  {postData.authorRole}
+                </div>
+              </>
+            ) : (
+              <div className="text-[0.9rem] capitalize">
+                {postData.authorRole}
+              </div>
+            )}
+          </div>
+        </div>
+        <hr className="bg-gray-600 w-full py-[0.5px] !mb-3 mt-0" />
+      </div>
+      <div className="hidden sm:block container mx-5">
+        <hr className="bg-gray-600 w-full py-px !my-3" />
+        <div className="grid grid-cols-3 items-center">
+          <div className="relative w-48 h-48">
+            <Image
+              width={100}
+              height={100}
+              className="absolute lg:left-4 top-2 rounded-full object-cover"
+              src={postData.authorImage}
+              alt={postData.authorAltText}
+            />
+          </div>
+          <div
+            className={`sm:col-span-2 flex flex-col ${
+              postData.authorBio ? "space-y-4" : "space-y-1"
+            } md:-ml-16 xl:-ml-10 2xl:-ml-16`}
+          >
+            <div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
+              {postData.authorName}
+            </div>
+            {postData.authorBio ? (
+              <div className="text-[1rem] leading-snug tracking-wide">
+                {postData.authorBio}
+              </div>
+            ) : (
+              ""
+            )}
+            <div className="text-[0.9rem] capitalize">
+              {postData.authorRole}
+            </div>
+          </div>
+        </div>
+        <hr className="bg-gray-600 w-full py-px !my-3" />
+      </div>
+    </div>
+  );
+}
diff --git a/pages/[slug].js b/pages/[slug].js
@@ -36,6 +36,9 @@ const RecommandedPosts = dynamic(
   () => import("../components/posts/recommandedPosts"),
   { ssr: false },
 );
+const AuthorDetails = dynamic(() => import("../components/authorDetails"), {
+  ssr: false,
+});
 
 export async function getServerSideProps(context) {
   const slug = context.params.slug;
@@ -496,6 +499,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           })
                         : ""}
                     </div>
+                    <AuthorDetails postData={post} />
                   </div>
                   {/* Recommended Posts Section Desktop View */}
 

diff --git a/utils.js b/utils.js
@@ -53,6 +53,8 @@ function setPostFields(post, slug) {
   post.attributes.authorAltText = author
     ? author.username + " image"
     : "author";
+  post.attributes.authorBio = author?.bio || "";
+  post.attributes.authorRole = author?.role || "Editor for Canopas";
 
   if (slug && post.attributes.tags[0]) {
     post.attributes.tags.map((tag) => {