• Faire des tests pour vérifier que le site n'est pas cassé avant de déployer (https://survivejs.com/maintenance/documentation/site/#testing)
• Ajouter une pipeline de deploy dès qu'une branche est mergée
• Automatiser QA avec Selenium

Cf projets pixelart, httriri
Ressources:

• https://dev.to/mpressen/rails-minitest-gitlab-ci-31ap
• https://github.blog/2020-10-29-getting-started-with-devops-automation/

Résumé de l'issue

Ajouter un titre et une description au blog pour améliorer le SEO

Situation actuelle

Il n'y a pas de titre ni de description du Blog

Solution voulue

Il s'agit d'une config à ajouter dans le fichier website/docusaurus.config.js:


Il faut ajouter blogTitle et blogDescription
Pour l'instant pas d'idée pour le titre de blog, tu peux en proposer en-dessous, on fera un vote avec la communauté :3
Pour la description on va rester sobre: 'Un blog partageant nos expériences et connaissances en Ruby on Rails et développement web'

Informations complémentaires

Résumé de l'issue

Lors du meetup en présentiel de la rentrée 2021 (woohooou), on a balayé rapidement les conférences tech qui existent dans le monde Ruby mais également certaines généralistes.

Je me propose pour rédiger une page pour ça. J'imagine que ce serait bien de lister des conférences en rapport avec Ruby + des conférences en français avec une mini-description pour chaque. On pourrait également ajouter en pied de cette page des repos GitHub qui listent tout un tas de confs pour qu'ensuite les personnes puissent aller chercher d'elles-même. Notre page serait juste un point de départ.

J'ai en tête :

Monde Ruby

• RubyConf
• RailsConf
• Euruko
• RubyDay

Conférences en français (désolée très centré sur Paris)

• Paris Web
• Best of Web

On pourrait rajouter d'autres conférences, qu'est-ce qui vous semblerait bien à mettre d'autres sans que la page soit trop exhaustive ? Peut-être des choses sur l'open-source ?

Résumé de l'issue

Rajouter le logo de Women On Rails sur la landing page

Situation actuelle

Il y a juste une présentation rapide du site Ressources et un call to action

Situation souhaitée

Rajouter le logo, comme sur Tech Interview Handbook

Informations complémentaires

• Enregistrer le logo au format .jpeg dans le dossier website/static/img (pour l'instant le logo n'est qu'au format .ico)
  
• Ajouter le logo dans la page index: website/src/pages/index.js, juste au dessus du titre

Le site utilise JSX, voici un exemple d'ajout d'image:

<img
  alt="Docusaurus with Keytar"
  src={useBaseUrl('img/docusaurus_keytar.svg')}
/>;

Résumé de l'issue

Ajouter une landing page permettant de s'inscrire à la newsletter.

Situation actuelle

La landing page de substack est très minimaliste: https://womenonrails.substack.com/subscribe

Solution voulue

Une vraie landing page qui fait la proposition de valeur de la newsletter avec possibilité de s'inscrire grâce au call to action

Informations complémentaires

L'iframe pour la case d'inscription:

<iframe src="https://womenonrails.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>

Inspiration
Landing page de la newsletter Tangle: https://tangle.substack.com/about

Résumé de l'issue

Créer la page "Le processus d'embauche" en utilisant ce breadcrumb : https://codepen.io/snookca/pen/qYoLaq

Situation actuelle

La page n'existe pas encore, elle se trouve dans les pages à faire : Le processus d'embauche

Solution voulue

Une page avec une description sommaire de chaque étape du processus d'embauche.

Description du process courant d'embauche:

• appel
• tests techniques et retours
• références
• ce qu'attend le recruteur ou la recrutrice d'un entretien (technique ou de personnalité)
• Après l'entretien (comment remercier / relancer)

Informations complémentaires

Voici la copie d'écran du breadcrumb :

Résumé de l'issue

Les pages docs sont présentes dans le dossier website/docs. Elles peuvent être au format md ou mdx.
Elles ont chacune un encart en haut comme ceci:

Les pages dans les dossiers:

• community
• practice
• keeping_up
• welcome

n'ont pas les mots-clés description et keywords qui permettent un meilleur référencement SEO

Situation actuelle

Il manque des éléments pour le SEO sur certaines pages de la doc

Solution voulue

Avoir les éléments SEO

Autre solution possible

Informations complémentaires

Dans la doc de Docusaurus sur l'encart en haut des pages MD les deux mots clés voulus sont définis ainsi:

keywords: Keywords meta tag for the document page, for search engines
description: The description of your document, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head>, used by search engines. If this field is not present, it will default to the first line of the contents

Avec Docusaurus 2, il est possible de mettre en place une barre de recherche Algolia qui permet de chercher dans tout le site.

Tu peux tester sur le site de Docusaurus.
Comme c'est plutôt stylé, on va l'ajouter sur le site :D
J'ai fait la démarche pour que le site soit indexé par Algolia:

Le code consiste en la mise en place de config disponibles ici.
Si ça t'intéresse, tu peux l'indiquer sur la PR, commencer la config et dès que j'ai les éléments d'Algolia je te les transmets :)

Résumé de l'issue

Histoire un peu d'analyser si les pages plaisent !

Informations complémentaires

Il y a ce site qui peut être une alternative: https://plausible.io/

Résumé de l'issue

Créer une page de documentation recensant les components utilisés dans l'application et expliquant leur fonctionnement.

Situation actuelle

Pour l'instant nous n'avons pas de documentation sur les components.

Solution voulue

Il faudrait créer une page components.md (à la racine du projet ?), qui recense tous les components déjà créés, expliquer comment les utiliser (import du fichier, utilisation des variables, …), et expliquer comment en créer un nouveau.
Rajouter une petite explication sur les modules css : https://v2.docusaurus.io/docs/styling-layout#css-modules

Résumé de l'issue

Limiter la taille des images sur le component BlogCard pour avoir une uniformisation et une meilleure responsivité.

Situation actuelle

La taille et le format des images ne sont pas limités et donc ne donne pas un résultat uniforme lorsqu'on utilise le component BlogCard.
Les images deviennent immense en format mobile, ce qui gène l'utilisation sur mobile.

Solution voulue

Uniformiser la taille/format des images.
Que la taille soit adaptée aussi bien au format desktop qu'au format mobile.

Autre solution possible

Je réutilise le component BlogCard pour la présentation des livres (page "Livres") sans les images. Une autre solution serait de créer un nouveau component adapté pour présenter les livres avec image.

Informations complémentaires

Test sur format mobile - page Livres

Test format desktop

Description du bug

Sur mobile, le logo de la page d'accueil est coupé

Comment le reproduire

Avec l'inspecteur ou sur mobile, se rendre sur la page d'accueil

Situation voulue

Que l'image s'affiche en grand

Screenshots

Contexte additionnel

Résumé de l'issue

Ajouter de la documentation sur le format mdx, afin qu'il soit plus facile d'utiliser ce format pour la création de nouvelles pages ou la modifications de pages existantes.

Situation actuelle

Il n'y actuellement pas d'aide pour utiliser ce format dans la documentation.

Solution voulue

Dans le fichier contributing.md, au chapitre Une présentation du repo histoire de s'y retrouver, ajouter de la documentation pour expliquer le format mdx, avec pourquoi pas un petit exemple et un lien vers la documentation officielle de Docusaurus.

Informations complémentaires

• Documentation Docusaurus sur mdx
• Documentation officielle mdx

Issue pour un bug

Description du bug

Image avec l'adresse mail en mode dark difficilement lisible sur la page comment contribuer.

Comment le reproduire

Aller sur la page comment contribuer et passer en mode dark

Situation voulue

@clodiap a réglé ce problème sur la page help.js pour laquelle elle a créé le component DarkModeImage où on peut mettre deux src selon le mode voulu (on a déjà un fichier email.png et email_dark.png)
Il faut donc:

• importer le fichier du component dans le fichier how-to-contribute.
• ajouter le component dans le code avec les deux src différents

Screenshots

Contexte additionnel

On veut l'effet qui a déjà sur la page: Qui sommes-nous ?
Pour t'aider, tu peux regarder comment c'est fait dans le fichier correspondant: website/src/pages/help.js

Issue en cours de rédaction, toute contribution est la bienvenue !

Résumé de l'issue

Compléter la landing page avec plusieurs sections présentant Women On Rails, le but du site ressources, le fonctionnement en open source, les autres réseaux de Women on Rails (peut-être y ajouter le contenu de la page help.js/ À propos ?)

Situation actuelle

Juste un encart avec un call to action

Situation souhaitée

Une landing page qui donne envie !

Ressources complémentaires

Des sites pour se donner des idées de design:

• https://www.vagrantup.com/
• https://middlemanapp.com/
• https://github.com/collections/github-pages-examples (explorer les landing pages)
• https://www.goodweb.design/

Résumé de la demande

Les logos slack et meetup de la page help.js ont un fond blanc qui rend mal en version dark, il faut les remplacer

Situation actuelle

Situation souhaitée

Remplacer les images slack et meetup par des images sans fond blanc pour que ça rende bien en mode dark

DangerJS pour un linter markdown ([markdownlint (https://github.com/markdownlint/markdownlint), Linting and Formatting)
mergify pour automatiquement merger les PR acceptées

• welcome pour rendre l'expérience plus sympa pour celles et ceux dont c'est la première PR ou issue
• All contributors bot pour reconnaître les contributions de chacun et chacune

Semantic release: à voir si c'est possible de déployer sur GitHub Pages dès que c'est mergé

+les rajouter en bas du Readme

(Technologies vues sur le projet open-pixel-art)

Résumé de l'issue

Il faudrait passer certaines pages au format mdx pour avoir une mise en page plus élaborée et pour pouvoir utiliser les components que l'on a déjà créés pour d'autres pages.

Situation actuelle

Actuellement nous avons beaucoup de pages qui auraient besoin d'une mise en page moins linéaire, avec plus d'images et de liens, de petites cards et autres améliorations visuelles.

Solution voulue

Des pages plus vivantes, avec des images et des cards, plus agréables à l'œil, qui donnent envie d'être lues 😍 .

Les pages suivantes seront à passer au format mdx. On cochera celles faites au fur et à mesure (pas besoin de les faire toutes tout d'un coup !)

Faire son profil en ligne :

• CV
• Portfolio
• Blog
• Ressources design

Trouver un job :

• Les offres d'emplois
• Le processus d'embauche
• Les types de tests techniques : docs/find_a_job/interview_types.md
• S'entraîner aux tests
• Questions techniques : docs/find_a_job/technical_questions.md

Pratiquer :

• Réaliser un projet : docs/practice/side-projects.md
• L'open source : docs/practice/open-source.md

Se former et s'informer :

• Sites et outils ressources : docs/keeping-up/.md
• Blogs et newsletters : docs/keeping-up/blogs-and-newsletters.md
• Livres : docs/keeping-up/books.md
• Vidéos et Podcasts : docs/keeping-up/videos-and-podcasts.md

Rejoindre la communauté :

• Le réseau
• Les conférences 2020 : docs/community/events.md
• Personnes à suivre : docs/community/people-to-follow.md
• Transmettre : docs/community/sharing.md

Informations complémentaires

Par exemple la page que @AJuliette a modifiée :

Avant :

Après :

Résumé de l'issue

🐛 Bug fix, vue sur mobile

Situation actuelle

Sur la page "Qui sommes-nous ?" (help.js) sur mobile, le footer se met sur le texte:

Situation souhaitée

Que le footer reste en place en bas de la page è.é

Ressources complémentaires

Le site est sous version 2 de Docusaurus: https://v2.docusaurus.io/docs/
Il faudrait voir si ce n'est pas une issue qui a déjà été signalée sur leur repo: https://github.com/facebook/docusaurus/issues
Sinon, ils sont très réactifs sur leur Discord: https://discord.com/invite/Je6Ash6

Résumé de l'issue

Même si boostrap est en version bêta sur docusaurus, l'ajouter

Situation actuelle

Pour l'instant on utilise Infima mais le responsive est vraiment pas terrible

Solution voulue

Rajouter Bootstrap

Autre solution possible

Rajouter Tailwind mais c'est une nouvelle courbe d'apprentissage ^^"

Informations complémentaires

• https://v2.docusaurus.io/docs/using-themes/#docusaurustheme-bootstrap
• https://v2.docusaurus.io/docs/presets/#docusauruspreset-bootstrap
• changer les anciennes balises html de infima à bootstrap

Résumé de l'issue

Sur la page blog les différents résumés des articles sont visibles sous forme de card. Ces résumés ne s'ajoutent pas automatiquement lorsqu'une personne ajoute un article au blog.

Situation actuelle

Dans website/src/pages/blog.js, les données des blog-cards (qui correspondent au résumé des articles) sont codés directement dans le fichier.
Si une personne ajoute un article, il faut donc ajouter à la main une blog-card dans website/src/pages/blog.js afin que celle-ci soit visible sur la page du blog, et il faut ajouter à la main le titre, le résumé, l'auteur, la date, l'image, alors que la plupart de ces données sont disponibles directement sur le fichier en .md de l'article.

Solution voulue

Il faudrait automatiser le chargement des données des articles de blog dans le fichier website/src/pages/blog.js.
Les données des articles sont directement rentrées lors de la création d'articles dans les fichiers .md /website/blog/2020-10-04-hello-world.md par exemple.

@AJuliette a déjà regardé un peu, et la page d'index des articles pourrait être ici.
On pourrait peut-être récupérer les articles grâce à import type {Props} from '@theme/BlogPostItem;' ?

Issue pour une feature

Résumé de l'issue

Refaire la mise en page de l'index des articles du blog.

Situation actuelle

Actuellement, l'index des articles du blog ressemble à ça:

Solution voulue

J'aime beaucoup ce design où on a une meilleur vision de tous les articles:


Donc un row avec des cards. La card comprend l'image de l'article, le titre, un résumé, la date, l'auteur / l'autrice. Le site n'est pas dynamique donc pas de tags. edit: avec le thème des couleurs du site <3 + en fait si les tags c'est possible, c'est une option dans le header de l'article, à ajouter comme ça: tags: [hello, docusaurus-v2]

Autre solution possible

Si tu as une autre idée pour le design, tu peux proposer en-dessous ! :)

Informations complémentaires

• Le site est construit avec Docusaurus, le thème de base est Infima, il y a déjà des modèles de card que tu peux styliser. Pareil, il y a un système de grid très basique, mais qui suffit. Pour info, l'équipe de Docusaurus est en train de travailler sur l'implémentation du thème Bootstrap, mais ce n'est pas encore stable.
• Tu peux faire un component Card à rajouter dans website/src/components/ton_component.js. Je te laisse regarder comment les components actuels sont écrits pour avoir un modèle
• La page que tu vas faire ne seras pas .mdx mais en .js, il y en a deux actuellement comme ça sur le site: website/src/pages/index.js, website/src/pages/help.js, tu peux reprendre leur construction. Ce sont des pages en React.
• Il faudra changer la navbar qui est dans le fichier website/docusaurus.config.js, en enlevant le lien actuel vers le blog et en rajoutant le lien vers ta page, plus d'infos ici, la partie Ajouter des éléments à la barre de navigation du haut
• Il faudra également rajouter des illustrations aux deux articles déjà publiés, en utilisant undraw par exemple ou tout autre banque d'images / d'illustrations dont tu as l'habitude :) Sur le fichier contributing, tu as une partie sur la modification de fichiers, en particulier Comment éditer un article de blog existant

N'hésite pas si tu as des remarques, des questions ou si quelque chose n'est pas assez précis !

Résumé de l'issue

Pour que les contributions par tou.te.s soient les plus fluides possibles, il faut étoffer la documentation

Situation actuelle

Tout est dans le Readme

Situation voulue

• Réécrire le Readme (sections: présentation du projet, lien vers le site en prod, son objectif, qui peut aider / pourquoi, en quoi est-il différent; roadmap; contribuer; contributeurs / contributrices; code of conduct; licence)
• Ajouter un fichier contributing.md(modèle: https://github.com/nayafia/contributing-template/blob/HEAD/CONTRIBUTING-template.md)
• Ajouter un code_of_conduct
• Ajouter des templates pour issue et PR
• Ajouter la licence