Gatsby / Static Website Generator support ? #204
Comments
|
En suivant les instructions pour |
|
Salut @wiwski, Je n'ai pas fait d'intégration spécifique pour gatsby mais je pense que tu peut t'en tirer simplement en garentissant que le import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
if (typeof window !== "undefined") {
// Seulement sur le client
startReactDsfr({ defaultColorScheme: "system" });
}Sa ne sera pas tout a fait aussi clean qu'avec l'integration Next, c'est à dire que si l'utilisateur a son navigateur en dark mode, il va voir quellques milliseconde l'app en blanc puis ça va passer en dark mode. Si tu veux on peut fournir une intégration spécifique Si tu me fait un repo minimal avec React-DSFR pre set up je peut regarder. |
|
@garronej |
|
Ok super. Ca me surrprend beaucoup mais c'est cool si ça marche. |
|
@garronej du nouveau : "use client";
import { Link as GatsbyLink } from "gatsby";
import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { RegisteredLinkProps } from "@codegouvfr/react-dsfr/link";
import { defaultColorScheme } from "./defaultColorScheme";
const Link = ({ ...props }: RegisteredLinkProps) => {
const { ref, href, ...newProps } = props;
return <GatsbyLink to={href || "#"} {...newProps} />;
};
declare module "@codegouvfr/react-dsfr/next-appdir" {
interface RegisterLink {
GatsbyLink: typeof Link;
}
}
startReactDsfr({ defaultColorScheme, Link });
export function StartDsfr() {
//Yes, leave null here.
return null;
}Il y a probablement des choses à adapter pour avoir une totale conversion des liens Next vers Gatsby. D'ailleurs si tu as des idées je suis preneur. Je continuerai à poster si je vois des améliorations. Et je posterai le lien du repo quand il sera sur github (probablement cette semaine). |
|
Salut @wiwski, je pense que le mieux serais de faire un adapter pour Gatsby. Par contre attend, je crois que tu n'a pas bien compris ce que react-dsfr permet par rapport au rooting. https://react-dsfr.codegouv.studio/routing En fait tu peut déclarer le Ce que tu veux faire c'est: import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { Link } from "gatsby";
declare module "@codegouvfr/react-dsfr/next-appdir" {
interface RegisterLink {
Link: typeof Link;
}
}
startReactDsfr({
defaultColorScheme: "system",
Link
});
export function StartDsfr() {
//Yes, leave null here.
return null;
}...Tout simplement. Je suis très dessu parce que le fait que react-dsfr puisse fonctionner avec nimporte quelle librairie de routing client est une des choses dont je suis le plus fier sur cette lib mais maleureusement tout le monde est mistifier par l'augmentation du type global. 😢 |
|
@garronej Bravo pour les différentes reflexions autour de react-dsfr, c'est bien pensé 👍 |
|
Merci! Tu as essayé précisément mon code? |
|
Hmm.. Je comprends ton point en lisant la doc du routing pour Oui j'ai essayé en remplaçant Alors j'ai une erreur sur la prop |
|
En effet, @wiwski, c'était une erreur de ma part.
En attendant, voici le snippet que tu peux implémenter pour obtenir les types corrects au niveau du routage (après avoir mis à jour @codegouvfr/react-dsfr à la dernière version 0.78.5) : "use client";
import React from "react";
import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { Link } from "gatsby";
declare module "@codegouvfr/react-dsfr/next-appdir" {
interface RegisterLink {
Link: typeof Link;
}
}
startReactDsfr({
defaultColorScheme: "system",
Link
});
export function StartDsfr() {
// Oui, laissez null ici.
return null;
}Now if you use a component that includes hyperlink you'll get the correct type. import { Card } from "@codegouvfr/react-dsfr/Card";
const node = (
<Card
linkProps={{
to: '#'
}}
title="Intitulé de la carte (sur lequel se trouve le lien)"
/>
); |
|
Salut @garronej, j'ai mis à jour à la dernière version et utilisé ton snippet et ça fonctionne très bien, merci ! Pour info, c'est toujours en phase initial de développement, mais le repo est dispo ici : https://github.com/betagouv/euphrosyne-digilab |
Est-ce qu'il est possible d'utiliser la librairie avec Gatsby - en vue de générer un Static Website ?
En mode développement ça fonctionne très bien, mais une erreur survient lors du build.
L'erreur est dans le module
start.jssur cette ligne :react-dsfr/src/start.ts
Line 26 in 36086ba
J'appelle
startReactDsfrdans le code de ma pageIndex:The text was updated successfully, but these errors were encountered: