Layer5 Websites, 13 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Websites Weekly Meeting (June 13th, 2022)

Description

Layer5 Websites Meeting - June 13th, 2022

Agenda:
- News page media kit #2908
- Pricing page updates #2909
- Blog: About the author #2883
- Dark mode #2910
- Rotational CTA #2866
- Updates on the SMP dashboard

Join the community at https://layer5.io/community

Find Layer5 on:
GitHub: https://github.com/layer5io
Twitter: https://twitter.com/layer5
LinkedIn: https://www.linkedin.com/company/layer5
Docker Hub: https://hub.docker.com/u/layer5/

A

So hi everyone welcome to the website's call, so uh we always begin with the introduction of our newest numbers in all of our calls. So is there anyone in the call who's attending this for the first time, uh even if you've been in any other calls before? uh If this is your first website's call, then please go ahead and introduce yourself. We have different people attending different meetings, so uh yeah anyone who is new who's attending this call for the first time.

B

Hello um yeah, I'm arranging for the first time I'm kalyan.

B

I actually could everyone hear me.

C

B

Yeah yeah, okay yeah, so I am a software developer from india, so yeah. This is like the first making of john.

A

Welcome to the community.

B

A

uh Anyone else who wants to go next sort of, I believe.

D

Yeah, hello, everyone, my name is: I am currently learning about front end of a part of contribution, so I thought what would be a better way to learn than start contributing, so I'm I've joined layer 5 to as learn more about the working of this amazing community I have been. This is my first website's call. I have been in a newcomers meet before and I think I can learn more by being the part of this amazing community.

C

Great to have you.

A

Anyone else I think I've heard from everyone else over here before is there anyone who's new? Please go ahead and introduce yourself otherwise, we'll move on with the gender items for today.

A

I don't think we have anyone: okay, it's good, so starting off, uh it's my topic! First! So a quick update on the news page um I'll just.

A

So recently, as you know, we added uh like to our press releases. We added this sidebar, where you know you can download the press kits. I've added it to uh all most of our press releases, the top four ones. These two, I didn't like, add anything for now. I couldn't find a lot of resources, but it's available for all these four, and apart from that on the main news page, we also have a media kit section that I recently added so it this part is the same.

A

It has the brand kit and the social media icons, so any feedback on this or anything else we can probably include, because I was thinking that we have the social media items here. uh This might be a repetition, so anything else which might like- and I wanted like a like three of them, because otherwise two was looking blank. So any suggestions on what else could go in here.

A

Like some other places, they have a management, kit or stuff like that, where you download resources for the employees or customers, I don't know, I think in one of the examples uh I don't remember exactly, but any suggestions on what can go here.

E

E

Yeah yeah there's a media kit is the title of that section and I wonder.

E

If there isn't this is so I wonder if there isn't.

E

E

Media kid- I guess that makes sense brand kid: it's they're press kits one press kit per press release an overall brand kit um yeah, it might just be like media resources might be.

E

Resources might be the broader term that we're looking for as opposed to to kit, just because it's a it's more of a collection of a number of things.

E

um Something else that could potentially go here is um well videos or featured videos, uh which is to say either different, um either different, specific talks that we've given or different overviews that we've held um it is a potential follow-on like this is a great. This is great what you have, and I I hear what you're saying about it, being uh the social media, links being really close to the other ones and being kind of, uh but that's okay in this case, like that, that's okay, like this is you're right.

E

It does round it out if you have three items or more, and these are appropriate things, and just because they're right below doesn't mean that people are looking for them there or thinking of them there.

E

It's kind of like the media kit that is available or the press kit that is available for each press release.

E

Not everybody, not everyone sees it. So it's okay to call that out again, that's what I'm saying um yeah if we end up with some featured videos after a while that might make sense to have as a section um so.

A

Makes sense: okay, uh no other feedback on this right.

A

E

Or later yeah, one other thing. One. Other item is like later, if there are featured articles as well that we want to point out here or like the white paper that we had written in ieee publication, just special items to potentially give people a better idea to what we're doing. I thought I I don't know that there's enough of any of that to necessarily fill in a new section, but but someone could get started so.

A

A

uh Okay, so uh next topic is: I worked a little bit on the pricing page, so I think lee made a couple of updates to and look at the new one.

E

So it's time for us to have a pricing page, so people can get signed up for different levels of support, different functionality that that will be offered this pricing page. Isn't it is or will be public when this is merged, but it won't be linked to just yet. um I expect it will link to it fairly soon.

E

So, just as a way of introducing the page.

A

So uh yeah, this is what we have for now. So there are three cards uh we want to feature the free one. First, because, like the idea is to attract more and more people to come use our product there will be a switcher. uh I haven't like I'll look into the styling of this and the working. I don't think it works, yeah, so uh monthly yearly and uh we have uh like these are just the summary items.

A

This is more in detail like the values, don't look at them right now they are dummy values, but uh this could be a very long table. You know detailed comparison between all the three tiers uh we could like. What we could do is have texts here or some of them. They just have. You know a lot of explanation, features here and just a tick mark, so I've included both these.

A

We could have a mixture of these or whatever suits, and I think lee was suggesting uh the use of this, I think for features like expandable columns. So that is something I'll add it over here as well and uh over here as well. The free one is highlighted just like to attack people moving on. uh This is a new thing that I like experimented with. There are three: this is a slider which has a lot of customer reviews and stuff. So right now there are three things: I've added three because I wanted to like.

A

I found three of these and I thought all of them looked good, so we could have just one type over here like in this slider. We could have just one type or if you think, three of them look good, then we could have all the three, but I have just added it as a new component so that you know you can use it anytime later on, like you could use the darker one in places you want. So this is one thing I have to work on the responsiveness of this in the mobile view.

A

So, like I'm, stuck on this a little bit because there's like a setting to show the number of cards you want on one page and in mobile view, I wanted to reduce to one and desktop. I wanted to be three, so I haven't been figure like able to figure out how to make that switching happen in like mobile view and disrupting. So I'm working on that uh otherwise, like what do you guys? Think of each of these cards like this is new.

A

In the sense we already have blog codes, you must have seen it in our blogs. uh This includes the picture of the person. I've added links, like suppose, if someone is in our community, is a community member. They have a member profile, it links back to their profile. If not. Currently, I have linked to the community page.

A

So yeah, that's all, and we also have the frequently asked questions. This is an existing component. I've. I added some questions. I think we added some more so yeah, let's go one by one. What do you guys think about all of these features? Any feedback is most welcome.

F

Looks amazing by now.

A

And uh what do you guys think for this section? Do we have like one card as a carousel item, or later three of them will be there uh in case? You want to use it, but over here do you think a mixer looks good.

G

I think one card will be a better here. It will look designed properly. I guess I think three will kind of mix match in this.

A

Okay and before that, what do you think of this block? Do you think.

H

One card using for the mobile unit only for the mobile.

A

Yeah in mobile view, one garden display and also my question was like here: there are three types of cards right: do we have all three of them in the slider or just one type.

G

No, actually I talking about that, we should have one type of card. Basically yeah you mean by design.

C

G

A

And what do you think of the cards themselves like? Do you think the design, yes.

G

I guess it's looking very good, basically, uh the one which have a leaf. I think this is which was looking good card basically, but I think that all kosher cards should be like that.

A

G

A

uh Thank you any other feedback, or do you all agree with what russia said.

A

If you have any opposing views, now is the time to argue about it.

E

Speak or forever hold your peace. Is that the it's like just before they put the ring on.

E

I can't believe subeti didn't say: well, maybe there's too much green. Are you sure it's like there can never be enough green? I don't know what what uh where that's coming from.

E

Just just kidding just kidding yeah, I wonder if um yeah, I wonder if the the link that you have for the cards, that's a nice idea. I wonder if it's more of a headache than it is a help, I'm just in so much as it's like hey. If nick and maxie both have community profiles, you know great, although I don't know that it helps their words, have any more impact in some respects.

E

Maybe it makes them look like insiders which they they aren't they're they're both um and then, then you have to you're forced to kind of figure out. What's the appropriate link for the not the people who don't have a member profile and to the extent that it becomes a different user? It's just. um I don't know that the link helps like provide reference and reinforce the message, so it so that's something to consider before going.

E

There's another consideration and that being potentially as opposed to having the person's profile photo, is potentially to have the company logo or the organization logo to which they're associated so hpe intel hashicorp um buoyant you know just uh those are because those may help inspire confidence and which is, for the most part.

E

What we're looking to do is is convey a sense that others have found value and that these other individuals, that their words have weight, the logos of their organ associate affiliated organizations probably carry more weight than their profile photos, especially if it's one with a freckle-faced person and that that throws all credibility out the door right there.

A

No, I actually haven't included any of your codes here, just your picture because I couldn't find this.

E

Sure, okay, yeah yeah sure that's funny. My my profile photo has become it's just the stock image. It's just the the. uh What do you call it? The um the anonymous figure cool? I know I just it's great um yeah. You know the this nice contrast, hey great job on designing three new types of quotes. These are nice. um The I don't know if the name of the individuals are is slightly.

E

You know slightly, I don't know the text is getting a little small, um I don't know, but the high contrast of the one that has nick in there. That's quite nice, it pops pretty. Well, it almost is it's almost too fancy made almost for the page.

E

um It might be that just lightening up or adjusting the gradient such that there's less black or less dark jungle. Green. You know less of the dark dark dark uh that it fades a little bit earlier. Only because it's not that it doesn't isn't appealing it's aesthetically appealing. It is but yeah slightly more classy than the rest of the style of the page.

E

If that makes um a little more, um it's like it's like going to a formal dance where you're wearing a tuxedo like uh versus versus the you know, business casual, that's happening on the rest of the page.

F

E

Food for thought, yeah pop yeah, that's a good one. That's not a good way of saying it. It's like it does pop, and it is nice looking if the rest, if the rest of the site was like that now double prior might be thinking, is that well, the original draft of this page had a very similar gradient using similar colors to start the page off which would have tied tied in very well.

E

So if you go back to the very top that that linear gradient would have tied in, I lightened it up with the teal blue from the brand guide, just because it was kind of it was having sort of a similar effect and it might have been too too. I don't know, maybe it was conveying that it was. I don't know, I don't know we'll see me.

E

Maybe that's a good thing because if, uh if there's a high dollar figure, these are just dummy figures, but if it was a high dollar figure, maybe it would convey that it is classy and you should fork over the you should you should fork over the money.

E

um Good yeah um just other things, while we're sitting here, since this is um a brand new page. There's a lot of things to say. I made a couple of updates that messed up what was otherwise looking really good from temple priya, so she's going to clean up a couple of those things around the monthly and yearly.

E

There was a good um there's, a lot of there's some decent structure behind the page, so those individual three subscription plans, they're broken into um separate, arrays and separate. You know, components um and they're intended to be driven programmatically.

E

um Here's the thing is that there as it turns out each of them probably need to have the say something different on the button itself, so for the the free tier it would say, join for free, probably and, and it will certainly say, free forever, which is something that you had had um anyway. I put the notes into the comment, but but the point here is that that one might need to say for you forever, the other one might need to say contact sales on the enterprise like in in the middle.

E

Maybe it says coming soon, they'll all have to say something different, and so, even though there's elegant structure behind this with conditionals in the end, it might be more pain than it's worth uh so because two of these will have yeah anyway anyway. Another thing, it's a small item- is where, where it's like, such and such dollars per user- and then it'll also have another slash per month, probably or per year, depending upon which, which switcher they switch to and and that actually bleeds off the card.

E

When you get two per month per user per month, yeah and just another piece of food for thought is the s as users go from the overview of what these subscription subscription plans include and they go. They look to really dive into the details and compare the differences between the plans you there's an opportunity to if you want.

E

This is just a I'm just thinking aloud with you, but you might end up having an arrow between like the summary and the compare all where it's sort of like, um because it's just a continuation of the same thing. It's just more of a more detailed.

A

Something like this.

E

Potentially yeah or not because like in their case, I think they jump. They have a couple of case studies in between, so maybe that's why they have the the link to jump over it, and we don't so I you know just thinking aloud where, where you're able to expand the details of a given feature is probably if it works in the summary as well, that would be nice just so that people can either way they can click to expand.

E

um Maybe it doesn't fit, but just while you're looking at it, if it does.

E

So yet one thing and another piece of feedback is that there's the left-hand side is, it says, start here or recommended or most popular. It has a tag to kind of elevate that card and the card itself is elevated. Well, no, it's not.

A

It's a little elevated, isn't it.

E

uh Yeah, it is when you hover, if you move your mouse to a different one, or if you move your mouse away. Oh okay, it is elevated unto its own correct, with no hover.

I

E

Oh okay, um speaking of not being able to have enough green, you mind the shadow behind that card.

E

Okay, uh there's definitely enough green on the page. That's not the um as a matter of fact the the dollar signs. Maybe they should be black or the whatever the price is. Maybe it should be black, but the thing about that like if, if you go back to the github's pricing, you know it's pretty common, that you'll see like that, how to see how they have the most they have it outlined in blue, and so that's why I was suggesting a potential green shadow.

A

I did this thing over here.

E

Oh yeah, it looks great, it looks great.

A

It could have like an okay, maybe a green, but shadow shadow- might not look good like there's a shadow here. There's a shadow here. Oh like okay. I know okay I'll, try, try like adding cream.

E

Yeah, if it doesn't work, you know no, no, no problem.

E

Yeah, there's a lot to it's deceiving because you can scroll through the page and just like two scrolls or something there's a lot of work that went into this page and that's that's great. It's it's great.

E

So there's faqs at the bottom. There are people that have said things about how they enjoyed it.

E

If you go to the faqs for just a moment, so there's kind of two sections pricing and billing good. These are helpful. um Some of the. If you were to hit the what payment methods do you support the top one on billing?

E

I think this gives an example of the fact that there can be a button if helpful to the user. So in this case I think it generates an e. It's like a male 2 hyperlink, I think, but I was just pointing out the fact that they can contain a button so something to okay good anyway. This one might be boring to a lot of people- I don't know, but but um yeah, it's good.

A

Okay, so I'll work on these feedback items probably have a better looking page next week, uh all right, so thank you. Everyone uh moving on. uh We have elizabeth's topic elizabeth. uh Do you wanna share.

J

Yes, I will thank you. Okay,.

J

All right, so I hope everyone can see my screen.

J

Yes, um so I worked on about the auto section for the blog posts right, and this is how it currently looks. Oh, um this is yeah. This is how it currently looks and um nikki- and I were talking about um like how it should look on mobile and yeah, then, basically how we should look on a mobile stream yeah. We kind of had like some responsiveness issue. Thank you.

J

So um I think we just like to see um whether, because yeah other people's opinion on that, I'm currently I'm hiding it on mobile, I'm adding it on mobile and tablets, or um we like want to have like a share option. I guess on mobile, like to share the post, because currently we have to share you where you can share to facebook with our linkedin so yeah. I think we want to hear that everyone's opinion.

J

E

Yeah, nice, let me let me get that. Let me kick that off. Let me help which so just for those that aren't aware um elizabeth is adding a brand new feature on the individual blog pages. So if you go as a visitor of the site, if you go read a blog page, it'll tell you, you know, it'll, give you an image and the title of the page and etc. But what what she's doing is adding in that right hand, side that whole panel. That says about the author um one.

E

I would suggest that maybe we capitalize author so about lowercase, the capital author and then it just gives a brief blurb. If the individual that has written the article has a community member profile on the site, then their details are available, and so those details can be dynamically retrieved and included and then, as part of the about the author, blurb there's just like a call to action like hey, come, come check out this thing. In this case I think it's just a statically set.

E

um What that call to action is, but the bottom piece is to help people easily share the article.

E

So elizabeth, you had identified a reusable package to help generate those share. Those social links is that right.

J

Yeah yeah, um it's currently works. If I share to twitter, for example, it shows check out this post from there. I think we can change these um posts like whatever it's there but yeah. This works currently.

E

Nice, and so it works for each of those three um guys: okay,.

E

uh Nikhil, did you get a chance to look at that package and it's so that the level of configurability, where it says where you can say, like you- know, check out this post from layer? Five? Is that configurable per social network or is that a global static configuration.

J

um It's a social network, it doesn't work for linkedin, for example,.

E

H

No, I think what lee meant was if we could change the content of the shareable link. That is the extra content that you're adding that is check out that post, if you could configure it for each of the different social media sites which we are sharing.

H

J

H

I haven't checked that.

E

Yeah and the reason I was asking is, but perhaps maybe I maybe not actually but but you know like if on, if on twitter, you always wanted to include a particular hashtag as versus you didn't want the hashtag, because it just didn't really tie in.

E

Or you always wanted to add like layer five or at may. Potentially this would be really something um elizabeth. This would be really something if, for each of the authors, if they have a profile, a community member profile, the overwhelming majority of them have a twitter handle.

E

So if this is this is a stretch like this is don't. This is just me, rambling on and thinking about what you could possibly do.

E

So if this isn't feasible, don't don't sweat it, but you could imagine if someone clicks the twitter button twitter share button here, it says check out this post on layer, five and or rather what it would probably say, is just the title of the blog post, hyphen hyperlink to the post, but it might say, evolution of the it might say the title by and it would at the person that wrote it so this guy he his call sign his handle, is alpha x86.

E

So if you click on his name in his community member profile, it he should have his twitter handle, and so what I was saying is he he could actually be tagged.

H

Technically so checking just now, technically, there seems to be a way in which we could differentiate content for each of them, like the allow props for each of the components that we have. So it seems to be possible that yeah it can do give it a checklist when you get like. I think it should be possible.

E

Another question for you, elizabeth: if I could, on the about the author card itself, there are at least four hyperlinks, so three social networks and one button to get started is, are those the only four hyperlinks.

J

Yes, those are the only five links currently.

E

Okay, and so we there, I don't know that there needs to be, but I just wanted to confirm that there is or isn't a hyperlink to the author's community member profile.

J

Oh yes, actually sorry, I forgot about that. Yeah there is there's a link, so that's gotcha all right.

E

Okay, nice, okay and then um are where you and and nikhil at on your line of thinking with respect to.

E

um Displaying about the author in mobile.

J

View yeah so um nico suggested that we hide this right and just have a share button at the bottom of the screen. I'm still thinking of the design for that um have a share, but it's not the bottom of the screen.

J

I mean of the posts, rather where yeah. So basically just one share button right and I think once that is clicked on, we could have a pop-up social share to facebook or linkedin and tweet. That.

E

Got you hey? It.

K

H

Is that really how we have the written? No, no, that.

E

Starting to get all excited here, um one so elizabeth, while we're making all kinds of requests and we're we're fantasizing about what we might do. Another thing late to consider in a different pr, potentially since you're getting quite familiar with this area is at the bottom of every post.

E

We take the author name from the from the from the front matter of the page and we hyperlink to their community member profile so where we have aditya's name in green well, think about. I don't know if this is think about it if his in his case, this is true- and I wish he was on, but if, if we put his ugly mug right there as well, that's the worst picture man. I don't it's like a picture of a picture, it's just terrible and then he's got like that.

E

Half the mustache, that's like kind of coming in it's like he's a teenager and doesn't want to come in yet, but maybe it will anyway, somebody's got to help the guy like um he needs more spinach or something like that. I don't know what he needs more protein.

E

That's not I got. I wish he was here because we got we gotta say that anyway, uh now that I've now that I've made a complete hours out of myself, uh it might be interesting to consider uh his pro a profile image of the in the author actually of about the same size as your mouse cursor. Currently. Is that touch cursor? You have.

J

E

Maybe you know nice, um one other piece of feedback from me and then, um and that is if you.

E

I'll take a screenshot, I'm pretty sure that there's a residual um responsive issue with the photo and the ring around it, but I'll take it. Maybe it's excuse me. Maybe it's gone now that there isn't a responsive, I'll.

A

Find it you know, even I noticed some issues with the picture. If you go to uh say, pushes post uh go back to the blocks page yeah.

E

Oh yeah, that's exactly the one yeah.

A

This one okay see uh we wanted to be central line like the ones we have the community member cards, uh similar alignment.

J

A

Yeah it's on some a couple of other cards as well like it's not in the center, even on my blog posts, I think and nikhils yeah.

J

Oh wow, okay I'll check that out yeah, oh okay, I'll check it out.

E

It's otherwise pretty exciting. It's looking pretty good. It's it's um clean! You know it's nice.

H

uh Though one thing I I think, if you're not working on it or you are working on anything, the one thing is, as I mentioned, on the issue as pr asset. It would be better if you could have that card along the same line as the blog post. Instead of having a separate column on tool.

H

Like if you go to the screenshot, which is shared on the issue,.

J

Description, I'm nikhil. Sorry, I can barely hear you.

H

I'm saying if you go to the screenshot, which is given in the issue description.

L

H

Okay, okay, so this one doesn't have okay, let me share another issue which has the complete image just to set it.

H

Should I um open check out check out this issue check out the link which I shared in the zoom chat? Okay, that one has an image of the complete page? Okay. So in this one the card is within the width of the blog data, and it is not a separate column on to here.

J

Okay, yeah yeah. I remember we discussed this. I was also like um this suggestion you use when you talk about. I should use um flutes right. I had.

K

J

It's it's very responsible.

H

Yeah so having it around, that line would be better because otherwise you would be having just an extra column with full of white space after the author cut it, so we can avoid that if we could arrange it, I use the card in this way.

J

H

J

Okay, I think I'll check that out closer.

A

Thank you, elizabeth uh anything else from you.

A

um No okay, thank you! So much uh moving on harshit, we have your vr. You wanna show your scale.

G

Okay, I'm sharing my screen.

G

Okay, my screen invisible.

A

G

Okay, so this week I was working on enabling the dark mode. So, basically, let me tell you how it's enabling the dark mode first, that we are using our cookies here. That first of all, we just wait just want to delete the first key. Just the freshman is opening layer, 5, then, okay, so first we have this light default. We have as our light theme here enabled and after we have. There is our theme switcher and if you just click on the theme, switcher, okay, we have a dark mode here, basically and our we have.

G

We have stored it in the cookies that if we come after this, it will still be enabled in a dark mode, and it's just a dark mode. We have a dark colors here. It is just a customized by me, basically because there is no design available in a figma.

G

So that's why it's designed by me, but it's not fair, to be designed uh layer 5 by me. I want that everyone should just uh agree with this designs, and this is basically I'm showing the website here.

G

And some pages are remaining here. Basically, all the pages are not designed yet.

G

And we can switch things from if we go to page two page, and this is it basically, I am designing all the people on our dark theme. Now it will be done this week. I guess yes- and this is it.

G

Any reviews on this any suggestions, uh basically.

H

I think major two changes would be required in the enough for, like the drop down.

H

Yeah, this doesn't look, doesn't look good, like the color combination doesn't suit. So I think.

D

H

Background white itself, or maybe some other color, the tertiary green- that we have. Maybe we could try out that and have the text in the white color instead of green okay, okay and the other page is like the basic switch. Whenever we do to dark mode, it should be all the text should be changed to.

H

Would be so, the cards have a black shadow. They can have a light green shadow instead of the black shadow with when there is a darkening switch other than that it like. We will have to go to each of the pages and then decide what will be changed. Also.

G

I

Yeah the logos on the first page, like we have, we showed different logos for the different companies that also needs like light versions for those down. If you scroll down yeah this one, this one- yes, yes, okay,.

G

uh Basically, these are images, so I can't change from css here. We need different light images for this.

A

If there are svgs, then we can probably change it, not sure, but uh yeah we'll have to go through all the.

M

Okay, so I have a suggestion.

M

Hello, everyone yeah, so I was I was.

M

Yeah we can you yeah yeah, okay, okay, so I was I was. I was thinking.

H

Is there really that time.

M

You can maybe brighten the background when you talk about that, for those images.

G

N

Your voice is extremely, very clear yeah. This.

G

N

Just the citrix, this is actually before people see the other ones, are kind of.

M

So I was hoping you just brightened the background a little bit just for it to stand out.

E

Yeah so hershey is saying is suggesting an alternative approach to to image manipulation directly, so so one approach so so har, just by the way. um It's very it's great that you're taking this on and it'll re it'll require some tenacity, because, because there's a few things that stand in your way, which is one, is that either like poor adherence inside the code to use of theme, colors many colors are called out explicit, like hard coded and explicitly on each page.

E

So part of the task will be to displace that hard coding with a theme reference to so for either for light or dark mode. um That'd be one of the things one of the other. Things will be like the the images and whether or not the image itself is there's two versions of it. That's probably the ideal world in which this is done is that there's two versions of the image these images are curated to be work either way. So if you scroll down to where these logos are, these logos are a perfect example.

E

These are all svgs, which means that they are all um programmatically manipulatable, which is to say that you could apply css to to get them to do what you want them to do more or less. um That doesn't mean that it'll always be easy, that you could universally apply kind of a light, or rather a dark mode, coloring to images without just just blanketly, without having to go to each image and sort of touch it you might. What gets worse is when you're dealing with pngs on other pages, particularly particularly like.

E

If you go to the blog post pages, those posts are coming faster and faster these days and the images that people use are most commonly pngs.

E

As a matter of fact, they can't be svgs because when you go to share a post socially on a social network, most of the time, those social networks don't want to pick up the svg and show it in a preview. They want to have a png or jpeg or a gif.

E

So what ethane was saying is that an alternative approach to those to lightening the logos is to leave them as is but offer up a highlighted background or offset the background a little bit so that it's not completely black, but maybe a lighter a slightly lighter shade, which would also that's an alternative approach that would that would help the probably the more ideal approach is a hand. Curated version of each of the logos.

G

Okay, yes, I got it so basically we have to change the color some colors here which of a background so that the pngs can be highlighted in a dark mode in agreement. You know a great way.

E

As a fallback, ideally not attain has a great suggestion, um but we want to stick to to the harder thing to which will look a lot better, which is light versions of the logos.

E

Okay inside I don't know if everybody knows this, it probably took me quite some time to comprehend this, but an svg is nothing but like xml on the inside or an s, it's a version of xml on the inside, which means you can open them up and um tweak them like to directly edit.

O

N

E

G

Okay, I will then change all the svgs.

G

Okay, yes, I got it.

E

Did you want to say something.

M

E

Okay, yeah, you see you could so you can apply some css to that. uh Svg. Okay,.

G

Okay, I will apply that I will do this.

G

Okay, one thing: okay,.

E

B

E

Want to know is whether or not we're gonna have um individual pictures per um for light theme and dark theme.

E

So like it's like, we need a systematic approach to be able to confirm that anytime, any page is built or any news article is created or any blog post is made, that there's a light version of the image provided and if there isn't how it is that css is going to be applied to that image, to ensure that there's a high contrast between the dark background and the image displayed and and those things can be done, and we have examples of those in the blog post now um but but you'll need to that's.

E

That's a big ticket item that you'll need to ensure.

G

Okay, so if we don't have a dark dark theme that blog post and just automatically convert to the.

E

Yeah, like click on the eight weeks of open source from um owen, the click yeah click on the blog post right there, eight weeks of open source. If you would.

G

um Okay, no, it's! I think the this page is not been converted. Yet, yes, okay, but scroll.

E

Down you see right there, where we've got the lovely edna.

E

The image that was created um it did, do you see the light green shadow that outlines the background of that image. That shadow is just css. It's not part of the png file itself.

E

If you imagine a dark background, the image will still pop it'll still work, because even if it was a dark image, even if the background image was dark, it would still work without manipulation, because it would have that light green shadow as a separator.

E

So just as an example.

G

Just I can do it, it can be easily today.

G

Okay, I guess I will work on this and make this thing work out for both our dark theme and light theme, and one thing, nickel and actually is it.

G

Anything about this topic.

H

One thing uh yeah, one another item to be discussed was currently since uh herschel is using cookies to save the theme. uh My question was: a lot of users have their cookies disabled in the browser, and in that case we won't be having this feature working, so should we be opting for local storage? uh Is that percentage of user? Who do so is very, very small, and we can avoid that about thinking about that yep.

H

I guess uh local storage would be the best idea and that's why I provide a plugin which I've shared in chat so.

G

That might work.

G

uh Yes, that was the thing that that we should use. uh I should use a local storage instead of cookies. So that's the discussion.

H

Okay, so that plug-in specifically uses the storage associate.

G

Okay, I'll try to work out with the local storage instead of cookies, and that's it I guess it will solve the purpose.

G

Okay, so that's it should I close sharing, and anyone want to ask more questions about this.

A

Just another thing will be: another piece of work will be wherever we use gradients like on the learn page. If you go to the learn page, I think even those are hard coded so you'll have to if, if it's, though most of these are green gradients, so I don't think you'll be problematic, but at some places we use light ones as well, so you'll have to just when you design the pages. You'll have to keep a note of that as well.

G

Okay, I will keep it keep it in mind. Okay, so I think the major thing is about that. I have to convert the colors. I have to select the colors here and svg's changes which is compared to be compatible with that dark theme.

G

Okay, I will work on this and.

G

A

Thank you, harshit.

G

A

So I think we have nikhil's topic which we can quickly cover today. uh Nikhil, do you want to share his key.

F

Yeah, he just said.

H

It's my skin. You see.

H

Yep yep, yes, okay, so the rotational call to action framework is completed as of now, and we have a demo is installed in one of the blog posts just to give an idea how things would be.

H

So this is one of them, which would be an only the size of an image another one in between the block, full width and another one would be at the end of the top just after the attacks.

H

So these two ctas would be if anyone wants to have the cds they have to be and like added in the blog itself, like the mdx file. But this the bottom cta is by default under the block single component that we have so that would be common for all the pages, though we can configure it.

H

So there is one issue in this case the bottom one because based on the positioning, this would be same for all the pages that we have under the blocks, or we can because in this case it is having rendered at a single page and used in all the block pages, and it is not changed accordingly based on the blocks.

H

So we can either have it like. Whatever data we will, it would be same for all of the pages, but the idea too, that could be changed based on the requirement or whatever we want in each of the blockchains, like the image as well as link as well as the data could be changed.

H

And in the mobile view, they all would be shrink to a card of the image width.

H

And we have the same size of the suit.

C

First, I don't think it's very distinguishable.

H

Right, uh so that's the reason it has a shade background, shady table as like, because this image doesn't have I. This is just for demo purpose, so I haven't enabled the background layout over it. So if, if the user wants, they can pass a prop with like a blend prop is given to it. That would have a slight of green blend over the complete image.

H

Suppose, if you have a mystery logo, for example, that that has a brown bright background, if that's the case or some other text description or some other image, with some textual data that could have a green blend that would allow like a way to dis, make it differentiable from the actual blog images that we have instead of having direct images.

O

It's impossible to have it.

O

H

But there is a way like we have a blend prop that will allow us to have a green overlay on top of the image.

H

I'm not sure exactly if that would but yeah, we will again have to decide what kind of image we want to give to that, so that differentiates yeah. So we have these callouts. If that suits the requirement of the block we could have, we could have and position it at whatever area we want. It does not fix that. We will have to position it at some particular place.

H

We could position it at anywhere, very any grace of the mdx file that we wanted, but it would be the size of this image like we have three cts one is cta image only. It is full width and cta bottom. The bottom one is fixed to the blogs after the end of the block, complete block data and the tags description that would be common for all the mdx files, but we could differentiate for the news, the blocks and the resources data's individual, because all of them are three different components.

H

So yeah, that's the rotation cta that we have. Currently, this is disabled, but the code is increased. So if we wanted to add any of the future blog posts or in the current room's asset, we could just write the call. We don't even need to import the components those are imported by default to the emdx provider. We just need to add the component, like whatever we will write a component.

E

But to me nikhil makes this look pretty easy. um I'm a little!

E

I'm either embarrassed at how fast this came together, because because I thought it would be harder or or just nikhil is really good at this stuff. At this point like um in essence, what nikhil has done, if you, if anyone had worked with like uh uh google google advertisements google adwords earlier on, I don't think that they quite do this now.

E

Actually they probably do it really similar to what nikhil has done here, which is which is you go in, and you just you tag or identify different areas of your blog that you wouldn't mind for google to fill in some ad. So when someone pulls up, the page javascript runs to figure out, what's the most appropriate ad and what fits with inside the particular site. Dimensions of the ad of the of the space and google fills it in and that's in essence.

E

What nikhil has done here is that there will be a growing um set of call to action.

E

Like small call outs, small advertisements, small announcements that there will be a list of and of those call to actions that they will be formatted to fit into different sized boxes uh and they might have different buttons, different actions that different details that can be displayed or not, and so nikhil has created this framework in which you can go over and independently define what those announcements are, what those actions are uh and, uh and then um dynamically uh identify what pages should load, or rather I guess nikhil.

E

That's a good follow-up question is, as you wrap this up and go you go to merge this pull request. There'll, be, maybe you've already done it, but there will be some small amount of like um how do I contribute to? How do I contribute a call to action and make sure how do I, what are the requirements to create one so that it plays well within the framework?

E

The second thing to give consideration to is it's a question that you had asked earlier and that was: is it necessary that there's a rep like that that you could, within this framework that you could identify what call to action?

E

Would be displayed on what type of page- and I don't know how far if you did anything in that regard, so if the page, if the blog post itself is under the category community- and you have a collection of community called actions, can you can you associate.

H

Okay, no, no, in that case like currently, there is only two way which we could configure. The series call to actions, one of them being central.

H

That would make the call to action same for all the pages that we have and another one being adding the call to actions individual in each of the blocks and making it configurable from the mdx file itself, like passing the data whatever we want like custom image, custom data under custom. Look for that particular block itself. It is not for a group of blocks or a collection or a category or a tag of blocks.

H

But maybe that could be done for like the bottom ct like the bottom call to actions that might be possible, though I will have to check or it may not, because since we are having the path which includes the collect categories, so maybe we will have to check if that could be also yeah.

E

Yeah one thing yeah as you just as a mental model as you think about that the related blogs, if those are those in some respects, they're using similar logic to say, oh you're, looking at a blog post under the category envoy, here's other related blog posts in the same category it'd be kind of a similar thing. That would be done with the call to action call actions.

H

Right or we could just have a you- know, json file that would have the keys as the categories that we have, along with the data. What and just based on the graphql query that we are getting from there? We could filter out the category that the block belongs to and based on that category, we could just display the restrictive contraction for our page, because for each js file we have the graphical data coming, and we have the category data front pattern that a variable.

H

So we could just filter out the json file and get the data like basically use an object and get the respective members from it and send it to the call to action.

E

H

Yeah, if there are no further questions.

E

No yeah, you got the responsive issues too, so.

L

E

I think you already, I think you already took care of him- is what I was saying he's like.

H

Yeah I'm taking care of it. It looks fun.

E

Now we just need some call to a now. We need some call-to-actions right now. We need some contacts unless everyone wants to go to guadala um guadalajara, to uh ev. Every time I remember uh I remember taking that photo stand. It was on top of one of their well, it's not a skyscraper, but it was a tall building. That's that's everybody standing on top of a tall building, all those people, that's not the it's kind of funny anyway.

H

Okay, that gives me.

A

12 minutes over, so that's all for today we'll take up uh some of these topics in the next call uh guys. Please add it to the next week's meeting minutes or you can discuss it in any other call as well. That's fine! uh So thank you all for joining see you all soon bye, bye,.

L

Bye, bye thanks. Everybody.