Hello World!

Initialisation de mon blog avec Next.js et Sanity

Computer on a desk with code
Picture of Valentin
Valentin
04/09/2024 - 21h52

Pour le moment je suis toujours en local. J'ai besoin de m'occuper des CORS avant de pouvoir publier directement depuis le site.

04/09/2024 - 21h56

Rien de très compliqué finalement, tout ce fait depuis l'interface Sanity.

Maintenant on s'occupe de l’esthétique. Rien de très compliqué normalement, c'est du React. Et si j'ai bien compris j'ai juste à push sur main et ça part en prod.

04/09/2024 - 22h15

Je vais devoir démarrer par les bases de Next.js si je veux comprendre le fonctionnement de ce blog. On verra ça demain après une bonne nuit de sommeil.

05/09/2024 - 10h43

Je n'ai pas encore compris pourquoi mais Sanity est à la fois relié en local et en ligne.

05/09/2024 - 11h17

Push vers Github avec le bon format de date et la favicon. C'est à jour sur Vercel mais rien sur le site pour le moment.

05/09/2024 - 11h40

Problème avec la date et avec l'environnement local. Je suis obligé de commit pour verifier mon code. La date devrait être bonne mais je vais vite devoir régler ce problème local.

05/09/2024 - 11h49

Va savoir pourquoi mais tout fonctionne en local désormais. Pour ce qui est de la date rien ne pouvait marcher puisque j'essayais d’accéder à la langue du navigateur depuis le codé serveur. Je découvre encore Next.js.

Pas encore convaincu par le résultat, je chercherai une autre solution plus tard.

Image
05/09/2024 - 12h47

Il semblerait que désormais je puisse poster du code de manière esthétique ainsi que de poster des images.

Note pour plus tard, ça se passe dans post.ts où il faut modifier les types.

defineField({
      name: "content",
      title: "Content",
      type: "array",
      of: [
        {
          type: "block",
        },
        {
          type: "image",
        },
        {
          type: "code",
        },
      ],
    }),

Ne pas oublier d'activer les plugins dans sanity.config.ts et d'ajouter le plugin à la liste. Pour le code notamment.

import {codeInput} from '@sanity/code-input'

export default defineConfig({
  // ...
  plugins: [codeInput()],
})
05/09/2024 - 13h55

Le code fonctionne mais c'est pas encore plaisant, ça manque de couleur. Par contre les images c'est pas ça, j'ai encore du mal... Je verrais ça demain après le boulot.

06/09/2024 - 12h09

Les highlight du code sont gérés via PrismJS avec un theme custom OneDark que j'ai trouvé sur le Github de AGMStudio.

Pour ce qui est du code, il suffit de créer un component prismUtils.tsx

import Prism from "prismjs";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-typescript.js";
import "prismjs/themes/prism-onedark.css";

export function highlightCode(code: string, language: string): string {
  return Prism.highlight(
    code,
    Prism.languages[language] || Prism.languages.javascript,
    language
  );
}

Et de l’appeler dans CodeBlock de portable-text.tsx

const CodeBlock = ({
  value,
}: {
  value: { code: string; language?: string };
}) => {
  const language = value.language || "javascript"; // Définir un langage par défaut
  const highlightedCode = highlightCode(value.code, language);

  return (
    <pre className="p-4 rounded-lg overflow-x-auto">
      <code
        className={`language-${language}`}
        dangerouslySetInnerHTML={{ __html: highlightedCode }}
      />
    </pre>
  );
};

Ce qui me fait maintenant penser que je vais m'occuper de l'intégration de vidéo youtube. Je pense que ça peut être très pratique.

06/09/2024 - 14h29

Bon à savoir, c'est pas parce que ça marche en local que la mise en prod se passera bien. Je garderai en mémoire de faire un npm run build avant d'envoyer l'update sur Github.

06/09/2024 - 14h49

En train de d'activer les vidéos youtube, je peux deja les déclarer dans le post content. Je post déjà la vidéo en dessous, elle devrait apparaitre un jour.

06/09/2024 - 17h22

Pleins de problème, j'ai dû repartir de mon précédent commit.

Les choses à faire pour la preview YouTube :

  • New schemaType youtube.tsx (.tsx et pas ts!)
  • Appeler youtube dans sanity.config.ts
  • Ajouter type: "youtube" dans le content de post.ts comme pour image et code
import { PlayIcon } from "@sanity/icons";

export default {
  name: "youtube",
  type: "object",
  title: "YouTube Embed",
  icon: PlayIcon,
  fields: [
    {
      name: "url",
      type: "url",
      title: "YouTube video URL",
    },
  ],
};
06/09/2024 - 22h33

Je dois avouer que je tourne en rond depuis un moment parce que je voulais absolument charger cette vidéo depuis le serveur. Finalement pas le choix si je veux utiliser react-youtube. J'ai aucune envie de le faire moi-même via un iframe.
Je vais rapidement regarder comment faire pour les tweets et peut être que je rajoute encore ça.

06/09/2024 - 23h20

Test d'un tweet.

07/09/2024 - 00h35

C'est bon pour la preview, maintenant je veux ça sur le blog et aller me coucher.

09/09/2024 - 12h27

Après avoir perdu 1h pour un problème avec le studio sanity, je peux retourner m'occuper de l'affichage des tweets.

09/09/2024 - 13h09

Et voilà, tout fonctionne. Comme quoi quand on prend les choses dans l'ordre, c'est tout de suite plus facile.

Pour moi le blog est setup. Je vais pouvoir attaquer le nouveau projet.