From cc2c960e690f52948a982e12a5eb281279e59512 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Mon, 20 Nov 2023 10:10:51 +0100 Subject: [PATCH] chore(blog): add post --- TODO.md | 4 - content/posts/how-i-style-my-website.en.mdx | 97 ++++++++ content/posts/how-i-style-my-website.fr.mdx | 99 +++++++++ content/posts/react-server-component.en.mdx | 70 ------ content/posts/react-server-component.fr.mdx | 70 ------ public/static/author-placeholder.jpg | Bin 1988 -> 0 bytes .../images/blog/blog thumbnail package.svg | 210 ++++++++++++++++++ .../images/blog/blog thumbnail tailwind.svg | 206 +++++++++++++++++ .../article/blockquote/index.module.css | 3 +- .../blog/avatarGroup/Avatar/index.module.css | 2 +- src/components/blog/header/index.tsx | 4 +- src/utils/getAge.ts | 11 +- src/utils/stringUtils.ts | 2 + 13 files changed, 627 insertions(+), 151 deletions(-) delete mode 100644 TODO.md create mode 100644 content/posts/how-i-style-my-website.en.mdx create mode 100644 content/posts/how-i-style-my-website.fr.mdx delete mode 100644 content/posts/react-server-component.en.mdx delete mode 100644 content/posts/react-server-component.fr.mdx delete mode 100644 public/static/author-placeholder.jpg create mode 100644 public/static/images/blog/blog thumbnail package.svg create mode 100644 public/static/images/blog/blog thumbnail tailwind.svg diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 5d0f54d..0000000 --- a/TODO.md +++ /dev/null @@ -1,4 +0,0 @@ -- design TOC -- toc on article pages when [this pr](https://github.com/hashicorp/next-mdx-remote/pull/396) will be merged -- Better design of article pages (line height, font size, etc.) -- Add a search bar diff --git a/content/posts/how-i-style-my-website.en.mdx b/content/posts/how-i-style-my-website.en.mdx new file mode 100644 index 0000000..19d0f10 --- /dev/null +++ b/content/posts/how-i-style-my-website.en.mdx @@ -0,0 +1,97 @@ +--- +title: Why Use Tailwind CSS Instead of Traditional CSS? +description: Tailwind CSS is a CSS framework that enables the rapid and easy creation of websites. It is highly beneficial for developers who want to build websites without having to write traditional CSS code. But is it worth using? +date: 2023-11-20 +authors: github:AugustinMauroy +thumbnail: '/images/blog/blog thumbnail tailwind.svg' +--- + +## What is Tailwind CSS? + +Tailwind CSS is an innovative CSS framework focused on using utility classes directly integrated into HTML. This utility-first approach simplifies development by providing pre-designed classes for various styles, allowing developers to quickly create websites while maintaining clear and readable code. + +> Tailwind CSS was created in 2017 by developer Adam Wathan to offer an innovative approach to interface styling. Focused on simplicity and flexibility, the framework uses utility classes directly in HTML code. Its rapid adoption is attributed to its opinionless design, allowing developers to easily customize while promoting fast development. + +## Reminder on CSS + +CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation. CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation. + +## Is Tailwind CSS Better? + +To compare Tailwind CSS to traditional CSS, let's take a concrete example. We will create a container with a title and a paragraph. + +### With Traditional CSS + +```css +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + +### With Tailwind CSS + +```html +
+``` + +**or with the `@apply` directive** + +```css +.container { + @apply flex + flex-col + items-center + justify-center; +} +``` + +## Why is Tailwind CSS More "Safe"? + +Tailwind provides classes for spacing (margins and paddings), avoiding irregular spacing between elements. + +## My Personal Opinion + +In my opinion, Tailwind is beneficial in front-end development. Tailwind allows me to have color palettes at my fingertips and is designed to pay attention to contrast ratio. Moreover, the spacing utilities are very useful and save time while ensuring consistency in spacing. + +At first, I disliked Tailwind because using it in `class` felt like spaghetti code. However, I later realized that I could use the `@apply` directive to create custom classes, resulting in cleaner code. + +## How Do I Use Tailwind CSS? + +> My stack: for web development, I use [React](https://react.dev) and [Next.js](https://nextjs.org/), and now Tailwind and CSS modules. + +As mentioned earlier, I use CSS modules to keep my code cleaner and more readable. + +Here's an example of a React component (you can use your preferred library). + +```tsx +import styles from './index.module.css'; +import type { FC, PropsWithChildren } from 'react'; + +const Container: FC = ({ children }) => ( +
{children}
+); +``` + +**`index.module.css`** + +```css +.container { + @apply flex + flex-col + items-center + justify-center + rounded-lg + border + border-gray-300 + p-4 + shadow-lg; +} +``` + +## Useful Links + +- [Tailwind CSS](https://tailwindcss.com/) +- [CSS MDN Documentation](https://developer.mozilla.org/en/docs/Web/CSS) diff --git a/content/posts/how-i-style-my-website.fr.mdx b/content/posts/how-i-style-my-website.fr.mdx new file mode 100644 index 0000000..422a13a --- /dev/null +++ b/content/posts/how-i-style-my-website.fr.mdx @@ -0,0 +1,99 @@ +--- +title: Pourquoi utiliser Tailwind CSS au lieux du css classique ? +description: Tailwind CSS est un framework CSS qui permet de créer des sites web rapidement et facilement. Il est très utile pour les développeurs qui veulent créer des sites web sans avoir à écrire du code CSS. Mais est-ce bénéfique de l'utiliser ? +date: 2023-11-20 +authors: github:AugustinMauroy +thumbnail: '/images/blog/blog thumbnail tailwind.svg' +--- + +## Tailwind CSS, c'est quoi ? + +Tailwind CSS, c'est un framework CSS novateur axé sur l'utilisation de classes directement intégrées dans le HTML. Cette approche utilitaire simplifie le développement en offrant des classes préconçues pour divers styles, permettant aux développeurs de créer rapidement des sites web tout en maintenant un code clair et lisible. + +> Tailwind CSS a été créé en 2017 par le développeur Adam Wathan pour offrir une approche novatrice du stylage d'interfaces. Axé sur la simplicité et la flexibilité, le framework utilise des classes utilitaires directement dans le code HTML. Son adoption rapide est attribuable à sa conception sans opinion, permettant aux développeurs de personnaliser facilement tout en favorisant la rapidité de développement. + +## Rappel sur le CSS + +Le CSS est un langage de style utilisé pour définir l'apparence et la mise en page des pages web. Il est utilisé pour définir les couleurs, les polices, les dispositions et d'autres aspects de la présentation d'un site web. Le CSS est un langage de style utilisé pour définir l'apparence et la mise en page des pages web. Il est utilisé pour définir les couleurs, les polices, les dispositions et d'autres aspects de la présentation d'un site web. + +## Tailwind CSS, c'est mieux ? + +Pour comparer Tailwind CSS au CSS classique, nous allons prendre un exemple concret. Nous allons créer un container avec un titre et un paragraphe. + +### Avec CSS classique + +```css +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + +### Avec Tailwind CSS + +```html +
+``` + +**ou avec la directive `@apply`** + +```css +.container { + @apply flex + flex-col + items-center + justify-center; +} +``` + +## Pourquoi Tailwind CSS est-il plus "safe" ? + +Tailwind fournit des classes pour le spacing (marges et paddings) ce qui permet d'éviter l'irrégularité des espacements entre les éléments. + +## Mon avis personnel + +Selon moi Tailwind est bénéfique dans le développement front-end. Tailwind me peremt d'avoir des pallettes de couleurs à porté de mains et pensé pour faire attention au contraste-ratio +De plus les spacing sont très utiles et permettent de gagner du temps et avoir de la régularité dans les espacements. + +Au déubut j'eus haï tailwind car utiliser en `class` on se retrouve en spagétis code. +Puis dans un second temps je me suis souvenu que l'on pouvait utiliser la directive `@apply` pour créer des classes personnalisées et donc avoir un code plus propre. + +## Comment utilis-je Tailwind CSS ? + +> Ma stack: pour faire du web, j'utilise [react](htttps://react.dev) et [next.js](https://nextjs.org/) et maintenant tailwind et les module CSS. + +Comme dit juste au dessus j'utilise les modules CSS pour avoir un code plus propre et plus lisible. + +Donc voici l'example d'un composant react (_vous pouvez utilise votre librairies pérférer_). + +```tsx +import styles from './index.module.css'; +import type { FC, PropsWithChildren } from 'react'; + +const Container: FC = ({ children }) => ( +
{children}
+); +``` + +**`index.module.css`** + +```css +.container { + @apply flex + flex-col + items-center + justify-center + rounded-lg + border + border-gray-300 + p-4 + shadow-lg; +} +``` + +## Lien utiles + +- [Tailwind CSS](https://tailwindcss.com/) +- [CSS MDN DOC](https://developer.mozilla.org/fr/docs/Web/CSS) diff --git a/content/posts/react-server-component.en.mdx b/content/posts/react-server-component.en.mdx deleted file mode 100644 index 7177426..0000000 --- a/content/posts/react-server-component.en.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Using React Server Components -description: React Server Components are a new React feature that allow server-side rendering of React components. So what's the point of this feature? And how do you use it? -date: 2023-09-08 -authors: github:AugustinMauroy -thumbnail: '/images/blog/blog thumbnail react.svg' ---- - -React Server Components are a new feature in React that allow server-side rendering of React components. So what's the point of this feature? And how do you use it? - -## What are React Server Components? - -React Server Components are a new React feature that allow server-side rendering of React components. This allows server-side rendering of React components, so you don't have to wait for JavaScript to load before displaying the page content. This improves the user experience by reducing page load times. - -## How do I use React Server Components? - -To use React Server Components, you first need to install React 18. In this case we will use `create-next-app` to create our React application. But you can also use (Nextjs.js, remix...) - -```bash -npx create-next-app -``` - -### Creating a React Server Component - -To create a React Server Component, you need to use React's `createRoot` function. This function takes a React component and an HTML element as parameters. In this case, we'll use React's `renderToString` function to convert our React component into HTML. - -```jsx -import React from 'react'; -import { renderToString } from 'react-dom/server'; - -const App = () => { - return

Hello World

; -}; - -const html = renderToString(); -``` - -### Using a React Server Component - -To use a React Server Component, you need to use React's `hydrateRoot` function. This function takes a React component and an HTML element as parameters. In this case we'll use React's `renderToString` function to convert our React component into HTML. - -```jsx -import React from 'react'; -import { hydrateRoot } from 'react-dom'; - -const App = () => { - return

Hello World

; -}; - -hydrateRoot(document.getElementById('root'), ); -``` - -### Using a React Server Component with a React component - -To use a React Server Component with a React component, you need to use React's `createRoot` function. This function takes a React component and an HTML element as parameters. In this case we'll use React's `renderToString` function to convert our React component into HTML. - -```jsx -import React from 'react'; -import { renderToString } from 'react-dom/server'; - -const App = () => { - return

Hello World

; -}; - -const html = renderToString(); -``` - -## Conclusion - -React Server Components are a new React feature that allow server-side rendering of React components. They enable server-side rendering of React components, so you don't have to wait for the JavaScript to load to display the page content. This improves the user experience by reducing page load times. diff --git a/content/posts/react-server-component.fr.mdx b/content/posts/react-server-component.fr.mdx deleted file mode 100644 index 28d6ff3..0000000 --- a/content/posts/react-server-component.fr.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Utitilisation des React Server Components -description: Les React Server Components sont une nouvelle fonctionnalité de React qui permettent de faire du rendu côté serveur de composants React. Donc quel est l'intérêt de cette fonctionnalité ? Et comment l'utiliser ? -date: 2023-09-08 -authors: github:AugustinMauroy -thumbnail: '/images/blog/blog thumbnail react.svg' ---- - -Les React Server Components sont une nouvelle fonctionnalité de React qui permettent de faire du rendu côté serveur de composants React. Donc quel est l'intérêt de cette fonctionnalité ? Et comment l'utiliser ? - -## Qu'est-ce que les React Server Components ? - -Les React Server Components sont une nouvelle fonctionnalité de React qui permettent de faire du rendu côté serveur de composants React. Cela permet de faire du rendu côté serveur de composants React, et donc de ne pas avoir à attendre le chargement du JavaScript pour afficher le contenu de la page. Cela permet donc d'améliorer l'expérience utilisateur en réduisant le temps de chargement de la page. - -## Comment utiliser les React Server Components ? - -Pour utiliser les React Server Components, il faut tout d'abord installer React 18. Dans ce cas nous allons utiliser `create-next-app-app` pour créer notre application React. Mais vous pouvez utilise (Nextjs.js, remix...) - -```bash -npx create-next-app -``` - -### Creation d'un composant React Server Component - -Pour créer un composant React Server Component, il faut utiliser la fonction `createRoot` de React. Cette fonction prend en paramètre un composant React et un élément HTML. Dans notre cas nous allons utiliser la fonction `renderToString` de React pour convertir notre composant React en HTML. - -```jsx -import React from 'react'; -import { renderToString } from 'react-dom/server'; - -const App = () => { - return

Hello World

; -}; - -const html = renderToString(); -``` - -### Utilisation d'un composant React Server Component - -Pour utiliser un composant React Server Component, il faut utiliser la fonction `hydrateRoot` de React. Cette fonction prend en paramètre un composant React et un élément HTML. Dans notre cas nous allons utiliser la fonction `renderToString` de React pour convertir notre composant React en HTML. - -```jsx -import React from 'react'; -import { hydrateRoot } from 'react-dom'; - -const App = () => { - return

Hello World

; -}; - -hydrateRoot(document.getElementById('root'), ); -``` - -### Utilisation d'un composant React Server Component avec un composant React - -Pour utiliser un composant React Server Component avec un composant React, il faut utiliser la fonction `createRoot` de React. Cette fonction prend en paramètre un composant React et un élément HTML. Dans notre cas nous allons utiliser la fonction `renderToString` de React pour convertir notre composant React en HTML. - -```jsx -import React from 'react'; -import { renderToString } from 'react-dom/server'; - -const App = () => { - return

Hello World

; -}; - -const html = renderToString(); -``` - -## Conclusion - -Les React Server Components sont une nouvelle fonctionnalité de React qui permettent de faire du rendu côté serveur de composants React. Cela permet de faire du rendu côté serveur de composants React, et donc de ne pas avoir à attendre le chargement du JavaScript pour afficher le contenu de la page. Cela permet donc d'améliorer l'expérience utilisateur en réduisant le temps de chargement de la page. diff --git a/public/static/author-placeholder.jpg b/public/static/author-placeholder.jpg deleted file mode 100644 index 18874f67102136d492974b948a563649ba19f2f3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1988 zcmbuXy)*Yyr+vWFZcoG0m0R%kc3y_TiE&%us>(h{bI06J^4*;YxfCF$45D6$CK?o9*bpU7p02Tk3 z4g9x21qf7838oBJQI$6c)c^$$0#SfM6cwRRd3UP(9DpJf)%7i%l{5~Yf*C|_$ECBc zD`O7Uh&25MrG{3gV_0yN9a`EtC?jJNtf`r`jqScK?Cf1!-3aa;o?b_e`Uen?1s*4b zg?~+spqz<~W5g#UCM9Q_%goBo$<5fAwj+&NT{N|rINbyVc4l?4Fg=d^7e!5>op=c#>!8sc{*lLWrv~ll+n^B z+J9t!4aWLgvOi(}b4h?L5Kw-35G3FTeB3m?qMI1r)WrK@H)|h{Qpz}wy;0!ZZOE}x z$;nf7s8K108-h+~T;j+~QLnGXwU?ruhX|dzLCs9>J+lnkfCOby-X5vZ-8^Dp%QyPDN=zr(lOFNi_xMS@9!FK+ z&HI7WQ-WVMh`Dj2jNn}hk++R|_$uDe9@yoxu^K7Tfn9{zQ(1l-!oYTR*8^Q^a0T(m z7u7@dRa#il%v9ICO)riNV=vj1X0W?Fp138Mt;TaE(C=ti$ZH9J1q2Gr{aRCZ3dqv< z`>NgMX{0kaH+qHW8Pv75Gg+|8>n@?hw6+>Yq`eZDf$xKXZ(|cP4yTe%JbUL(e<%a| zT3cXtpm7s>#!Uuz*>wefU8s*+d-_ABPArsdC_VFw~7PG<14 zn2uJr00E*gja(ChSKNE;8upis+}g*{YiH|5VdL!l)au~XuE$A_oq+fDz-lidE4g#C zfV+BVLi;WKv#J?$o!zB zVkNsMd;BN|-;Nh4>C=Ej!kzMk4dWk^D$X>*sb!;W;uHNQ`iIoY%LO|)p20lqX{VI=#K{X?9w(S8FDDPhhKM3o=RAB$@U;L^G0RPnvq zY^G)Laz{@1wn12^B`Mq!wZA=)5Y8Z)7glyH-e&nTMZl)^`ZsA)6*2(6VA2+LlTAg8 z`AH5Qct(!O?rUa!i0KH?38R$JxL5lu49Hm#&zbv4ZG63!rGTHy<{PeOOTIqBz~yi9 zdT^-4*;(YjZ`D=rLzte&zv=|O%{V^p98RT^X)Fh-hkiq2ept>+mQ9`^bmd%uCLw8> zX~o!t`7Bv*8O4j$ABHcQ+4=2=Fmkz6MV}Qd&t={VqiJH|V$3_12@lX*wD4`a@6L5^ z7jbc|n6Z`I7Anyqw(x(x8Q5=g`)UB&wE+{PmK*eC;I74ZMAQpXk|4MdvAZAwvT~29 z0&Kik^Lg?caXJl|nBg*L-8HoUUa;%@M-Q-CEf312Qt>Ix| zfe~&F9nr29pli^GkLZPuO5*3p;T2-*QTy{ZjzpYn4igFqMmOqnbMe=3)4nf!nEF`& z!ddMfNjwbhD&9wO*2Wef`ejf#LQi`Pb^p&9iG7WI4K>r}VqCZWbabjkej zkRtp_OHT;pW}Pt0)95rv(Yrjl>?!{R&c11%+JuEJJ-kS{6LE#mNHx5~87GQqLh}Ul zne-^>q>DApmUAD+hwH%wi050ayv5c*x~W#~;>x%p+d=$YAIC528>?#?zBl|3zs9TS Wgqm``8lCa)Hqo&LljW(%#(oFnnMH{J diff --git a/public/static/images/blog/blog thumbnail package.svg b/public/static/images/blog/blog thumbnail package.svg new file mode 100644 index 0000000..368f4f5 --- /dev/null +++ b/public/static/images/blog/blog thumbnail package.svg @@ -0,0 +1,210 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/blog/blog thumbnail tailwind.svg b/public/static/images/blog/blog thumbnail tailwind.svg new file mode 100644 index 0000000..dae592b --- /dev/null +++ b/public/static/images/blog/blog thumbnail tailwind.svg @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/article/blockquote/index.module.css b/src/components/article/blockquote/index.module.css index b5d0e4a..de2eb75 100644 --- a/src/components/article/blockquote/index.module.css +++ b/src/components/article/blockquote/index.module.css @@ -1,5 +1,6 @@ .blockquote { - @apply flex + @apply mb-4 + flex max-w-2xl flex-col items-start diff --git a/src/components/blog/avatarGroup/Avatar/index.module.css b/src/components/blog/avatarGroup/Avatar/index.module.css index 7cee84e..11142cb 100644 --- a/src/components/blog/avatarGroup/Avatar/index.module.css +++ b/src/components/blog/avatarGroup/Avatar/index.module.css @@ -13,7 +13,7 @@ text-xs text-neutral-800 dark:border-neutral-950 - dark:bg-neutral-900 + dark:bg-neutral-800 dark:text-neutral-300; } diff --git a/src/components/blog/header/index.tsx b/src/components/blog/header/index.tsx index 0893643..f33e064 100644 --- a/src/components/blog/header/index.tsx +++ b/src/components/blog/header/index.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; import LocalizedDate from '@/components/i18n/localizedDate'; import LocalizedMessage from '@/components/i18n/localizedMessage'; import type { BlogMetaData } from '@/types/blog'; -import { getAuthorUrl } from '@/utils/stringUtils'; +import { getAuthorName, getAuthorUrl } from '@/utils/stringUtils'; import AuthorsList from '../avatarGroup'; import styles from './index.module.css'; import type { FC } from 'react'; @@ -16,7 +16,7 @@ const BlogHeader: FC = ({ }) => { const avatars = authors.map(author => ({ src: getAuthorUrl(author), - alt: author, + alt: getAuthorName(author), })); return ( diff --git a/src/utils/getAge.ts b/src/utils/getAge.ts index 1d4cbd2..6fd3601 100644 --- a/src/utils/getAge.ts +++ b/src/utils/getAge.ts @@ -1,4 +1,4 @@ -function getAge(birthday: Date) { +export function getAge(birthday: Date) { const today = new Date(); const birthDate = new Date(birthday); let age = today.getFullYear() - birthDate.getFullYear(); @@ -9,7 +9,7 @@ function getAge(birthday: Date) { return age; } -function isBirthday(birthday: Date): boolean { +export function isBirthday(birthday: Date): boolean { const today = new Date(); const birthDate = new Date(birthday); return ( @@ -18,4 +18,9 @@ function isBirthday(birthday: Date): boolean { ); } -export { getAge, isBirthday }; +export function isBetweenDates(startDate: string, endDate: string): boolean { + const today = new Date(); + const start = new Date(startDate); + const end = new Date(endDate); + return today >= start && today <= end; +} diff --git a/src/utils/stringUtils.ts b/src/utils/stringUtils.ts index 9497164..2b8c134 100644 --- a/src/utils/stringUtils.ts +++ b/src/utils/stringUtils.ts @@ -20,3 +20,5 @@ export const getAuthorUrl = (author: string) => { return ''; } }; + +export const getAuthorName = (author: string) => author.split(':')[1];