haxeflixel.com

Flixel | Addons | Ui | démos | Outils | Modèles | Docs | haxeflixel.com

À propos

Ceci est la source de haxeflixel.com. Il utilise 11ty pour la génération de sites statique et Bootstrap 5 pour le style.

Vous devez avoir NPM / NodeJS pour compiler le site, les demandes de traction sont les bienvenues.

0. Installer Nodejs

1. Cloner et exécuter le site

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

   Pour installer les dépendances et construire le site, exécutez les commandes suivantes:

    # 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. Ouvrir http: // localhost: 8080 /

3. Commencez à pirater en modifiant le content/ , content/_layouts/ et content/_scss/ répertoires. Le site en directra un rechargement lorsque vous enregistrez les fichiers que vous modifiez.

Voir le code contributif pour plus d'informations sur le développement.

Documentation contributive (démos et vitrines)

Si vous souhaitez contribuer et améliorer notre site Web, veuillez travailler sur une branche de fourche ou de fonctionnalité. Seuls les modifications de travail et testées seront fusionnées en maître. Utilisez le système de problèmes pour la prise en charge et l'approbation des développeurs sur vos modifications.

Comment ajouter de la documentation

Documentation pour /documentation tirée automatiquement du référentiel Flixel-Docs (via un script Pack.json preinstall qui exécute les scripts / install-flixel-docs-repo.js).

Veuillez consulter le ReadMe dans le dépôt Flixel-Docs pour plus d'informations sur la mise à jour des pages haxeflixel.com/documentation.

Comment ajouter une démo

1. Créez un fichier .md dans /content/demos en suivant cet exemple:

    ```
       ---
       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 pointe vers le sous-répertoire de Flixel-Demos qui contient la démo.

width et height par défaut à 640 et 480 et doivent être omises dans ce cas.

2. Ajoutez une capture d'écran de la démo nommée Demo-Name.png à /static/demos/images .

Comment ajouter un jeu de vitrine

1. Créez un fichier .md dans /content/showcase en suivant cet exemple:

    ---
    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. Ajoutez une capture d'écran de la vitrine en utilisant le même titre utilisé dans le fichier *.md , par exemple Go! Go! PogoGirl.png vers /static/images/showcase . Ils sont redimensionnés et recadrés à 500x260, il est donc préférable d'utiliser le même rapport.

Les vitrines qui ne sont pas officiellement publiées ne sont encore acceptées que dans des cas spéciaux. Il en va de même pour les jeux des jams de jeu.

Code contributif

Parallèlement à l'installation et à l'exécution des commandes normalement (voir à propos), il existe d'autres commandes / flux de travail utiles.

Tout ce dont vous avez besoin doit être installé avec npm install . À l'aide de VScode, vous pouvez également installer les extensions recommandées pour le formatage automatique (sur le fichier SAVE). Cependant, tous les workflows devraient être entièrement utilisables via CLI.

content/_static

Tous les fichiers statiques (généralement / principalement des images) sont copiés dans le répertoire racine du site avec leurs informations de répertoire conservées en tact. Donc, content/_static/images/ se transformera out/images , et doit être référencé à partir du site avec juste /images/ .

Commandes utiles

npm run start

L'exécution npm run start démarrera le site Eleventy et le SASS .SCSS, et se rechargera les modifications.

npm test

npm test exécuté exécutera des tests de formatage et de libellé pour le projet. Vous pouvez simplement exécuter npm test si vous souhaitez exécuter tous les tests ( test:js , test:liquid et test:prettier ).

Cependant, vous pouvez également exécuter chaque test individuellement.

• npm run test:js testera JavaScript via Standard. Pour réparer automatiquement tout, vous pouvez exécuter npm run NPM Run Fix: JS`

• npm run test:liquid testera si le site se construit via eleventy --dryrun .

• npm run test:prettier testera la cohérence du style général en utilisant plus joli. Vous pouvez exécuter npm run fix:prettier comme un moyen facile de corriger les incohérences.

npm fix

L'exécution npm fix fera le formatage automatique vers le code pour le faire correspondre avec standardjs , .liquidrc et .prettierrc.yaml . Habituellement, vous souhaitez courir avant de soumettre des relations publiques!