[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"stack-up-sveltekit":121,"stack-up-sveltekit-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},"8a72cda0-83ae-42ee-8bbf-87685e3021fd","sveltekit","913399729","In this video, you'll learn how to use the Directus SDK with a SvelteKit application.","5b126eef-f2fe-495a-ae0d-89346aa616e8",11,[129],{"name":130,"url":131},"Kevin Lewis","https://directus.io/team/kevin-lewis",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.","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,156,122,157,158],"ab41049a-0090-4568-ad0d-5a31892ae7c6","b55b2706-5a8e-4205-9a30-66beae51d6b2","56c91fbe-bb18-480b-b28c-92ec339de085","fafde41d-17cb-49bf-b139-a8ad11e50ae1",{"title":160,"tile":161},"Stack Up","fcc131d2-1a51-4f6b-8a6b-fa6b7c3700bd",{"id":157,"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},"remix","913408766","In this video, you'll learn how to use the Directus SDK with a Remix application.","262209d6-8df0-48ef-8a94-6241735fdcae",9,[169],{"name":130,"url":131},4,"2024-03-13","Get Started with Directus and Remix","\u003Cp>Speaker 0: This is a new Remix project created using the Remix CLI. In this video, I'll show you how to use Directus and Remix using the Directus SDK. Before we get started, make sure to install the Directus SDK so we can use it in a moment, and then run a development server with npm run dev. We want to create an instance of the Directus SDK that we can then use in multiple pages in this Remix application. So inside of this app directory, create a subdirectory called lib and inside of that, a file called directus.js.\u003C/p>\u003Cp>Import the requisite functions from the directus SDK and then use the create directus function to create a new instance of the SDK being sure that this string is the full URL of your directors project. Then export the client which we can then later import in future files. Inside of this directors project, there is already a global singleton collection. And inside of this collection is a title and a description field. In this project's access control settings, the public role has been given read access over all user created collections, as well as the director's files collection.\u003C/p>\u003Cp>I have replaced routes index dot TSX with the following. Firstly, we have imported the director's helper that we just created, as well as the read singleton function from the directors SDK. Inside of this files loader, we are going off using the directors SDK to read the singleton collection global. And this will return the object that comes back from Directus which will contain an ID, a title, and a description. This is now available, these three properties, inside of the use loaded data function.\u003C/p>\u003Cp>We have destructured that, and we can now just use the title and description inside of the page. Inside of our directors project, we've also created a pages collection. Each item in the pages collection has 3 fields. Firstly, the slug. The slug exists to determine what page this data will actually load at.\u003C/p>\u003Cp>So we're expecting this data to load at slash about. They also have a title and a content WYSIWYG, what you see is what you get editor. So we get this nice rich text editor, but underlying it is just pure HTML. Inside of the routes directory, create a new file called dollar sign slug.tsx, The dollar sign denoting that this is a dynamic route. This one is very similar to before.\u003C/p>\u003Cp>We import the helper. This time, we import the read item function from the SDK. And inside of the loader, we are gaining access to whatever this dynamic value is. And we are running a read item call here on the pages collection with the value of that URL parameter, slug. That data is once again made available in the use loader data function and we can use it inside of the rendered JSX.\u003C/p>\u003Cp>Now take note here that we are using dangerously set in a HTML to replace this div with the raw HTML that was inside of our director's item. This is fine if you can absolutely trust that the information being entered in that WYSIWYG editor is correct and not at all malicious. In our directors project, we also have a posts collection. The first three fields are used exactly the same way as pages. The slug, which will denote part of the URL that this page will load at, title, and content.\u003C/p>\u003Cp>But we also have an image, which is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to an item in the author's collection. Right now, authors only have a name because I just wanna show you how to get this relational data. Inside of the route directory, create a new file called blog dot underscore index dot tsx. This is the file that will render when the user goes to slash blog.\u003C/p>\u003Cp>In this file, we'll use the read items function to query the post's collection. Now you'll notice here that we're also passing in a query object with 2 properties. Firstly, the fields. This specifies exactly what files we want to return from the Directus instance. We're doing this for a couple of reasons.\u003C/p>\u003Cp>Firstly, we don't want to return everything, specifically, the content field because it's really large. It contains a lot of data in it, and there's no need to increase the size of the request. Secondly, we are getting relational data or nested data from that author relationship. So in here, we're stepping into that author item and we're going to also return the name. The second property is sort, and it means that the latest item will come first, which is quite standard for a block.\u003C/p>\u003Cp>We then use this data that we fetched in the loader in order to loop over each item that is returned and display a list item. That list item will send users to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note here that publish date, title, slug, they are all direct properties. But author, because it is a relational item and nested item, is in a nested object.\u003C/p>\u003Cp>So post dot author dot name. To create new blog pages, let's create a new file in routes. We'll call this 1 blog.$signslugdot tsx. Once again, dollar sign means that is a dynamic part of the URL. This should look really similar to when we created dynamic pages.\u003C/p>\u003Cp>We're using the read item function from the SDK to go query the posts collection, but just the one that has the specific key of the slug, which is in the URL. This time, though, we are also including that query object to what fields we want to return. We're saying here that we wanna get all top level fields, but we also wanna get the author name and the image ID and description. And where as well as rendering the title and the content, we're also rendering the image. All directors assets can be accessed using the full project URL, which we're grabbing here from the SDK slash assets slash image ID.\u003C/p>\u003Cp>And we are transforming this on the fly to only return an item that's 400 pixels big. We're also using the description set on that file inside of Directus as alt text. Now you may have noticed here there is no slash. The Director SDK will automatically append a slash if you don't provide it when initializing a client. So there is a slash in there.\u003C/p>\u003Cp>So that's our full project URL/assets/id, and then transformed to have a width of 400, and using the description as the alt text. You now know how to grab data from Directus and use it inside of your Remix application. I hope you've enjoyed this video and I'll see you in the next one.\u003C/p>","This is a new Remix project created using the Remix CLI. In this video, I'll show you how to use Directus and Remix using the Directus SDK. Before we get started, make sure to install the Directus SDK so we can use it in a moment, and then run a development server with npm run dev. We want to create an instance of the Directus SDK that we can then use in multiple pages in this Remix application. So inside of this app directory, create a subdirectory called lib and inside of that, a file called directus.js. Import the requisite functions from the directus SDK and then use the create directus function to create a new instance of the SDK being sure that this string is the full URL of your directors project. Then export the client which we can then later import in future files. Inside of this directors project, there is already a global singleton collection. And inside of this collection is a title and a description field. In this project's access control settings, the public role has been given read access over all user created collections, as well as the director's files collection. I have replaced routes index dot TSX with the following. Firstly, we have imported the director's helper that we just created, as well as the read singleton function from the directors SDK. Inside of this files loader, we are going off using the directors SDK to read the singleton collection global. And this will return the object that comes back from Directus which will contain an ID, a title, and a description. This is now available, these three properties, inside of the use loaded data function. We have destructured that, and we can now just use the title and description inside of the page. Inside of our directors project, we've also created a pages collection. Each item in the pages collection has 3 fields. Firstly, the slug. The slug exists to determine what page this data will actually load at. So we're expecting this data to load at slash about. They also have a title and a content WYSIWYG, what you see is what you get editor. So we get this nice rich text editor, but underlying it is just pure HTML. Inside of the routes directory, create a new file called dollar sign slug.tsx, The dollar sign denoting that this is a dynamic route. This one is very similar to before. We import the helper. This time, we import the read item function from the SDK. And inside of the loader, we are gaining access to whatever this dynamic value is. And we are running a read item call here on the pages collection with the value of that URL parameter, slug. That data is once again made available in the use loader data function and we can use it inside of the rendered JSX. Now take note here that we are using dangerously set in a HTML to replace this div with the raw HTML that was inside of our director's item. This is fine if you can absolutely trust that the information being entered in that WYSIWYG editor is correct and not at all malicious. In our directors project, we also have a posts collection. The first three fields are used exactly the same way as pages. The slug, which will denote part of the URL that this page will load at, title, and content. But we also have an image, which is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to an item in the author's collection. Right now, authors only have a name because I just wanna show you how to get this relational data. Inside of the route directory, create a new file called blog dot underscore index dot tsx. This is the file that will render when the user goes to slash blog. In this file, we'll use the read items function to query the post's collection. Now you'll notice here that we're also passing in a query object with 2 properties. Firstly, the fields. This specifies exactly what files we want to return from the Directus instance. We're doing this for a couple of reasons. Firstly, we don't want to return everything, specifically, the content field because it's really large. It contains a lot of data in it, and there's no need to increase the size of the request. Secondly, we are getting relational data or nested data from that author relationship. So in here, we're stepping into that author item and we're going to also return the name. The second property is sort, and it means that the latest item will come first, which is quite standard for a block. We then use this data that we fetched in the loader in order to loop over each item that is returned and display a list item. That list item will send users to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note here that publish date, title, slug, they are all direct properties. But author, because it is a relational item and nested item, is in a nested object. So post dot author dot name. To create new blog pages, let's create a new file in routes. We'll call this 1 blog.$signslugdot tsx. Once again, dollar sign means that is a dynamic part of the URL. This should look really similar to when we created dynamic pages. We're using the read item function from the SDK to go query the posts collection, but just the one that has the specific key of the slug, which is in the URL. This time, though, we are also including that query object to what fields we want to return. We're saying here that we wanna get all top level fields, but we also wanna get the author name and the image ID and description. And where as well as rendering the title and the content, we're also rendering the image. All directors assets can be accessed using the full project URL, which we're grabbing here from the SDK slash assets slash image ID. And we are transforming this on the fly to only return an item that's 400 pixels big. We're also using the description set on that file inside of Directus as alt text. Now you may have noticed here there is no slash. The Director SDK will automatically append a slash if you don't provide it when initializing a client. So there is a slash in there. So that's our full project URL/assets/id, and then transformed to have a width of 400, and using the description as the alt text. You now know how to grab data from Directus and use it inside of your Remix application. I hope you've enjoyed this video and I'll see you in the next one.",[176],"448399a2-6b59-4f6a-acf4-b9472674a650",[],{"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",1773850433269]