-
Notifications
You must be signed in to change notification settings - Fork 9
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
Blog page #40
Blog page #40
Conversation
Top ! Je relis ça ce soir, attention il y a un conflit |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
Tiens ce matin je suis tombée sur ce lien : Dark mode easily on the web |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello @morganbonhomme !
Pour reprendre au niveau de l'organisation des fichiers:
- les fichiers
css
restent ensemble donc il faut que danssrc/css
tu aies lecustom.css
etblog_card.css
. Tu peux importer le css du blog dans le fichiercustom.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 fichierblog_card.js
dansblog.js
en faisant:import BlogCard from "@site/src/components/blog_card.js";
- pour le fichier
blog-index.js
, il faut le renommerblog.js
et donc changer la route dans le fichierdocusaurus.config.js
deblog-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 :)
@AJuliette Merci pour les infos ! J'ai cleané le code du coup :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
website/src/components/blog_card.js
Outdated
import useThemeContext from "@theme/hooks/useThemeContext"; | ||
|
||
export default function BlogCard(props) { | ||
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀🐯 Tu peux enlever ces deux lignes du coup:
import useThemeContext from "@theme/hooks/useThemeContext";
et const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 !
C'est en ligne :3 |
Pourquoi cette Pull Request ?
#23 Faire un index pour les articles du blog
Qu'est-ce qui a été changé ?
blog_card.js
danswebsite/src/components/
. Ce component est une card Infima. Customisation pour que ca passe bien en dark mode.blog-index.js
danswebsite/src/pages/blog-index.js
.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 :
![Capture d’écran 2020-10-22 à 11 06 08](https://user-images.githubusercontent.com/62025173/96850048-a8ffa000-1456-11eb-9c7b-40f70a5cf3bb.png)
Après:
![Capture d’écran 2020-10-22 à 11 06 21](https://user-images.githubusercontent.com/62025173/96850065-adc45400-1456-11eb-8809-f41ff02c4754.png)