Merge pull request #28 from nyomansunima/17-explore-repo-feature

🍀 update: repo to explore

apps/frontend/components/explore/explore-repo-item.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image'
+import { FunctionComponent } from 'react'
+import styles from '@styles/components/explore/explore-repo-item.module.scss'
+import { ExplorationRepo } from '~/types/content'
+
+interface ExploreRepoItemProps {
+  data: ExplorationRepo
+}
+
+/**
+ * # ExploreRepoItem
+ *
+ * the repo item to show in the
+ * explore stages
+ *
+ * @returns JSX.Element
+ */
+const ExploreRepoItem: FunctionComponent<ExploreRepoItemProps> = ({
+  data,
+}): JSX.Element => {
+  return (
+    <div
+      data-cursor-size="80"
+      data-cursor-icon="fi fi-rr-code-commit"
+      className={`${styles.item} item`}
+      onClick={() => window.open(data.url)}
+    >
+      <picture>
+        <Image src={data.image} fill sizes="auto" alt={data.title} />
+      </picture>
+      <i
+        className={`${
+          data.source == 'github'
+            ? 'fi fi-brands-github'
+            : 'fi fi-brands-gitlab'
+        } ${styles.source}`}
+      ></i>
+      <div className={styles.detail}>
+        <h4>{data.title}</h4>
+        <p>{data.desc.substring(0, 70)}</p>
+      </div>
+    </div>
+  )
+}
+
+export default ExploreRepoItem

apps/frontend/components/explore/index.tsx

@@ -1,4 +1,5 @@
 import ExploreItemCard from './explore-item-card'
+import ExploreRepoItem from './explore-repo-item'
 import ExploreStackItem from './explore-stack-item'
 
-export { ExploreItemCard, ExploreStackItem }
+export { ExploreItemCard, ExploreStackItem, ExploreRepoItem }

apps/frontend/lib/services/content-service.ts

@@ -1,8 +1,25 @@
 import hashNodeClient from '@lib/connection/hashnode-connection'
 import sanityClient from '@lib/connection/sanity-connection'
-import { ArticlePost, Exploration, ExplorationDetail } from '~/types/content'
+import {
+  ArticlePost,
+  Exploration,
+  ExplorationDetail,
+  ExplorationRepo,
+} from '~/types/content'
 
 class ContentService {
+  async loadAllExploreRepo(): Promise<ExplorationRepo[]> {
+    const query = `
+      *[_type == "repo"]{
+        ...,
+        "image": image.asset -> url,
+      }
+    `
+
+    const res = await sanityClient.fetch(query)
+    return res
+  }
+
   async loadAllExploration(): Promise<Exploration[]> {
     const query = `
       *[_type == "exploration"]{

apps/frontend/pages/explore/index.tsx

@@ -3,13 +3,15 @@ import Head from 'next/head'
 import { NextPageWithLayout } from '~/types/app'
 import styles from '@styles/pages/explore/explore.module.scss'
 import { OutlineButton } from '@components/buttons'
-import { ExploreItemCard } from '@components/explore'
+import { ExploreItemCard, ExploreRepoItem } from '@components/explore'
 import { GetServerSideProps } from 'next'
 import { QueryClient, dehydrate, useQuery } from '@tanstack/react-query'
 import contentService from '@lib/services/content-service'
 import { useEffect, useRef } from 'react'
 import useCursor from '@lib/hooks/use-cursor'
 import { gsap } from 'gsap'
+import Image from 'next/image'
+import { ContactSection } from '@components/contact'
 
 const getServerSideProps: GetServerSideProps = async () => {
   const queryClient = new QueryClient()
@@ -36,6 +38,7 @@ const getServerSideProps: GetServerSideProps = async () => {
 const ExplorePage: NextPageWithLayout = (): JSX.Element => {
   const mainRef = useRef<HTMLElement>(null)
   const listQuery = useQuery(['explore'], contentService.loadAllExploration)
+  const reposQuery = useQuery(['repos'], contentService.loadAllExploreRepo)
   const cursor = useCursor()
 
   useEffect(() => {
@@ -59,22 +62,34 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => {
             start: 'top 75%',
           },
         })
-        .from('.more-section h2', {
+        .from('.more-section .heading h2', {
           y: 200,
           opacity: 0,
         })
-        .from('.more-section span', {
+        .from('.more-section .heading span', {
           y: 200,
           opacity: 0,
         })
+      if (reposQuery.data) {
+        gsap.from('.more-section .content .item', {
+          y: 200,
+          opacity: 0,
+          stagger: 0.1,
+          ease: 'back',
+          scrollTrigger: {
+            trigger: '.more-section .content .item',
+            start: 'top 75%',
+          },
+        })
+      }
     }, mainRef)
 
     cursor.reload()
 
     return () => {
       ctx.revert()
     }
-  }, [listQuery.data])
+  }, [listQuery.data, reposQuery.data])
 
   return (
     <>
@@ -104,7 +119,7 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => {
         </section>
 
         <section className={`${styles.more_section} more-section`}>
-          <div className={styles.heading}>
+          <div className={`${styles.heading} heading`}>
             <h2 data-cursor-exclusion data-cursor-size="200">
               I explore more than you know
             </h2>
@@ -115,7 +130,15 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => {
               and gitlab repo.
             </span>
           </div>
+          <div className={`${styles.content} content`}>
+            {reposQuery.data &&
+              reposQuery.data.map((item, index) => (
+                <ExploreRepoItem data={item} key={index} />
+              ))}
+          </div>
         </section>
+
+        <ContactSection />
       </main>
     </>
   )

apps/frontend/pages/index.tsx

@@ -288,7 +288,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
                 Indonesia.
               </span>
               <div className={styles.actions}>
-                <OutlineButton className="action" link="/about">
+                <OutlineButton magnetic={true} className="action" link="/about">
                   More about me
                 </OutlineButton>
               </div>
@@ -335,7 +335,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
               </div>
 
               <div className={styles.actions}>
-                <OutlineButton link="/blog">
+                <OutlineButton magnetic={true} link="/blog">
                   Read more in Blog
                   <i className="fi fi-rr-arrow-right"></i>
                 </OutlineButton>
@@ -374,7 +374,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
               </div>
 
               <div className={styles.actions}>
-                <OutlineButton link="/inspiration">
+                <OutlineButton magnetic={true} link="/inspiration">
                   More inspirations
                   <i className="fi fi-rr-arrow-right"></i>
                 </OutlineButton>
@@ -386,8 +386,10 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
           <div className={`${styles.left} left`}>
             <h2>How treament make me better</h2>
             <span>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius non
-              sunt, autem earum blanditiis iusto.
+              I always try to explore everthing to ensure my quality. I always
+              learn, then create something that make me become a better learner
+              with a new concept. You can grap all of my exploration on github,
+              and gitlab repo.
             </span>
             <div className={`${styles.actions} actions`}>
               <OutlineButton link="/explore">More to explore</OutlineButton>

apps/frontend/styles/components/explore/explore-item-card.module.scss

@@ -44,14 +44,14 @@
 
     h4 {
       display: flex;
-      font-size: fontSize(2xl);
+      font-size: fontSize(3xl);
       font-weight: 500;
       line-height: 1.3;
     }
 
     span {
       display: flex;
-      font-size: fontSize(lg);
+      font-size: fontSize(xl);
       font-weight: 500;
     }
   }

apps/frontend/styles/components/explore/explore-repo-item.module.scss

@@ -0,0 +1,61 @@
+@use '../../base' as *;
+
+.item {
+  display: flex;
+  gap: size(5);
+  border: 1px solid var(--clr-gray-100);
+  border-radius: 28px;
+  padding: size(4);
+  cursor: pointer;
+
+  picture {
+    display: flex;
+    height: 64px;
+    width: 64px;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+
+    img {
+      object-fit: cover;
+    }
+  }
+
+  .source {
+    display: flex;
+    font-size: fontSize(2xl);
+    position: absolute;
+    z-index: 99;
+    top: 52px;
+    left: 52px;
+    background: var(--clr-white);
+    border-radius: 100%;
+    padding: size(1);
+  }
+
+  .detail {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    h4 {
+      display: flex;
+      font-size: fontSize(2xl);
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    p {
+      display: flex;
+      font-size: fontSize(lg);
+      font-weight: 500;
+      margin-top: size(5);
+    }
+
+    span {
+      display: flex;
+      font-weight: 600;
+      margin-top: 20px;
+    }
+  }
+}

apps/frontend/styles/pages/explore/explore.module.scss

@@ -45,6 +45,7 @@
   section.more_section {
     display: flex;
     flex-direction: column;
+    gap: 140px;
 
     .heading {
       display: flex;
@@ -71,5 +72,13 @@
         text-align: center;
       }
     }
+
+    .content {
+      display: grid;
+      @include container;
+      margin: 0 auto;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: size(16) size(7);
+    }
   }
 }

apps/frontend/types/content.d.ts

@@ -5,11 +5,20 @@ export interface ArticlePost {
   type: string
 }
 
+export interface ExplorationRepo {
+  image: string
+  title: string
+  desc: string
+  url: string
+  source: string
+}
+
 export interface Exploration {
   slug: string
   title: string
   summary: string
   thumbnail: string
+  repos: ExplorationRepo[]
 }
 
 export interface ExplorationDetail {

apps/studio/schemas/index.ts

@@ -12,6 +12,7 @@ import projectClientSchema from './project/project-client-schema'
 import projectOverviewSchema from './project/project-overview-schema'
 import projectSchema from './project/project-schema'
 import projectTeamSchema from './project/project-team-schema'
+import repoSchema from './repos/repo-schema'
 import serviceAboutSchema from './service/service-about-schema'
 import serviceOverviewSchema from './service/service-overview-schema'
 import servicePlatformSchema from './service/service-platfrom-schema'
@@ -47,6 +48,9 @@ export const schemaTypes = [
   // content
   contentSchema,
 
+  // repos
+  repoSchema,
+
   // service
   serviceRequirementSchema,
   servicePlatformSchema,