GitLab Digital Experience, 25 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Digital Experience: Test Using Slippers CSS on about-gitlab.com

Description

Javi walks through a proof of concept using the created footer component on the home page of about.gitlab.com

Slippers Repo: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui

A

Hi everybody, my name is javier and I am working with the digital experience team and right now I'm going to be walking you through how to add a slippers component onto uh dub dub dub uh about gitlab. um So I work in marketing so we're working on a design system and implementing that. So I'm sharing my screen right now. uh Hopefully you can see this. um Your screen share: okay, sick, okay.

A

So right now I was working on recreating our footer right here, and this is um an issue that we've been working on with a while um we've run into some issues with trying to integrate with some of this stuff, and so someone on my team asked me in the mr review to kind of like going through the process of me trying to integrate this, which I thought would be a good opportunity to express that.

A

So here I am so what I've done beforehand essentially, is I've built the slippers package using npm, sorry yarn build, and then I bumped the version number here to 0.8 alpha um and that's all I've done so far. So if I hit get status right now, you'll see that I've done that. So right now I'm just going to commit that.

A

I'm just waiting for left hook to.

A

All right sweet, so I'm gonna do chore.

A

Bump sorry, like b's and d's like makes me a bump and.

A

0.8.0 alpha, so I'm gonna do that see that that was done. Okay, so get status what's happening and because I am ended a commit, I need to add the force tag just because I'm rewriting over something. So if I refresh the mr that I have open on my left hand side, you should see okay. So then I rebased and then so then I did that all right. So we can wait for the pipeline to work, but I'm just trusting that this is not going to break.

A

So what I'm going to do now is I'm going to run npm, publish and just double check that my version number is correct, and so then I'm going to hit npm, publish.

A

Sweet all right so publish is working. um So then what I'm going to do now is. Oh, I got the email that npm has published uh so then I'm going to then go to about gitlab and I'm going to look for the slippers ui package and I'm going to update this to 8.0 alpha.

A

Or 0.8 alpha sorry, I can't like it's so hard to speak and think at the same time, which is like part of the struggles but okay. So right here, I made a new branch where I did some setup stuff beforehand, just to like save us a bit of time.

A

So right now, if I hit yarn, I'm not in the root directory, but I wonder what would happen. Oh wait would help if I saved the package.json file and then now, if I run yarn.

A

You should get sweet and just to double check that this is working, uh I'm gonna go to localhost and yeah. The localhost is working and then just to show you that this has been updated. I'm going to refresh really quickly published a minute ago, because I did that so the next thing I'm going to do is I'm going to try to convert this view component over to hamel.

A

We do have an intention of wanting to have it so that we just call this view component, just like slp footer and then like have middleman, be able or have our www about site, be able to interpret that as a view thing that gets built out with our build process. That is not the case. How we do it right now, so what I'll show you is kind of the way that I've done it so far, people have different opinions. I think tyler.

A

Did it a little bit differently in another another video that he recorded for himself, but I want to do what I'm going to do. Is I'm just going to actually just copy this entire footer right here, and this is going to be kind of jank but make it work?

A

I'm posting facing this into like a html to handle converter. I'm gonna hit, convert I'm literally just gonna copy paste this onto footer.haml and we'll see how this goes. um Urls need to work, uh they're, not routing the right way. Laura did a great job of calling that out for me, but just right now for demo demonstration purposes. This is like what's happening all right, so I have an include in the navigation under navigation folder. So I want to demo this on the home page just to see if this would work.

A

I have no idea if this would work, but this is what this is. This is about right, just living on the edge and seeing if things work out all right. So if I hit save here, what would happen? What should happen is that this new slippers um situation should update in accordance to the footer that I created over here.

A

I just gotta make sure that I did yarn correctly so now, if I go to here, let's see what happens, I'm gonna refresh the page.

A

Nothing has changed so far, which is slightly concerning.

A

um Let me just double check that I'm doing this correctly, so I'm in includes navigation footer, just pasted that in there.

A

Navigation footer.

A

um I'm actually not sure what's happening. Let me make sure that this include is actually being used in the hoof in the home page. So if I go to.

A

Oh, I think it did something it's just taking forever to rebuild, but let me just double check while I'm waiting, so if I go to- and I have so many folders open- so that's kind of why it's taking me a while.

A

So if I go to index I'm like missing index here, it is okay, just taking forever okay, so the layout should be home.

A

So this should be working all right and it said that it's rebuilding everything. So it's possible that I just refresh this and we should get something I don't know if the styles are going to 100 work, but the footer should be updated with new styles.

A

Oh well, they it's here, uh it's not working, but it's here. um This is kind of like the process of working with slippers um trying to get it to update.

A

So just as I double check, let me make sure that I called in the right thing yeah and let me just yarn once again, but from with the root directory yeah, that's actually a good question like what does running yarn from a nun.

A

I I don't know all right well,.

A

Terminal was just like hasn't out. Let me just all right so I'm here and let me try running yarn once again.

A

Oh, that's really weird.

A

You know it might be defaults with 2020. That might be conflicting, though it's somewhat, I find it kind of weird, but it's just not working at all.

A

Oh, you know what it is, I'm so stupid. um I need to include slippers into the homepage. That would probably probably help.

A

In the page, uh that's a oopsy, you know, but this is a work in progress. You know it's workflows, we're working on it all right, so I believe that should just work now or be much closer and there might be conflicting styles. But let's see a lot of this is just like waiting.

A

I'm like playing some music in the background and it's like disco, music, and it's like making me just above my head anyway.

A

What happened here, oh might be slippers conflicting with base 2020. It might be actually yeah so that we do have conflicts with some things on the home page. But wait I mean this is working. Okay, it's not working great, but it's working all right enough, although I do find it weird that some of this is being canceled done. I have a feeling it has to do with some defaults that we have you see yeah.

A

It might just be some classes that are specifically targeting home 2020 that we have to work on, um but the plan here I kind of just wanted to show this right now. We, the homepage, has a ton of conflicting styles like just like this big white area underneath, but the plan is that if we make a layout- um and I was gonna- do this for the demo- but I just figured it would be more complicated for me to set up is to just like set up a partial or set up a layout.

A

Sorry that includes partials that only use slippers and the reason why that's like super great is that we won't have like this conflict of styles. Like if we pull something from this over here, if the layout is completely like clean of all styles, then in theory like this should just all translate over um this is all I have for us today. Laura asked me to do something like this, and I thought this would be a good use of our time and I'll see you all at the next one.

A

Thank you so much if you stuck to the very end.