Add Tag component #507

quadratz · 2022-09-18T14:36:10Z

See the result :

Some examples:

Result	Syntax	Description
	`<TagGroup><Tag template="deno"/></TagGroup>`	Use default deno template
	`<TagGroup><Tag template="deno" text="DENO LAND"/></TagGroup>`	Use default deno template but change the label to "DENO LAND"
	`<TagGroup><Tag template="deno"/><Tag template="nodejs"/></TagGroup>`	Use two tags: Deno and Node.JS
	`<TagGroup><Tag text="GRAMMYJS" icon="telegram" iconType="logo" color="#26A5E4"/></TagGroup>`	Custom tag.
	`<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:

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 · 2022-09-18T14:39:26Z

🚀 Deployed on https://634ed354962969069a8b103f--grammy.netlify.app

KnorpelSenf · 2022-09-18T15:02:10Z

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

dcdunkan · 2022-09-18T18:29:26Z

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

site/docs/hosting/deno-deploy.md

site/docs/id/hosting/deno-deploy.md

site/docs/zh/hosting/deno-deploy.md

quadratz · 2022-09-19T19:42:48Z

f06b4f7:

quadratz · 2022-09-19T19:45:57Z

To do:

Implement labels into the navigation menu

KnorpelSenf · 2022-09-19T20:13:48Z

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 · 2022-09-20T00:30:20Z

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.

KnorpelSenf · 2022-09-20T05:55:18Z

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.

KnorpelSenf · 2022-09-20T10:43:22Z

Great changes, awesome to use a component!

roj1512

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.

* Add tagGroup * Add several options

quadratz · 2022-10-14T12:52:02Z

Sure. What badges should we add?

KnorpelSenf · 2022-10-14T13:46:59Z

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 · 2022-10-14T15:57:27Z

Like this?

Loskir · 2022-10-14T16:05:41Z

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

quadratz · 2022-10-14T16:18:09Z

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

And then we add Deno/Nodejs badges there?

Loskir · 2022-10-14T16:20:01Z

Yes

quadratz · 2022-10-14T16:41:51Z

Style 1:

Style 2:

Style 3:

Style 4:

quadratz · 2022-10-14T16:43:51Z

Personally, I prefer styles 1 or 2.

Loskir · 2022-10-14T16:44:47Z

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

KnorpelSenf · 2022-10-14T18:47:13Z

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

quadratz · 2022-10-14T23:48:36Z

what does the web platform even tell us?

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

Loskir · 2022-10-15T11:46:14Z

what does the web platform even tell us

ESM without any Deno APIs, I suppose

KnorpelSenf · 2022-10-16T10:08:24Z

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 · 2022-10-16T10:16:48Z

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

quadratz · 2022-10-17T02:56:06Z

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 · 2022-10-18T10:07:28Z

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.

quadratz · 2022-10-18T16:43:57Z

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 · 2022-10-18T17:33:31Z

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 %.

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 · 2022-10-20T00:48:33Z

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

quadratz · 2022-12-01T01:48:28Z

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

KnorpelSenf · 2022-12-03T20:09:34Z

Sad to see this stalling :(

Add Deno and Node.js badge

d536451

github-actions bot temporarily deployed to pull request September 18, 2022 14:39 Inactive

KnorpelSenf requested changes Sep 18, 2022

View reviewed changes

Ciki Momogi added 2 commits September 19, 2022 19:10

Merge branch 'main' into badge

14299f5

Apply suggestions from code review

97d4291

quadratz marked this pull request as draft September 19, 2022 12:20

github-actions bot temporarily deployed to pull request September 19, 2022 12:22 Inactive

Ciki Momogi added 2 commits September 20, 2022 02:22

Redesign the badge

da70b26

Implement badge into plugin

f06b4f7

github-actions bot temporarily deployed to pull request September 19, 2022 19:41 Inactive

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 bot temporarily deployed to pull request September 19, 2022 19:45 Inactive

Ciki Momogi added 2 commits September 20, 2022 16:20

Add Tag component

1db7dd7

Update all tags

94c8558

github-actions bot temporarily deployed to pull request September 20, 2022 09:59 Inactive

roj1512 reviewed Sep 20, 2022

View reviewed changes

Ciki Momogi added 5 commits September 21, 2022 01:08

Merge branch 'main' into badge

3f701c5

Update tag

c6df756

* Add tagGroup * Add several options

Fix typo on menu entry

9647995

Sync updates to all languages

50e1525

Fix build error

3b95be2

Ciki Momogi added 2 commits October 15, 2022 09:09

Add transition

df5b131

Add gap option to TagGroup

f4ff085

Merge branch 'main' into badge

04f5f89

github-actions bot temporarily deployed to pull request October 18, 2022 16:26 Inactive

quadratz mentioned this pull request Oct 18, 2022

Update hosting comparison #529

Closed

quadratz marked this pull request as draft October 20, 2022 00:49

quadratz closed this Dec 1, 2022

KnorpelSenf mentioned this pull request Dec 27, 2022

Rearrange the navbar #481

Closed

quadratz mentioned this pull request Jul 2, 2023

Migrate to VitePress #824

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Tag component #507

Add Tag component #507

quadratz commented Sep 18, 2022 •

edited

github-actions bot commented Sep 18, 2022 •

edited

KnorpelSenf commented Sep 18, 2022

dcdunkan commented Sep 18, 2022

quadratz commented Sep 19, 2022

quadratz commented Sep 19, 2022 •

edited

KnorpelSenf commented Sep 19, 2022

quadratz commented Sep 20, 2022

KnorpelSenf commented Sep 20, 2022

KnorpelSenf commented Sep 20, 2022

roj1512 left a comment •

edited

quadratz commented Oct 14, 2022

KnorpelSenf commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

quadratz commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

KnorpelSenf commented Oct 14, 2022

quadratz commented Oct 14, 2022 •

edited

Loskir commented Oct 15, 2022

KnorpelSenf commented Oct 16, 2022

Loskir commented Oct 16, 2022

quadratz commented Oct 17, 2022 •

edited

KnorpelSenf commented Oct 18, 2022

quadratz commented Oct 18, 2022 •

edited

KnorpelSenf commented Oct 18, 2022 •

edited

quadratz commented Oct 20, 2022

quadratz commented Dec 1, 2022

KnorpelSenf commented Dec 3, 2022

Add Tag component #507

Add Tag component #507

Conversation

quadratz commented Sep 18, 2022 • edited

github-actions bot commented Sep 18, 2022 • edited

KnorpelSenf commented Sep 18, 2022

dcdunkan commented Sep 18, 2022

quadratz commented Sep 19, 2022

quadratz commented Sep 19, 2022 • edited

KnorpelSenf commented Sep 19, 2022

quadratz commented Sep 20, 2022

KnorpelSenf commented Sep 20, 2022

KnorpelSenf commented Sep 20, 2022

roj1512 left a comment • edited

Choose a reason for hiding this comment

quadratz commented Oct 14, 2022

KnorpelSenf commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

quadratz commented Oct 14, 2022

quadratz commented Oct 14, 2022

Loskir commented Oct 14, 2022

KnorpelSenf commented Oct 14, 2022

quadratz commented Oct 14, 2022 • edited

Loskir commented Oct 15, 2022

KnorpelSenf commented Oct 16, 2022

Loskir commented Oct 16, 2022

quadratz commented Oct 17, 2022 • edited

KnorpelSenf commented Oct 18, 2022

quadratz commented Oct 18, 2022 • edited

KnorpelSenf commented Oct 18, 2022 • edited

quadratz commented Oct 20, 2022

quadratz commented Dec 1, 2022

KnorpelSenf commented Dec 3, 2022

quadratz commented Sep 18, 2022 •

edited

github-actions bot commented Sep 18, 2022 •

edited

quadratz commented Sep 19, 2022 •

edited

roj1512 left a comment •

edited

quadratz commented Oct 14, 2022 •

edited

quadratz commented Oct 17, 2022 •

edited

quadratz commented Oct 18, 2022 •

edited

KnorpelSenf commented Oct 18, 2022 •

edited