[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"stack-up-astro":121,"stack-up-astro-next":162,"sales-reps":178},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":128,"episode_number":132,"published":133,"title":134,"video_transcript_html":135,"video_transcript_text":136,"content":8,"status":137,"episode_people":138,"recommendations":149,"season":150,"seo":8},"b55b2706-5a8e-4205-9a30-66beae51d6b2","astro","912196620","In this video, you'll learn how to use the Directus SDK with an Astro application.","6f358086-b9de-43fe-a57a-1bab749d0924",9,[129],{"name":130,"url":131},"Kevin Lewis","https://directus.io/team/kevin-lewis",2,"2024-02-14","Get Started with Directus and Astro","\u003Cp>Speaker 0: This is a new ASTRO project created using the ASTRO CLI. In this video, I'm gonna show you how to use the Directus SDK inside of this project. Before we begin, be sure to actually install the Directus SDK like so. And once you've done that, you can run the Astro development server by running npm run dev. We want to create an instance of the Directus SDK that we can use across pages.\u003C/p>\u003Cp>And to do that, we're going to create a helper library. Inside of the source directory, create a new directory called lib, and inside of that, a new file called directus.js. To initialize the client, import the create directus and rest functions. Use the create directus function with your full directors project URL and with the rest composable, and export the newly created directors client from this file. We can then later import this file and use the same client across pages.\u003C/p>\u003Cp>Here in my existing directors project, I've already created a collection called global which contains a title and a description field. And in this project's access control settings, I've ensured that the public role has read permissions over all of the user created collections and, additionally, the director's files collection. I have replaced the page's index dot astro file with the file. I have imported the default layout that came with this astro project, our initialized directors client, the read singleton function from the Directus SDK, and then I've used the SDK to query the global collection. The global collection is now available.\u003C/p>\u003Cp>The data that's returned is now available in this global variable, which we are then rendering into the page as global dot title, global dot description. And the layout that we have here also expects a title prop. So we're also being sure to provide that in here when we use the layout tag. Over in our directors project, we've also set up a collection called pages. And each page has 3 fields, the slug.\u003C/p>\u003Cp>And this is meant to correlate 1 to 1 with the URL being used. So if we go to slash about, this is the page we expect to load, a title and content. Underlying this WYSIWYG editor here is just HTML code like so. Inside of the pages directory, create a new file called slug.astro, where slug is surrounded by square brackets, which denotes the fact that it is a dynamic route. Because all routes must be determined at build time in Astro, a dynamic route must export a get static paths function, which in turn will return an array of params and props.\u003C/p>\u003Cp>Params being the actual page itself, which will feed this dynamic value here in the file name and props to pass the entire object to the file so we can render values from it. So once we read the page's data from Directus, we then map the values into the shape required, which is an array of objects with the params, that's required, and props, which strictly is optional, but we're going to use it here. And then each page itself will feed in the page value here into astro.props. Then inside of the layout, we're passing up a title again. We are displaying the title, and we are using set HTML to take the HTML in that WYSIWYG field and render it directly.\u003C/p>\u003Cp>It's fine, but just bear that in mind going forward. In our director's project, we also have a collection called posts. Just like pages, they also have a slug, a title, and a WYSIWYG content field. But they additionally have an image field, and this is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to the author's collection.\u003C/p>\u003Cp>Authors at this time just have a name, so I can show you how grabbing relational data works. Inside of our pages directory, create a new directory called blog. And inside of that, a new file called index dot astro. This is the file that will be loaded when a user goes to slash blog. This page might look quite similar to ones we've already created, except this time, we are using the read items method from the Directus SDK.\u003C/p>\u003Cp>So we go ahead and read all of the items from the posts collection, but you'll notice there is this second object parameter, which includes some queries. Firstly, fields. Fields is an array that specifies exactly what fields we want to return in this request. We're using it for two reasons. Firstly, we specifically don't want to return all of the data, namely the content field.\u003C/p>\u003Cp>That is a huge amount of textual data that we're just not going to use in this page. So let's not return it and make our return data bigger than it has to be. Secondly, we want to access nested or relational data. We have an author field inside of our posts but this is name. So this is how we access that nested data directly within this request.\u003C/p>\u003Cp>We're also going to sort the results so we get the latest first. In order to create a list item for every one of the posts, we're going to take the post's data and map it and return a list item. Each list item will have a link to the blog post itself slash blog slash slug, which we'll create in a minute, and data around when it was published and who published it. Take note here that this is a nested object. So post dot publish date is a top level property, but post dot author dot name is nested further because it's a relational value.\u003C/p>\u003Cp>To create a dynamic blog post page for individual blog posts, I've created a slug dot astro file inside of this blog directory. Taking note again that there are square brackets because this is a dynamic route. And as with all dynamic routes in astro, we need to export a get static paths function, which will return an array, of items from Directus. But this time, just like before, we can't just return the array as it stands. We have to map that into an array of objects with a params value and a props value.\u003C/p>\u003Cp>Then one of these pages will be created for each one of those posts. And here inside the layout, we have the title and we have the content like before. Now just an additional note here, you'll notice there is an image this time. All images in Directus are available using the full Directus project URL slash assets slash image ID. And then here, we are not going to return the entire huge image, but we are resizing it on the fly to 500 pixels in size.\u003C/p>\u003Cp>We are also returning alt text, which is the description held in the file in direct Now just take a note here that there is also no slash. The Directus SDK will automatically append a slash to the URL that isn't provided at the time of creating the client. So there is a slash in here. So this is our full project URL slash asset asset slash ID with 500. So that is how you integrate Directus with your ASTRO project.\u003C/p>\u003Cp>I hope you found this interesting, and we'll see you in the next video.\u003C/p>","This is a new ASTRO project created using the ASTRO CLI. In this video, I'm gonna show you how to use the Directus SDK inside of this project. Before we begin, be sure to actually install the Directus SDK like so. And once you've done that, you can run the Astro development server by running npm run dev. We want to create an instance of the Directus SDK that we can use across pages. And to do that, we're going to create a helper library. Inside of the source directory, create a new directory called lib, and inside of that, a new file called directus.js. To initialize the client, import the create directus and rest functions. Use the create directus function with your full directors project URL and with the rest composable, and export the newly created directors client from this file. We can then later import this file and use the same client across pages. Here in my existing directors project, I've already created a collection called global which contains a title and a description field. And in this project's access control settings, I've ensured that the public role has read permissions over all of the user created collections and, additionally, the director's files collection. I have replaced the page's index dot astro file with the file. I have imported the default layout that came with this astro project, our initialized directors client, the read singleton function from the Directus SDK, and then I've used the SDK to query the global collection. The global collection is now available. The data that's returned is now available in this global variable, which we are then rendering into the page as global dot title, global dot description. And the layout that we have here also expects a title prop. So we're also being sure to provide that in here when we use the layout tag. Over in our directors project, we've also set up a collection called pages. And each page has 3 fields, the slug. And this is meant to correlate 1 to 1 with the URL being used. So if we go to slash about, this is the page we expect to load, a title and content. Underlying this WYSIWYG editor here is just HTML code like so. Inside of the pages directory, create a new file called slug.astro, where slug is surrounded by square brackets, which denotes the fact that it is a dynamic route. Because all routes must be determined at build time in Astro, a dynamic route must export a get static paths function, which in turn will return an array of params and props. Params being the actual page itself, which will feed this dynamic value here in the file name and props to pass the entire object to the file so we can render values from it. So once we read the page's data from Directus, we then map the values into the shape required, which is an array of objects with the params, that's required, and props, which strictly is optional, but we're going to use it here. And then each page itself will feed in the page value here into astro.props. Then inside of the layout, we're passing up a title again. We are displaying the title, and we are using set HTML to take the HTML in that WYSIWYG field and render it directly. It's fine, but just bear that in mind going forward. In our director's project, we also have a collection called posts. Just like pages, they also have a slug, a title, and a WYSIWYG content field. But they additionally have an image field, and this is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to the author's collection. Authors at this time just have a name, so I can show you how grabbing relational data works. Inside of our pages directory, create a new directory called blog. And inside of that, a new file called index dot astro. This is the file that will be loaded when a user goes to slash blog. This page might look quite similar to ones we've already created, except this time, we are using the read items method from the Directus SDK. So we go ahead and read all of the items from the posts collection, but you'll notice there is this second object parameter, which includes some queries. Firstly, fields. Fields is an array that specifies exactly what fields we want to return in this request. We're using it for two reasons. Firstly, we specifically don't want to return all of the data, namely the content field. That is a huge amount of textual data that we're just not going to use in this page. So let's not return it and make our return data bigger than it has to be. Secondly, we want to access nested or relational data. We have an author field inside of our posts but this is name. So this is how we access that nested data directly within this request. We're also going to sort the results so we get the latest first. In order to create a list item for every one of the posts, we're going to take the post's data and map it and return a list item. Each list item will have a link to the blog post itself slash blog slash slug, which we'll create in a minute, and data around when it was published and who published it. Take note here that this is a nested object. So post dot publish date is a top level property, but post dot author dot name is nested further because it's a relational value. To create a dynamic blog post page for individual blog posts, I've created a slug dot astro file inside of this blog directory. Taking note again that there are square brackets because this is a dynamic route. And as with all dynamic routes in astro, we need to export a get static paths function, which will return an array, of items from Directus. But this time, just like before, we can't just return the array as it stands. We have to map that into an array of objects with a params value and a props value. Then one of these pages will be created for each one of those posts. And here inside the layout, we have the title and we have the content like before. Now just an additional note here, you'll notice there is an image this time. All images in Directus are available using the full Directus project URL slash assets slash image ID. And then here, we are not going to return the entire huge image, but we are resizing it on the fly to 500 pixels in size. We are also returning alt text, which is the description held in the file in direct Now just take a note here that there is also no slash. The Directus SDK will automatically append a slash to the URL that isn't provided at the time of creating the client. So there is a slash in here. So this is our full project URL slash asset asset slash ID with 500. So that is how you integrate Directus with your ASTRO project. I hope you found this interesting, and we'll see you in the next video.","published",[139],{"people_id":140},{"id":141,"first_name":142,"last_name":143,"avatar":144,"bio":145,"links":146},"82b3f7e5-637b-4890-93b2-378b497d5dc6","Kevin","Lewis","a662f91b-1ee9-4277-8c9d-3ac1878e44ad","Director of Developer Experience at Directus",[147],{"url":131,"service":148},"website",[],{"id":151,"number":152,"year":153,"episodes":154,"show":159},"c9653ab5-c084-48ce-b5ce-5195ccbc09a2",1,"2024",[155,122,156,157,158],"ab41049a-0090-4568-ad0d-5a31892ae7c6","8a72cda0-83ae-42ee-8bbf-87685e3021fd","56c91fbe-bb18-480b-b28c-92ec339de085","fafde41d-17cb-49bf-b139-a8ad11e50ae1",{"title":160,"tile":161},"Stack Up","fcc131d2-1a51-4f6b-8a6b-fa6b7c3700bd",{"id":156,"slug":163,"season":151,"vimeo_id":164,"description":165,"tile":166,"length":167,"resources":8,"people":168,"episode_number":170,"published":171,"title":172,"video_transcript_html":173,"video_transcript_text":174,"content":8,"seo":8,"status":137,"episode_people":175,"recommendations":177},"sveltekit","913399729","In this video, you'll learn how to use the Directus SDK with a SvelteKit application.","5b126eef-f2fe-495a-ae0d-89346aa616e8",11,[169],{"name":130,"url":131},3,"2024-02-21","Get Started with Directus and SvelteKit","\u003Cp>Speaker 0: This is a brand new SvelteKit project created using the Svelte CLI. In this video, I'm gonna show you how to use Directus and SvelteKit using the Directus SDK. Before we get started, make sure to actually install the Directus SDK. And once you've done that, run npm run dev to start the development server. Let's set up the Directus SDK to make it accessible globally throughout our SvelteKit project.\u003C/p>\u003Cp>So let's create inside of this source lib directory a new file called directors dot j s. To make the best use out of SvelteKit server side rendering, we'll need to use SvelteKit's own fetch implementation. So that's what's happening here. We're importing the requisite functions from the SDK. We are creating and exporting a function called get directors instance, which expects one argument of fetch.\u003C/p>\u003Cp>We will pass in fetch there. And if we provide it, then we will overwrite the built in fetch using options with the Sveltekit version of fetch. And if not, then we will leave it alone, and we will use the native fetch option, effectively rendering this optional. But we're gonna do it throughout this tutorial to make the best use of Sveltekit. In order to make this work, we will also need to create a hooks dot server dot JS file inside of our source directory.\u003C/p>\u003Cp>It will make sure that the required headers for fetching JavaScript content are returned by the Sveltekit server. Inside of our directors project, we already have a global collection, which is a singleton with 2 fields, title and description. Inside of access control, the public role has also been given read access over all user created collections and the director's files collection. Inside of our routes directory function exported. We pass in a fetch implementation, which means we use Sveltekit's version of fetch.\u003C/p>\u003Cp>And then we go and use the Director's SDK to read the global collection. If we modify the page dot Svelte file to the following, we can now use the data which is loaded in that load function inside of page dotjs and access its values inside of the file. In our director's project, we also have this pages collection. Each item in the collection has a slug, which is meant to correlate to the URL path used. So this, for example, would load at slash about, title, and content, where content is a WYSIWYG or what you see is what you get editor.\u003C/p>\u003Cp>We get this nice visual editor, but underpinning it is just raw normal HTML. Inside of our routes directory, create a new folder called slug with square brackets to denote that this is a dynamic route. And inside of that, a file called plus page dot JS. In this file, we will load data for an individual page. We will import the read item function.\u003C/p>\u003Cp>We will grab the director's instance, and we will use the read item function to grab an item from the pages collection that matches the value of this dynamic piece here. So when this is about, it should load the about item from the director's project. And if that file doesn't exist, if that item doesn't exist, we will throw a 404. Now that this data is available, let's create a new file in this slug directory called plus page dot svelte. Inside of this slug directory, let's also create a plus page dot svelte file.\u003C/p>\u003Cp>And in here, just like before, we're going to gain access to the data that we exported out of the load function in the page dotjs file. And, once again, we can just use that directly within our HTML. Now what's important here is that we are using the at HTML piece here. And what this will do is render inside of this div the raw HTML from our director's project. You have to be confident that that HTML is well formed and not malicious in order to use this t m l piece here.\u003C/p>\u003Cp>So just note this is only for trusted content. Inside of our directors project, we also have a posts collection containing once again a slug, a title and a content field. Additionally, posts also have an image which is actually a relational field to the director's files collection, a published date, and an author. Author is also a relational field to one of the authors, which at this point only contain a name field. But I'm doing this quite minimally just to show you how to get relational data in just a moment.\u003C/p>\u003Cp>Inside of routes, create a new directory called blog. And inside of that, a file called page dotjs. We will load our data inside of here. In this file, we're going to use read items to get all of the items from the posts collection in order to create a blog post listing page. What's important here though is that we're also including a query object with 2 properties.\u003C/p>\u003Cp>Firstly, fields. Why are we doing this? Well, we're doing this for two main reasons. One, we don't want to get all of the data in all of the blog posts, specifically the content field. It's a really big text block which we're not actually going to use on this page.\u003C/p>\u003Cp>So let's not make the return data any larger than it has to be. Secondly, we want access to the relational data inside of the author collection. So we do it like this. This author is a field that sits inside of the post item and we wanna step through to the relational item, the nested item, and get the name. We're also using sort to ensure that as the data is sorted, the latest item comes first, which of course is quite typical for a blog post listing.\u003C/p>\u003Cp>In the corresponding page dot Svelte file, we are going to do a loop through each of the items that came back from Directus, rendering out a new list item for each. There will be a link that goes to slash blog slash slug, showing the title, the publish date, and the author's name. Now take note here that while slug, title, and publish date are all properties of the post object, Author being a relational field is a nested object. So we access the author name through post dot author dot name. To get data for an individual blog post inside of the blog directory, I've created a directory called slug with square brackets because it's dynamic.\u003C/p>\u003Cp>And inside of that, a page dot j s file. This again should look quite similar to when we fetched individual pages. So we're using read item. We're passing in the slug part of the URL while we're using read item to just get that individual item. But what's important here is that we're also, once again, including that query object and we're including fields.\u003C/p>\u003Cp>What this says is that we want to get every top level item, so every field inside of the post collection itself, but we wanna also get the author's name and we wanna get the images ID and description. The reason we're doing that will become clear in a moment. If this post is not found, we will throw a 404. In order to load an individual blog post page, I have created a new slug directory inside of blog. Once again, in square brackets because this is a dynamic route.\u003C/p>\u003Cp>Inside of that, I've created a page dot j s file. Now this should look quite similar from when we created dynamic pages. We are reading a single item from the post's collection, passing in the dynamic part of the URL as the ID, except this time we're using a query object. And we're doing that so we can specify that we want not only all of the post fields to come back, but that we also want the author name and we also want the image ID and description. The reason we're doing this will become clear in just a moment.\u003C/p>\u003Cp>We're also not only returning the post, but we are going to return the URL from the Director's SDK. So once again, here, we are saving get director's instance as a variable called director's, and we are going to get the URL out of that and return that to our Svelte template under the key directors. This is an individual blog post page. It's very similar to the page creation except we are now also rendering the blog post image. This is why we wanted to export the URL from Directus.\u003C/p>\u003Cp>Every asset in Directus can be accessed with the full image URL, which the SDK automatically adds a slash after when storing it. So there is a slash here, /assets/imageid. And then we're transforming it on the fly so it's only 600 pixels wide. We're using the description held inside of directors for this file as the alt text. And that is how you integrate Sveltekit and Directus.\u003C/p>\u003Cp>I hope you found this interesting and we'll see you in the next video.\u003C/p>","This is a brand new SvelteKit project created using the Svelte CLI. In this video, I'm gonna show you how to use Directus and SvelteKit using the Directus SDK. Before we get started, make sure to actually install the Directus SDK. And once you've done that, run npm run dev to start the development server. Let's set up the Directus SDK to make it accessible globally throughout our SvelteKit project. So let's create inside of this source lib directory a new file called directors dot j s. To make the best use out of SvelteKit server side rendering, we'll need to use SvelteKit's own fetch implementation. So that's what's happening here. We're importing the requisite functions from the SDK. We are creating and exporting a function called get directors instance, which expects one argument of fetch. We will pass in fetch there. And if we provide it, then we will overwrite the built in fetch using options with the Sveltekit version of fetch. And if not, then we will leave it alone, and we will use the native fetch option, effectively rendering this optional. But we're gonna do it throughout this tutorial to make the best use of Sveltekit. In order to make this work, we will also need to create a hooks dot server dot JS file inside of our source directory. It will make sure that the required headers for fetching JavaScript content are returned by the Sveltekit server. Inside of our directors project, we already have a global collection, which is a singleton with 2 fields, title and description. Inside of access control, the public role has also been given read access over all user created collections and the director's files collection. Inside of our routes directory function exported. We pass in a fetch implementation, which means we use Sveltekit's version of fetch. And then we go and use the Director's SDK to read the global collection. If we modify the page dot Svelte file to the following, we can now use the data which is loaded in that load function inside of page dotjs and access its values inside of the file. In our director's project, we also have this pages collection. Each item in the collection has a slug, which is meant to correlate to the URL path used. So this, for example, would load at slash about, title, and content, where content is a WYSIWYG or what you see is what you get editor. We get this nice visual editor, but underpinning it is just raw normal HTML. Inside of our routes directory, create a new folder called slug with square brackets to denote that this is a dynamic route. And inside of that, a file called plus page dot JS. In this file, we will load data for an individual page. We will import the read item function. We will grab the director's instance, and we will use the read item function to grab an item from the pages collection that matches the value of this dynamic piece here. So when this is about, it should load the about item from the director's project. And if that file doesn't exist, if that item doesn't exist, we will throw a 404. Now that this data is available, let's create a new file in this slug directory called plus page dot svelte. Inside of this slug directory, let's also create a plus page dot svelte file. And in here, just like before, we're going to gain access to the data that we exported out of the load function in the page dotjs file. And, once again, we can just use that directly within our HTML. Now what's important here is that we are using the at HTML piece here. And what this will do is render inside of this div the raw HTML from our director's project. You have to be confident that that HTML is well formed and not malicious in order to use this t m l piece here. So just note this is only for trusted content. Inside of our directors project, we also have a posts collection containing once again a slug, a title and a content field. Additionally, posts also have an image which is actually a relational field to the director's files collection, a published date, and an author. Author is also a relational field to one of the authors, which at this point only contain a name field. But I'm doing this quite minimally just to show you how to get relational data in just a moment. Inside of routes, create a new directory called blog. And inside of that, a file called page dotjs. We will load our data inside of here. In this file, we're going to use read items to get all of the items from the posts collection in order to create a blog post listing page. What's important here though is that we're also including a query object with 2 properties. Firstly, fields. Why are we doing this? Well, we're doing this for two main reasons. One, we don't want to get all of the data in all of the blog posts, specifically the content field. It's a really big text block which we're not actually going to use on this page. So let's not make the return data any larger than it has to be. Secondly, we want access to the relational data inside of the author collection. So we do it like this. This author is a field that sits inside of the post item and we wanna step through to the relational item, the nested item, and get the name. We're also using sort to ensure that as the data is sorted, the latest item comes first, which of course is quite typical for a blog post listing. In the corresponding page dot Svelte file, we are going to do a loop through each of the items that came back from Directus, rendering out a new list item for each. There will be a link that goes to slash blog slash slug, showing the title, the publish date, and the author's name. Now take note here that while slug, title, and publish date are all properties of the post object, Author being a relational field is a nested object. So we access the author name through post dot author dot name. To get data for an individual blog post inside of the blog directory, I've created a directory called slug with square brackets because it's dynamic. And inside of that, a page dot j s file. This again should look quite similar to when we fetched individual pages. So we're using read item. We're passing in the slug part of the URL while we're using read item to just get that individual item. But what's important here is that we're also, once again, including that query object and we're including fields. What this says is that we want to get every top level item, so every field inside of the post collection itself, but we wanna also get the author's name and we wanna get the images ID and description. The reason we're doing that will become clear in a moment. If this post is not found, we will throw a 404. In order to load an individual blog post page, I have created a new slug directory inside of blog. Once again, in square brackets because this is a dynamic route. Inside of that, I've created a page dot j s file. Now this should look quite similar from when we created dynamic pages. We are reading a single item from the post's collection, passing in the dynamic part of the URL as the ID, except this time we're using a query object. And we're doing that so we can specify that we want not only all of the post fields to come back, but that we also want the author name and we also want the image ID and description. The reason we're doing this will become clear in just a moment. We're also not only returning the post, but we are going to return the URL from the Director's SDK. So once again, here, we are saving get director's instance as a variable called director's, and we are going to get the URL out of that and return that to our Svelte template under the key directors. This is an individual blog post page. It's very similar to the page creation except we are now also rendering the blog post image. This is why we wanted to export the URL from Directus. Every asset in Directus can be accessed with the full image URL, which the SDK automatically adds a slash after when storing it. So there is a slash here, /assets/imageid. And then we're transforming it on the fly so it's only 600 pixels wide. We're using the description held inside of directors for this file as the alt text. And that is how you integrate Sveltekit and Directus. I hope you found this interesting and we'll see you in the next video.",[176],"35f81b7f-e6e3-41b6-b071-944933765a41",[],{"reps":179},[180,236],{"name":181,"sdr":8,"link":182,"countries":183,"states":185},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[184],"United States",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":237,"link":238,"countries":239},"Michelle Riber","https://meetings.hubspot.com/mriber",[240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,217,428,429],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850429648]