haxeflixel.com

flixel | Addons | ui | demos | ferramentas | modelos | DOCs | haxeflixel.com

Sobre

Esta é a fonte do haxeflixel.com. Ele usa 11ty para geração estática do local e bootstrap 5 para estilo.

Você deve ter NPM / NodeJS para compilar o site, as solicitações de tração são bem -vindas.

0. Instale o NodeJS

1. Clone e execute o site

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

   Para instalar dependências e criar o site, execute os seguintes 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. Aberto http: // localhost: 8080/

3. Comece a invadir modificando o content/ , content/_layouts/ e content/_scss/ diretórios. O site vive -se ao vivo ao salvar os arquivos que você modifica.

Consulte o código contribuindo para obter mais informações de desenvolvimento.

Documentação contribuindo (demos e showcases)

Se você deseja contribuir e melhorar nosso site, trabalhe em um garfo ou ramo de recursos. Somente as alterações de trabalho e testadas serão mescladas no mestre. Use o sistema de problemas para suporte e aprovação do desenvolvedor em suas alterações.

Como adicionar documentação

Documentação para /documentation retirada automaticamente do repositório Flixel-Docs (através de um script preinstall package.json que executa scripts /install-flixel-docs-repo.js).

Revise o ReadMe no repositório Flixel-Docs para obter mais informações sobre como atualizar as páginas do Haxeflixel.com/Documentation.

Como adicionar uma demonstração

1. Crie um arquivo .md em /content/demos após este exemplo:

    ```
       ---
       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 aponta para o subdiretório de Flixel-Demos que contém a demonstração.

width e height inadimplente para 640 e 480 e devem ser omitidos nesse caso.

2. Adicione uma captura de tela da demonstração denominada Demo-Name.png para /static/demos/images .

Como adicionar um jogo de vitrine

1. Crie um arquivo .md em /content/showcase seguindo este exemplo:

    ---
    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. Adicione uma captura de tela da vitrine usando o mesmo título usado no arquivo *.md , por exemplo, Go! Go! PogoGirl.png para /static/images/showcase . Eles são redimensionados e cortados para 500x260, por isso é melhor usar a mesma proporção.

As exibições que ainda não foram lançadas oficialmente ainda são aceitas apenas em casos especiais. O mesmo vale para jogos de Jams Game.

Código contribuindo

Juntamente com a instalação e a execução de comandos normalmente (veja sobre), existem outros comandos / fluxos de trabalho úteis.

Tudo o que você precisa deve ser instalado com npm install . Usando o VSCODE, você também pode instalar as extensões recomendadas para formatação automática (no arquivo salvar). No entanto, todos os fluxos de trabalho devem ser totalmente utilizáveis ​​via CLI.

content/_static

Todos os arquivos estáticos (geralmente / principalmente imagens) são copiados para o diretório raiz do site com suas informações de diretório mantidas no tato. Portanto, content/_static/images/ virará para out/images e deve ser referenciado no site com justo /images/ .

Comandos úteis

npm run start

A execução npm run start iniciará o site Evengy e o SASSSSSS e recarregará as alterações.

npm test

A execução npm test executará testes de formatação e linha para o projeto. Você pode simplesmente executar npm test se deseja executar todos os testes ( test:js , test:liquid e test:prettier ).

No entanto, você pode executar alternativamente cada teste individualmente.

• npm run test:js testará JavaScript via padrão. Para corrigir automaticamente tudo, você pode executar npm run NPM Run Fix: JS`

• npm run test:liquid testará se o site formar por eleventy --dryrun .

• npm run test:prettier testará a consistência geral do estilo usando o Prettier. Você pode executar npm run fix:prettier como uma maneira fácil de corrigir inconsistências.

npm fix

A execução npm fix fará a formatação automática no código para correspondê -lo com standardjs , .liquidrc e .prettierrc.yaml . Normalmente você gostaria de correr antes de enviar PR!