GitLab Digital Experience, 9 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Netlify CMS content type: Comparison Page data entry

Description

This is a quick, early video describing how to use the Netlify CMS interface for data entry on the DevOps tools comparison pages. The new UI is not yet ready as of the time of recording, but this training should serve to train folks up on data entry we can get done in parallel with the wrap up on the new comparison component UI.

In the video, Tyler Williams mentions handbook entries for the new content type, but those are also pending review by the digital experience team, and may not be ready yet.

A

Hello, uh I'm tyler if I haven't met you before, um I don't know who all is watching this, um but I just wanted to do a quick demo of uh what we're working on for the competitor infographic uh data entry. So um without further ado here I will go ahead and share my screen.

A

Cool and then let me just uh split this in half here, so um you folks have this great uh spreadsheet uh the right hand side of my screen, um and it's got all of the the manage the plan- scm et cetera, et cetera for the different uh competitors right.

A

So um you know, here's how I would uh put things together. um First is and we'll write this down as well, so that you've got links and stuff handy it'll, be in the handbook as well, um but uh you visit about gitlab.com admin. I've logged myself out, um you would log in with gitlab I'm logged into gitlab, so it should just it'll just auto log you in if you're logged into your gitlab.com account and you'll see the interface that looks kind of like this right.

A

um On the left hand, so this is netlify cms. What you're looking at right now, on the left hand, side you'll, see something called comparison pages. I've got a couple sort of started here already right and um let's say so: let's take a look at git github. I have not yet actually filled this out, so this will be great, um so here so you'll end up. So you click on github and you'll end up um in this view, there's a title.

A

So this is the name of the competitor, and this this will actually get rendered in the in the web. Page. So you'll want to. You know, use the proper title there as you would uh any like public facing materials. There's a field for slug. I've got a hint here that explains what it is, but basically it determines the name of the file that will store the information that you put in here.

A

It's required and ideally it'll, be something that is all lower case, and one word you know just like a nice file name if it needs multiple words prefer snake case, if possible, with the underscore for white space instead um up next there's single tool options, uh so this is uh so for some competitors we're only scoring them on one single uh axis right and so by default, it's off um and collapsed.

A

But if you're working on say like jenkins, um where they're just a single tool, you can just toggle this on by clicking it and then, when you do that you'll need to select which category uh we want to be explicit. About it, just so that um you know just to be clear about which one right and that that'll impact what gets rendered out um for this, though this is github and they're not compared to single tool, so we'll turn that off and keep it collapsed.

A

uh There's a logo field, um ideally we'd want 64 by 64 pixel dimensions and an svg file. If we can with those dimensions, um so you can choose I've uploaded a few, for we had some sample data for bitbucket and github and, of course ourselves. So I've uploaded the logos there. You can upload your own here, you'll get a file uploader right, you can also add with a url. I would not you don't need to do that. I would recommend not doing it and then, of course you can remove the image.

A

So you know it'll start. If you start a new one, it'll be blank and I'm just going to choose we're on github, so I'll choose github choose selected and there we go and then you'll see all the things here. There's manage plan source code management, ci package, secure, cont, cd, configure, monitor, protect right.

A

So um if you expand each one um each one of these has just a number field. You can go from zero one or two uh there's no max or sorry. There is a max, so you can't go above two and you can't go below zero, so you cannot write an invalid value. Zero is no support. One is partial support. Two is full support. That's what you folks are using in your spreadsheet here.

A

um So, let's see if I can find one where we have github ranked right so in plan um right, so we have issue management so for github they they're at a one. So you can just type in one requirements: management, zero stays there capacity, zero roadmap, zero, I'm just using tab to go down between these uh boards is zero. Sprint planning is one we have enterprise framework support is zero work items is one uh cost tracking and estimation zero work item relationships, uh sorry hit backspace on that too fast cost tracking is zero.

A

Workflow management is one.

A

Global search, one operational.

A

Zero end-to-end visibility, one enterprise, readiness, two extensibility- is two design management. We have unranked I'll leave that zero here right, and so um you know you would go through and do this for each one of these, where you would go through your spreadsheet and map that all out and here I'll expand this now. So you can see it you'll see a preview that will not be very useful to you, so you can just hide it by hitting the toggle button when you're ready uh right now.

A

This is already published, but I can save the update here, um and so this is actually creating should be creating an mr.

A

It'll take some time because it has to actually write to the sorry.

A

A

A

Merge requests that I've created cool, so this is now saved and then you'll see so um we have in the handbook, there's a link where you can actually go see everything under this label, which is nullified. Cms draft- and this is the mr created by me- clicking save and it's in the draft status right, and so we can see the changes I made, which so here um all of this data is in yaml files that are specifically in this directory data comparison pages github.yaml and you can see- I updated these values from zero to one.

A

These things went to zero and it'll move things around on youtube, as it writes to the file so you'll sort of like and things will end up out of order in the yaml. But that's okay. um You know this is just storing things for um for use later um and then it will run its pipeline right now. This is again it's in the draft status, but if I wanted to mark it ready it'll change.

A

The tag say pending publish and then, if you want to actually save it, if you want to like deploy, it'd be published now, so you just click, publish now and we'll publish it um right now. This won't do anything that actually makes quite a bit of sense. um So you know you can go back to this. Mr and um basically I can add this to the merge train when the pipeline succeeds and again, this won't do anything because we're right now.

A

This is not wired up to the component um in master in the actual site that gets built in production, but I'll go ahead and add this to the merge train regardless.

A

What will end up happening is here? We are right. Yep, so eventually, um like this right now is part of. Is the preview app of a of my comparison infographic, mr, so we haven't done that design reviewed, there's still a few things to tighten up some engineering stuff to tighten up as well. But basically, this update would update these fields here and then dynamically update the scores on this screen right. I think I just went through and I did plan so all of the github scores would impact this and your mr here.

A

If you went to the review app, you could go see the changes that it made, which is super exciting. um Something else to show is so that was editing one. You can create a new one just by clicking new comparison page. It's also an option in quick, add to do quick, add comparison pages, and so here I'll call it. Let's say: bitbucket slug should be bitbucket.

A

Bitbucket is a single tool right and they are source code management. So I select single code single tool and then source code management. Here I can collapse that again and then I would just need to fill out the source code management file for it oh and choose an image, so choose an image.

A

I already have bitbucket there and source code management, and this is where you know I would go back to scm and it doesn't look like uh we've got any actual data here, but you know you would update it zero one or two- and you can't do you know this shouldn't this. This will throw an error for you.

A

Yep there's an error, so if you tried it so if you, you know typo and and say you know, write 10 instead of that, you'll actually get that error and it won't save. So this you know make that a two, and here we are that's saving, and so this um you know same thing.

A

So, let's go back to so I found this by just going to. I can do.

A

um Sorry do issues right, merge, requests, I've actually forgotten how I got to where I was going. um But if we look for pending, publish oh yeah here, we search the label, nutella phi cms, slash draft and then search.

A

You can see, create comparison but pages bitbucket, and this actually creates the new file with the title, the file name, the logo, the path to that, and then all this data here, which would again um actually get rendered uh in the page once we've once we shipped this, mr and get there, but um even without this you know you can you can go through and do the data entry for what you have here um and then we can sort of like have a parallel stream going. um The other piece two of this is right.

A

Now, uh all so all of this schema it's a data schema that, like digital experience, has to define. um We actually have that built out in a configuration file. So, um for the time being, as we change like, if these fields change, let us know- and we can uh update that for you and then, if you find that you're changing them, often we can figure out a streamlined way to to give you access to um writing that config or if you've got folks who are comfortable, writing yaml config.

A

I can just show you where it is and show you how to define the netlife cms schema, um but yeah. That's that's that I mean the the editing is live um like.

A

I said these these files, this uh create file here um right now it doesn't do anything, so it's totally safe if you want to go, create and edit and and sort of play around with this network cms nothing on the website will change, even if you add stuff, even if you like, publish things because we're not currently pulling it in and then once we ship this, mr here once it gets reviewed by design, and I have to go back and forth a little bit. I'm sure we'll just you know clean up some rough edges.

A

I think we'll be in good shape so anyways. um That is that's where we're at. I will um write a bunch of this down, we'll add it to the netlife cms handbook page, which I will link along with this video when I post it for you folks and uh yeah, really excited um you know, we'll have an issue once we ship things for iterations.

A

So if you run into problems and stuff, we can we can troubleshoot from there and I'm hoping to. I should be able to upload and post this video uh today friday july, 9th of 2021 and then send a message uh this evening as well. So you folks have it ready for have it ready for monday, so awesome uh yeah really looking forward to it. Thanks for thanks for watching bye,.