Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Tag component #507

Closed
wants to merge 39 commits into from
Closed

Add Tag component #507

wants to merge 39 commits into from

Conversation

quadratz
Copy link
Contributor

@quadratz quadratz commented Sep 18, 2022

Tag Preview

See the result :

Some examples:

Result Syntax Description
deno <TagGroup><Tag template="deno"/></TagGroup> Use default deno template
denoland <TagGroup><Tag template="deno" text="DENO LAND"/></TagGroup> Use default deno template but change the label to "DENO LAND"
denonodejs <TagGroup><Tag template="deno"/><Tag template="nodejs"/></TagGroup> Use two tags: Deno and Node.JS
telegram <TagGroup><Tag text="GRAMMYJS" icon="telegram" iconType="logo" color="#26A5E4"/></TagGroup> Custom tag.
trending <TagGroup><Tag text="TRENDING" icon="fire" iconType="icon" iconColor="#dc3545" iconBg="#ffe674" color="#fde427" textColor="#ff8080"/></TagGroup> Custom tag.

List of Tag attributes:

Attribute Option Description
template official, thirdparty, deno, nodejs Tag template
desc Any string Description for the tag. It will displayed as a tooltip
link Any URL or anchor link. Tag hyperlink
color HEX, RGB, or any string that matched with css color Tag background color. Example use for HEX color: <Tag color="ffffff" ... />
colorDark HEX, RGB, or any string that matched with css color Tag background color for dark mode. Example use for HEX color: <Tag colorDark="ffffff" ... />
icon .svg file's name Tag icon. If we do not have the icon on asset folder (matched by the file's name), then fetch them from simpleicons.org. Example: <Tag icon="npm" iconType="logo"/> will fetch .svg with name npm from URL https://simpleicons.org/icons/npm.svg
iconType icon, logo Icon type. icon will fetch from icons.getbootstrap.com and logo will fetch from simpleicons.org. Example: <Tag icon="fire" iconType="icon"/> will fetch from URL https://icons.getbootstrap.com/assets/icons/fire.svg
iconColor HEX, RGB, or any string that matched with css color Tag icon color
iconColorDark HEX, RGB, or any string that matched with css color Tag icon color for dark mode
iconBg HEX, RGB, or any string that matched with css color Background color of the tag icon
iconBgDark HEX, RGB, or any string that matched with css color Background color of the tag icon for dark mode
text Any string Tag label
textColor HEX, RGB, or any string that matched with css color Tag label color. Example use for HEX color: <Tag textColor="ffffff" ... />
textColorDark HEX, RGB, or any string that matched with css color Tag label color for dark mode. Example use for HEX color: <Tag textColorDark="ffffff" ... />

TagGroup is useful for adding some margins to your tags. You can wrap your tags inside TagGroup like this one:

<TagGroup>
  <Tag text="TAG 1" />
  <Tag text="TAG 2" />
</TagGroup>;

Always use TagGroup when Tag is used right below heading.
But, in some cases we may not include TagGroup, such as when we insert Tag between sentences like this one:

inline-tag

List of TagGroup attributes:

Attribute Option Description
mt px, rem, or any string number that matched with css size units Top margin. Example: <TagGroup mt="12px"> ... </TagGroup>
mb px, rem, or any string number that matched with css size units Bottom margin. Example: <TagGroup mb="12rem"> ... </TagGroup>
pt px, rem, or any string number that matched with css size units Top padding. Example: <TagGroup pt="12rem"> ... </TagGroup>
pb px, rem, or any string number that matched with css size units Bottom padding. Example: <TagGroup pb="12rem"> ... </TagGroup>

@github-actions
Copy link

github-actions bot commented Sep 18, 2022

@github-actions github-actions bot temporarily deployed to pull request September 18, 2022 14:39 Inactive
@KnorpelSenf
Copy link
Member

Have you considered adding these labels to the navigation menu, too?

@dcdunkan
Copy link
Member

Suggestion: Maybe use the greenish color of Node.js logo for Node.js badge? (I don't see a specific color scheme for Deno other than black-and-white, so the current one is nice)

site/docs/es/hosting/deno-deploy.md Outdated Show resolved Hide resolved
site/docs/hosting/deno-deploy.md Outdated Show resolved Hide resolved
site/docs/hosting/deno-deploy.md Outdated Show resolved Hide resolved
site/docs/id/hosting/deno-deploy.md Outdated Show resolved Hide resolved
site/docs/zh/hosting/deno-deploy.md Outdated Show resolved Hide resolved
@quadratz quadratz marked this pull request as draft September 19, 2022 12:20
@github-actions github-actions bot temporarily deployed to pull request September 19, 2022 12:22 Inactive
@github-actions github-actions bot temporarily deployed to pull request September 19, 2022 19:41 Inactive
@quadratz
Copy link
Contributor Author

f06b4f7:

chachacha

@quadratz quadratz changed the title Add Deno and Node.js badge to all Hosting list Add Deno and Node.js badge to plugin and hosting Sep 19, 2022
@github-actions github-actions bot temporarily deployed to pull request September 19, 2022 19:45 Inactive
@quadratz
Copy link
Contributor Author

quadratz commented Sep 19, 2022

To do:

  • Implement labels into the navigation menu

@KnorpelSenf
Copy link
Member

As a general rule, all plugins should be available on both runtimes. That's why adding both Deno and Node labels to all official plugins is maybe a little weird. We should rather add a note to stateless-question (or finally port it, @EdJoPaTo?) as well as to fluent. It can say that exactly this plugin is Node-only.

We can well use the lables for the hosting pages!

@quadratz
Copy link
Contributor Author

I had the same thought until I realized that some official plugins do not support Deno. Perhaps we can add a node.js only badge for those two plugins while removing the Deno and Node.js badges from the rest.

nodejs-only

@KnorpelSenf
Copy link
Member

I'm not sure we need a badge for that. That makes it look like Node-only plugins are a thing which we advertise or anything (we even created a label for it!) while in reality there's like 1 plugin that won't support Deno, and another one that will be supporting both runtimes in the future.

@github-actions github-actions bot temporarily deployed to pull request September 20, 2022 09:59 Inactive
@KnorpelSenf
Copy link
Member

Great changes, awesome to use a component!

Copy link
Member

@rojvv rojvv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a doubt related to the SVG labels, specifically the ones saying "third-party":

I think that the current implementation will result in a small headache in the future for people willing to translate the website to another language, as they have to open the SVG in an editor, change the text, and then upload it to a different file.

Maybe we can make it a component and let it be usable, for example, this way:

<Tag name="third-party" />

What do you think about it? I think it's going to be much much better to have less stuff for those who contribute new languages to take care of.

@quadratz
Copy link
Contributor Author

Sure. What badges should we add?

@KnorpelSenf
Copy link
Member

The Deno/Node ones.

Should we then retain the columns about Deno and Node? They will be redundant, but it could be that they still provide a better overview?

@quadratz
Copy link
Contributor Author

Like this?

A1

@Loskir
Copy link
Contributor

Loskir commented Oct 14, 2022

No, I'd rather make a column "platforms"

@quadratz
Copy link
Contributor Author

No, I'd rather make a column "platforms"

And then we add Deno/Nodejs badges there?

@Loskir
Copy link
Contributor

Loskir commented Oct 14, 2022

Yes

@quadratz
Copy link
Contributor Author

Style 1:

A5

Style 2:
A4

Style 3:
A3

Style 4:
A2

@quadratz
Copy link
Contributor Author

Personally, I prefer styles 1 or 2.

@Loskir
Copy link
Contributor

Loskir commented Oct 14, 2022

2 but a bit smaller paddings. 1 (current?) is also ok

@KnorpelSenf
Copy link
Member

Isn't web also a platform? Also, what does the web platform even tell us?

@quadratz
Copy link
Contributor Author

quadratz commented Oct 14, 2022

what does the web platform even tell us?

Good question. Does it have anything to do with bot development, specifically? 🤔

@Loskir
Copy link
Contributor

Loskir commented Oct 15, 2022

what does the web platform even tell us

ESM without any Deno APIs, I suppose

@KnorpelSenf
Copy link
Member

what does the web platform even tell us

ESM without any Deno APIs, I suppose

How about we add a Node badge if the platform supports Node APIs, a Deno badge if the platform supports Deno APIs, and no badge if the platform supports neither of the two?

@Loskir
Copy link
Contributor

Loskir commented Oct 16, 2022

Good, since the only platform that this is intended for was Cloudflare Workers, and it also supports Deno

@quadratz
Copy link
Contributor Author

quadratz commented Oct 17, 2022

Do you think it would be a good idea to remove the pricing column? I believe that the min. price field already provides sufficient information, and that the addition of the price field only adds to the complexity.

@KnorpelSenf
Copy link
Member

Yes that sounds reasonable. I think the most important info to have on first sight is how cheap it could possibly get. Also, maintaining a list of constantly changing prices is extra work. We could save that.

@github-actions github-actions bot temporarily deployed to pull request October 18, 2022 16:26 Inactive
@quadratz
Copy link
Contributor Author

quadratz commented Oct 18, 2022

Yes that sounds reasonable. I think the most important info to have on first sight is how cheap it could possibly get. Also, maintaining a list of constantly changing prices is extra work. We could save that.

Since some of the content needs to be translated, I've put them into different PQ. Now this PQ is ready to be reviewed.

@KnorpelSenf
Copy link
Member

KnorpelSenf commented Oct 18, 2022

This PQ causes the site's performance to drop heavily on pages that include a badge. For example, the total blocking time in a lighthouse test more than doubles from 100 ms to 230 ms. The badge is fading in after the page has loaded, which leads to a visible layout shift. This can be confirmed by looking at the cumulative layout shift value which increases by almost 50 %.
image

Other tools such as https://web.dev confirm these values.

In absolute values, I don't really think that we have crossed any thresholds the should prevent us from merging this. I am mainly posting this so that we all know what we're buying ourselves into.

The one thing that I believe does need improvement is the layout shift. It'd be great if the page just loads and that's it, rather than moving around the content after I started reading. @CikiMomogi what do you think?

@quadratz
Copy link
Contributor Author

Hmm. Let's see if i can fix that.

@quadratz quadratz marked this pull request as draft October 20, 2022 00:49
@quadratz quadratz closed this Dec 1, 2022
@quadratz
Copy link
Contributor Author

quadratz commented Dec 1, 2022

Closing this PQ temporarily. Perhaps I'll continue it in the future.

@KnorpelSenf
Copy link
Member

Sad to see this stalling :(

@KnorpelSenf KnorpelSenf mentioned this pull request Dec 27, 2022
@quadratz quadratz mentioned this pull request Jul 2, 2023
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore Modifies or is related to tooling, configuration, or setup. not translatable Translator intervention is not required.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants