Blog page #40

morganbonhomme · 2020-10-22T09:09:02Z

Pourquoi cette Pull Request ?

#23 Faire un index pour les articles du blog

Qu'est-ce qui a été changé ?

Ajout d'un nouveau component blog_card.js dans website/src/components/. Ce component est une card Infima. Customisation pour que ca passe bien en dark mode.
Création d'une page custom en React dans blog-index.js dans website/src/pages/blog-index.js.
Changement de la navbar et donc mise à jour du docusaurus.config.js pour enlever le lien vers le blog et créer un lien vers la nouvelle page d'index du blog.

Screenshots

Avant :

Après:

AJuliette · 2020-10-22T12:49:00Z

Top ! Je relis ça ce soir, attention il y a un conflit

AJuliette

Des retours plus globaux:

top d'avoir défini les classes card__link, card__date, card__tag, card__author en respectant la convention
top d'avoir fait le hover global sur la carte
j'aime beaucoup la petite animation de la card <3
top d'avoir pensé au Dark mode

=> Vu que là il y a beaucoup de css pour la card, je pense qu'il faut le mettre dans un fichier à part que tu importes dans le fichier custom.css (mais c'est une convention que je vais ajouter dans le guide du coup)
=> Pour la gestion du dark theme, j'ai l'impression qu'il y a une façon "plus propre" où tu définis des variables directement dans le css et elles se changent selon le mode, plutôt que de gérer ça côté JS. C'est ma faute, j'ai pas du tout eu le temps de m'y pencher et de préparer une doc (j'ai pas été confronté à ça jusqu'à présent ^^"). Donc je vais regarder et je te dis comment faire ça

website/docusaurus.config.js

website/src/css/custom.css

website/src/components/blog_card.js

website/src/css/custom.css

clodiap · 2020-10-23T10:09:08Z

=> Pour la gestion du dark theme, j'ai l'impression qu'il y a une façon "plus propre" où tu définis des variables directement dans le css et elles se changent selon le mode, plutôt que de gérer ça côté JS. C'est ma faute, j'ai pas du tout eu le temps de m'y pencher et de préparer une doc (j'ai pas été confronté à ça jusqu'à présent ^^"). Donc je vais regarder et je te dis comment faire ça

Tiens ce matin je suis tombée sur ce lien : Dark mode easily on the web

AJuliette

Hello @morganbonhomme !
Pour reprendre au niveau de l'organisation des fichiers:

les fichiers css restent ensemble donc il faut que dans src/css tu aies le custom.css et blog_card.css. Tu peux importer le css du blog dans le fichier custom.css en mettant au début: @import "blog_card.css";
du coup pas besoin de mettre le blog_card.js dans un sous-dossier + tu peux importer le fichier blog_card.js dans blog.js en faisant: import BlogCard from "@site/src/components/blog_card.js";
pour le fichier blog-index.js, il faut le renommer blog.js et donc changer la route dans le fichier docusaurus.config.js de blog-index à blog

Au niveau des couleurs, j'ai enfin compris le système, c'est un peu comme ce que tu avais trouvé @clodiap (mais automatisé avec le système Docusaurus).
Tu dois définir tes couleurs dans des variables, par exemple pour le css .card:hover:

.card:hover {
  box-shadow: 0 0.5rem 1rem var(--ifm-color-card-hover);
  transform: translateY(-3px);
}

Dans le fichier custom.css, tu rajoutes ta couleur dans root:

:root {
  --ifm-color-primary: #1B998B;
  --ifm-color-primary-dark: #188a7d;
  --ifm-color-primary-darker: #178276;
  --ifm-color-primary-darkest: #136b61;
  --ifm-color-primary-light: #1ea899;
  --ifm-color-primary-lighter: #1fb0a0;
  --ifm-color-primary-lightest: #23c7b5;
  --ifm-color-card-hover: rgba(0, 0, 0, 0.2);
}

Si tu veux définir une couleur pour le dark pour cette variable tu n'as plus qu'à faire:

html[data-theme='dark'] {
  --ifm-color-card-hover: var(--ifm-color-white);
}

=> c'est à dire: --la-variable: var(--la-variable-que-tu-veux-pour-le-dark

Voici les couleurs dont le côté dark est déjà défini:

html[data-theme='dark'] {
  --ifm-color-emphasis-0: var(--ifm-color-gray-1000);
  --ifm-color-emphasis-100: var(--ifm-color-gray-900);
  --ifm-color-emphasis-200: var(--ifm-color-gray-800);
  --ifm-color-emphasis-300: var(--ifm-color-gray-700);
  --ifm-color-emphasis-400: var(--ifm-color-gray-600);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-400);
  --ifm-color-emphasis-700: var(--ifm-color-gray-300);
  --ifm-color-emphasis-800: var(--ifm-color-gray-200);
  --ifm-color-emphasis-900: var(--ifm-color-gray-100);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-0);

  --ifm-background-color: #18191a;
  --ifm-background-surface-color: #242526;

  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);

  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.6)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');

  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
}

Qui correspondent à ces couleurs:

=> Donc ça veut dire que si par exemple tu veux te servir de la variable --ifm-color-emphasis-100 tu n'as pas à t'inquiéter de son rendu en dark car il est déjà défini.

Voilà désolée, c'était long, j'espère que c'est clair ! Si tu veux on peut faire une session de code ensemble pour revoir ça :)

website/src/components/blog_card/blog_card.js

morganbonhomme · 2020-10-27T09:59:42Z

@AJuliette Merci pour les infos ! J'ai cleané le code du coup :)

AJuliette

Au top, merci et bravo ! Juste les deux petites lignes inutiles à enlever et ça sera bon
Je ne sais pas si tu le fais déjà mais moi ça m'aide beaucoup après avoir pusher mes changements de relire le code dans la partie Files changed, c'est souvent là que je vois et corrige toutes les petites erreurs que j'ai laissé passer.

AJuliette · 2020-10-27T17:37:50Z

website/src/components/blog_card.js

+import useThemeContext from "@theme/hooks/useThemeContext";
+
+export default function BlogCard(props) {
+  const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();


👀🐯 Tu peux enlever ces deux lignes du coup:
import useThemeContext from "@theme/hooks/useThemeContext";
et const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();

Merci à toi pour la relecture !
C'est la première fois que je contribue à un projet open source et c'est cool !
J'ai changé, normalement c'est ok :)

Super merci :) C'est la première fois pour moi que je fais ça et que je fais des retours sur des PR donc pour moi aussi c'est un apprentissage; mais en tous cas merci d'être au taquet comme ça, ça fait plaisir !

AJuliette · 2020-10-27T19:23:55Z

Bravo !

AJuliette · 2020-10-27T19:27:47Z

C'est en ligne :3
https://women-on-rails.github.io/ressources/blog/

morganbonhomme added 3 commits October 21, 2020 13:01

update card component with name

97d991e

updated design of the blog index page

336d232

proof read .css

e87532f

morganbonhomme marked this pull request as ready for review October 22, 2020 09:10

AJuliette self-requested a review October 22, 2020 12:48

AJuliette assigned morganbonhomme Oct 22, 2020

AJuliette reviewed Oct 23, 2020

View reviewed changes

AJuliette requested changes Oct 23, 2020

View reviewed changes

website/src/css/custom.css Outdated Show resolved Hide resolved

website/src/css/custom.css Outdated Show resolved Hide resolved

refactored css in various files

c1a1fac

AJuliette requested changes Oct 25, 2020

View reviewed changes

website/src/components/blog_card/blog_card.js Outdated Show resolved Hide resolved

morganbonhomme added 2 commits October 27, 2020 10:27

updated blog routes + removed card demo

06deba5

updated dark-mode

a68a01b

AJuliette requested changes Oct 27, 2020

View reviewed changes

cleaned code

0903948

AJuliette self-requested a review October 27, 2020 19:20

AJuliette approved these changes Oct 27, 2020

View reviewed changes

AJuliette merged commit 74386e0 into women-on-rails:master Oct 27, 2020

AJuliette linked an issue Nov 1, 2020 that may be closed by this pull request

Faire un index pour les articles du blog #23

Closed

5 tasks

AJuliette mentioned this pull request Aug 14, 2024

La nouvelle version de docusaurus a fait disparaître la page index custom de blog #85

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blog page #40

Blog page #40

morganbonhomme commented Oct 22, 2020

AJuliette commented Oct 22, 2020

AJuliette left a comment •

edited

Loading

clodiap commented Oct 23, 2020

AJuliette left a comment •

edited

Loading

morganbonhomme commented Oct 27, 2020

AJuliette left a comment •

edited

Loading

AJuliette Oct 27, 2020

morganbonhomme Oct 27, 2020

AJuliette Oct 27, 2020

AJuliette commented Oct 27, 2020

AJuliette commented Oct 27, 2020

Blog page #40

Blog page #40

Conversation

morganbonhomme commented Oct 22, 2020

Pourquoi cette Pull Request ?

Qu'est-ce qui a été changé ?

Screenshots

AJuliette commented Oct 22, 2020

AJuliette left a comment • edited Loading

Choose a reason for hiding this comment

clodiap commented Oct 23, 2020

AJuliette left a comment • edited Loading

Choose a reason for hiding this comment

morganbonhomme commented Oct 27, 2020

AJuliette left a comment • edited Loading

Choose a reason for hiding this comment

AJuliette Oct 27, 2020

Choose a reason for hiding this comment

morganbonhomme Oct 27, 2020

Choose a reason for hiding this comment

AJuliette Oct 27, 2020

Choose a reason for hiding this comment

AJuliette commented Oct 27, 2020

AJuliette commented Oct 27, 2020

AJuliette left a comment •

edited

Loading

AJuliette left a comment •

edited

Loading

AJuliette left a comment •

edited

Loading