Restructuring a blog to a portfolio in Sanity and 11ty

7 replies
Last updated: Oct 21, 2021
hiya! 👋 I’m a dev baby 👶 and just set up a new project with Sanity + 11ty — starting simple with a nav and wondering where I can find information like how to link to pages like my home page/about page/etc. (very very basic, I’m sorry! this is my first venture away from purely static sites and a lil Wordpress 😬)
Oct 21, 2021, 7:12 PM
I have given a read thru of this article , just not exactly sure how to jump from here to the rest of the documentation!
Oct 21, 2021, 7:12 PM
ah maybe I should be looking at 11ty docs instead? 🤔
Oct 21, 2021, 7:19 PM
I have given a read thru of this article , just not exactly sure how to jump from here to the rest of the documentation!
Oct 21, 2021, 7:12 PM
Hey Josh! Welcome! Here's a navigation plugin for 11ty that could be helpful. I'm a bit inexperienced with 11ty itself but if you have any questions about how to access your content from Sanity to pass along to your frontend I can help with that!
Oct 21, 2021, 7:23 PM
hey
user M
suuper appreciate it!!! Warning you in advance that my questions will prob be super dumb (but I’ll practice restraint, don’t worry 😌)

Could you point me in the direction of where I could get started restructuring my site from a blog to a portfolio? i.e. change terminology from Blog to Projects, and where to add and remove fields in the Studio? Think I figured this out…. maybe
Oct 21, 2021, 8:00 PM
No dumb questions here 🙂 A lot of the fields won't have to be changed, looking at that template. Your
post.js
can be changed to
project.js
. Then I'd probably make the following changes:
import {format} from 'date-fns'

export default {
  name: 'project',
  type: 'document',
  title: 'Project',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title',
      description: 'Titles should be catchy, descriptive, and not too long'
    },
    {
      name: 'slug',
      type: 'slug',
      title: 'Slug',
      description: 'Some frontends will require a slug to be set to be able to show the post',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      //Change this field from publishedAt to completionDate. Since you're not scheduling a post any more, it can become a date instead of a dateTime
      name: 'completionDate',
      type: 'date',
      title: 'Completion Date',
    },
    {
      name: 'mainImage',
      type: 'mainImage',
      title: 'Main image'
    },
    {
      //If this is a personal portfolio, this field can be removed since the author will always be you. 
      name: 'authors',
      title: 'Authors',
      type: 'array',
      of: [
        {
          type: 'authorReference'
        }
      ]
    },
    {
      name: 'categories',
      type: 'array',
      title: 'Categories',
      of: [
        {
          type: 'reference',
          to: {
            type: 'category'
          }
        }
      ]
    },
    {
      name: 'description',
      type: 'bodyPortableText',
      title: 'Descriptionm'
    }
  ],
  orderings: [
    {
      name: 'completionDateAsc',
      title: 'Completion date new–>old',
      by: [
        {
          field: 'completionDate',
          direction: 'asc'
        },
        {
          field: 'title',
          direction: 'asc'
        }
      ]
    },
    {
      name: 'completionDateDesc',
      title: 'Completion date old->new',
      by: [
        {
          field: 'completionDate',
          direction: 'desc'
        },
        {
          field: 'title',
          direction: 'asc'
        }
      ]
    }
  ],
  preview: {
    select: {
      title: 'title',
      creationDate: 'creationDate',
      slug: 'slug',
      media: 'mainImage'
    },
    prepare ({title = 'No title', completionDate, slug = {}, media}) {
      const dateSegment = format(completionDate, 'YYYY/MM')
      const path = `/${dateSegment}/${slug.current}/`
      return {
        title,
        media,
        subtitle: completionDate ? path : 'Missing completion date'
      }
    }
  }
}
Oct 21, 2021, 8:21 PM
Yes! Just stumbled upon this a few minutes ago, thank you! If I change to project.js, where do I update this elsewhere so my site doesn’t break?
Oct 21, 2021, 8:23 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?