GitLab Digital Experience, 28 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to edit content from a GitLab Merge Request

Description

John Arias Castillo demonstrates how to use the Web IDE to edit yml content and contribute directly to a merge request.

MR: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/merge_requests/713

A

This is janarius from the digital experience team and in this video I'm going to show you how to edit the content of a page from a mesh request using the web ide feature that kidla provides. In this case, we are going to change the get started for smart business page. So, in order to do this, you need to go to the code button and click on the opening way by the bottom. After that, you are going to see a new tab in your browser with the code of the page.

A

In this case, the folder you need to edit is the content folder.

A

Here you can see all the xml files that has all the content from all the pages in the buyer experience repo. In this case, we are going to edit the get started for small business page so to know which path or to know which file you need to edit. You need to know the url or the path of the of the page. So in this case is get started, a small business, so you click on get started under smart business, and here you have all the content for the get started for small business page.

A

That is reflected here on this page. That is the review up of that mesh request. We are going to edit this little section here that has placeholder text, so we are going to edit a little bit that part, and you can see it here, determine which subscription is right for you. So we are going to edit this little text here we can use some elements or tags from html in order to create paragraphs or to create links. In this case, I'm going to create two paragraphs to create a paragraph.

A

You need to open the tag and close and inside it you can put your text.

A

Like that, also you can do it here. We put this placeholder.

A

We can also use links in this case, I'm going to create a test link. So in this case you can use the a tag and put here the text of the link and in order to create a link, you need to put h ref here we are going to redirect the page to get it started.

A

This is only an example great after that you can do whatever change you need to do and, for example, we we divide the pages in components. So, for example, we have the steps component and the steps component are these components. So this is one step component. This is another step component, and this is another step component and under that component we have all the headers all the text and all the links that are needed for that component to to work. Also, we have the header or the hero section and the hero section.

A

Is this one the hero and you can edit the text here, the content and the title and some other things that the component needs. So in this case we have these components bought for for other pages.

A

It might be a little different, but if you know which text you need to um you need to edit, you can use ctrl command f in your computer and search for the text that you need to edit. In this case, we can search for lauren and we can see it here after you do all your changes.

A

What you can the next next step is to create a commit. In this case, you need to put to click, create, commit.

A

This will show you which changes did you do so in this case, we only changed this text that is in red to this test. That is in green. So in the left side you can see the before and in the right side you can see the after. You can discard your changes and, if you're good to go, you can put a commit message in this case.

A

I'm going to put this commit message test video. After that you can commit your change.

A

And that commit will be reflected in the merch request. So if we refresh the page.

A

We can see that a new commit is created test period.

A

After that we need to wait a little bit for the pipeline to work. Let's wait a little bit for the pipeline to work and we will see a changes in the review app in a couple of minutes. You can now see that the review app is deployed.

A

You will know that the review app is deployed when the pipeline has completed all the tasks with a green check. After that, you click on the view button and you will open the home page to go to the page.

A

You put the the path here in the browser and you will see the page. Sometimes the pages take longer to load in the review app, because some things that review app has and the production app doesn't. So don't worry about that.

A

In this case we changed the determined which subscription is right for you. So if you remember, we created two paragraphs and a link.

A

If you click here, the link, you will be redirected to the get started inside the review app. That is why the relative paths are needed and not absolute paths in order to maintain the review app in all the links.

A

After that, you can now edit any content that you need. Thank you very much and bye.