GitLab Digital Experience, 1 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: DevOps Toolchain Code Walkthrough

Description

This is a walkthrough of the code that manages the DevOps Toolchain SVG image.

A

Okay, we're here we're going to talk about the devops life cycle, svg image and um the program that edits it during the build. Is that correct.

B

Yep, that sounds great, so I'm just gonna share my screen and we will dive right in so, first of all, here's the png of this um image. We have a number of pages on the website that we want to dim or gray out different sections and before I think mark had just like a google slide or google sheets where he was manually, dimming them out and then like.

B

We would have to like crop around each one of these and it was kind of a pain every time we had to update it to get the ones we wanted to be gray, gray and the other ones orange.

B

So what I ended up doing is I converted it to an svg image so that it's easily editable, so all of the entire image is just defined as an svg.

B

We have different paths in here for each of the different stages and I've identified those by the ids of the path so that it's pretty easy to see um so like here manage it's saying the color of orange to fill it in with, and then it just draws the coordinates like lines around to draw the coordinates where they need to go um and then down here we have the text, that's inputted so manage secure plan release package and then these ones are a little bit more tricky because they're curvy, so they follow a text path.

B

That's defined up here, that's probably way more information than we need, and then the styles for that are defined in this really small style guide. So if you wanted to change, um you know the text from white to green. You know, all you would need to do is change it just like that.

B

So what this lets us do, though, is it lets us um basically takes the image and instead of a whole bunch of binary data, that's hard to edit in ruby. It gives us something that has a good xml syntax, where we can go ahead and edit. These colors directly and inject the colors that we want.

B

So what I've done is in our helpers and custom helpers.rb file.

B

Let's see I've created this new devops diagram function, where you can pass in the stages that you want to have highlighted and basically just pass them in as a list.

B

It has the gray colors, basically as I'm all grayed out by default, and then here it checks to see if like manage. The word manage, is included in that list or if the word always included in that list, then it changes that color um to be orange instead of gray. So we go through for all of that, and then we have here's our svg text.

B

We just inject the color um into the field, depending on which ones have been inputted and that's how the picture is generated and then, after that, we also have just some automatic html, that's generated that pulls in the stage svg, so that we can get uh the icons for our stages presented on the right hand, side of that image as well.

B

So what this actually looks like when you call this function if we come to like the direction pages?

B

uh Actually I think I have one open here: okay, so source direction, secure, I'm just calling devops diagram and I'm passing in secure um into there. So that's gonna highlight just secure and nothing else.

B

uh For example, if I go to like ops, because that one has a few more you'll see, I'm passing in all of the different op stages um to generate that diagram, and then I think you saw earlier what that actually looks like on the website where it just turns it orange or not, and then it also puts those icons to the side.

A

Cool, that's awesome. I didn't know you could do all that with svgs. So.

B

Maybe a short meeting I don't know, but basically the svg just makes it. You know, because it's an svg, it's text that we can edit.

A

B

A

Of like it was.

B

Html, it's just xml text. That's editable,.

A

During the build, is it generating just different versions of the svg that then gets called on the static site.

B

um I think it's actually generating it live so when the page is when somebody goes to visit the page, it's calling that ruby function and then it's returning with the colors on or off depending on what they need to be to see.

A

Cool, that's awesome. I think.

B

A

There's no like.

B

Generated image that's stored anywhere, it's always just generated on demand. Okay, for each request.

A

B

But it's not like we're, you know, all we're doing is changing the one color. So it's not it's not like processor heavy or anything. It's not a computation heavy task to do it yeah. So it's a pretty light light task, but you could easily create you know your own version of all of these in svg format. Just by you know, you could come in here and just edit this fill color to be whatever color you want it to be. So if you wanted to make a version that was gray, you could do that.

B

um You could also the nice thing about. Svg is, if you want to add, um like I noticed some of those had a purple border and that's what that stroke uh field does. So you could add in like a stroke, color and you know, that'll, give it a border around the side.

A

Yeah that that is cool. This is super cool. I'm. I think that there's definitely a way forward where we can continue using that.

B

Images as code, I guess.

A

Yeah whoa, mind blown okay. Well, that's all I got so awesome.

B

Well, yeah you're welcome to take it leave it. um You know, if you throw it all away, it's totally fine with me. You know whatever you want to do here, we're fine.

B

We just you know um we're ready to not maintain it because yeah reading, all of those versions was rather painful for us, which is why we bothered to automate it in the first place because yeah um it was just kind of time consuming for us to like go into google sheets or google slides and, like you know, we had to add a gray picture, and then we had a color picture and we were like cropping them out just so so that you know the one was on top of the other one and anyway it wasn't working very well before.

A

Yeah, I think, um having it pragmatically created, is really smart, so.

B

Cool well I'll drop I'll, make sure to drop um the links to all of these files. In that I showed today in the notes document and if you have more questions, feel free to reach out to me anytime.

A

Yeah we'll do thanks sam.