quiltmc.org

Site Web du projet de quilt

Site Web du projet de courtepointe.

Contributif

Ce site construit avec Astro, MDX et I18Next. Il est hébergé sur les pages CloudFlare. Si vous voulez vous familiariser avec Astro, vous pouvez lire sa documentation.

Si vous êtes coincé ou avez des questions, veuillez vous joindre à nous dans le thread #Website sur notre serveur Discord.

Choix IDE / Editor

L'éditeur le plus simple à utiliser est Visual Studio Code (VSCODE), car il a des extensions de langue officielles pour Astro et MDX. Lorsque vous ouvrez le référentiel dans VSCODE, vous verrez une fenêtre contextuelle dans le coin inférieur droit offrant pour installer des extensions recommandées. Vous pouvez également taper @recommended dans la barre de recherche d'extension pour parcourir les extensions recommandées et installer manuellement celles que vous souhaitez.

Si vous préférez ne pas utiliser VScode, vous pouvez utiliser n'importe quel éditeur qui prend en charge un sous-ensemble des outils suivants, en fonction de ce que vous faites:

• Si vous souhaitez simplement écrire des articles de blog ou modifier des pages qui sont principalement du texte simple, vous n'avez besoin que d'un éditeur qui prend en charge Markdown.
• Si vous souhaitez travailler avec des mises en page ou des composants, vous avez besoin d'un éditeur avec prise en charge des fichiers .astro, tels que:
  • Texte sublime avec l'extension Astro
  • Neovim avec Tree-Sitter-Astro et Astro LSPConfig
  • Jetbrains Intellij Idea Ultimate ou WebStorm avec l'extension Astro
• Si vous souhaitez travailler avec des pages plus complexes, vous voudrez peut-être un éditeur avec la prise en charge de MDX, bien que de nombreux éditeurs avec Markdown Support rendent la MDX assez précisément.
• Si vous voulez travailler avec le système i18n, vous voudrez peut-être un éditeur avec la prise en charge de Fluent. Cependant, ce n'est pas strictement nécessaire si vous voulez seulement traduire le site Web.

Mettre en place un environnement de développement

Comme mentionné précédemment, le site Web est construit à l'aide d'Astro, qui est écrit en TypeScript, vous aurez donc besoin d'un runtime JavaScript compatible Node.js pour le développer et l'exécuter pour le développement. Si vous ne faites qu'une contribution simple, comme un mod incompatible ou un article de blog, la création d'un environnement de développement n'est pas essentielle: une version d'aperçu du site sera construite lorsque vous soumettez une demande de traction pour vous assurer que tout fonctionne comme prévu.

Installation de Node.js

Node.js est un runtime JavaScript multiplateforme. Il peut être installé directement ou est probablement disponible pour votre gestionnaire de packages préféré.

Installation de PNPM

Nous utilisons PNPM comme gestionnaire de package Node.js. Il peut être installé de la manière suivante:

• Utilisation de NPM (inclus avec Node.js): npm install -g pnpm
• Utilisation d'un autre gestionnaire de packages

Pour plus d'options, consultez les documents de PNPM.

Configuration du projet

À l'intérieur du projet, installez tous les packages requis à l'aide de PNPM:

pnpm i

Exécution du serveur de développement

Astro inclut un serveur de développement qui se recharge automatiquement lorsque vous modifiez des fichiers dans le projet. Pour le démarrer, exécutez pnpm dev :

 > pnpm dev
15:05:32 [types] Generated 1ms

 astro  v4.15.2 ready in 702 ms

┃ Local	http://localhost:4321/
┃ Network  use --host to expose

15:05:32 watching for file changes...

Le serveur de développement construit des pages lorsque vous les visitez pour réduire l'heure de début, donc ses performances sont pires que le site entièrement construit.

Construire le site

Pour construire une copie complète du site final:

 pnpm build

Le site sera intégré dans le dossier dist/ . La construction du site est un moyen utile de vérifier que vous n'avez rien cassé sans le remarquer.

Vous pouvez prévisualiser le site construit à l'aide de pnpm astro preview , mais dans la plupart des cas, le seul avantage que cela a sur le serveur de développement est les performances.

Aperçu avec CloudFlare Wrangler

Si vous devez tester les fonctionnalités spécifiques aux pages CloudFlare (comme tout dans les functions/ répertoire), vous pouvez prévisualiser le site à l'aide de Wrangler Clito de CloudFlare imiter un déploiement des pages CloudFlare.

Tout d'abord, installez Wrangler

pnpm install -g wrangler

Construisez le site:

pnpm build

Exécutez le dossier dist sorti à l'aide de Wrangler:

 wrangler pages dev dist

Contrairement au serveur de développement d'Astro, Wrangler ne peut prévisualiser qu'un site entièrement construit.

Architecture

Pour une explication détaillée de la façon dont le référentiel est disposé, voir ARCHITECTURE.md

Contributions courantes

Instructions pour faire divers types de contributions courantes.

Ajout d'un mod incompatible

Ouvrez le fichier incompatible-mods.json dans public/api/v1/incompatible-mods.json et ajoutez une nouvelle entrée en bas de la liste.

Votre entrée doit avoir les champs suivants:

• "ids": - Une liste des ID MOD qui sont affectés.
• "Name": - Le nom complet du mod affecté.
• "type": - Le type d'incompatibilité. Peut être l'une des opérations suivantes:
  • "GAME" - Grass ou brise le jeu Vanilla.
  • "OTHERS" - brise un ou plusieurs autres mods.
  • "SELF" - se brise.
  • "WORKAROUND" - a une solution de contournement qui lui permet de fonctionner correctement.
• "Status": - La proximité de l'incompatibilité est répartie. Peut être l'une des opérations suivantes:
  • "BLOCKED" - Les auteurs de MOD sont conscients du problème, mais un correctif est bloqué par un facteur externe.
  • "IN_PROGRESS" - Les auteurs de MOD implémentent un correctif.
  • "NO_ANSWER" - Le problème a été signalé, mais les auteurs du MOD n'ont pas répondu.
  • "ON_HOLD" - Les auteurs de Mod attendent d'implémenter ou de libérer le correctif.
  • "UNKNOWN" - le problème n'a pas été signalé aux auteurs du mod, ou vous ne trouvez pas de rapport.
  • "WONT_FIX" - Le problème a été signalé, mais les auteurs du mod refusent de le réparer.
• "tracking": - Un lien vers le rapport suivant l'incompatibilité, par exemple, un problème de github. Réglé sur "UNKNOWN" si vous ne le savez pas.
• "notes": (facultatif) - Toute autre note, par exemple, la solution de contournement connue.

Écrire un article de blog

Créez un nouveau fichier Markdown dans src/pages/en/blog , nommé avec la date actuelle et une version raccourcie du titre. La date doit être dans le format yyyy-mm-dd , et le titre doit être en minuscules et séparés par des traits de traits ( - ), par exemple, 2024-03-09-example-post.md .

En haut du fichier, vous devez ajouter Front Matter , qui est des métadonnées écrites en YAML. Le front pour un article de blog ressemble à ceci:

---
title : " An Example Title " # The full title of the post
date : 2024-09-03 20:00:00 -00:00 #	The date, time, and timezone that the post was written, relative to UTC. It is best practice to give the time in UTC and use an offset of -00:00, as shown.
authors : # A list of one or more authors
- Pineapple
layout : /src/layouts/Post.astro # This tells Astro what layout to use for the page, and should always be the same.
---

Écrivez un court premier paragraphe, puis insérez deux lignes, mettez <!-- MORE --> , puis deux autres lignes. Par exemple:

 A succinct first paragraph.

<!-- MORE -->

More text here.

Cela indique au site Web quoi inclure dans le court aperçu qui se déroule sur la page d'accueil et dans la liste des articles de blog. À partir de maintenant, vous pouvez continuer à écrire Markdown au contenu de votre cœur. La mise en évidence de la syntaxe dans les blocs de code est également prise en charge.

Mettre à jour la carte des membres de votre équipe

Si vous faites partie de l'une des équipes de développeur ou de communauté de Quilt, vous avez probablement une carte sur la page des annonces d'équipe du site Web. Les données à l'intérieur des cartes de cette page sont construites à partir du fichier TeamData.mjs dans src/data/ .

Chaque membre de l'équipe a un objet dans ce fichier avec des données à leur sujet. La (s) section (s) de la page dans laquelle vous êtes répertorié est basée sur les équipes dans lesquelles vous êtes sur GitHub.

Vous pouvez modifier les données suivantes pour personnaliser votre carte:

• name: - Le nom en haut de votre carte. Cela peut être tout ce que vous voulez.
• discord: - Votre nom d'utilisateur Discord.
• github: - Votre nom d'utilisateur GitHub. Ceci est utilisé pour identifier les équipes dans lesquelles vous êtes sur GitHub.
• avatar: - C'est une URL de toute image que vous aimez. Pour de meilleurs résultats, il doit être carré et pas trop grand. Vous pouvez mettre un fichier en public/assets/team/images pour le faire héberger sur le site Web ou utiliser toute autre URL d'image que vous aimez.
• description: (Facultatif) - Une phrase ou un petit paragraphe sur qui vous êtes.
• links: (Facultatif) - Une liste de liens vers vos différentes pages Web ou profils de médias sociaux. Chaque lien est représenté par l'objet suivant:
  • icon : une icône qui représente le lien. Vous pouvez choisir parmi l'icône définit les marques Coreui ( cib: , les icônes de conception de matériaux ( mdi: :) ou les symboles de matériaux ( material-symbols: :); ou utilisez nos icônes personnalisées pour CurseForge ( curseforge ) et Modrinth ( modrinth-small ). Lorsque vous utilisez une icône à partir d'un ensemble d'icônes (par opposition à celle personnalisée), vous devez préfixer le nom de l'icône avec le nom de l'ensemble d'icônes, par exemple, cib:youtube pour utiliser l'icône youtube des marques Coreui.
  • url : le lien vers la page Web.
• systemMembers: (facultatif) - Ce champ est destiné aux systèmes pluriels pour afficher chacun de leurs membres. Il a quelques valeurs possibles:
  • "---" vous montrera comme un système pluriel avec vos membres cachés.
  • Un ID du système Pluralkit va automatiquement récupérer et afficher les noms et les avatars de tous les membres publics de ce système.
  • Vous pouvez créer manuellement un système à l'aide d'une liste des objets suivants:
    • name: le nom du membre du système.
    • icon: - Un avatar pour le membre. Vous pouvez utiliser n'importe quelle URL que vous souhaitez, ou héberger une image sur ce site en public/assets/team/images/<your-system-name>/ .