haxeflixel.com

flixel | complementos | UI | demostraciones | Herramientas | plantillas | Docios | haxeflixel.com

Acerca de

Esta es la fuente de Haxeflixel.com. Utiliza 11Ty para la generación de sitios estática y Bootstrap 5 para el estilo.

Debe tener NPM / NodeJS para compilar el sitio, las solicitudes de extracción son bienvenidas.

0. Instalar NodeJS

1. Clon y ejecutar el sitio

   git clone https://github.com/HaxeFlixel/haxeflixel.com.git
   cd haxeflixel.com

   Para instalar dependencias y construir el sitio, ejecute los siguientes comandos:

    # downloads dependencies, and clones flixel-docs
   npm install
   
   # runs the start command from package.json, which boots up the static site generator and scss styling for live reload
   npm run start

2. Abra http: // localhost: 8080/

3. Comience a piratear modificando el content/ , content/_layouts/ y content/_scss/ Directorios. El sitio vivirá en vivo a medida que guarde los archivos que modifica.

Consulte el código contribuyente para obtener más información de desarrollo.

Documentación contribuyente (demostraciones y exhibiciones)

Si desea contribuir y mejorar nuestro sitio web, trabaje en una bifurcación o rama de funciones. Solo los cambios de trabajo y probado se fusionarán en Master. Use el sistema de problemas para el soporte del desarrollador y la aprobación de sus cambios.

Cómo agregar documentación

Documentación para /documentation extraída automáticamente del repositorio de Docs Flixel (a través de un script Package.json preinstall que ejecuta scripts /install-flixel-docs-repo.js).

Revise el readMe en el repositorio de Flixel-Docs para obtener más información sobre la actualización de las páginas de haxeflixel.com/Documation.

Cómo agregar una demostración

1. Cree un archivo .md en /content/demos siguiendo este ejemplo:

    ```
       ---
       title: "Demo-Name"
       layout: demo
       width: 800
       height: 500
       source: "flixel-demos-subdirectory/Demo-Name"
       ---
       Here goes the actual description of the demo in  GitHub-Flavored-Markdown:
       * What the demo displays
       * Who created it
       * What the controls are
       * etc
   
       HTML is still allowed and can be used for more advanced descriptions.
   
   ```
   

   source apunta al subdirectorio de Flixel-Demos que contiene la demostración.

width y height predeterminada a 640 y 480 y deben omitirse en ese caso.

2. Agregue una captura de pantalla de la demostración llamada Demo-Name.png a /static/demos/images .

Cómo agregar un juego de exhibición

1. Cree un archivo .md en /content/showcase siguiendo este ejemplo:

    ---
    layout: showcase
    title: "Go! Go! PogoGirl"
    itch: https://ohsat-andrej.itch.io/go-go-pogogirl
    website: https://www.ohsat.com/game/go-go-pogogirl/
    steam: https://store.steampowered.com/app/1681010/Go_Go_PogoGirl/
    switch: https://www.nintendo.com/store/products/go-go-pogogirl-switch/
    ps4: https://store.playstation.com/en-us/product/UP0891-PPSA10169_00-GOGOPOGOGIRLRATG
    xbox: https://www.microsoft.com/store/productid/9P10H7L6QCCJ
    date: "2022-02-01"
    ---

    Dates should use YYYY-MM-DD

    Note that by adding a URL to one of the supported targets, the icon will automatically become coloured on the
    [showcase page](https://haxeflixel.com/showcase) and link to that URL.

2. Agregue una captura de pantalla del escaparate usando el mismo título utilizado en el archivo *.md , por ejemplo, Go! Go! PogoGirl.png a /static/images/showcase . Se redimensionan y recortan a 500x260, por lo que es mejor usar la misma relación.

Las exhibiciones que aún no se lanzan oficialmente solo se aceptan en casos especiales. Lo mismo es cierto para los juegos de Jame Jams.

Código contribuyente

Además de instalar y ejecutar comandos normalmente (ver sobre), hay otros comandos / flujos de trabajo útiles.

Todo lo que necesita debe instalarse con npm install . Usando VScode también puede instalar las extensiones recomendadas para formateo automático (en el archivo Guardar). Sin embargo, todos los flujos de trabajo deben ser completamente utilizables a través de CLI.

content/_static

Todos los archivos estáticos (generalmente / en su mayoría imágenes) se copian en el directorio raíz del sitio con su información de directorio mantenida en el tacto. Entonces content/_static/images/ se convertirá en out/images , y debe referenciarse desde el sitio con just /images/ .

Comandos útiles

npm run start

Ejecutar npm run start iniciará el alduentoso sitio y el SASS .SCSS, y recargará los cambios.

npm test

Ejecutar npm test ejecutará pruebas de formato y pelusa para el proyecto. Simplemente puede ejecutar npm test si desea ejecutar todas las pruebas ( test:js , test:liquid y test:prettier ).

Sin embargo, alternativamente puede ejecutar cada prueba individualmente.

• npm run test:js probará JavaScript a través de Standard. Para arreglar automáticamente todo, puede ejecutar npm run NPM Run Fix: JS`

• npm run test:liquid se probará si el sitio se construye a través de eleventy --dryrun .

• npm run test:prettier probará la consistencia general de estilo usando Prettier. Puede ejecutar npm run fix:prettier como una forma fácil de arreglar inconsistencias.

npm fix

La ejecución npm fix hará un formato automático al código para que coincida con standardjs , .liquidrc y .prettierrc.yaml . ¡Por lo general, desea ejecutar antes de enviar relaciones públicas!