Merge pull request #7 from leon-luna-ray/dev

Dev

README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-This is my current web developer portfolio built with React.js and Next.js. The app is deployed via Netlify. This is a one page layout that includes a collection of my best projects, tech skills, a bio and contact information. Content is pulled from Sanity.io CMS via API.
+This is my current web developer portfolio built with React.js 18 and Next.js 13, deployed on Vercel. This is a one page layout that includes a collection of my best projects, tech skills, a bio and contact information. Content is pulled from Sanity.io CMS via API.
 
 ### Project URLs
 - [https://www.rayluna.me/](https://www.rayluna.me/)

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "14": "^3.1.6",
+    "@portabletext/react": "^3.0.11",
+    "@portabletext/to-html": "^2.0.5",
     "@sanity/image-url": "^1.0.2",
     "babel-preset-es2015": "^6.24.1",
     "eslint-config-next": "^13.3.0",

src/components/About/About.js

@@ -19,7 +19,7 @@ const About = ({ profile }) => {
       <br />
       <br />
       <SectionText className='about-richtext'>
-        {imageUrl ? <Img src={imageUrl} alt='Ray Luna'/> : ''}
+        {imageUrl ? <Img src={imageUrl} alt={profile.image.altText || 'Profile Image'}/> : ''}
         {profile?.bio}
       </SectionText>
       <br />

src/components/Projects/Projects.js

@@ -28,14 +28,14 @@ const Projects = ({ projects }) => {
   const mapProjectCards = projects.map(project => {
     return (
       <BlogCard key={project._id} className='project-card'>
-        <Img src={getThumbnailUrl(project.mainImage)} />
+        <Img src={getThumbnailUrl(project.mainImage)} alt={project.mainImage.altText || 'Project Screenshot'} />
         <br />
         <br />
         <TitleContent>
           <HeaderThree title={project.title}>{project.title}</HeaderThree>
           <Hr />
         </TitleContent>
-        <CardInfo>{project.description[0].children[0].text}</CardInfo>
+        <CardInfo>{project.intro}</CardInfo>
         <br />
         <div>
           {project.technologies.length ? (

src/pages/api/sanity.js

@@ -14,38 +14,49 @@ export function getImageUrl(source) {
   return builder.image(source);
 }
 
-export async function fetchGlobal() {
-  // Sanity queries are in the GROQ query language
-  const query = `*[_type == "globalSettings"][0]`;
-  const global = await client.fetch(query);
-
-  return global;
-}
-
-export async function fetchProfile() {
-  const query = `*[_type == "profileDetails"][0]`;
-  const profile = await client.fetch(query);
-
-  return profile;
+const queryGlobalSettings = `*[_type == "globalSettings"][0]`
+const querySkillsGroups = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
+const queryProfile = `*[_type == "profileDetails"][0]{
+    ...,
+    "image": image.asset->{
+      _id,
+      title,
+      altText,
+      description,
+    }
+  }`
+const queryProjectGroup = (slug) => {
+  return `*[_type == "projectGroup" && slug.current == "${slug}"] | order(title asc) {
+      _id,
+      title,
+      slug,
+      description,
+      projects[]->{
+        _id, 
+        intro, 
+        "mainImage": mainImage.asset->{
+          _id,
+          title,
+          altText,
+          description,
+        }, 
+        slug, 
+        status, 
+        title, 
+        technologies[]->{_id, title, slug,},
+      },
+    }[0]`;
 }
 
-export async function fetchHobbies() {
-  const query = `*[_type == "profileDetails"][0] { "hobbies" : hobbies[] -> {title} }`;
-  const hobbies = await client.fetch(query);
-
-  return hobbies;
-}
-
-export async function fetchFeaturedProjects() {
-  const query = `*[_type == "project" && featured] | order(_updatedAt desc) {_id, _key, title, description, featured, mainImage, repository, slug, status, url, "technologies" : technologies[] -> {_id, title, website}}`;
-  const projects = await client.fetch(query);
-
-  return projects;
-}
-
-export async function fetchSkills() {
-  const query = `*[_type == "skillsList"] | order(title) {_id, title, "skills" : skills[] -> {_id, title, website}}`;
-  const skills = await client.fetch(query);
-
-  return skills;
+// API Requests
+export async function fetchHomePage() {
+  const query = `{
+      "global": ${queryGlobalSettings},
+      "profile": ${queryProfile},
+      "projects": ${queryProjectGroup('nextjs-portfolio')},
+      "skillsGroups": ${querySkillsGroups}
+  }`;
+  const data = await client.fetch(query);
+
+  return data;
 }

src/pages/index.js

@@ -1,10 +1,8 @@
 import React from "react";
 import {
-  fetchProfile,
-  fetchFeaturedProjects,
-  fetchSkills,
-  fetchGlobal,
+  fetchHomePage,
 } from "./api/sanity";
+import {PortableText} from '@portabletext/react'
 
 import Header from "../components/Header/Header";
 import Footer from "../components/Footer/Footer";
@@ -18,10 +16,12 @@ import { Layout } from "../layout/Layout";
 import { Section } from "../styles/GlobalComponents";
 
 export const getStaticProps = async () => {
-  const global = await fetchGlobal();
-  const profile = await fetchProfile();
-  const projects = await fetchFeaturedProjects();
-  const skills = await fetchSkills();
+  const data = await fetchHomePage();
+
+  const global = data.global
+  const profile = data.profile;;
+  const projects = data.projects.projects || [];
+  const skills = data.skillsGroups;
 
   return {
     props: {
@@ -33,9 +33,14 @@ export const getStaticProps = async () => {
   };
 };
 
-const Home = ({ global, profile, projects, skills }) => {
+const Home = ({ data, global, profile, projects, skills }) => {
   const renderProjectSection = () => {
-    if (projects) return <Projects projects={projects} />;
+    if (projects) return (
+      <div className="flex-col-1">
+        {/* <PortableText value={data?.projects.description} /> */}
+        <Projects projects={projects} />
+      </div>
+    )
   };
 
   const renderTechSection = () => {

yarn.lock

@@ -287,6 +287,34 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
+"@portabletext/react@^3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@portabletext/react/-/react-3.0.11.tgz#c5f31d9ea990391a3850ba4dfd685373107d9a21"
+  integrity sha512-LATQQRxvP3TlAnFayjYt7kPJcnpAtWH6XHl4RFU31pKb1G6gZlTWTB+chXXAv0uQG6Be7OEdRzCmsz9XFEVNew==
+  dependencies:
+    "@portabletext/toolkit" "^2.0.10"
+    "@portabletext/types" "^2.0.8"
+
+"@portabletext/to-html@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@portabletext/to-html/-/to-html-2.0.5.tgz#29eb2ae198906e51f7e26369aaafbf6d7271b329"
+  integrity sha512-KkUI6iBuKSzclyKYnwGLiE0asxvW1ZcFmZ7wBslW+nulw78qwpTl3wuK47zf+y0XX7g52d5gw5WlYBAhuSEjSg==
+  dependencies:
+    "@portabletext/toolkit" "^2.0.10"
+    "@portabletext/types" "^2.0.8"
+
+"@portabletext/toolkit@^2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@portabletext/toolkit/-/toolkit-2.0.10.tgz#ddcf88cb76b287ff9d5c94f69a6b370a9c9aba9c"
+  integrity sha512-d+F9JvpnMEx7kd6saZ9OWA4U1Iwuokh6TOht7iqkfWU+0ivh9yM4v+b0Kpu+iiPcElicoabhtXol+yTvWJ1jDw==
+  dependencies:
+    "@portabletext/types" "^2.0.8"
+
+"@portabletext/types@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@portabletext/types/-/types-2.0.8.tgz#34aec838701482f838bdd0ee07a9e31dc01a9230"
+  integrity sha512-eiq9/kMX2bYezS4/kLFk3xNnruCFjCDdw6aYEv5ECHVKkYROiuLd3/AsP5d7tWF3+kPPy6tB0Wq8aqDG/URHGA==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"