Restructuring a blog to a portfolio in Sanity and 11ty
7 replies
Last updated: Oct 21, 2021
J
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
J
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
J
ah maybe I should be looking at 11ty docs instead? 🤔
Oct 21, 2021, 7:19 PM
J
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
R
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
J
hey
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
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 😌)Oct 21, 2021, 8:00 PM
R
No dumb questions here 🙂 A lot of the fields won't have to be changed, looking at that template. Your
post.jscan 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
J
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.