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

feat: Compatilibity component #1881

Draft
wants to merge 13 commits into
base: v2
Choose a base branch
from
Draft

Conversation

vasfvitor
Copy link
Contributor

@vasfvitor vasfvitor commented Feb 25, 2024

OUTDATED read next comments

Opening this PR just so it can be seen live. I think this components could be like the "plugin links" that accepts the name of plugin as a prop and that's it. Example <PluginLinks plugin="clipboard-manager" />.

In this PR there are two versions of the compatibility component that implements Amr and Simon ideas, respectively:

  1. Showing Linux distros inline:
    Sample pages: features/authenticator, features/autostart and features/barcode-scanner
    image

  2. Showing Linux distros in a tooltip, if necessary (needs to make mobile accessible):
    Sample pages: features/cli and features/clipboard
    image
    image

Aesthetically both can be improved, even more the tooltip by using JS (which I don't think should be done). Plus, neither version is supposed to be the definitive or the only possibles implementation of this feature

TODO: Take in account feedback sent by AlmostSenselessCoder in discord
https://discord.com/channels/616186924390023171/662624589037436928/1211237670110629978

  • Screen readers (sr-only). Colours and hover alone creates an inaccessible or hard to access UI. It needs to expand on click too, not just on hover
  • Click targets, see minimum recommended

TODO: Rename component
TODO: Consider icons

Copy link

netlify bot commented Feb 25, 2024

Deploy Preview for tauri-docs-starlight ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 40149f1
🔍 Latest deploy log https://app.netlify.com/sites/tauri-docs-starlight/deploys/65e89acc7cf36500082d26bc
😎 Deploy Preview https://deploy-preview-1881--tauri-docs-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@amrbashir amrbashir marked this pull request as ready for review February 25, 2024 21:55
@amrbashir amrbashir marked this pull request as draft February 25, 2024 21:56
@simonhyll simonhyll added this to the Version 2.0 milestone Feb 26, 2024
@vasfvitor
Copy link
Contributor Author

vasfvitor commented Feb 26, 2024

CanIuse sample json, if need something alike.
https://github.com/Fyrd/caniuse/blob/main/sample-data.json

For now I created a JSON with all the plugins and modified the component api to match the PluginLinks.astro api, so in the future we may consider combining them into a PluginsHeader.astro component

<CompatList plugin="authenticator" />

So there's no need to make changer per page, one json to rule them all

@vasfvitor
Copy link
Contributor Author

Are we gonna use icons?

As of now I think it's ok to be reviewed. The JSON was made from the workspace/v2 table

About accessibility, is there any improvements that could be done?

@vasfvitor vasfvitor marked this pull request as ready for review February 26, 2024 17:28
@vasfvitor vasfvitor changed the title Draft: feat: Compatilibity component feat: Compatilibity component Feb 27, 2024
@simonhyll simonhyll requested a review from a team February 28, 2024 17:06
---

<div class="flex row not-content">
{platforms.map((platform) => <p>{platform}</p>)}
Copy link
Member

@dreyfus92 dreyfus92 Mar 2, 2024

Choose a reason for hiding this comment

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

I think that adding the icon next to the name/platform would be even better, what you guys think? @tauri-apps/wg-doc

@vasfvitor vasfvitor marked this pull request as draft April 19, 2024 14:37
@simonhyll simonhyll added the enhancement Does it add or improve content? label May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Does it add or improve content?
Projects
Status: 🏗️ In progress
Development

Successfully merging this pull request may close these issues.

None yet

3 participants