GitLab Digital Experience, 4 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Netlify CMS Learning Resources 2021-02-04

Description

Lauren Barker, Tina Lise Ng, and Tyler Williams record the first installment of the Netlify CMS Learning Resource video, a biweekly meeting about new features for the Netlify CMS implementation on https://about.gitlab.com

Agenda:

00:00 - Video start
00:20 - Moment of insight
01:19 - Making an edit to an existing topic page - demonstrate how to access Netlify CMS, make an edit, and save a draft
04:32 - Editorial Workflow - The editorial workflow opens a merge request GitLab with your changes, and assigns it a label according to where it is in the process it is.
06:57 - YouTube Markdown Widget - This allows editors to insert a youtube iframe into any markdown area with just the video id

A

Hello, I'm here at the digital experience, team got tyler and tina and we're going to do our first netlify cms learning resource video.

A

These are going to be reoccurring about every two weeks and we're going to kick each of these off with a moment of insight sharing something you were surprised to learn this week, which might have benefits for others um I'll just keep going because I got the first is uh uh this week. Past week I learned that we can and will be contributing back to netlify cms, while making our implementation better for gitlab.

A

Two examples is we can configure custom widgets as a separate package um and contribute those back to netlify cms and then other people who use it can come and use those same components.

A

And the second thing is we're: gonna make a pull request to make the rebase timeout configurable per project and contribute that back really exciting. um So now we're gonna dive right into our demos and tina's.

B

Got the first one, I'm gonna share my screen: ready sharing thumbs up okay. So what I'm going to do today is update a topic page um from the admin from about.github.com.

B

um So we have uh an issue here: a request for an update on the devops topic page from valerie. uh She provided a google doc with a couple updates.

B

This is the page that we're going to be updating, so about.gitlab.com topicsdevops and let's go do it so we're going to type in slash admin here so that we can access the cms.

B

Exciting we're going to find the devops platform page, which is right over here. Let's open that up, um I'm not gonna make all these changes now we're just gonna change. A couple things um here is the cms with all of the existing content that builds the page, and here we have.

A

It tina yes, real quick. Can you click on that? Little eyeball, con icon in the admin yeah yeah.

B

Let's get rid of that yeah, that's very distracting good call. So uh the first change we're just gonna change um the title.

B

I didn't need to copy paste that let's just delete that there we go and now I have a unsaved change and we're just going to update the intro copy here.

B

Look at that copy paste there we go and uh that's all I'm going to do for now, and I'm just going to save that.

C

B

um And uh what we are going to be changing is this title here and this um affecting I mean and this intro copy here. So let's see, if that's done,.

D

While we wait for that, it will take a while, depending on the changes and the state of the repository, so you know uh we'll work on that and think about it um tina when you hit the admin um url it just auto logged you in. I think, because.

A

D

Logged in, but for people um watching it's just your git lab user account, so whatever you use to use gitlab.com that will authorize you.

B

Thanks tyler so now lauren's going to walk me through what I need to do next.

A

Yeah um I'm going to actually uh do the scream share.

B

You want to take over all right. This is as far as I've ever gotten.

B

uh Let me find zoom now because it's it's disappeared. Oh here we go stop share. I.

A

Love that all yours, I love that save that green green box at the top.

A

It's really exciting stuff: um okay,.

A

So now I'm gonna show the editorial workflow so we'll come over here to the admin I get logged in and it's going to be thinking for a little bit, but we can go over here to this workflow tab and it's going to show us this topics page that I did it's not showing tina's, but we have a backup, math method, um also and I've linked to these in the agenda and we'll link to these in our handbook page.

A

Each of these drafts open a merge request, oh shoot in nutify cms, um and you can go and look at it in the repo. So here you can see this one that I've opened up and it generally opened up. This merge request assigned it this label, not if I see him as pending, publish and then you can see exactly what the changes were pipelines running oh this is, ah I see this is even cooler. Now we can see the commit history of this merge request.

A

Here's the three previous changes I made and here's the change that tina just made, and it shows her name and everything and we can see that it's kicked off the pipeline.

A

It's gonna fire up a review app, it's so cool.

D

um Is that lauren? Are they grouped together because it's the same page? Does that like happen automatically.

A

Yes, because I already had this draft open um and was already making edits to it and I'll show how these labels work. I can drag it over here to the draft column. Come back here refresh my page boom. That label has been updated and the same thing for when it's in review super cool and we're going to add these links to those direct pages. They'll show all merge, requests open with those labels, it'll be a handy resource to keep track of all the edits that are in flight.

D

Cool, I think I'm up next here. uh Let me share my screen um and I'm going to do. Where are we so we're talking about? uh We've got a custom, youtube widget, um and so uh this is part of where we're talking about contributing back to netlify cms. So we can take. We can create our own custom.

D

Cms content blocks define what inputs they take and what output they will generate and we've got that in the micro services we have a, we lauren built a youtube widget, so we've got one of those in the microservices page, and so in the body here you'll see the output.

D

um It doesn't do the preview here, but I'll show you what a new one would look like. So this is just a youtube embed right, but the cool thing is: if you want to create one yourself, so you go to the plus icon in the top bar here in the rich text. Formatter, you do youtube and then you grab the id which, from here I'm going to grab this one would be this id and it'll be in, like the youtube url or like any of the sharing links.

D

That youtube, has you just copy and paste it and lauren. Do you want me to say they won't preview right?

D

Oh no, they do preview. There we go so yeah. You can see. There's two here.

D

um Of course it's scrolling with me, but if I were to take out the what I just added, you see the one there it is. Those are custom blocks, so we can define those uh for any kind of custom content uh that we need.

A

Awesome well, I think that wraps up this first uh learning resource.

C

Cool yeah dab team.

D

I have to stop the recording yeah.