feat: add Book type, schema and query

sanity/deskStructure.js

@@ -1,4 +1,5 @@
 const workSection = ['job', 'language', 'publication', 'school', 'skill'];
+const freeTimeSection = ['book'];
 const sharedSection = ['shortText', 'skillIcon'];
 
 export const customStructure = (S) =>
@@ -14,6 +15,15 @@ export const customStructure = (S) =>
               workSection.map((section) => S.documentTypeListItem(section))
             )
         ),
+      S.listItem()
+        .title('Free Time')
+        .child(
+          S.list()
+            .title('Free Time Documents')
+            .items(
+              freeTimeSection.map((section) => S.documentTypeListItem(section))
+            )
+        ),
       S.listItem()
         .title('Shared')
         .child(

sanity/schema.ts

@@ -1,14 +1,23 @@
 import { type SchemaTypeDefinition } from 'sanity';
 
-import skillIcon from '@/schemas/skillIcon';
-
+import book from '../src/schemas/book';
 import job from '../src/schemas/job';
 import language from '../src/schemas/language';
 import publication from '../src/schemas/publication';
 import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
 import skill from '../src/schemas/skill';
+import skillIcon from '../src/schemas/skillIcon';
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [job, language, publication, school, shortText, skill, skillIcon],
+  types: [
+    book,
+    job,
+    language,
+    publication,
+    school,
+    shortText,
+    skill,
+    skillIcon,
+  ],
 };

src/app/(public)/about/free-time/page.tsx

@@ -1,11 +1,29 @@
 import * as React from 'react';
 
+import Books from '@/components/organisms/about-free-time/Books';
+
+import { booksQuery } from '@/queries/books';
+
+import { sanityClient } from '../../../../../sanity/lib/client';
+
+import { Book } from '@/types/Book';
+
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
   description: 'About page',
 };
 
+const getData = async () => {
+  const books: Book[] = await sanityClient.fetch(booksQuery);
+
+  return {
+    books,
+  };
+};
+
 const AboutFreeTimePage = async () => {
+  const { books } = await getData();
+
   return (
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
@@ -20,6 +38,8 @@ const AboutFreeTimePage = async () => {
               my free time :)
             </p>
           </div>
+
+          <Books books={books} />
         </div>
       </section>
     </main>

src/components/organisms/about-free-time/Books.tsx

@@ -1,126 +1,39 @@
 'use client';
 
-import { PortableText } from '@portabletext/react';
 import Image from 'next/image';
 import * as React from 'react';
 
-import { School } from '@/types/School';
+import { Book } from '@/types/Book';
 
-export interface EducationProps {
-  schools: School[];
+export interface BookProps {
+  books: Book[];
 }
 
-const Education = ({ schools }: EducationProps) => {
+const Books = ({ books }: BookProps) => {
   return (
     <div className=''>
       <div className='m-2 flex'>
-        <h2>Education</h2>
+        <h2>Best books ever written</h2>
       </div>
 
-      <div>
-        {schools.map((school) => (
-          <div
-            key={school._id}
-            className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
+      <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-4 overflow-x-auto px-4 pb-14 md:mx-0 md:w-full md:px-0'>
+        {books.map((book) => (
+          <li
+            key={book._id}
+            className='h-[128px] w-[100px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-400 hover:to-blue-700'
           >
-            {/* Start School Header - Desktop */}
-            <div className='hidden border-b-2 border-slate-200 pb-2 md:flex'>
-              <Image
-                className='me-3 rounded-sm'
-                src={school.schoolIcon}
-                alt={school.schoolName}
-                width={60}
-                height={60}
-              />
-
-              <div className='flex w-full justify-between'>
-                <div className='flex flex-col'>
-                  <div className='flex flex-row'>
-                    <h4 className='me-4'>
-                      <a href={school.degreeUrl}>{school.schoolName}</a>
-                    </h4>
-
-                    <Image
-                      src={school.flagUrl}
-                      alt={school.schoolName}
-                      width={28}
-                      height={28}
-                    />
-                  </div>
-
-                  <h5 className='font-medium'>{school.degreeName}</h5>
-                </div>
-
-                <div className='flex'>
-                  <div className='me-20 flex flex-col justify-center'>
-                    <span className='text-lg font-semibold'>
-                      {school.grade}
-                    </span>
-                  </div>
-
-                  <div className='flex flex-col justify-center'>
-                    <span className='text-lg font-semibold'>
-                      {school.startYear}&nbsp; — &nbsp;{school.endYear}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {/* End School Header - Desktop */}
-
-            {/* Start School Header - Mobile */}
-            <div className='flex flex-col border-b-2 border-slate-200 pb-2 md:hidden'>
-              <div className='flex'>
-                <Image
-                  className='me-3 rounded-sm'
-                  src={school.schoolIcon}
-                  alt={school.schoolName}
-                  width={60}
-                  height={60}
-                />
-
-                <div className='flex w-full justify-between'>
-                  <div className='flex flex-col'>
-                    <div className='flex flex-row justify-between'>
-                      <h4 className='me-4'>
-                        <a href={school.degreeUrl}>{school.schoolName}</a>
-                      </h4>
-
-                      <Image
-                        src={school.flagUrl}
-                        alt={school.schoolName}
-                        width={20}
-                        height={20}
-                      />
-                    </div>
-
-                    <h5 className='font-medium'>{school.degreeName}</h5>
-                  </div>
-                </div>
-              </div>
-
-              <div className='-mt-1 flex flex-row justify-end'>
-                <span className='me-8 text-sm font-normal'>{school.grade}</span>
-
-                <span className='text-sm font-normal'>
-                  {school.startYear}&nbsp; — &nbsp;{school.endYear}
-                </span>
-              </div>
-            </div>
-            {/* End School Header - Mobile */}
-
-            {/* Start School Content */}
-            <div className='job-content pt-4'>
-              <div className='sm-skill-description md:skill-description pb-2 text-justify font-light'>
-                <PortableText value={school.description} />
-              </div>
-            </div>
-            {/* End School Content */}
-          </div>
+            <a
+              href={book.goodreadsLink}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Image alt={book.title} src={book.cover} width={90} height={90} />
+            </a>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 };
 
-export default Education;
+export default Books;

src/pages/api/hobbies.ts

@@ -0,0 +1,17 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { booksQuery } from '@/queries/books';
+
+import { sanityClient } from '../../../sanity/lib/client';
+
+import { Book } from '@/types/Book';
+
+const hobbiesApi = async (req: NextApiRequest, res: NextApiResponse) => {
+  const books: Book[] = await sanityClient.fetch(booksQuery);
+
+  res.status(200).json({
+    books,
+  });
+};
+
+export default hobbiesApi;

src/queries/books.ts

@@ -0,0 +1,11 @@
+import { groq } from 'next-sanity';
+
+export const booksQuery = groq`
+*[_type == "book"] | order(author asc) {
+  _id,
+  title,
+  author,
+  fiction,
+  "cover": cover.asset->url,
+  goodreadsLink,
+}`;

src/schemas/book.ts

@@ -0,0 +1,41 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'book',
+  title: 'Book',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'author',
+      title: 'Author',
+      type: 'string',
+    }),
+    defineField({
+      name: 'fiction',
+      title: 'Fiction?',
+      type: 'boolean',
+    }),
+    defineField({
+      name: 'cover',
+      title: 'Cover',
+      type: 'image',
+    }),
+    defineField({
+      name: 'goodreadsLink',
+      title: 'Goodreads Link',
+      type: 'string',
+    }),
+  ],
+  orderings: [
+    {
+      title: 'Author',
+      name: 'authorAsc',
+      by: [{ field: 'author', direction: 'asc' }],
+    },
+  ],
+});

src/types/Book.ts

@@ -0,0 +1,8 @@
+export interface Book {
+  _id: string;
+  title: string;
+  author: string;
+  fiction: boolean;
+  cover: string;
+  goodreadsLink: string;
+}