From 9ede1c951eb0c8300ac2f50f5bcb1f839672446a Mon Sep 17 00:00:00 2001 From: nyomansunima Date: Thu, 27 Apr 2023 20:14:42 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=80=20update:=20repo=20to=20explore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/explore/explore-repo-item.tsx | 46 ++++++++++++++ apps/frontend/components/explore/index.tsx | 3 +- apps/frontend/lib/services/content-service.ts | 19 +++++- apps/frontend/pages/explore/index.tsx | 33 ++++++++-- apps/frontend/pages/index.tsx | 12 ++-- .../explore/explore-item-card.module.scss | 4 +- .../explore/explore-repo-item.module.scss | 61 +++++++++++++++++++ .../styles/pages/explore/explore.module.scss | 9 +++ apps/frontend/types/content.d.ts | 9 +++ apps/studio/schemas/index.ts | 4 ++ apps/studio/schemas/repos/repo-schema.tsx | 55 +++++++++++++++++ 11 files changed, 241 insertions(+), 14 deletions(-) create mode 100644 apps/frontend/components/explore/explore-repo-item.tsx create mode 100644 apps/frontend/styles/components/explore/explore-repo-item.module.scss create mode 100644 apps/studio/schemas/repos/repo-schema.tsx diff --git a/apps/frontend/components/explore/explore-repo-item.tsx b/apps/frontend/components/explore/explore-repo-item.tsx new file mode 100644 index 0000000..759505e --- /dev/null +++ b/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 = ({ + data, +}): JSX.Element => { + return ( +
window.open(data.url)} + > + + {data.title} + + +
+

{data.title}

+

{data.desc.substring(0, 70)}

+
+
+ ) +} + +export default ExploreRepoItem diff --git a/apps/frontend/components/explore/index.tsx b/apps/frontend/components/explore/index.tsx index 9b44ff5..d9a019e 100644 --- a/apps/frontend/components/explore/index.tsx +++ b/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 } diff --git a/apps/frontend/lib/services/content-service.ts b/apps/frontend/lib/services/content-service.ts index 16ca36f..d563097 100644 --- a/apps/frontend/lib/services/content-service.ts +++ b/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 { + const query = ` + *[_type == "repo"]{ + ..., + "image": image.asset -> url, + } + ` + + const res = await sanityClient.fetch(query) + return res + } + async loadAllExploration(): Promise { const query = ` *[_type == "exploration"]{ diff --git a/apps/frontend/pages/explore/index.tsx b/apps/frontend/pages/explore/index.tsx index 665b514..144c2c3 100644 --- a/apps/frontend/pages/explore/index.tsx +++ b/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(null) const listQuery = useQuery(['explore'], contentService.loadAllExploration) + const reposQuery = useQuery(['repos'], contentService.loadAllExploreRepo) const cursor = useCursor() useEffect(() => { @@ -59,14 +62,26 @@ 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() @@ -74,7 +89,7 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => { return () => { ctx.revert() } - }, [listQuery.data]) + }, [listQuery.data, reposQuery.data]) return ( <> @@ -104,7 +119,7 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => {
-
+

I explore more than you know

@@ -115,7 +130,15 @@ const ExplorePage: NextPageWithLayout = (): JSX.Element => { and gitlab repo.
+
+ {reposQuery.data && + reposQuery.data.map((item, index) => ( + + ))} +
+ + ) diff --git a/apps/frontend/pages/index.tsx b/apps/frontend/pages/index.tsx index 727b90d..38e2d6a 100644 --- a/apps/frontend/pages/index.tsx +++ b/apps/frontend/pages/index.tsx @@ -288,7 +288,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => { Indonesia.
- + More about me
@@ -335,7 +335,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
- + Read more in Blog @@ -374,7 +374,7 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {
- + More inspirations @@ -386,8 +386,10 @@ const HomePage: NextPageWithLayout = (): JSX.Element => {

How treament make me better

- 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.
More to explore diff --git a/apps/frontend/styles/components/explore/explore-item-card.module.scss b/apps/frontend/styles/components/explore/explore-item-card.module.scss index fbd9e44..ee01e0e 100644 --- a/apps/frontend/styles/components/explore/explore-item-card.module.scss +++ b/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; } } diff --git a/apps/frontend/styles/components/explore/explore-repo-item.module.scss b/apps/frontend/styles/components/explore/explore-repo-item.module.scss new file mode 100644 index 0000000..2fa3849 --- /dev/null +++ b/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; + } + } +} diff --git a/apps/frontend/styles/pages/explore/explore.module.scss b/apps/frontend/styles/pages/explore/explore.module.scss index 1d7f0fb..9fcbd02 100644 --- a/apps/frontend/styles/pages/explore/explore.module.scss +++ b/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); + } } } diff --git a/apps/frontend/types/content.d.ts b/apps/frontend/types/content.d.ts index 49bbae5..b7e2288 100644 --- a/apps/frontend/types/content.d.ts +++ b/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 { diff --git a/apps/studio/schemas/index.ts b/apps/studio/schemas/index.ts index ed199d5..8ac2bdd 100644 --- a/apps/studio/schemas/index.ts +++ b/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, diff --git a/apps/studio/schemas/repos/repo-schema.tsx b/apps/studio/schemas/repos/repo-schema.tsx new file mode 100644 index 0000000..10f33b0 --- /dev/null +++ b/apps/studio/schemas/repos/repo-schema.tsx @@ -0,0 +1,55 @@ +import { Upload } from 'react-iconly' + +/** + * # repoSchema + * + * the schema of repo + * resource from where the project come + */ +const repoSchema = { + title: 'Repo Resources', + name: 'repo', + type: 'document', + icon: Upload, + fields: [ + { + title: 'Image', + name: 'image', + type: 'image', + }, + { + title: 'Title', + name: 'title', + type: 'string', + }, + { + title: 'Descriptions', + name: 'desc', + type: 'text', + }, + { + title: 'URL', + name: 'url', + type: 'url', + }, + { + title: 'Source', + name: 'source', + type: 'string', + options: { + list: [ + { + title: 'Gitlab', + value: 'gitlab', + }, + { + title: 'Github', + value: 'github', + }, + ], + }, + }, + ], +} + +export default repoSchema