From e6a48fe3ae3254734341cde8b60a2160ab740bc2 Mon Sep 17 00:00:00 2001 From: "marta.pancaldi" Date: Sat, 8 Jul 2023 16:01:04 +0200 Subject: [PATCH] feat: add basic About page with skill display --- package.json | 1 + src/app/(public)/about/page.tsx | 60 +++++++++++++++++++++++++++++++++ src/app/(public)/page.tsx | 4 +-- src/pages/api/skill-icons.ts | 15 +++++++++ src/queries/skill-icons.ts | 4 +++ src/queries/skills.ts | 6 ++++ src/styles/globals.css | 16 ++++++++- src/types/Skill.ts | 4 ++- src/types/SkillIcon.ts | 1 + tailwind.config.ts | 2 +- yarn.lock | 20 +++++++++++ 11 files changed, 128 insertions(+), 5 deletions(-) create mode 100644 src/app/(public)/about/page.tsx create mode 100644 src/pages/api/skill-icons.ts create mode 100644 src/queries/skill-icons.ts diff --git a/package.json b/package.json index c208008..19f9924 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/material": "^5.13.5", + "@portabletext/react": "^3.0.4", "@sanity/client": "^6.1.4", "@sanity/code-input": "^4.1.1", "@sanity/document-internationalization": "^2.0.1", diff --git a/src/app/(public)/about/page.tsx b/src/app/(public)/about/page.tsx new file mode 100644 index 0000000..b1c0c05 --- /dev/null +++ b/src/app/(public)/about/page.tsx @@ -0,0 +1,60 @@ +import { PortableText } from '@portabletext/react'; +import Image from 'next/image'; +import * as React from 'react'; + +import { skillQuery } from '@/queries/skills'; + +import { sanityClient } from '../../../../sanity/lib/client'; + +import { Skill } from '@/types/Skill'; +import { SkillIcon } from '@/types/SkillIcon'; + +const getData = async () => { + const skills: Skill[] = await sanityClient.fetch(skillQuery); + + return { + skills, + }; +}; + +const AboutPage = async () => { + const { skills } = await getData(); + + const iconDimension = 36; + + return ( +
+
+
+

About

+ +
+ {skills.map((skill: Skill) => ( +
+
+ {skill.icons.map((icon: SkillIcon) => ( + {icon.title} + ))} +
+ +

{skill.title}

+ + + + +
+ ))} +
+
+
+
+ ); +}; + +export default AboutPage; diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx index 9d1133e..0ea98da 100644 --- a/src/app/(public)/page.tsx +++ b/src/app/(public)/page.tsx @@ -4,10 +4,10 @@ import Seo from '@/components/Seo'; const HomePage = async () => { return ( -
+
-
+
Homepage :)
diff --git a/src/pages/api/skill-icons.ts b/src/pages/api/skill-icons.ts new file mode 100644 index 0000000..8eccc1a --- /dev/null +++ b/src/pages/api/skill-icons.ts @@ -0,0 +1,15 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +import { skillIconQuery } from '@/queries/skill-icons'; + +import { sanityClient } from '../../../sanity/lib/client'; + +import { SkillIcon } from '@/types/SkillIcon'; + +const skillIconsApi = async (req: NextApiRequest, res: NextApiResponse) => { + const skillIcons: SkillIcon[] = await sanityClient.fetch(skillIconQuery); + + res.status(200).json(skillIcons); +}; + +export default skillIconsApi; diff --git a/src/queries/skill-icons.ts b/src/queries/skill-icons.ts new file mode 100644 index 0000000..d579eaa --- /dev/null +++ b/src/queries/skill-icons.ts @@ -0,0 +1,4 @@ +import { groq } from 'next-sanity'; + +export const skillIconQuery = groq` +*[_type == "skillIcon"]`; diff --git a/src/queries/skills.ts b/src/queries/skills.ts index ec63878..27f964d 100644 --- a/src/queries/skills.ts +++ b/src/queries/skills.ts @@ -4,4 +4,10 @@ export const skillQuery = groq` *[_type == "skill"] { name, title, + description, + 'icons': icons[]-> { + _id, + title, + "url": icon.asset->url + } }`; diff --git a/src/styles/globals.css b/src/styles/globals.css index cb9fba6..f2bbcbb 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -42,7 +42,7 @@ @layer base { /* inter var - latin */ @font-face { - font-family: 'Inter'; + font-family: 'Roboto Light'; font-style: normal; font-weight: 100 900; font-display: optional; @@ -222,4 +222,18 @@ width: 0%; left: 50%; } + + p a { + color: var(--color-primary-600); + text-decoration: none; + } + + p a:hover { + color: var(--color-primary-700); + text-decoration: underline; + } + + .short-p { + text-justify: distribute; + } } diff --git a/src/types/Skill.ts b/src/types/Skill.ts index 3b23bc7..a25ed5a 100644 --- a/src/types/Skill.ts +++ b/src/types/Skill.ts @@ -1,8 +1,10 @@ +import { TypedObject } from '@portabletext/types'; + import { SkillIcon } from '@/types/SkillIcon'; export interface Skill { name: string; title: string; - description: string; + description: TypedObject; icons: SkillIcon[]; } diff --git a/src/types/SkillIcon.ts b/src/types/SkillIcon.ts index 5469c2f..2bc43a5 100644 --- a/src/types/SkillIcon.ts +++ b/src/types/SkillIcon.ts @@ -1,4 +1,5 @@ export interface SkillIcon { + _id: string; title: string; url: string; } diff --git a/tailwind.config.ts b/tailwind.config.ts index 55d1768..5962471 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,7 +7,7 @@ export default { theme: { extend: { fontFamily: { - primary: ['Inter', ...defaultTheme.fontFamily.sans], + primary: ['Roboto Thin', ...defaultTheme.fontFamily.sans], }, colors: { primary: { diff --git a/yarn.lock b/yarn.lock index 6e81197..9b34211 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3682,6 +3682,26 @@ resolved "https://verdaccio.mein-recycling.de/@popperjs%2fcore/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== +"@portabletext/react@^3.0.4": + version "3.0.4" + resolved "https://verdaccio.mein-recycling.de/@portabletext%2freact/-/react-3.0.4.tgz#cd1316c782b227fad206fd3147e1c9d60aa933a8" + integrity sha512-M15IXRgoOgWiu3WxwdCZPpi/0sdP2KrMcRKCZFHI4D2nkhXO1A8Avs6Djc+uPg5ayfnCxewLl/FnXA0hFgccBw== + dependencies: + "@portabletext/toolkit" "^2.0.4" + "@portabletext/types" "^2.0.5" + +"@portabletext/toolkit@^2.0.4": + version "2.0.4" + resolved "https://verdaccio.mein-recycling.de/@portabletext%2ftoolkit/-/toolkit-2.0.4.tgz#5e5d4461f3451736c3165962b4a39d0693c9834b" + integrity sha512-ZE+WntiZQ40vxMBu3/QXRbGjzL8/R2BOFgdf6danJOahvlL9lZ1/DDShyUsxNaAvoBarwGJtjuZVOcRJWcsVng== + dependencies: + "@portabletext/types" "^2.0.5" + +"@portabletext/types@^2.0.5": + version "2.0.5" + resolved "https://verdaccio.mein-recycling.de/@portabletext%2ftypes/-/types-2.0.5.tgz#89872bd5b25df8c1d917e13fe3f035cdf135ae0e" + integrity sha512-AceKp/Y6UIzvUe/T675oPKlO2Dnt1BVIiUpwhcplPzLeYqaYaWYvb7ricVyWj7j0rukYRgBRQdrTBvgo9E1D+g== + "@reduxjs/toolkit@^1.9.0": version "1.9.5" resolved "https://verdaccio.mein-recycling.de/@reduxjs%2ftoolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"