Integrating Sa11y to wagtail website

Speaker 1: Hello everyone, my name is Omar Farook and I'm making this screencast to put us through on how to set up the accessibility plugin which is a SA one one y I don't know it's a pronoun that's a why okay so I'll be putting us through on how to set it up on our um Bakery demo site here. So by default you can actually set it up on any of the Wagtail website you have. So it's still the same procedure but we'll just try to get through it. So first we get to the um website which is this

Speaker 1: and then we try to follow the instructions there So initially it says fork on the GitHub or um so you just fork the REPL and then maybe you cloned it or you can type the npm i salary so i don't know how to use this command but i could do it the manual way That's by forking it on the GitHub and then installing it. So here this is my RPO, I've been able to fork it and then this my RPO I've been able to fork what it shows for here so I have it from my repo here and then I could just come down here to my virtual environment so in this virtual environment I have set up a Wagtail code base So this is carrying the

Speaker 1: tail code base here, which I bundled. So and then here I could just run the command. You see I have the git clone and then this is a URL to the rebel. So just hit enter so we get um destination parts that already exist and it's not an empty director. That's because I clone the repository in Nature to this my um directory so I'll just go ahead and clear that and then Let's now get back to the point. So they say we have different method of installation. So you could actually install it as a module file which will which is going to cover up for the whole um your whole website

Speaker 1: and then you could just make an installation as a regular script but here we would like to install it as a module file so the next thing we need to do there is um un installing so I have it here I'll just move ahead to my directory and then you'll be able to see so these are some junks and I don't want you to see. Okay, so this is my virtual environment and then this is a white tail house. That's the name of my virtual environment And then this is my Wactail um repo. Yeah, so this is where we are and then there's a bit pre-demo site and you don't want to go here. So from into the worktail so I come into the work

Speaker 1: tail and then we have the admin so I go into the admin and then here we're in the admin part where okay so we have the static You know, since the Sari plugin it's mainly the uh just pure JavaScript and the CSS. Yeah. So we would like to add it to the um static files of the um work tail we get so we are now adding it to the static files of the worktail admin The reason why we are adding it to the admin is that okay by default you know that um the whole thing you can see here By default, we want it to be visible to the admin

Speaker 1: so that the admin will be the one in charge of let's say um Since the admin is the one in charge of editing his blog and the like, so the admin should be able to cater for everything. So that's why I want to install it here and then the admin will be able to see changes in his website whenever he add one or two things okay so i'll just go ahead here and come back so that's why we are inserting here today uh what they'll admin so we have our site directory here then we go back to the instruction here so it says if once we are installing it as a module we need to add this link to the CSS So we add this in our core

Speaker 1: file. So we just go ahead and copy that. Yeah. Just go ahead and copy that and then try to look for my repo. Okay, so this is it. And Let me start from here. I might just need to close down again. That's put us through. Okay, so this is the white tail script Uh this is a water repo which I showed you and then this is a water um bundle yeah so in the What to bundle you can see we have the admin so right now for my VS code we are trying to track um the path to the admin section where we inserted the um work tail right the Sally

Speaker 1: plugin Okay, so we just go into the um admin and then you can see we have the static here. So if you're familiar with Django, you know how Django tried to get up for static files. So we're going to the static And then we have Wactail Admin. So here you can see this is our directory the side plugin which we cloned. Yeah, I've shown you that in my finder initially. This is it. So we have everything installed here and then we now try to locate the um template file yeah the template file in charge of there's a base template file that controls the whole admin panel so we could just come down here and then we come to the template

Speaker 1: and As I said initially, if you are familiar with Django, you know how Django filters for static files and template files. With this template file, we come into the template directory. And then we come down here, you could see the admin base or HTML. So this is a template file. So we just come into it and which is what I have here opened initially. By default, all admin templates will have to consume this base. html They are going to load it by default. They will extend this base. html to gain like a background of the the admin um UI

Speaker 1: For it to proceed. If you've read the documentation you understand what I'm trying to see. So we just come here and then we try to paste the link here to the uh sali plugin but we also come back here to reference the actual path and then we come back here and then we get our script so This is the script itself. We copy everything and then we go back to our code and then we come down. Yeah. So I think we could just actually load that here So I don't want it to mix up with this, so I'll just commerhead and then load it here. So um it's so easier for us.

Speaker 1: You can see um the variables have been um defined already the way we could just try to use the way the uh Django does its own referencing so this is a Django referencing style so If you are familiar with Django also, you should know how this reference works. So I'm just gonna I will try to go ahead and It is this URL the path here. So we need to touch this, this and this. So So do that on a simpler side. We could just say so we want to fix this because by default this is not referencing the actual side plugin. So we need to reference it okay so for us to reference it we could just say

Speaker 1: um okay I think I have those in my sticky notes already so I'll just go ahead and then copy this Okay, so we have this. So I'm I'll just go ahead and come like this. So what we are saying here is that okay diversions version static and then we we reference back uh the Wactel admin we tell it okay go back to the Wactel admin and then look for the side folder, the distribution, the CSS and then pick the file side of CSS. By default we you could see they are just referencing side. css from the documentation. Okay, we did we are setting this path to the actual side.

Speaker 1: css bar. Okay, so we just go ahead and I I could just comment out this part and then the next part is for this tool so which is also the same thing and then let me just come down here and then uh we just go ahead to pick it so we come down here and then okay so decided to files for the top ones okay so you can see it's basically the same thing but just having a different uh path where we reference uh the uh um static files in the Django way and then we are referencing them to the actual um directory where they belong.

Speaker 1: So we just go ahead to comment out these ones And then we are now left with this. So I will just go ahead and copy the last command here, which is this. Yeah So I have it here. It's it's something easy. You could actually just look up on it and and try to now just make your calculation. Okay, when you do use a forward slash, you try to locate the actual directory. So I'll just come on and commit out this one. So you see we have the version static and this same thing. It's referencing the same file which is psi -custom chess. esm. js. It's the same file, but

Speaker 1: just the path is different. So if we want to confirm that I we just go back to the top and then from here you see we could actually do the visual studio code thing which is you control click. So I could just So I will just do the visual studio code frame which is command click um whoa okay so it's actually says The file doesn't exist. So let's let's just leave that. Let's just leave that. It's it's won't bring it. It won't bring it because we are using the um uh Django rendering format so it wouldn't actually bring that and then so let's just save that and then

Speaker 1: Let's just fix that and then move on. Um

Speaker 2: that's the same.

Speaker 1: So the next thing to do now is uh We just move on to the uh okay stop I'll just save that and after saving I'll just move on to my bakery demo site I'll move on to my backup demo site to check that. Okay, so let me come here to confirm that it's still running. Okay, my server is still running. And then I just come down here and then let's actually try to refresh and then Okay, so it's it should be there but let's try to at least load it via our admin panel. Yeah, so let me try to say admin and we try to come

Speaker 1: into the admin section okay so okay so This is it. So this is my so since I've been able to log in via the administration you can actually see that it's visible there You see that? So it's the accessibility check heart is so much active now. So on every page if I decide to edit my blog page It's okay. So my local so it's kind of slow, I don't know. Okay, so let's try to wait for it to load and then Okay, yeah, so this is my um I'm trying to edit my blog page right now

Speaker 1: so it's still loading. So We're just gonna wait for the checkers come on. Yeah, so it's up now and then you could just make use of it for whatever it is you want So we could actually hide the outline and then we could close it entirely. So you can see it's not it now. and to see that. So I hope you find this video useful. Thank you very much for watching.