Merge pull request #523 from arifszn/feat/publication-section

Add section for publication
2024-03-01 16:20:34 +06:00 · 2024-03-01 16:20:34 +06:00 · 50668a09b6
commit 50668a09b6
parent c0283ce6a3 233476584e
12 changed files with 285 additions and 56 deletions
--- a/README.md
+++ b/README.md
@ -69,6 +69,7 @@
 ✓ [Certification Section](#certifications)  
 ✓ [Education Section](#education)  
 ✓ [Projects Section](#projects)  
+✓ [Publication Section](#publications)  
 ✓ [Blog Posts Section](#blog-posts)

 To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
@ -282,6 +283,17 @@ const CONFIG = {
      to: '2014',
    },
  ],
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+    },
+  ],
  // Display articles from your medium or dev account. (Optional)
  blog: {
    source: 'dev', // medium | dev
@ -660,6 +672,30 @@ const CONFIG = {
 };
 ```

+### Publications
+
+Provide your academic publishing in `publications`.
+
+```ts
+// gitprofile.config.ts
+const CONFIG = {
+  // ...
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+    },
+  ],
+};
+```
+
+Empty array will hide the publications section.
+
 ### Blog Posts

 If you have [medium](https://medium.com) or [dev](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is `10`).
--- a/gitprofile.config.ts
+++ b/gitprofile.config.ts
@ -132,6 +132,26 @@ const CONFIG = {
      to: '2014',
    },
  ],
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: '',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: '',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+  ],
  // Display articles from your medium or dev account. (Optional)
  blog: {
    source: 'dev', // medium | dev
--- a/global.d.ts
+++ b/global.d.ts
@ -217,6 +217,15 @@ interface Education {
  to: string;
 }

+interface Publication {
+  title: string;
+  conferenceName?: string;
+  journalName?: string;
+  authors?: string;
+  link?: string;
+  description?: string;
+}
+
 interface GoogleAnalytics {
  /**
   * GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
@ -370,6 +379,11 @@ interface Config {
   */
  educations?: Array<Education>;

+  /**
+   * Publication list
+   */
+  publications?: Array<Publication>;
+
  /**
   * Resume
   */
--- a/src/components/blog-card/index.tsx
+++ b/src/components/blog-card/index.tsx
@ -132,7 +132,7 @@ const BlogCard = ({
              <div className="w-full">
                <div className="flex items-start px-4">
                  <div className="text-center md:text-left w-full">
-                    <h2 className="font-semibold text-base-content opacity-60">
+                    <h2 className="font-medium text-base-content opacity-60">
                      {article.title}
                    </h2>
                    <p className="text-base-content opacity-50 text-xs">
--- a/src/components/certification-card/index.tsx
+++ b/src/components/certification-card/index.tsx
@ -19,7 +19,7 @@ const ListItem = ({
      style={{ left: '-4.5px' }}
    ></div>
    <div className="my-0.5 text-xs">{year}</div>
-    <div className="font-semibold">
+    <div className="font-medium">
      <a href={link} target="_blank" rel="noreferrer">
        {name}
      </a>
@ -78,22 +78,15 @@ const CertificationCard = ({
              renderSkeleton()
            ) : (
              <>
-                {certifications
-                  .filter(
-                    (certification) =>
-                      certification.year ||
-                      certification.name ||
-                      certification.body,
-                  )
-                  .map((certification, index) => (
-                    <ListItem
-                      key={index}
-                      year={certification.year}
-                      name={certification.name}
-                      body={certification.body}
-                      link={certification.link}
-                    />
-                  ))}
+                {certifications.map((certification, index) => (
+                  <ListItem
+                    key={index}
+                    year={certification.year}
+                    name={certification.name}
+                    body={certification.body}
+                    link={certification.link}
+                  />
+                ))}
              </>
            )}
          </ol>
--- a/src/components/education-card/index.tsx
+++ b/src/components/education-card/index.tsx
@ -70,19 +70,14 @@ const EducationCard = ({
              renderSkeleton()
            ) : (
              <>
-                {educations
-                  .filter(
-                    (item) =>
-                      item.institution || item.degree || item.from || item.to,
-                  )
-                  .map((item, index) => (
-                    <ListItem
-                      key={index}
-                      time={`${item.from} - ${item.to}`}
-                      degree={item.degree}
-                      institution={item.institution}
-                    />
-                  ))}
+                {educations.map((item, index) => (
+                  <ListItem
+                    key={index}
+                    time={`${item.from} - ${item.to}`}
+                    degree={item.degree}
+                    institution={item.institution}
+                  />
+                ))}
              </>
            )}
          </ol>
--- a/src/components/experience-card/index.tsx
+++ b/src/components/experience-card/index.tsx
@ -75,27 +75,19 @@ const ExperienceCard = ({
              renderSkeleton()
            ) : (
              <Fragment>
-                {experiences
-                  .filter(
-                    (experience) =>
-                      experience.company ||
-                      experience.position ||
-                      experience.from ||
-                      experience.to,
-                  )
-                  .map((experience, index) => (
-                    <ListItem
-                      key={index}
-                      time={`${experience.from} - ${experience.to}`}
-                      position={experience.position}
-                      company={experience.company}
-                      companyLink={
-                        experience.companyLink
-                          ? experience.companyLink
-                          : undefined
-                      }
-                    />
-                  ))}
+                {experiences.map((experience, index) => (
+                  <ListItem
+                    key={index}
+                    time={`${experience.from} - ${experience.to}`}
+                    position={experience.position}
+                    company={experience.company}
+                    companyLink={
+                      experience.companyLink
+                        ? experience.companyLink
+                        : undefined
+                    }
+                  />
+                ))}
              </Fragment>
            )}
          </ol>
--- a/src/components/external-project-card/index.tsx
+++ b/src/components/external-project-card/index.tsx
@ -93,7 +93,7 @@ const ExternalProjectCard = ({
            <div className="w-full">
              <div className="px-4">
                <div className="text-center w-full">
-                  <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
+                  <h2 className="font-medium text-lg text-center opacity-60 mb-2">
                    {item.title}
                  </h2>
                  {item.imageUrl && (
--- a/src/components/gitprofile.tsx
+++ b/src/components/gitprofile.tsx
@ -29,6 +29,7 @@ import GithubProjectCard from './github-project-card';
 import ExternalProjectCard from './external-project-card';
 import BlogCard from './blog-card';
 import Footer from './footer';
+import PublicationCard from './publication-card';

 /**
 * Renders the GitProfile component.
@ -255,6 +256,12 @@ const GitProfile = ({ config }: { config: Config }) => {
                        googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
                      />
                    )}
+                    {sanitizedConfig.publications.length !== 0 && (
+                      <PublicationCard
+                        loading={loading}
+                        publications={sanitizedConfig.publications}
+                      />
+                    )}
                    {sanitizedConfig.projects.external.projects.length !==
                      0 && (
                      <ExternalProjectCard
--- a/src/components/publication-card/index.tsx
+++ b/src/components/publication-card/index.tsx
@ -0,0 +1,147 @@
+import { Fragment } from 'react';
+import { SanitizedPublication } from '../../interfaces/sanitized-config';
+import { skeleton } from '../../utils';
+
+const PublicationCard = ({
+  publications,
+  loading,
+}: {
+  publications: SanitizedPublication[];
+  loading: boolean;
+}) => {
+  const renderSkeleton = () => {
+    const array = [];
+    for (let index = 0; index < publications.length; index++) {
+      array.push(
+        <div className="card shadow-lg compact bg-base-100" key={index}>
+          <div className="p-8 h-full w-full">
+            <div className="flex items-center flex-col">
+              <div className="w-full">
+                <div className="px-4">
+                  <div className="text-center w-full">
+                    <h2 className="mb-2">
+                      {skeleton({
+                        widthCls: 'w-32',
+                        heightCls: 'h-8',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </h2>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-20',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-20',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-full',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-full',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>,
+      );
+    }
+
+    return array;
+  };
+
+  const renderPublications = () => {
+    return publications.map((item, index) => (
+      <a
+        className="card shadow-lg compact bg-base-100 cursor-pointer"
+        key={index}
+        href={item.link}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className="p-8 h-full w-full">
+          <div className="flex items-center flex-col">
+            <div className="w-full">
+              <div className="px-4">
+                <div className="text-center w-full">
+                  <h2 className="font-medium text-lg opacity-60 mb-2">
+                    {item.title}
+                  </h2>
+                  {item.conferenceName && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      {item.conferenceName}
+                    </p>
+                  )}
+                  {item.journalName && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      {item.journalName}
+                    </p>
+                  )}
+                  {item.authors && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      Author: {item.authors}
+                    </p>
+                  )}
+                  {item.description && (
+                    <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    ));
+  };
+
+  return (
+    <Fragment>
+      <div className="col-span-1 lg:col-span-2">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="col-span-2">
+            <div className="card compact bg-base-100 shadow bg-opacity-40">
+              <div className="card-body">
+                <div className="mx-3 flex items-center justify-between mb-2">
+                  <h5 className="card-title">
+                    {loading ? (
+                      skeleton({ widthCls: 'w-40', heightCls: 'h-8' })
+                    ) : (
+                      <span className="text-base-content opacity-70">
+                        Publications
+                      </span>
+                    )}
+                  </h5>
+                </div>
+                <div className="col-span-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {loading ? renderSkeleton() : renderPublications()}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default PublicationCard;
--- a/src/interfaces/sanitized-config.tsx
+++ b/src/interfaces/sanitized-config.tsx
@ -87,6 +87,15 @@ export interface SanitizedEducation {
  to: string;
 }

+export interface SanitizedPublication {
+  title: string;
+  conferenceName?: string;
+  journalName?: string;
+  authors?: string;
+  link?: string;
+  description?: string;
+}
+
 export interface SanitizedGoogleAnalytics {
  id?: string;
 }
@ -132,6 +141,7 @@ export interface SanitizedConfig {
  experiences: Array<SanitizedExperience>;
  educations: Array<SanitizedEducation>;
  certifications: Array<SanitizedCertification>;
+  publications: Array<SanitizedPublication>;
  googleAnalytics: SanitizedGoogleAnalytics;
  hotjar: SanitizedHotjar;
  blog: SanitizedBlog;
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@ -82,9 +82,24 @@ export const getSanitizedConfig = (
        fileUrl: config?.resume?.fileUrl || '',
      },
      skills: config?.skills || [],
-      experiences: config?.experiences || [],
-      certifications: config?.certifications || [],
-      educations: config?.educations || [],
+      experiences:
+        config?.experiences?.filter(
+          (experience) =>
+            experience.company ||
+            experience.position ||
+            experience.from ||
+            experience.to,
+        ) || [],
+      certifications:
+        config?.certifications?.filter(
+          (certification) =>
+            certification.year || certification.name || certification.body,
+        ) || [],
+      educations:
+        config?.educations?.filter(
+          (item) => item.institution || item.degree || item.from || item.to,
+        ) || [],
+      publications: config?.publications?.filter((item) => item.title) || [],
      googleAnalytics: {
        id: config?.googleAnalytics?.id,
      },