quiltmc.org

Sitio web del proyecto de colcha

Sitio web para el proyecto de edredón.

Que contribuye

Este sitio construido con Astro, MDX e I18Next. Está alojado en las páginas de Cloudflare. Si desea familiarizarse más con Astro, puede leer su documentación.

Si se atasca o tiene preguntas, únase a nosotros en el hilo #Website en nuestro servidor Discord.

Elección de IDE/editor

El editor más simple para usar es Visual Studio Code (VScode), porque tiene extensiones de lenguaje oficiales para Astro y MDX. Cuando abra el repositorio en VScode, verá una ventana emergente en la esquina inferior derecha que ofrece instalar algunas extensiones recomendadas. También puede escribir @recommended en la barra de búsqueda de extensiones para explorar las extensiones recomendadas e instalar manualmente las que desee.

Si prefiere no usar VScode, puede usar cualquier editor que admita un subconjunto de las siguientes herramientas, en función de lo que está haciendo:

• Si solo desea escribir artículos de blog o editar páginas que sean en su mayoría texto simple, solo necesita un editor que admita Markdown.
• Si desea trabajar con diseños o componentes, necesita un editor con soporte para archivos .astro, como:
  • Texto sublime con la extensión Astro
  • Neovim con árbol-sitter-astro y el astro lspconfig
  • Jetbrains IntelliJ Idea Ultimate o Webstorm con la extensión Astro
• Si desea trabajar con páginas más complejas, es posible que desee un editor con soporte para MDX, aunque muchos editores con soporte de Markdown representan MDX con bastante precisión.
• Si desea trabajar con el sistema I18N, es posible que desee un editor con soporte para Fluent. Sin embargo, esto no es estrictamente necesario si solo desea traducir el sitio web.

Configurar un entorno de desarrollo

Como se mencionó anteriormente, el sitio web se crea con Astro, que está escrito en TypeScript, por lo que necesitará un tiempo de ejecución JavaScript compatible con Node.js para construirlo y ejecutarlo para el desarrollo. Si solo hace una contribución simple, como un mod incompatible o una publicación de blog, configurar un entorno de desarrollo no es esencial: se construirá una versión previa del sitio cuando envíe una solicitud de extracción para asegurarse de que todo funcione como se esperaba.

Instalación de node.js

Node.js es un tiempo de ejecución de JavaScript multiplataforma. Se puede instalar directamente o probablemente esté disponible para su administrador de paquetes favorito.

Instalación de PNPM

Utilizamos PNPM como nuestro administrador de paquetes Node.js. Se puede instalar de las siguientes maneras:

• Uso de NPM (incluido con Node.js): npm install -g pnpm
• Usando un administrador de paquetes diferente

Para obtener más opciones, consulte los documentos de PNPM.

Configuración del proyecto

Dentro del proyecto, instale todos los paquetes requeridos con PNPM:

pnpm i

Ejecutando el servidor Dev

Astro incluye un servidor de desarrollo que se vuelve a cargar automáticamente a medida que cambia los archivos dentro del proyecto. Para comenzar, ejecute 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...

El servidor Dev construye páginas a medida que las visita para reducir la hora de inicio, por lo que su rendimiento es peor que el sitio completamente construido.

Construyendo el sitio

Para construir una copia completa del sitio final:

 pnpm build

El sitio estará integrado en la carpeta dist/ . Construir el sitio es una forma útil de verificar que no haya roto nada sin darse cuenta.

Puede obtener una vista previa del sitio construido utilizando pnpm astro preview , pero en la mayoría de los casos la única ventaja que tiene sobre el servidor de desarrollo es el rendimiento.

Vista previa con Cloudflare Wrangler

Si necesita probar la funcionalidad específica de las páginas de CloudFlare (como cualquier cosa en las functions/ directorio), puede obtener una vista previa del sitio utilizando Wrangler Clito de Cloudflare emulando una implementación de páginas de CloudFlare.

Primero, instale Wrangler

pnpm install -g wrangler

Construya el sitio:

pnpm build

Ejecute la carpeta dist de salida usando Wrangler:

 wrangler pages dev dist

A diferencia del servidor Dev Astro, Wrangler solo puede obtener una vista previa de un sitio que está completamente construido.

Arquitectura

Para una explicación detallada de cómo se presenta el repositorio, ver ARCHITECTURE.md

Contribuciones comunes

Instrucciones para hacer varios tipos comunes de contribuciones.

Agregar un mod incompatible

Abra el archivo incompatible-mods.json en public/api/v1/incompatible-mods.json y agregue una nueva entrada en la parte inferior de la lista.

Su entrada debe tener los siguientes campos:

• "ids": - Una lista de ID de mod que se ven afectados.
• "Name": - El nombre completo del mod.
• "type": - el tipo de incompatibilidad. Puede ser uno de los siguientes:
  • "GAME" : se bloquea o rompe el juego de vainilla.
  • "OTHERS" : rompe una o más otras modificaciones.
  • "SELF" - se rompe.
  • "WORKAROUND" : tiene una solución que le permite funcionar correctamente.
• "Status": - Qué tan cerca está la incompatibilidad de ser reparado. Puede ser uno de los siguientes:
  • "BLOCKED" : los autores de modificación son conscientes del problema, pero una solución está bloqueada por un factor externo.
  • "IN_PROGRESS" : los autores mods están implementando una solución.
  • "NO_ANSWER" : se ha informado el problema, pero los autores del mod no han respondido.
  • "ON_HOLD" : los autores de mods están esperando implementar o liberar la solución.
  • "UNKNOWN" : el problema no se ha informado a los autores del mod, o no puede encontrar un informe.
  • "WONT_FIX" : se ha informado el problema, pero los autores del mod se niegan a solucionarlo.
• "tracking": - Un enlace al informe que rastrea la incompatibilidad, por ejemplo, un problema de GitHub. Establecer en "UNKNOWN" si no lo sabe.
• "notes": (opcional): cualquier otra nota, por ejemplo, una solución alternativa conocida.

Escribir una publicación de blog

Cree un nuevo archivo de Markdown en src/pages/en/blog , nombrado con la fecha actual y una versión abreviada del título. La fecha debe estar en el formato yyyy-mm-dd , y el título debe estar en minúsculas y separado por guiones ( - ), por ejemplo, 2024-03-09-example-post.md .

En la parte superior del archivo, debe agregar la materia frontal , que está escrita en YAML. La materia frontal para una publicación de blog se ve así:

---
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.
---

Escriba un primer párrafo corto, luego inserte dos líneas, ponga <!-- MORE --> , luego dos líneas más. Por ejemplo:

 A succinct first paragraph.

<!-- MORE -->

More text here.

Esto le dice al sitio web qué incluir en la breve vista previa que va en la página de inicio y en la lista de publicaciones de blog. De aquí en adelante, puede seguir escribiendo Markdown en el contenido de su corazón. También es compatible con la resaltura de sintaxis en bloques de código.

Actualización de la tarjeta de miembro de su equipo

Si usted forma parte de uno de los equipos de desarrollador o comunidad de Quilt, es probable que tenga una tarjeta en la página de listados de equipos del sitio web. Los datos dentro de las tarjetas en esta página se crean a partir del archivo TeamData.mjs en src/data/ .

Cada miembro del equipo tiene un objeto en este archivo con datos sobre ellos. La (s) sección (s) de la página en la que se enumera se basa en qué equipos se encuentra en GitHub.

Puede cambiar los siguientes datos para personalizar su tarjeta:

• name: - El nombre en la parte superior de su tarjeta. Puede ser lo que quieras.
• discord: - Su nombre de usuario de Discord.
• github: - Tu nombre de usuario GitHub. Esto se usa para identificar en qué equipo se encuentra en GitHub.
• avatar: - Esta es una URL para cualquier imagen que desee. Para mejores resultados, debe ser cuadrado y no demasiado grande. Puede poner un archivo en public/assets/team/images para que se aloje en el sitio web, o usar cualquier otra URL de imagen que desee.
• description: (Opcional): una oración o un pequeño párrafo sobre quién es usted.
• links: (opcional): una lista de enlaces a sus diversas páginas web o perfiles de redes sociales. Cada enlace está representado por el siguiente objeto:
  • icon : un icono que representa el enlace. Puede elegir entre las marcas Coreui de icono ( cib: , Iconos de diseño de material ( mdi: :) o símbolos de material ( material-symbols: :); O use nuestros iconos personalizados para Curseforge ( curseforge ) y Modrinth ( modrinth-small ). Al usar un icono de un conjunto de iconos (en lugar de uno personalizado), debe prefijo el nombre del icono con el nombre del conjunto de iconos, por ejemplo, cib:youtube para usar el icono youtube de las marcas CoreUI.
  • url : el enlace a la página web.
• systemMembers: (opcional): este campo está destinado a que los sistemas plurales muestren cada uno de sus miembros. Tiene algunos valores posibles:
  • "---" te mostrará como un sistema plural con tus miembros ocultos.
  • Una identificación del sistema Pluralkit obtendrá automáticamente y mostrará los nombres y avatares de todos los miembros públicos de ese sistema.
  • Puede construir manualmente un sistema utilizando una lista de los siguientes objetos:
    • name: El nombre del miembro del sistema.
    • icon: - Un avatar para el miembro. Puede usar cualquier URL que desee o alojar una imagen en este sitio en public/assets/team/images/<your-system-name>/ .