.Net Foundation .Net Community Standups, 27 Nov 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - November 27, 2018 - Sebastien Ros on Headless CMS with Orchard Core

Description

Community links: https://www.one-tab.com/page/2Ecaj9x8SdS3jXCNlS576w

A

You know: welcome okay, so Sebastian you're on yeah.

B

A

Great we're live. Let's start this thing. Welcome today's peanut community stand up, it is November 27 the year is almost over. This is crazy. Sebastian's gonna be showing some amazing demos and things with headless CMS with orchard core and I. Don't know crazy, mind-blowing things. Let's start with the community links, so I'm gonna share my screen and.

A

Let me know when you see it.

A

Is that working for.

B

Me, yes, oh good,.

A

Okay, so, first of all from chiheb continuing as serious he's been doing tons of amazing posts, and so this one is watching for file changes in asp net core, so I'm, partly linking to this for for this one, but also, if you haven't been following his series continue, you know good day go through and just look at his entire series, so here he's looking at watching for file file changes good to know, of course about know, Brian, etc.

A

Speaking of this there's also another series that I've been trying to call it over time, and this is from Juergen, and so here this is on asp. Net core tag helpers so again, like this article is good in itself, talking about tag helpers, creating custom tag, helpers, etc, but also dig into this entire series. There's there's just so much good content out there. People are creating stuff so exciting to see this one's from this is from Yuri.

A

This is asp net core to one and building a cat application building things like a typed cat, client and stuff, and so as along the way, showing new features in asp net core to one. So things like HTTP, gdpr and typed HTTP clients, so this is a fun thing neat to review. If you've been, you know, if you've kind of seen a show some of the different features.

A

This is kind of cool to go through and actually build something, and when you're done you end up with typed cats, which how do you beat that that's fun? This is from the asp net docs team, or so the docs team building in the asp net core docs- and this is a crazy URL. I will share these links out afterwards. You can also just go to twitter asp, net and you'll see this link, and this is they're asking for input on the table of contents for asp net core docs.

A

So they like input on how to organize the documentation going forward all right peach pie. They just keep doing a tons of great stuff. So you know this. This one is showing attributes and generics. So this is pretty amazing with it with the latest release, so they previously released some. We featured them I believe last week showing Visual Studio, Tools and now they're, showing how they've got support for for generics and custom attributes.

A

So it's it's some pretty amazing to see all you know being able to use modern to combine modern, dotnet core features with PHP.

A

Alright. This is a neat one from the stack overflow team talking about what they're doing with localization for stack overflow, so they're they're talking about they translate to multiple languages. They had for a while built with the localizer kind of feature, so they were previously doing localization at runtime or excuse me they were doing localization at compile time and they've switched over to doing localization at at runtime, and this is partly to cut down on build times and stuff.

A

So they're saying you know looking at performance looking at the kind of impacts of of what happened when they were doing the build time versus runtime localization.

A

So neat things in here that they call out is the use of Rosalind generators and also looking at how they can use Roselyn analyzers as far to be able to extract extract the localization strings out. So I believe this is early in a series. I'm not sure if there's going to be more here, but what it ends up with is talking about. The moonspeak library and moonspeak is a is a library from the Stack Overflow team that they use for some kind of advanced localization features.

A

So pretty neat- and my last link for this week- is something I'm excited about. This. Is the we're officially welcomed, welcoming Jason net to the dotnet foundation, so as part of the Jason dotnet 12 dotto release we're we're officially working welcoming them on board I think we may have kind of over time talked about this.

A

It's not a huge secret, but this is kind of the official announcement and one of the neat things that we were able to do as part of this release is help get them set up with nougat package signing, so we actually provided with them with a code signing certificate and then Oren has this aura.

A

Novotny has this amazing code signing service and so they're all set up as part of that, so that's kind of neat and then also source link, getting them set up on source link as well, so welcome on board and congratulations on the release and I'm actually done with links for this week.

A

So I will stop the sharing and over to you.

B

A

Didn't see any I should have bugged you for links. You.

C

Are welcome to.

B

C

One, the last one is an altered website. Oh.

B

Yes, just see that's why I mentioned that, so otherwise, I'm not.

A

B

At least at least one at least one yeah yeah, sorry.

B

So yes, today, I wish I will talk about ultra the CMS part, not the modularization and multi-tenancy bumble. Cms part, and so John asked me to talk about some things. During some discussions we had, you might have noticed Scott and Superman. What's is his website and the monogram he blogged a few weeks months ago about head lives and I searched answer man?

B

Maybe it's in my list here here headless CMS and decoupled CMS internet go and he was mentioning a few CMS is running on the net internet call supporting decoupled and headless CMS and and yeah. So John asked me if I could show how ultra call CMS supports these and what it is exactly because they are just keywords, and maybe you you have never seen that and you would like to know what it's all about and I think it's awesome.

B

So I hope you will get the differences between the all the modes and and get it to you to be used on your websites because who doesn't care about creating websites. I mean we are I, would say almost deaths, all of us and or project manager of a major, and we have companies which have websites or we have a blog. So you must be somehow.

B

Interested into managing your websites, so what's about headless and decoupled, so to understand, headless and coupled, we also need to understand, what's not headless and what's not decoupled, so that the main example I will take is like a website using WordPress when your WordPress, you go and manage your content, your blogs and your blog post, and it will render the blog post okay completely and that's what usually a free CMS's. So I.

B

Let me show you how we can create one with without further and then I will degrade it to remove everything to cut the body and the legs and everything to get the head in the end. So to do that in neutral core, there is a template into the new. Oh sorry right to show my screen I'm a bad director.

B

So here I have a oh I. Didn't sorry! I was not sharing my screen since the beginning. So this was the block from Scott they're talking about headless and hiccup world and I will start by creating a new same aside story once again and to do that. I have templates, are photon placed for charcoal and I will take the same as for that, and this is CCMS. So I will do that net.

B

You will see CMS and I'll put it into an atlas folder because it will become Atlas at some point, but for for the baby to ami headless and if I go to headless and I build it.

B

It rests or packages build it. I will open also the yes code, just to show you the files that it created super simple, just a project and a package reference.

B

Okay, so I'm using a field which is on my get. This is the defeat of our branch, it's a default fit for me and if I go and code, this project has CS proach, which is just pointing to the CMS target, which is a meta meta package and look for the rigging and the startup is ad hoc, m/s and use orchard core, and if I even want to see a mess, it will be add orchard call on ok, so that's super simple and now it's built.

B

So if I just run it, sir tea bag, one less.

B

So it's running and because it's the first time I'm running it, it will ask me to create to set up the site the main site. What we call a default, tenant and I will call it. A fool and I will use a blog recipe, because this is just to get the the proximity with WordPress and create an account password.

B

And that's it so I have a blog, a blog with a blog post. Ok- and this is the full CMS experience, because if I go in the administration like in what press, I will be able to manage my posts.

B

Here, in the blog everything here I see, one post I can edit it okay. This is, and usually you know full CMS experience. It's mostly you iron oriented, so you will see directly what you can, what you edited, ok, and not only that, but the CMS itself is responsible for rendering it by using a theme and finding templates to render anything that the same as manages that's the ID and so because it's all UI oriented if I do a test, page I, usually manage or so pages using blocks. So if I get a remit soon,.

B

That's not what I want I want to Laura me soon.

B

Paste it and and and and I won the preview.

B

B

Okay, and here the idea is that when I add something like it's all blocks of data images, paragraphs so I will add another paragraph and I will add an image.

B

I have put these somewhere pictures.

B

Let's go with a Kogi, okay and you see as I add it. I can see that and I will manage my post as something which is displayed. Okay, it's more like blood block management and content management. In this case, I will render what I want to see. This is completely not headless. This is full of stuff. This is a full CMS experience and for some people, it's fine, but for us devs who want to be able to be flexible and decoupled from the rendering system. We don't like it usually.

B

So we want to those solutions- and this is where the decoupled and headless CMS is coming. So I have an analogy with the full CMS and the capitalist. If you know about all rhymes and I'm sure you know, the full CMS is like an hour and it does many things for you, and sometimes it can do too many things, and then you don't like them. You hate them, so you want to go to micro Oren's, and this is what the dick apology is. We say it's less things from the CMS and so it's less Fink.

B

That's right doesn't work. It's less things from the CMS, but you have more flexibility, it might be faster and usually you might like it, and then there is a headless. It's more than microgram. It's like a bo, the net raw idea, the net. You got right to the data and you manipulate it as you want. So let's go there and see how it works. So I created a free CMS here: I will now go to create de cobre CMS. So from the same project, I will delete all my data. I will clear the site.

B

Okay and I will start it again so locally, it's using a sequel, I database. That's why I could delete it as simply as ditching, a folder and I will go there and go under easy. Turning here on the home, page I will call it t mode this time because it will get less for less later and I will use a blank site. These blank site is a recipe that doesn't set up any content or any views. Any theme, I will say, is just okay, let's enable the CMS modules, but don't render anything.

B

It's just for content management, so I do that. I will use account, finish setup and this time it ran, but I have nothing. I just have a fourth on the on page, because there is no home page. There is nothing yet I can still go to the admin and see all my modules, which are integrating I mean I, can see. There is no content and I can see that there is mostly no types, just a menu type if I want to manage a menu, but in this case I don't care and how do we?

B

What do we do now from from there? So the idea is that once you have that you are responsible, it's a micro or an experience. You are responsible for making the pages the routes and everything to display your content. You still have the content management, but you are responsible to build your website, and this is a super nice experience as a devil, as is view /, because I don't fear to be blocked by the CMS that the CMS won't be able to do something. I want it's just I handle what I want I render.

B

What I want. I start by customizing the theme. It's about explicitly saying what you want. Yeah.

A

You know just a short personal story where I ran into this I worked on websites like PD, Co, 8, +, mixer, 9 and some of those kind of earlier conference sites, and we ended up doing exactly this. We use the oxide CMS, but then we just pulled RSS feeds from it into another project and that gave us complete like complete controller, that was an MVC 100 plication, but it gave us complete control over the layout and everything we didn't have to kind of work, with the constraints to CMS put on us and headless. So.

B

Here the this step right now is a decouple, because this the same site that is running a CMS management, the content management is also rendering the pages, but not the CMS module. Your module is during your application is rendering the pages. So it's not yet headless. It's like okay CMS match my content and I will tell you how to render the pages. So how do I do that this one? How do I do that? I will use rays or pages because rays of pages is beautiful. With this experience, so I just create a pages.

B

Folder and I will create a new file called index, dot, CSS HTML and for everyone here. We know that if I create an index, that's es HTML page, it would be my default page. So I say home page save it. I go back to the browser, browser and I go on the home page and I, see home page, and you see just the road text I entered. There is nothing more than what I typed there is nothing more and when anything I will add, we work.

B

So let's say I want to go back to the experience I had before, which was based on the nice theme, which is a start bootstrap theme. Let me show you hold on where is that clean, clean, clean something? Let me see.

B

Clean blog, so this is the theme that I saw earlier. I know that David Glick is also using the theme for this blog. So this is the one I showed you in the Flex PMS experience. So let's try to rebuild the same thing just from the template, a soda cup SMS and you will see super easy, so I already I already have the the template. I don't know did it.

B

This is exactly what you do when you don't know D here, it's just unzipped, it's faster, so I go to the web site and in the depth de bruit I will paste the files okay, they are just static files. If paste works.

B

Maybe it's just that copied Network.

A

B

Based okay, let's go peeing, so I took the template, which is just a static theme. That's how you will do the things when you create your website and from there my site is tyranny. It's a static content, so if I access index.html insert, but this thing is just a static file index.html so from there.

B

What we'll do is just let's make it a layout, so I will take index and you will see how, in five minutes, we can have the full thing running completely, and here I will paste it and I will rename it to layout that CS HTML and this layout here. What is the layout?

B

This is a main thing, so I will take that page header and make content until the footer and I cut it, and instead of that, I will say render body and in my index page instead of home, page I will paste what I cut. So what was in the content of the index? Dot CSS index dot, HTML file, I put it in my index, dot CSS HTML file and everything which is around. That is the layout file, and the last thing I need to do is to say that I want to use this layout.

B

And here I'm just doing rays of veggies, okay, super simple: there is nothing related to what truth is just a dead blood, and so this is still the static file. So let me go to the home page now, I see exactly the same thing, but from a layout and index okay.

B

So now next step is to actually display some blogs. Remember if I go in the admin, I don't have any content or content types. Anything so I made a recipient. A son document that contains the blog post and and the blog type, so I will import that I will just import some content, and this is here.

B

So I'll take this one. So this one is just a zip file containing that continuous JSON document. If I open it I bought it. It's done and if I go to my content definition now, I will have a blog and a blog post and if I go in my content items I have a blog content item which contains three posts which have the title and a subtitle and someone down. Okay, so I go back to my site here.

B

I want to render the blog post, because if I go here, I want to replace these segments, these fragments with my actual blog post and do that now. I will use the CMS as a data layer as an array matter as a data base, so I will just have to inject an helper, which is also called the triode schlepper I call it altered, and here somewhere I can see that the post preview here this is one block another one and so on.

B

So I will just take the last one to here and that thing so, if I say when I refresh I just have one blog, post and I will put it in a loop and I will just loop over all the blog post oops.

B

What happened well, first equals the weight and I can say what should dot and have many helpers to get the content items, and there is one which she is recent get recent content items by content type and the content type I want to grab is a blog post, so it will just fetch all the blog post content items. I put it between receive a post in that, and here the title I will just do add post the to string of the past.

B

For the this is a subtitle or, let's see if it works, I will just keep that f5 and I are for post, which, which are all coming when three of them, sorry, which are all coming from Mike. The content I imported with a new title, okay and subtitle, and the postage is the same so we'll just add a dad and I can say.

B

First, that content that blog post that subtitle this is a convention to get to the content or not should, and you see now, I have subtitle when a subtitle is provided from the posted by I will use, add post dot author for the date, I will use ad posted created, UTC save f5, and now all my posts are displayed and I decided how to render that what layout I own exactly how its rendered I don't delegate it to the CMS I own. What is rendered I use the CMS as the source for the data.

B

Okay, questions so far, let.

A

Me see a few, so one is what about SEL.

C

Well, I mean I, guess it's just this is your standard. You own the data and the.

B

Merkur right, so, if you want to.

C

Add more metadata.

B

You just edit the content model too low for entering mo metadata. Like we have a subtitle, you could add a description property to be a blog post and so, in the end mean you will be able to in the description or you can add one to the blog and that's that's your content, your model, so in the blog post here I could add a field that will be called description and then from my template, you can here add some meta with the description, but a meta tag. Ok, that's just how you will do that.

B

It's up to you to decide anything the same way here. There is a banner image you see here. So if I go to the post, there is a banner image on the blog. You might want to make it configurable. So you will just configure your blog to have a property called banner image, and then you will be able to change the banner image and take it from the blog.

B

That's Jackie's Europe, your content, your model U of U and the next step for that is once we have all the posts here is to create a post page just to display a post. So this will be also super simple, just create post, add CSS HTML, you say, add page and you can pass a slug as a route and then functions from route.

B

That big strings like so this will be bound from the slug, which is the first parameter of the route. And here what you want to do is go to the post template in the death of the route and extract what the post contains, which is the header and the page content I pasted it in this file. I will remove the HTML here and this time I need to also set the layout.

B

How fast it is to get things done this way, and there is no surprise you can't be blocked by the CMS. It's just you own. Whatever you want to display so here, I will inject that and say load the post equals orchard dot and there is one which is good continent by areas, and it happens that each purpose as an alias I should have shown you areas. I will show you after that, and I would say slow.

B

So you can get that from the slug, and here I will just a bit a title which will be passed and I will keep the subtitle for now like this. And what is it saying? It's a sink and it's missing a semicolon and then from my main index, page I will reference the past itself here to point to slash past slash and the slug of the past.

B

The slug of the past is at that post that content dot aeneas part is it's actually alias she's, just a handle for a blog post and if I ran that five, the URL I own. If you can see on the bottom left, / / / prophecy is 1. /, / /, her bits, so I click on this one, and it goes on / /, / prophecy, which will trigger this razor page, which will load, load corresponding post and then render my title with a wrong subtitle.

B

But she see it's super simple I just say: add: post content, blog post, title text and I have the correct subtitle and so on even same thing for the contents of the content is also interesting because where was my content here is just we have other kind of helpers in your church thing, there is a mug down to HTML, so here I can extract the math down, which was edited down equals.

B

First, content, dot block markdown body part: this is what contains about down here and I can say mark down here. If I've made a mistake, content.

B

Mac, the Mac down: that's why and now it works. Okay, I must have messed up with the template. I'm sure it was not like this I forgot, maybe a tag somewhere, but yeah you get. You get the idea. I just broke. The oh I broke the header here. That's why it's it's in diretor. It should be there.

B

Okay, there and now you see, I can go back to my homepage, click on another post and get the free content. And that's that's here. We have a blood. Well, it's not finished, but I mean. Thank you very, very super fast. So this.

A

B

A

Small question, but something I've run into sometimes is: if I need to like here, I've got a bunch of blog posts and sometimes I like to have an excerpt like I grabbed the first 250 characters or whatever yeah I'm sure, there's probably something built in the orchard that makes that easier. Well, I would.

C

Suggest to I did the.

B

Best and same thing add an excerpt or to define a tag in your content to be able to find where the excerpts stops. But that's what I would do is really that's very common question. So if you go there in the types and you go in the blog post, because that's the second time you see the question you can say: oh I just want a text field and I will call it the excerpt excerpt if I can type okay, I save it.

B

So now a blog post has an excerpt and I can decide which Itoh I want here. I just want to stand out. Éxito I, don't.

A

Think you're sharing your screen.

B

Oh sorry, now I'm that's went under finish and content types, I was going in blog post, I, say, add field I, selected text field, I call it excerpt and then, if I go back to my blog and I will decide what you see. I can see now excerpt and I can change it or you can change it to multi-line or HTML or whatever you want, and here I can say, excerpt of blog post. You can publish it and in your template here you can put it in the header.

B

Maybe I, don't know here, let's put it in the middle just before in a paragraph, I will say, add post that blog post, sorry content, that blog post that excerpt the text save whom this one? Yes here and you get it. Okay, that's how you change that. So super simple and you can add anything so same thing for metadata same thing for any any customization. You want on under content yeah. So that's it Atlas.

A

Let me see it so a question from Michael asking about the markdown support. There's different kind of flavours of markdown can use things like github, flavored, markdown and stuff like that. So this competitor.

C

Here is using mock dick.

B

hmm Okay from Alex on the middle yeah, which is amazing right, it's really and I think that ducks on microsoft.com also using it sure I think so so I don't know which flavor it is. But that's what we are using here and if you don't like it I mean use any filter. You want, you can add any l / to that as a module or call anything you want is just chocolate. We provide a helper for the module. We provided the one that we edit in the admin, but J is completely open.

A

So what a link to marketing and.

B

So, let's go headless now, let's get rid even of the UI. Let's say you just want to manage data, you don't care about rendering it to do that. We implemented mostly the community, implemented a graph QL module so in orchard. Everything in the modules I can just go to the modules and say, let's enable graph to it, and that's done so with that. A new menu item appears here. Graphical graphic QL is a generic Explorer for craft children, bonds and the best thing with graph QL is that it's auto descriptive.

B

You have to provide a schema of the data you render and based based on that metadata. This graphical tool will be able to provide entry sense on how to create the data. So here, if I start from scratch and I do control space, it shows me all the type of queries I can run and in Orchard call we decided to expose any content type as a type of curry.

B

So here we can see blog blog post content, item and menu and if I want to render to list all the blog post, I can ask for blog post and here it will ask me what I want to render in a blog post and again it will look at the watch.

B

Read model metadata to show me all the items I can grab from this curry and in this case most of the time I will get the display text, sorry display text and if I hit control enter or play, then I get the result here, which is one two three blog post, so graph QL query is, is made in the language called SQL. This is a language specification, it's not Jason. It looks like JSON because they are curly braces, but it's not JSON.

B

You see, there is no comma if I add two properties, but the result itself is always Jason either data with the result of the data or a or if there is an oil. So here I have an array, and what's nice with that is I have a tool to test my queries, and this is exposed not a ninja I mean, but as an endpoint. So if I go, I will change first, the security for this endpoint, because by default it's protected, but I will allow any user to access it.

B

Just for the purpose of the demonstration and if I go back to my graphic ul here. Okay I will open the same side here and it's available on an endpoint called API. Slash, craftwell graph QL, and there are many ways to create. One way- is to use a get request with a query like this blog post and I can say display text. So this is exactly what I typed earlier and you see I get the result. There are other ways which I'll documented on our site or in the graphical specification like a post.

B

Let me show you what usually you will do is kind of span for that it's easier, it's even easier. If you have an application on that yep two.

A

Questions one is I know like so I know, graph QL is different from OData, but this reminds me of the question of when you expose our data. You have to worry a little bit about malicious, like you're, exposing the endpoint and somebody could like. Yes,.

C

Is something that's yes,.

B

Because the default or data implementation allow them anything, but you are free to implement the OData endpoint as you want it's just a default I crave, able interface that you can expose with the default data provider will allow you from doing anything to iqueryable and that can go to rayna's nasty sequel, queries that are super slow and will take a server down and as same thing with graph. Ql graphical is just a language specification. This is just a language. It doesn't explain how to do the query on what you can curry.

B

It's about the implementation of the gradual specification to decide what it exposes and how it does the things in Altered core specific implementation. We decided to expose only the content types and to allow specific set of filters and results and to limit how you can break things. You can also add authorization and so on. So that's about the implementation to decide what you can do. Yes, there are many generic implementations.

B

I could cite, for instance, Chris mad at I/o, which is a graph to a server that will connect to a database, a generic one and expose every table as a graph QL current okay super nice to do. But that may be not what you want and you just want to expose your own domain objects. So you will do your own implementation of graph here we use graph QL dotnet and what he does is doing in choosing di2 for us to inject custom.

B

Query types of custom graph types as they call it, and this way we can map our content types to graph type, the graphical graph, but net graph to a.net graph type or customize custom queries and that's how we do that so yeah, it's like Oh data is just a different way of core of rank, a different language, it's more J's. Only so people might like it better. The tuning also is different. It's by default with the JavaScript thing. So that's also super nice to test, but in the end that's kind of the same thing.

B

But there are some differences with how you can create a ton. I will show you so here. In this case, sorry I will go back to my screen. I opened.

B

Postman and you can say stuff like application graph QL, and in this case the body will be the query here, because this to the engine is super nice. If you want to test your courage, but you can also go from the body when do I type, the body Rob, sorry here and I, send it and I need to pass a URL, also wise. It doesn't know where to send it, and I will remove that. So there are different ways to query a graph Korean point: the query: query string parameter is missing.

B

Because I sent a cat if I send a post, I can use the body, and in this case it doesn't work either. Oh.

B

B

What's happening, headers is empty. Why? Where did my Diablo.

B

That's why it doesn't work, send our because I changed them. Okay, you see it works and I get a JSON document, and so one of the nice things with cross ql is that you only get what you want to get. So my blog post contains many things, but I just wanted my display text. So from the front perspective, it's super light. You have what you want, not everything you don't get a full blob of data. Obviously, if you want the markdown, you can have the mountain.

C

Right I, just so I can shape the data that I'm receive exact. You can even rename you about is like. Oh, let me call it mug down. Instead of.

B

Marking part here, okay or not only you can shape it. It I you want, but you can also transform the data in the case of the markdown, and this is a again specific to each implementation. So in orchard, the module for the knockdown exposes the data model, but it knows that when a user, the user wants a bug down, it doesn't want. Am I down? You want the HTML?

B

You don't want on the client in the JavaScript client, for instance, to transform the model, so we also exposed another property called HTML, which itself will convert the mag down to HTML, so as a client of the API I can get the HTML directly instead, if I want- and you can customize anything like this. Another example.

A

B

Example, you see, let me show you some more example with graph QL. So if I go to x, the blog post and I will add yet another feed, and this will be a major field. Let's say you want to add some names to a blog post. Ok mentions because it's a bot for you I will call it images, say multiple image, ok, good and if I go to my first blog post, this one starts with S, which is prophesied.

B

Yes, you see just a text and I will click on images and then a load, more babies and select them okay, but these and I will sell it and then I will go back to my graph QL and point run the same query and now I don't want them all down.

B

I want my images, you see, it's live because we refer to schema and in this case, I can get the path, which is what we store internally, the name of the image, the internal name of the image or the more public or absolute name of the image, again a transformation on the data, and when you have lists like this, you can also filter what you want us to dislike.

B

You just want to be first, the first one and you just get sorry first one and then you just get one image or the last one or skip things. So if your blog post, for instance, as a field which references or their blog post, you could say just show me the last reference. So that's how you do that with Kraft. Yet then, you can also have filters on the cream. So in this case you see, I can say: I want the first blog post or the last blog post. All you want to order them.

B

Let's say first order, bye, bye and here again into the sense to what isn't sorry Auto completion to to you by why you buy what you can order by see. I said, despite text, DSC I get s, and if I say you see, I get I, all you can do.

B

We're closes with all and everything and again this is implementation. Specific. We decided in orchard that we wanted a where expression. That would be a logical combination of Oren ends to query against, for instance, display text starts with and we can pass something, and this is what I get. If I say s, I will get another one okay. So this is how we decided that craft well could query our data, and this is not about the language.

B

This is how we implemented a specification of the language for our purpose and any provider can define different things. So where does it get us to? The idea is that, with that you can create headless website, which means the site you will build. We won't have to run as part as the CMS won't be rendered by the CMS. Not a free CMS won't be rendered by your pages in the CMS, not a de cobre CMS.

B

You will be able to collect the data and shape it the way you want and then create a separate site that will let you create it. So I have two examples in mind: I want you to example, just one you can do a spy application that you will host as a static site somewhere on a web server that will grab the data, live okay using the API endpoint, so you could do some.

B

You could use some like react view angular. What you want templates that you just fetch the API with the data and render it on the client side. Okay, that's one way to do that.

B

What I will show you is how to generate a static site using Gatsby, so gatsby the library to generate static sites that has a dual mode, which is you can develop another life site to see how it looks like it's like browser link, and then you can have a command to generate from what you see like to say generate me a static site and ghastly as a module to handle rescue. So the example I will show you. So these are the URLs for the templates we are on here.

B

So if I go back, ah I stop the site, that's not what I have to do so, we'll start it again. Are you sharing your screen? Yes,.

A

Okay, I've there's a delay on the video so.

B

No sorry, yes, I was no time just okay. How I have to go to the folder. Sorry I stopped this side, so I have to start it again. That should be quick, f5 it's up and running. So my graph, brilliant point works so now I will go. I will open another window here.

B

And I have a Gatsby sample and if I open it'll code, you will see what it looks like so I just took the sample the graphical sample from the Gatsby repository and configure it to point to our graph to endpoint. So here, I in the steps, are you go into config and you just point to the site and the graphical endpoint? Okay, that's the first thing to do. This is just the name. We don't care, so just the UI. And then this thing is the entry point of the static site generation.

B

What it does is some JavaScript to loop over every page you want to create, and for us we take the blog. The data here, which is just a graphical curry that is querying the blog post content item display, takes creativity, C alias for the spec, so I just shape the properties, the way the templates were already created, and then there is one template for the index page, which is the same index. That's just HTML, as we had is just a react component to run the other index page, and you can see the HTML here.

B

Super simple HTML. You receive a very raw website, but the query to get the index is get all the blog posts, descending the created day to DC and then from each blog post. You just say: give me the blog post, which has this content item ID and get the markdown, get the subtitle and render this component every time you have a blog post. So with that, if you go to the folder and you say, gatsby develop, it will start to a web server. So it's everything is done in node.

B

In this case we start web server, so localhost, eight thousand the index will be the index, the GS page that it executed, which is here so you can see the a h2 with a date format and the blog title: that's how it renders it and if I click on the link, it will show a blog post using the blog post GS file. This is a write component, Israel, okay and this is live.

B

So if I change the blog post to you and I, say age, two for this one I save it I go back there, it refreshes automatically. Okay, that's the nice thing of the Gatsby develop it's like a live browser link, like extension, that lets you see what you are currently working on and when you are done with a website, and you like your website, you just tap this one and you Jay Gatsby Gatsby.

B

Why do we build and build we'll? Take your react components and all the scripts you decided, but instead of saving it live, it will generate a static site. You see it runs four different graphical queries, probably one for the index and then three for each blog, post and I have a static file. I have static site is building Oh. What it does? It's bundling, minifying all the things you want.

A

B

That's also one of the value of the Gatsby to generate static sites is very optimized static site, and then you are completely covered from the CMS itself. At that point, I was ok. It's done at that point. I can either go to the public folder, which contains my static site, or you can also use another command, Gatsby serve, which will serve the status like if you want to test it. So now it serves a static site on the nine thousand and that's just a static file, and that's just 35. Yes, you.

A

Could use the wet paint McMasters dotnet serve also.

C

For that right, so that's what I've been using lately.

B

C

Yeah now it's a static.

B

Site you can use it wherever you want push it on. Is your storage for cyclones, the right size, and that's done so here. What we use is the power of the headless to extract all the content from a graphical endpoint to a static site, so completely decoupled in the middle would be the application which is still a static site, but will query the data every time you hit the the endpoint of a blog post. Here, it's completely static, even the data itself yeah.

B

So that's! Okay! That's what you.

A

Know I feel like this is really interesting because we've talked about like graph. Ql has come up many times, it's just kind of a hey, here's, a neat blog post and then people ask questions about it. But this is probably the the best like demonstration of the actual value and implementation of graph.

C

Ql I've heard breath. Ql is just a.

B

Proxy to REST API is yes. There are some graph QL servers that do that, and then that leads to confusion. No graph QL is just a language and you plug whatever logic you want behind a new shape.

B

However, the query: how how you want the quarry to look like, so this is how we decided the first will be first, where should be, where order by should be order by and so on, but it's up to anyone to decide what it's doing. Then, if you give it some good logic behind, then it's super flexible for any client to query your data, it's much better than RSS feed right. So come back.

B

Your oxides website that you built ten years ago exactly because that's when it was shipped oxide and think about your RSS feed that you are using. That is much better than the RSS feed.

B

A

Rss is like it's, nice set it to ubiquitous format and it's been out for a while, but it is kind of clunky and it is a pain to parse through it. And all that was.

B

It serve a different purpose and you used it for your content export, but that is much better for your content. Export, that's way more things, and it's optimizing, and also you can something that you can do is you can say: oh I want the blog post and, and you want to hold up the post-its or you want to blog, for instance, or so yeah.

B

Great, oh sorry, idea and share. My screen shows that you can render the queries inside a single query. So inside a single payload to the server. You can issue different types you want to get, and then you get one result, so you don't have to send multiple queries to the server yeah. That's also wanted big advantage of that. Sorry, I.

A

Yeah, that's great! That's really helpful and I've been doing stuff like writing, using functions as your functions to do that kind of processing and mangle. You know like get a bunch of JSON data and put it all together in one thing, so being able to do that as a graph QL network. That would be really nice so talking.

C

B

Functions and say less and sass we all serve I don't have time, but I just wanted to mention that we have a module that we made for as a demo on Friday, it's called Ochoco sass. This one is: when you enable it, it will show you a form where you can provide your email and you type. Your email you'll receive an email, and when you click on the link you got from the email it creates for you, a custom talent with the data and graphic you'll and everything.

B

So if I deployed this site with this module, anyone could live dynamically, get a new website with their own types, their own browser and everything. So you will host the headless thing as a service. It's like several less headless. You don't need to host anything. Is there for you? It's just. You don't create a new function.

B

You create a new headless website and then you can query your data flow, so you don't have to run it either, and and also the nice thing with a headless here- is that once I have the static I can stop my CMS, so I could just run the CMS. Luckily, I did buy content generate and stop. The CMS are like I'm free to go. I don't have to ask it anywhere: I can just run it locally and young even commit the database is a sequel 5.

B

The sequel Lite file to the database even is I, want to store it or put it on a shared Drive forever. Up to you.

A

Some some well there, so there was a question that came up about it's. This lot is this: in the current release or whatever and jasmine and antwuan have been answering that this is part of the upcoming, where beta3.

B

The latest feat once netcode is shipped so good before the end of the year right.

A

Right yeah, so this is this exciting. To see I mean you forgot, you're, taking advantage of all the kind of data quality features.

C

And and you've got, this is the record one, but we are waiting for to ship.

B

With a three of water call: okay, that's it, but people are already using it, because it's a deaf branch and we have been so what I'm, using here, I'm just I just did net I the template from the maggot feed and that's it I'm using the dev branch. That's what I showed you okay, so you.

A

B

Github repository, which is all should CMS slash orchard call. Then this is a default branch. Dead branches is what you need to get either the source code or the you get packages which is described in the code generation template how to get the templates from then you get packages here. That's what I did I did the net new I with the source here and then dot the new OC CMS. Okay, that's cool.

A

Well, so we're we're kind of attend at the time we've got. Is there anything else you want to cover.

B

Well, good, if you have any questions, if you want to try it, if you want to participate in the in the project is open source you can see. Apparently some people are answering under on the chat, go on the github repository or go and get er. We have a git er room feel free to. Let me share that feel free to join the git er room, orchard, CMS, orchard, Co and people will help you to get started with that. If you are blocked.

A

Okay, let me see question from Eugene: is there a plan to support non-relational backends for singing masters.

B

Yeah well, yes, sequel is a rational store, but it's that document abstractions attraction over a document store. So when we store a blog post, it's a JSON document, but we can map or project any property of legend document into what we call index tables. So we can created the content. So it's it's. It feels like a document at a base, but yet it's choosing any reaction on database sequel, server, PostgreSQL, sequel, I'd, my sequel and here I was using sequel I'd.

B

But if you look at the data the database, that's why I was doing postdoc content. The dot content is a JSON that med document. It's a gel heart, yeah, okay,.

A

Cool all right: well, we should probably wrap up there. Did you did you, you showed the link and and people can get to like together and everything from yep from hundred links. You share this. It's.

B

Explaining the documentation here, oh you can see yeah we have documentation just for Orchard, CO and Google. You will find documentation, go and Orchard core repository and also all the links out. There awesome.

A

Okay, well, let's wrap up there. Thank you so much for your time. Sebastian thank.

B

You very much in all right, yeah.

A

We're not able to do the dramatic zoom out so I think we just do the dramatic hang up and actually that's gonna, be funny. Cuz I forget I, think gonna has started the link, so I need to call him. Yeah I'm gonna awkwardly have to fumble around to stop streaming thanks.

C