flixel | addons | ui | demos | tools | templates | docs | haxeflixel.com
This is the source of haxeflixel.com. It uses 11ty for static site generation, and Bootstrap 5 for styling.
You must have NPM / nodejs to compile the site, pull requests are welcome.
-
Install NodeJS
-
Clone and run the site
git clone https://github.com/HaxeFlixel/haxeflixel.com.git cd haxeflixel.com
To install dependencies and build the site, run the following commands:
# 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
-
Start hacking away by modifying the
content/
,content/_layouts/
, andcontent/_scss/
directories. The site will live reload as you save the files you modify.
See Contributing Code for more development information.
If you want to contribute and improve our website please work on a fork or feature branch. Only working and tested changes will be merged into master. Use the issue system for developer support and approval on your changes.
Documentation for /documentation
pulled automatically from the flixel-docs repository (via a package.json preinstall
script that runs scripts/install-flixel-docs-repo.js).
Please review the readme in the flixel-docs repo for more info on updating the haxeflixel.com/documentation pages.
-
Create a
.md
file in/content/demos
following this example:``` --- 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
points to the subdirectory of flixel-demos that contains the demo.
width
and height
default to 640 and 480 and should be omitted in that case.
- Add a screenshot of the demo named
Demo-Name.png
to/static/demos/images
.
- Create a
.md
file in/content/showcase
following this example:
---
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.
- Add a screenshot of the showcase using the same title used in the
*.md
file, e.g.Go! Go! PogoGirl.png
to/static/images/showcase
. They are resized and cropped to 500x260, so it's best to use the same ratio.
Showcases that are not officially released yet are only accepted in special cases. The same is true for games from game jams.
Along with installing and running commands normally (see About), there are other useful commands / workflows.
Everything you need should be installed with npm install
. Using VSCode you can also install the recommended extensions for automatic formatting (on file save). However all workflows should be entirely usable via CLI.
All static files (usually / mostly images) get copied to the root directory of the site with their directory info kept in-tact. So content/_static/images/
will turn to out/images
, and should be referenced from the site with just /images/
.
Running npm run start
will start up the eleventy site and the sass .scss, and will reload on changes.
Running npm test
will run formatting and linting tests for the project. You can simply run npm test
if you want to run all tests (test:js
, test:liquid
andtest:prettier
).
However you can alternatively run each test individually.
-
npm run test:js
will test javascript via standard. To automatically fix all, you can runnpm run
npm run fix:js` -
npm run test:liquid
will test if the site builds viaeleventy --dryrun
. -
npm run test:prettier
will test general styling consistency using prettier. You can runnpm run fix:prettier
as an easy way to fix inconsistencies.
Running npm fix
will do automatic formatting to the code to match it with standardjs
, .liquidrc
, and .prettierrc.yaml
. Usually you'd want to run before submitting PR!