title
Sanity.io Crash Course | Headless CMS

description
Spend 20 minutes learning to quickly set up your next content backend with Sanity.io. We'll run Sanity Studio, an open-source headless CMS that connects to a hosted real-time datastore. Learn how to customize fields and content types, and how to query for data. By the end you should be ready to power content in React, Vue or any other framework! Kapehe's Social Links: Twitter: https://twitter.com/kapehe_ok YouTube: https://www.youtube.com/c/kapehe Website: https://kapehe.io More on Sanity https://www.sanity.io/

detail
{'title': 'Sanity.io Crash Course | Headless CMS', 'heatmap': [{'end': 148.098, 'start': 108.416, 'weight': 1}, {'end': 806.655, 'start': 784.349, 'weight': 0.73}, {'end': 962.454, 'start': 940.216, 'weight': 0.847}, {'end': 1341.935, 'start': 1326.412, 'weight': 0.785}], 'summary': 'In this 《sanity.io crash course | headless cms》 video tutorial, the chapters include an introduction to the sanity.io platform, setting up and customizing sanity studio, real-time editing and deployment, emphasizing its flexibility for managing content and querying data for front-end frameworks.', 'chapters': [{'end': 182.871, 'segs': [{'end': 35.336, 'src': 'embed', 'start': 7.062, 'weight': 0, 'content': [{'end': 10.404, 'text': 'Aloha everyone, and welcome to the sanity.io crash course.', 'start': 7.062, 'duration': 3.342}, {'end': 15.046, 'text': "My name is Cap, and in this video, I'll be walking you through how to get started with Sanity.", 'start': 10.844, 'duration': 4.202}, {'end': 20.488, 'text': 'So Sanity is a platform where you can store all of your data for your apps and websites.', 'start': 15.626, 'duration': 4.862}, {'end': 24.13, 'text': 'A really cool thing about Sanity is the Sanity Studio.', 'start': 21.109, 'duration': 3.021}, {'end': 29.773, 'text': "It's a dashboard where you can edit, update, collaborate, pretty much manage all of your content.", 'start': 24.63, 'duration': 5.143}, {'end': 35.336, 'text': "And it's open source and built with React, so it's fully customizable for your projects.", 'start': 30.633, 'duration': 4.703}], 'summary': 'Sanity.io offers a customizable platform for data storage and content management, featuring the open-source sanity studio built with react.', 'duration': 28.274, 'max_score': 7.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE7062.jpg'}, {'end': 107.086, 'src': 'embed', 'start': 74.754, 'weight': 1, 'content': [{'end': 78.335, 'text': 'But this does take us to the create page of the sanity.io website.', 'start': 74.754, 'duration': 3.581}, {'end': 84.757, 'text': 'Down below, we do have some official starters that will have like a schema and a front end pre-built together.', 'start': 79.015, 'duration': 5.742}, {'end': 87.158, 'text': "So that's like a really quick way to get started.", 'start': 85.357, 'duration': 1.801}, {'end': 90.659, 'text': "But for today's crash course, I'm going to show you the CLI way.", 'start': 87.478, 'duration': 3.181}, {'end': 94.921, 'text': 'So this command will npm install globally the sanity CLI.', 'start': 91.259, 'duration': 3.662}, {'end': 99.303, 'text': 'and Sanity init is initializing a brand new Sanity project.', 'start': 95.741, 'duration': 3.562}, {'end': 100.903, 'text': "So I'm going to copy that.", 'start': 99.783, 'duration': 1.12}, {'end': 107.086, 'text': "I'm going to grab my terminal, and here I'm going to paste in that command.", 'start': 100.923, 'duration': 6.163}], 'summary': 'Demonstration of setting up a new sanity project using cli for quick start.', 'duration': 32.332, 'max_score': 74.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE74754.jpg'}, {'end': 148.098, 'src': 'heatmap', 'start': 108.416, 'weight': 1, 'content': [{'end': 112.378, 'text': "So right away, it's going to install the CLI and then ask me to log in.", 'start': 108.416, 'duration': 3.962}, {'end': 116.2, 'text': 'So you can log in with Google, GitHub, or an email password combination.', 'start': 112.938, 'duration': 3.262}, {'end': 117.52, 'text': "I'm going to use GitHub.", 'start': 116.36, 'duration': 1.16}, {'end': 125.884, 'text': "So navigate down to GitHub, press enter, and it's going to redirect me to a tab that is initializing me through GitHub.", 'start': 118.381, 'duration': 7.503}, {'end': 130.267, 'text': 'And because I am logged in on GitHub in my browser, the login is successful.', 'start': 125.964, 'duration': 4.303}, {'end': 131.867, 'text': "So I'm gonna close that tab.", 'start': 130.887, 'duration': 0.98}, {'end': 138.531, 'text': "I'm gonna go back to my terminal and here, We are now at the sanity init part of the command we did.", 'start': 132.247, 'duration': 6.284}, {'end': 140.072, 'text': 'So create new project.', 'start': 138.951, 'duration': 1.121}, {'end': 142.013, 'text': "We're going to hit enter because, yeah, we want to.", 'start': 140.092, 'duration': 1.921}, {'end': 144.475, 'text': 'Your project name.', 'start': 143.695, 'duration': 0.78}, {'end': 146.797, 'text': "Let's name this blog.", 'start': 144.695, 'duration': 2.102}, {'end': 148.098, 'text': "You can name it whatever you'd like.", 'start': 147.037, 'duration': 1.061}], 'summary': "Cli installation and login via github for creating a new project named 'blog'.", 'duration': 39.682, 'max_score': 108.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE108416.jpg'}], 'start': 7.062, 'title': 'Sanity.io crash course', 'summary': 'Introduces sanity.io platform and its studio dashboard, along with the process of installing sanity cli and initializing a new project. it emphasizes the flexibility and customization of sanity for managing content and querying data for front-end frameworks.', 'chapters': [{'end': 182.871, 'start': 7.062, 'title': 'Sanity.io crash course', 'summary': 'Introduces sanity.io platform, its studio dashboard, and the process of installing sanity cli and initializing a new project, emphasizing the flexibility and customization of sanity for managing content and querying data for front-end frameworks.', 'duration': 175.809, 'highlights': ['Sanity.io offers a platform for storing data for apps and websites, featuring an open-source, React-based Studio dashboard for content management. Sanity.io is a platform for storing data for apps and websites, with an open-source and React-based Studio dashboard for content management.', 'The process of installing Sanity CLI and initializing a new project is demonstrated, showcasing the flexibility and customization of Sanity for managing content and querying data for front-end frameworks. The chapter demonstrates the process of installing Sanity CLI and initializing a new project, highlighting the flexibility and customization of Sanity for managing content and querying data for front-end frameworks.', 'The availability of official starters that come with pre-built schema and front end is mentioned as a quick way to get started with Sanity. Official starters with pre-built schema and front end are mentioned as a quick way to get started with Sanity.']}], 'duration': 175.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE7062.jpg', 'highlights': ['Sanity.io offers a platform for storing data for apps and websites, featuring an open-source, React-based Studio dashboard for content management.', 'The process of installing Sanity CLI and initializing a new project is demonstrated, showcasing the flexibility and customization of Sanity for managing content and querying data for front-end frameworks.', 'Official starters with pre-built schema and front end are mentioned as a quick way to get started with Sanity.']}, {'end': 380.534, 'segs': [{'end': 210.73, 'src': 'embed', 'start': 183.412, 'weight': 0, 'content': [{'end': 187.194, 'text': 'If you want to start with a clean project and this is what will show up.', 'start': 183.412, 'duration': 3.782}, {'end': 191.057, 'text': 'The schema is what shows up in the sanity studio and within our code.', 'start': 187.494, 'duration': 3.563}, {'end': 193.078, 'text': "And I'll show you all that in a second.", 'start': 191.077, 'duration': 2.001}, {'end': 200.423, 'text': 'but we do have a couple that we can choose from movie project, e-commerce, blog, and this will have, like sample data in the movie,', 'start': 193.078, 'duration': 7.345}, {'end': 201.864, 'text': 'or e-commerce or blog.', 'start': 200.423, 'duration': 1.441}, {'end': 204.946, 'text': 'It will have just the schema for us and schema for us.', 'start': 201.904, 'duration': 3.042}, {'end': 207.748, 'text': 'And then we will add in our own data.', 'start': 205.426, 'duration': 2.322}, {'end': 209.169, 'text': "So I'm going to do blog.", 'start': 208.148, 'duration': 1.021}, {'end': 210.73, 'text': "So I'm gonna hit enter.", 'start': 210.109, 'duration': 0.621}], 'summary': 'Options for starting a project: movie, e-commerce, blog, with sample data and schema.', 'duration': 27.318, 'max_score': 183.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE183412.jpg'}, {'end': 327.012, 'src': 'embed', 'start': 279.661, 'weight': 1, 'content': [{'end': 283.342, 'text': 'So we have author and rather than talking about this, let me just show you.', 'start': 279.661, 'duration': 3.681}, {'end': 288.543, 'text': "So now that it's up and running, before I show you the Sanity Studio, I want to show you one little tip.", 'start': 283.822, 'duration': 4.721}, {'end': 296.89, 'text': 'So if we go to sanity.json, let me collapse that, sanity.json, we have our project ID.', 'start': 289.004, 'duration': 7.886}, {'end': 306.217, 'text': 'So our project ID is the ID that our front end will need when we are trying to connect a front end to our Sanity Studio.', 'start': 297.01, 'duration': 9.207}, {'end': 312.261, 'text': 'Also, this is when we have many Sanity projects, this is how you can filter down to this particular one.', 'start': 306.757, 'duration': 5.504}, {'end': 316.864, 'text': 'But this is the project ID and this is where you can find it, in the sanity.json.', 'start': 312.661, 'duration': 4.203}, {'end': 320.207, 'text': 'And then the production data set that we did, the default one.', 'start': 317.845, 'duration': 2.362}, {'end': 321.867, 'text': 'All right.', 'start': 321.567, 'duration': 0.3}, {'end': 327.012, 'text': "So I'm going to go back to schemas and remember that there's author there's post.", 'start': 322.328, 'duration': 4.684}], 'summary': 'The transcript discusses finding the project id in sanity.json and going back to schemas for author and post.', 'duration': 47.351, 'max_score': 279.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE279661.jpg'}], 'start': 183.412, 'title': 'Setting up and connecting sanity studio', 'summary': 'Covers setting up a clean project in sanity studio, choosing project templates (e.g., movie, e-commerce, or blog), customizing schemas, connecting a front end to sanity studio, obtaining project id from sanity.json, understanding production data set usage, and setting up sanity studio in vs code.', 'chapters': [{'end': 279.221, 'start': 183.412, 'title': 'Setting up sanity studio for a project', 'summary': 'Explains the process of setting up a clean project using sanity studio, including choosing from project templates like movie, e-commerce, or blog, customizing schemas, and navigating the project structure.', 'duration': 95.809, 'highlights': ['The chapter explains the process of setting up a clean project using Sanity Studio It covers the steps involved in initializing a new project with Sanity Studio and customizing schemas.', 'Choosing from project templates like movie, e-commerce, or blog Options are provided for choosing project templates such as movie, e-commerce, or blog, each with sample data and schema.', 'Customizing schemas and navigating the project structure The ability to customize schemas and navigate the project structure using tools like VS Code is demonstrated.']}, {'end': 327.012, 'start': 279.661, 'title': 'Sanity studio connection', 'summary': 'Discusses the process of connecting a front end to sanity studio by obtaining the project id from sanity.json and understanding the usage of production data set, with a demonstration of author and post schemas.', 'duration': 47.351, 'highlights': ['Obtaining the project ID from sanity.json is crucial for connecting the front end to Sanity Studio and filtering down to a particular project.', 'Understanding the usage of production data set is important for setting up the default data structure for the project.', 'Demonstration of author and post schemas provides practical insights into structuring content in Sanity Studio.']}, {'end': 380.534, 'start': 327.953, 'title': 'Setting up sanity studio', 'summary': "Demonstrates setting up sanity studio in vs code, including running the 'sanity start' command, accessing the studio at localhost 3333, and the importance of choosing the corresponding project when logging in.", 'duration': 52.581, 'highlights': ["Accessing the studio at localhost 3333 after running the 'sanity start' command.", 'Emphasizing the importance of choosing the corresponding project when logging in.', "Demonstrating the process of opening a terminal within VS code and running the 'sanity start' command.", 'Highlighting the successful compilation and access to the studio at localhost 3333.']}], 'duration': 197.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE183412.jpg', 'highlights': ['Choosing from project templates like movie, e-commerce, or blog Options are provided for choosing project templates such as movie, e-commerce, or blog, each with sample data and schema.', 'Demonstration of author and post schemas provides practical insights into structuring content in Sanity Studio.', 'Understanding the usage of production data set is important for setting up the default data structure for the project.', 'The chapter explains the process of setting up a clean project using Sanity Studio. It covers the steps involved in initializing a new project with Sanity Studio and customizing schemas.', 'Obtaining the project ID from sanity.json is crucial for connecting the front end to Sanity Studio and filtering down to a particular project.']}, {'end': 622.847, 'segs': [{'end': 432.926, 'src': 'embed', 'start': 380.934, 'weight': 0, 'content': [{'end': 383.617, 'text': "So because I logged in with GitHub, I'm going to click GitHub.", 'start': 380.934, 'duration': 2.683}, {'end': 389.396, 'text': "and it's going to log me in, connecting and there's my studio.", 'start': 385.134, 'duration': 4.262}, {'end': 392.058, 'text': "Okay, so I'm going to zoom in just a little bit.", 'start': 389.416, 'duration': 2.642}, {'end': 395.72, 'text': 'And here we see post, author and category.', 'start': 393.099, 'duration': 2.621}, {'end': 398.201, 'text': "Now let's look at our code compared to this.", 'start': 396.06, 'duration': 2.141}, {'end': 406.406, 'text': 'So post author category, we go here and schemas we have I mean in alphabetical order, author, category, and post.', 'start': 398.742, 'duration': 7.664}, {'end': 408.588, 'text': 'So here they match up.', 'start': 406.907, 'duration': 1.681}, {'end': 411.39, 'text': 'If we went to author, let me close this.', 'start': 409.088, 'duration': 2.302}, {'end': 415.172, 'text': 'We have name, we have slug, we have image, we have bio.', 'start': 412.09, 'duration': 3.082}, {'end': 422.918, 'text': 'If I go to author and I create a new one, We see name, slug, image, bio.', 'start': 415.412, 'duration': 7.506}, {'end': 425.019, 'text': 'So everything kind of matches up.', 'start': 423.238, 'duration': 1.781}, {'end': 428.202, 'text': "Let's add some data into our studio.", 'start': 425.66, 'duration': 2.542}, {'end': 430.444, 'text': "So to do so, I'm going to click on post.", 'start': 428.782, 'duration': 1.662}, {'end': 432.926, 'text': 'So under content, click on post.', 'start': 431.524, 'duration': 1.402}], 'summary': 'Logged into github, compared code, matched fields, added data to studio.', 'duration': 51.992, 'max_score': 380.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE380934.jpg'}, {'end': 588.509, 'src': 'embed', 'start': 562.058, 'weight': 1, 'content': [{'end': 568.9, 'text': 'So did you notice how I could leave this, go to my author, add an author, come back and it was all saved.', 'start': 562.058, 'duration': 6.842}, {'end': 571.181, 'text': "It's because it's automatically getting synced.", 'start': 569.201, 'duration': 1.98}, {'end': 575.563, 'text': 'So if we look down here, last time we made a change was 35 seconds ago.', 'start': 571.682, 'duration': 3.881}, {'end': 580.385, 'text': "If I add it again, Changes just now because it's syncing right away.", 'start': 576.063, 'duration': 4.322}, {'end': 588.509, 'text': "Okay, so I'm going to publish that and if we drop this little thing down, we will see all of the changes,", 'start': 580.405, 'duration': 8.104}], 'summary': 'Sync feature automatically saves changes, last change made 35 seconds ago.', 'duration': 26.451, 'max_score': 562.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE562058.jpg'}], 'start': 380.934, 'title': 'Studio setup and real-time editing', 'summary': 'Covers setting up a studio, adding content, and real-time editing with a focus on syncing changes instantly to the cloud, enabling efficient collaboration.', 'chapters': [{'end': 478.591, 'start': 380.934, 'title': 'Setting up studio and adding content', 'summary': 'Demonstrates setting up a studio, matching fields in the code to the studio interface, and adding data to the studio by creating a new post, with a focus on the author and main image.', 'duration': 97.657, 'highlights': ['The chapter demonstrates the process of setting up a studio using GitHub login, with a focus on connecting and accessing the studio interface.', 'It compares the fields in the code to the studio interface, ensuring that the fields such as post, author, and category match up.', 'The chapter highlights the process of adding data to the studio by creating a new post, specifying the title, generating a slug, and uploading a main image.']}, {'end': 622.847, 'start': 478.591, 'title': 'Real-time content editing and syncing', 'summary': 'Explores real-time content editing and syncing, demonstrating how changes are instantly saved and synced to the cloud, enabling collaboration and efficient workflow.', 'duration': 144.256, 'highlights': ['Changes are instantly saved and synced to the cloud, ensuring real-time updates and collaboration.', 'The process of adding an author and making edits to the content is demonstrated, showcasing seamless synchronization and publishing.', 'The capability to review changes, identify contributors, and revert modifications is illustrated, promoting effective collaborative workflow.']}], 'duration': 241.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE380934.jpg', 'highlights': ['The chapter demonstrates setting up a studio using GitHub login and accessing the studio interface.', 'Changes are instantly saved and synced to the cloud, ensuring real-time updates and collaboration.', 'The process of adding data to the studio by creating a new post and specifying the title is highlighted.']}, {'end': 936.652, 'segs': [{'end': 681.344, 'src': 'embed', 'start': 623.508, 'weight': 0, 'content': [{'end': 629.992, 'text': 'So here we have our project folder, blog, and within that we have a schemas folder.', 'start': 623.508, 'duration': 6.484}, {'end': 637.357, 'text': 'so, like we saw in the studio, we have the author, we have category, we have post block content, actually where our rich text fields go,', 'start': 629.992, 'duration': 7.365}, {'end': 640.439, 'text': 'and this is where we can edit our block content.', 'start': 637.357, 'duration': 3.082}, {'end': 646.443, 'text': "we won't dive much into this, but if you do want to find out more, definitely look at the docs and if you go to the post.js file,", 'start': 640.439, 'duration': 6.004}, {'end': 650.226, 'text': 'like we saw in the studio, this will define the document type post.', 'start': 646.443, 'duration': 3.783}, {'end': 654.388, 'text': "you'll see title, you'll see slug, and some of these have references like.", 'start': 650.226, 'duration': 4.162}, {'end': 660.592, 'text': 'let me show you yeah, so categories, references, category which is right here.', 'start': 654.388, 'duration': 6.204}, {'end': 662.793, 'text': 'you can learn more about that in documentation as well.', 'start': 660.592, 'duration': 2.201}, {'end': 664.074, 'text': "we won't dive much into it.", 'start': 662.793, 'duration': 1.281}, {'end': 669.257, 'text': "pretty much what it's doing is referencing the type category which we have declared over here.", 'start': 664.074, 'duration': 5.183}, {'end': 674.16, 'text': "let's say, as we're building on our blog, we want to add a description to our title.", 'start': 669.257, 'duration': 4.903}, {'end': 678.442, 'text': "so if we go to, we'll add it to the top of this in post.js.", 'start': 674.16, 'duration': 4.282}, {'end': 681.344, 'text': 'so name will define what the name of it is.', 'start': 678.442, 'duration': 2.902}], 'summary': 'The transcript discusses the project folder, schemas, and editing the document type post in the blog, with references and the addition of a description to the title.', 'duration': 57.836, 'max_score': 623.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE623508.jpg'}, {'end': 740.756, 'src': 'embed', 'start': 712.164, 'weight': 3, 'content': [{'end': 717.407, 'text': 'So without doing much, we were able to customize our studio.', 'start': 712.164, 'duration': 5.243}, {'end': 719.288, 'text': "Now we've added a description to the title.", 'start': 717.747, 'duration': 1.541}, {'end': 722.289, 'text': "Let's add an entire new field to the fields array.", 'start': 719.348, 'duration': 2.941}, {'end': 725.43, 'text': 'So in here, right under title.', 'start': 722.749, 'duration': 2.681}, {'end': 730.332, 'text': "so when you have a blog sometimes you want a excerpt, so let's add one of those.", 'start': 725.43, 'duration': 4.902}, {'end': 736.214, 'text': "it'll be a little short summary of your blog so that it can show up better on google and like within search.", 'start': 730.332, 'duration': 5.882}, {'end': 740.756, 'text': 'so in here i have created a object, a new object within my fields array.', 'start': 736.214, 'duration': 4.542}], 'summary': 'Customized studio, added description to title, created new field for excerpt.', 'duration': 28.592, 'max_score': 712.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE712164.jpg'}, {'end': 808.095, 'src': 'heatmap', 'start': 771.304, 'weight': 4, 'content': [{'end': 772.945, 'text': 'And then old fashioned smiley face, of course.', 'start': 771.304, 'duration': 1.641}, {'end': 774.745, 'text': "So I'm going to publish that.", 'start': 773.545, 'duration': 1.2}, {'end': 779.287, 'text': "And now we have an excerpt that we added and it's kind of perfect for what we need with a blog.", 'start': 774.845, 'duration': 4.442}, {'end': 783.789, 'text': "So yeah, so let's look at the behind the scenes, broad JSON of this.", 'start': 779.407, 'duration': 4.382}, {'end': 796.292, 'text': 'If we click on these three dots up here, show menu, and we click on inspect, here we can see the raw JSON or the parsed version of first blog post.', 'start': 784.349, 'duration': 11.943}, {'end': 799.673, 'text': "So let's try and find our excerpt that we just added.", 'start': 796.812, 'duration': 2.861}, {'end': 801.014, 'text': 'And there it is.', 'start': 800.373, 'duration': 0.641}, {'end': 804.735, 'text': 'Okay So this has all of our data.', 'start': 801.714, 'duration': 3.021}, {'end': 805.835, 'text': 'It has IDs.', 'start': 804.955, 'duration': 0.88}, {'end': 806.655, 'text': 'It has keys.', 'start': 805.915, 'duration': 0.74}, {'end': 808.095, 'text': 'It has text.', 'start': 806.735, 'duration': 1.36}], 'summary': 'Using json, an excerpt was added to a blog post, including ids, keys, and text.', 'duration': 36.791, 'max_score': 771.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE771304.jpg'}, {'end': 895.665, 'src': 'embed', 'start': 845.61, 'weight': 5, 'content': [{'end': 850.273, 'text': 'It has my name, my slug, image, that reference to the image.', 'start': 845.61, 'duration': 4.663}, {'end': 853.256, 'text': 'So all of it can be found in this inspect tool.', 'start': 850.694, 'duration': 2.562}, {'end': 855.918, 'text': 'Now let me show you another really awesome thing.', 'start': 853.516, 'duration': 2.402}, {'end': 862.002, 'text': "So I'm going to go back to my post, click through here, and I can collapse these if I want them kind of hidden.", 'start': 855.998, 'duration': 6.004}, {'end': 865.605, 'text': "And if I come down here, I'm going to come to my main image.", 'start': 862.663, 'duration': 2.942}, {'end': 871.669, 'text': "See this little edit button down here? If I click on that, I'm going to get this hotspot and crop feature.", 'start': 866.165, 'duration': 5.504}, {'end': 877.891, 'text': "So what's happening here is see these different aspect ratios, no matter what my crop is.", 'start': 872.129, 'duration': 5.762}, {'end': 880.251, 'text': 'And let me just zoom out just a little bit, just so we can see all this.', 'start': 877.911, 'duration': 2.34}, {'end': 883.912, 'text': 'I can edit and crop this.', 'start': 881.832, 'duration': 2.08}, {'end': 895.665, 'text': 'So, no matter what the aspect ratio is, whether it be like a hero image or a main image,', 'start': 883.932, 'duration': 11.733}], 'summary': 'Demonstrating image editing and cropping feature with different aspect ratios.', 'duration': 50.055, 'max_score': 845.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE845610.jpg'}], 'start': 623.508, 'title': 'Customizing studio fields', 'summary': 'Explains customizing and adding new fields to a studio, including adding a description to the title, creating an excerpt field for a blog, and examining the raw json behind the scenes.', 'chapters': [{'end': 681.344, 'start': 623.508, 'title': 'Project folder structure and document type definition', 'summary': 'Introduces the project folder structure, focusing on the schemas folder and the document type definition for the post, including fields like title and slug, with references to categories.', 'duration': 57.836, 'highlights': ['The project folder contains a schemas folder, which organizes document types like author, category, and post block content, with rich text fields for editing block content, providing a structured approach to content management.', 'The document type post.js defines the structure of the post, including fields like title and slug, with references to categories, offering insights into the document type definition and its relationship with other types.', 'The post.js file within the schemas folder defines the document type post, showcasing the structure and fields, such as title and slug, and their relationships with other document types, providing practical examples for understanding document type definition.', 'The chapter emphasizes the importance of referencing document types, such as category, within the document type definition, offering clarity on how different types are interconnected and utilized in content creation, fostering a comprehensive understanding of document relationships and their role in content organization.', 'The addition of a description to the title in the post.js file demonstrates the flexibility of document type definition, showcasing the ability to modify and expand document structures based on specific content requirements, highlighting the adaptability of the content management system for diverse content creation needs.']}, {'end': 845.31, 'start': 681.344, 'title': 'Customizing studio fields', 'summary': 'Explains how to customize and add new fields to a studio, including adding a description to the title, creating an excerpt field for a blog, and examining the raw json behind the scenes.', 'duration': 163.966, 'highlights': ['Adding a description to the title object The chapter demonstrates adding a description to the title object in the studio, allowing for customization of the title field.', 'Creating a new excerpt field for a blog The tutorial outlines the process of creating a new excerpt field within the fields array, emphasizing the importance of an excerpt for blog visibility on search engines.', 'Examining the raw JSON behind the scenes The chapter explores the ability to view and modify the raw JSON or parsed version of the studio, showcasing the real-time synchronization of data changes.']}, {'end': 936.652, 'start': 845.61, 'title': 'Image hotspot and crop feature', 'summary': 'Demonstrates the use of the hotspot and crop feature to maintain a specific aspect ratio for images, ensuring that a specific part of the image always shows, and customizing data in a studio.', 'duration': 91.042, 'highlights': ['The hotspot and crop feature allows for maintaining a specific aspect ratio for images, ensuring that a specific part of the image always shows, regardless of the aspect ratio.', 'Customizing data in a studio by adding a description to the title and adding an excerpt.', 'The ability to collapse and hide certain elements within the inspect tool for convenience and organization.']}], 'duration': 313.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE623508.jpg', 'highlights': ['The project folder organizes document types like author, category, and post block content, providing a structured approach to content management.', 'The document type post.js defines the structure of the post, including fields like title and slug, offering insights into the document type definition and its relationship with other types.', 'The addition of a description to the title in the post.js file demonstrates the flexibility of document type definition, showcasing the ability to modify and expand document structures based on specific content requirements.', 'Creating a new excerpt field for a blog within the fields array emphasizes the importance of an excerpt for blog visibility on search engines.', 'Examining the raw JSON behind the scenes showcases the real-time synchronization of data changes in the studio.', 'The hotspot and crop feature allows for maintaining a specific aspect ratio for images, ensuring that a specific part of the image always shows, regardless of the aspect ratio.', 'The ability to collapse and hide certain elements within the inspect tool for convenience and organization.']}, {'end': 1342.715, 'segs': [{'end': 965.676, 'src': 'heatmap', 'start': 937.393, 'weight': 0, 'content': [{'end': 939.755, 'text': "And here I'm going to do control tilde.", 'start': 937.393, 'duration': 2.362}, {'end': 941.418, 'text': 'And we still have this running.', 'start': 940.216, 'duration': 1.202}, {'end': 944.421, 'text': "Let's just do the plus sign so that we can add a new terminal.", 'start': 941.858, 'duration': 2.563}, {'end': 948.326, 'text': "And we're going to do the command sanity deploy.", 'start': 944.902, 'duration': 3.424}, {'end': 953.469, 'text': 'Hit enter, and this is going to deploy our Sanity Studio for us.', 'start': 949.247, 'duration': 4.222}, {'end': 957.011, 'text': 'So studio host name, we need to come up with a unique name.', 'start': 953.95, 'duration': 3.061}, {'end': 962.454, 'text': "So I'm going to do, I doubt blog is available, so I'm going to do blog demo two.", 'start': 957.471, 'duration': 4.983}, {'end': 963.755, 'text': 'Hit enter.', 'start': 962.474, 'duration': 1.281}, {'end': 965.676, 'text': "Is it available? It's available.", 'start': 964.375, 'duration': 1.301}], 'summary': "Deployed sanity studio using command 'sanity deploy', with unique name 'blog demo two'.", 'duration': 28.283, 'max_score': 937.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE937393.jpg'}, {'end': 1101.434, 'src': 'embed', 'start': 1072.268, 'weight': 1, 'content': [{'end': 1074.429, 'text': 'you can send this out to your team and they can be working on it.', 'start': 1072.268, 'duration': 2.161}, {'end': 1080.57, 'text': "you can see exactly what's happening and what edits are being made, or what's being added on the local version.", 'start': 1074.889, 'duration': 5.681}, {'end': 1087.952, 'text': "So as you customize, as you edit, as you update, it's all real time and it's awesome for team collaboration type stuff.", 'start': 1081.07, 'duration': 6.882}, {'end': 1095.793, 'text': 'So now that we have our Sanity Studio up and running, we have it deployed and we are checking out how awesome it is for real time.', 'start': 1088.372, 'duration': 7.421}, {'end': 1101.434, 'text': "Let's actually look at how we can get this data and put it onto any front end.", 'start': 1096.473, 'duration': 4.961}], 'summary': 'Real-time collaboration and deployment of sanity studio for team usage.', 'duration': 29.166, 'max_score': 1072.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE1072268.jpg'}, {'end': 1160.312, 'src': 'embed', 'start': 1132.803, 'weight': 4, 'content': [{'end': 1136.268, 'text': 'There are two different ways we can query for our data in Sanity.', 'start': 1132.803, 'duration': 3.465}, {'end': 1138.15, 'text': 'Grok is an in-house made one.', 'start': 1136.728, 'duration': 1.422}, {'end': 1142.576, 'text': "GraphQL, if you're more familiar with that, you can also use that option as well.", 'start': 1138.831, 'duration': 3.745}, {'end': 1148.123, 'text': "Now, Grok, shown here, is how we're going to Query for our data.", 'start': 1142.776, 'duration': 5.347}, {'end': 1155.888, 'text': "Now there's different syntax and we can look at the different things we can do to filter through our data.", 'start': 1148.563, 'duration': 7.325}, {'end': 1159.091, 'text': 'but rather than going through all the docs together, let me just show you.', 'start': 1155.888, 'duration': 3.203}, {'end': 1160.312, 'text': "That's much more fun.", 'start': 1159.371, 'duration': 0.941}], 'summary': 'Two ways to query data in sanity: grok and graphql. grok is in-house. graphql also an option.', 'duration': 27.509, 'max_score': 1132.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE1132803.jpg'}, {'end': 1295.733, 'src': 'embed', 'start': 1273.829, 'weight': 6, 'content': [{'end': 1283.051, 'text': 'Now where to take it from here? So some really awesome places to go after this, which we talked about at the beginning, are the docs.', 'start': 1273.829, 'duration': 9.222}, {'end': 1287.311, 'text': "Here you'll find everything you need to know about Sanity.", 'start': 1283.791, 'duration': 3.52}, {'end': 1290.172, 'text': 'More about the studio, more about Grok.', 'start': 1287.912, 'duration': 2.26}, {'end': 1294.513, 'text': 'Whatever it is, wherever your project takes you, definitely head to the docs.', 'start': 1290.632, 'duration': 3.881}, {'end': 1295.733, 'text': "There's a lot of information here.", 'start': 1294.573, 'duration': 1.16}], 'summary': 'Explore the docs for comprehensive information on sanity, the studio, and grok.', 'duration': 21.904, 'max_score': 1273.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE1273829.jpg'}, {'end': 1342.715, 'src': 'heatmap', 'start': 1326.412, 'weight': 0.785, 'content': [{'end': 1331.613, 'text': 'We were able to get started with Sanity, mess around with the Sanity Studio, and even query for our data.', 'start': 1326.412, 'duration': 5.201}, {'end': 1334.953, 'text': 'You can find me on Twitter at Kapehe underscore OK.', 'start': 1332.053, 'duration': 2.9}, {'end': 1336.814, 'text': 'My DMs are open.', 'start': 1335.433, 'duration': 1.381}, {'end': 1340.054, 'text': 'I would love to see your Sanity project, so definitely send them my way.', 'start': 1336.934, 'duration': 3.12}, {'end': 1341.935, 'text': 'Again, thank you so much for watching.', 'start': 1340.434, 'duration': 1.501}, {'end': 1342.715, 'text': 'Mahalo, everyone.', 'start': 1341.975, 'duration': 0.74}], 'summary': 'Explored sanity, queried data, and shared contact details for further collaboration. mahalo!', 'duration': 16.303, 'max_score': 1326.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE1326412.jpg'}], 'start': 937.393, 'title': 'Real-time deployment and grok playground', 'summary': "Covers real-time deployment of sanity studio with 'sanity deploy', enabling instant changes and explores querying data using grok playground, providing resources for further learning and community engagement.", 'chapters': [{'end': 1087.952, 'start': 937.393, 'title': 'Real-time deployment with sanity', 'summary': "Discusses the process of real-time deployment of sanity studio using the command 'sanity deploy', showcasing how changes made in the local version reflect instantly in the deployed version, promoting seamless team collaboration and real-time editing.", 'duration': 150.559, 'highlights': ["The command 'sanity deploy' automates the deployment process, creating a unique name for the studio, and provides a URL for the deployed Sanity Studio, promoting quick and efficient deployment.", 'Changes made in the local version are instantly reflected in the deployed version, demonstrating real-time editing and seamless collaboration within teams.', 'The deployed Sanity Studio allows for immediate visibility of edits and updates, enabling effective team collaboration and real-time monitoring of changes.', 'The deployment process ensures that all customizations, edits, and updates occur in real time, facilitating efficient team collaboration and real-time content management.']}, {'end': 1342.715, 'start': 1088.372, 'title': 'Sanity studio and grok playground', 'summary': 'Explores how to query for data using the grok playground in sanity studio, showcasing the different ways to filter through data and the resources available for further learning and community engagement.', 'duration': 254.343, 'highlights': ['The chapter explores querying for data using the Grok playground in Sanity Studio, showcasing different ways to filter through data and the resources available for further learning and community engagement. It demonstrates querying for data in Sanity using Grok playground and highlights the availability of resources for further learning and community engagement.', 'Exploring the Grok playground in Sanity Studio and using the query to obtain specific data such as author information and post titles. It illustrates the process of using the Grok playground in Sanity Studio to obtain specific data, including author information and post titles.', 'Emphasizing the significance of referring to the documentation and engaging with the developer community for additional support and learning opportunities. It stresses the importance of utilizing the documentation and developer community for additional support and learning opportunities.']}], 'duration': 405.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/32RP-sG1njE/pics/32RP-sG1njE937393.jpg', 'highlights': ["The command 'sanity deploy' automates the deployment process, creating a unique name for the studio, and provides a URL for the deployed Sanity Studio, promoting quick and efficient deployment.", 'Changes made in the local version are instantly reflected in the deployed version, demonstrating real-time editing and seamless collaboration within teams.', 'The deployed Sanity Studio allows for immediate visibility of edits and updates, enabling effective team collaboration and real-time monitoring of changes.', 'The deployment process ensures that all customizations, edits, and updates occur in real time, facilitating efficient team collaboration and real-time content management.', 'The chapter explores querying for data using the Grok playground in Sanity Studio, showcasing different ways to filter through data and the resources available for further learning and community engagement.', 'Exploring the Grok playground in Sanity Studio and using the query to obtain specific data such as author information and post titles. It illustrates the process of using the Grok playground in Sanity Studio to obtain specific data, including author information and post titles.', 'Emphasizing the significance of referring to the documentation and engaging with the developer community for additional support and learning opportunities. It stresses the importance of utilizing the documentation and developer community for additional support and learning opportunities.']}], 'highlights': ['Sanity.io offers a platform for storing data for apps and websites, featuring an open-source, React-based Studio dashboard for content management.', 'The process of installing Sanity CLI and initializing a new project is demonstrated, showcasing the flexibility and customization of Sanity for managing content and querying data for front-end frameworks.', 'Official starters with pre-built schema and front end are mentioned as a quick way to get started with Sanity.', 'Choosing from project templates like movie, e-commerce, or blog Options are provided for choosing project templates such as movie, e-commerce, or blog, each with sample data and schema.', 'Demonstration of author and post schemas provides practical insights into structuring content in Sanity Studio.', 'Understanding the usage of production data set is important for setting up the default data structure for the project.', 'The chapter explains the process of setting up a clean project using Sanity Studio. It covers the steps involved in initializing a new project with Sanity Studio and customizing schemas.', 'Obtaining the project ID from sanity.json is crucial for connecting the front end to Sanity Studio and filtering down to a particular project.', 'The chapter demonstrates setting up a studio using GitHub login and accessing the studio interface.', 'Changes are instantly saved and synced to the cloud, ensuring real-time updates and collaboration.', 'The process of adding data to the studio by creating a new post and specifying the title is highlighted.', 'The project folder organizes document types like author, category, and post block content, providing a structured approach to content management.', 'The document type post.js defines the structure of the post, including fields like title and slug, offering insights into the document type definition and its relationship with other types.', 'The addition of a description to the title in the post.js file demonstrates the flexibility of document type definition, showcasing the ability to modify and expand document structures based on specific content requirements.', 'Creating a new excerpt field for a blog within the fields array emphasizes the importance of an excerpt for blog visibility on search engines.', 'Examining the raw JSON behind the scenes showcases the real-time synchronization of data changes in the studio.', 'The hotspot and crop feature allows for maintaining a specific aspect ratio for images, ensuring that a specific part of the image always shows, regardless of the aspect ratio.', 'The ability to collapse and hide certain elements within the inspect tool for convenience and organization.', "The command 'sanity deploy' automates the deployment process, creating a unique name for the studio, and provides a URL for the deployed Sanity Studio, promoting quick and efficient deployment.", 'Changes made in the local version are instantly reflected in the deployed version, demonstrating real-time editing and seamless collaboration within teams.', 'The deployed Sanity Studio allows for immediate visibility of edits and updates, enabling effective team collaboration and real-time monitoring of changes.', 'The deployment process ensures that all customizations, edits, and updates occur in real time, facilitating efficient team collaboration and real-time content management.', 'The chapter explores querying for data using the Grok playground in Sanity Studio, showcasing different ways to filter through data and the resources available for further learning and community engagement.', 'Exploring the Grok playground in Sanity Studio and using the query to obtain specific data such as author information and post titles. It illustrates the process of using the Grok playground in Sanity Studio to obtain specific data, including author information and post titles.', 'Emphasizing the significance of referring to the documentation and engaging with the developer community for additional support and learning opportunities. It stresses the importance of utilizing the documentation and developer community for additional support and learning opportunities.']}