aloisdg / pointmedian Goto Github PK

Home Page: https://aloisdg.github.io/pointmedian/

License: GNU Affero General Public License v3.0

HTML 68.27% JavaScript 10.32% CSS 21.41%

pointmedian's Introduction

PointMedian.cool

Ce projet est le code source de pointmedian.cool, une page créée par quelques personnes qui voulaient aider à utiliser le point médian.

Une idée, une remarque ? Ouvrez une issue pour en discuter.
Vous ne savez pas par où commencer ? Consulter les issues les plus accessibles !
Vous connaissez un peu le HTML ? Proposez directement une amélioration.

Contributeur·rices

Merci à ces personnes merveilleuses (emoji key):

_Polibous
🎨

_{Aloïs de Gouvello}
💻

Ce projet suit la all-contributors spécification. Les contributions de toute nature sont les bienvenues !

Licence

AGPL v3.0

pointmedian's People

Contributors

Stargazers

Watchers

Forkers

emergenitro juliettedqb lodanslhuile msalmazo mcorentin17 manonmci thibautchamp rdeneau

pointmedian's Issues

Ajouter un Contributing.md

Exemple: https://github.com/github/docs/blob/main/CONTRIBUTING.md

oui cette issue non plus n'est pas documentée :/

Créer une og:image

Hello,

Il nous faut une image catchy pour le référencement et attirer sur les réseaux sociaux. Kapwing a un très bon article sur le sujet: What Size is an OG Image? How to Make OG Images for Your Site

OG Image Size: The recommended size for an OG Image is 1.91:1. The recommended pixel dimensions of 1200:630 px (aspect ratio of 1.91:1). If you have a photo on hand, use Kapwing's free OG Image Maker to resize your image to fit the OG Image area.

Le résultat pourra être testé avec cet outil: OpenGraph.dev ou sur dnschecker.org

J'ai fait un premier jet mais je ne sais pas trop quoi en penser:

Ajouter la balise theme-color manquante

Hello,

Chrome nous remonte un léger warning

transcript:

Does not set a theme color for the address bar.Failures: No `<meta name="theme-color">` tag found.

Premièrement, ajoutez une balise meta theme-color à index.html:

<head>
  …
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202b38" />
  …
</head>

deuxièment, ajouter une propriété theme_color au manifest.webmanifest :

{
  …
  "theme_color": "#202b38"
  …
}

Hélas le web.manifest ne supporte pas la préférence de thème. Il va falloir choisir un thème par défaut pour l'app. Clair ou obscure ? (mon coeur balance pour obscure mais voyons avec @Polibous).

La bonne nouvelle c'est que c'est cours de développement. J'invite à aller lire cet échange pour voir comment une fonctionnalité est créée: Add support for defining a theme color for both light & dark modes (prefers color scheme)

source:

Désactiver le bouton de copie de résultat quand celui-ci est vide

Qu'en pensez-vous ? feature sympathique ?

Définir la propriété display du manifest.webmanifest à 'standalone'

Hello,

Google Lighthouse nous fait part d'une petite erreur:

Failure reason
Manifest 'display' property must be one of 'standalone', 'fullscreen', or 'minimal-ui'

Actuellement nous display est défini à 'browser'. Il faudrait passer à 'standalone'.

Plus d'info sur:

PointMedian en tant qu'extension navigateur et/ou bookmarklet

Mettre davantage en avant le point median dans le bouton "copier le point median"

Salut :)

Suite à un échange sur cette issue #9, on aimerait grossir le rendu visuel du point.

idées en vrac pour avoir le bon rendu:

augmenter la font-size (mais on ne veut pas changer la taille total du bouton)
scale le content (mais on ne veut pas changer la taille total du bouton)
utiliser un background image (genre venant de icon)
utiliser un charactère unicode en forme de gros cercle
dessiner un cercle en css:

#copyPoint {
  background-image: radial-gradient(10px circle at center, var(--form-text) 50%, transparent 51%)
}

bref, à expérimenter :)

"Copier" vs "Copier le résultat" pour copier le résultat de l'automate

Salut,

Je fais référence à ce bouton ci :

Use a builder

Parcel, Vite, whatever. Not sure that it is needed though.

Placer le text dans le <footer> dans une balise <small>

Hello,

L'élément HTML <small> permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d'un contrat, des mentions relatives au droit d'auteur, etc.) quelle que soit la présentation. Il semble sémantiquement convenir à notre usage.

Afin de réduire la taille du footer tout en augmentant ça valeur sémantique, l'idée est de placer le text du footer dans un small. De passer de:

<footer>bla blah blah</footer>

<footer><small>bla blah blah</small></footer>

MDN

Effacement du placeholder

Ce serait plus "UX friendly" si le placeholder disparaissait lorsque l'on commence à saisir son texte dans le field text area.

Texte placeholder

Tu peux mettre un exemple en tant que placeholder dans les champs textarea

Make it a PWA

Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase.

PWAs provide native-like experiences to your users on supporting devices. They adapt to the capabilities supported by each device and they can also run in web browsers, like websites.

https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/

Getting started

Permettre l'ajout de text par glisser/déposer

Hello,

L'idée ce serait d'utiliser le drag n drop natif pour pouvoir glisser des txt dans la textarea.

"Source" vs "Origine" vs "Entrée" comme label pour la première zone de texte

Hello,

Je ne sais pas trop quelle label utiliser pour la première zone de texte. Je souhaite en tout cas garder un label pour des raisons d'accessibilité.

PointMedian en tant que bot sur reddit?

Transformer le bouton pour copier un point median en text + bouton

Example du site emojipedia:

<form class="stacked no-top copy-paste">
<label>
<span class="copy-paste__label">Copy and paste this emoji:</span>
<input type="text" value="🏳️‍⚧️" readonly="" class="emoji-copy copy-paste__data" id="emoji-copy">
<button type="button" class="btn-clipboard copy-paste__btn" data-clipboard-target="#emoji-copy" style="width:auto;display:inline-block">Copy</button>
</label>
</form>

dans notre cas je pense qu'on peut partir sur un truc de ce genre:

<form>
  <label style="display: flex; align-items:center; gap: 6px;">
    <span>Copier uniquement le point médian&nbsp;:</span>
    <textarea cols="1" rows="1" readonly="" style="resize: none; text-align: center;">·</textarea>
    <button type="button" id="copyPoint">copier</button>
  </label>
</form>