demo pages in progress

Author: ninjamuffin99

.gitignore

@@ -7,3 +7,4 @@ npm-debug.log*
 out
 debug.log
 package-lock.json
+.DS_Store

11ty-source/_layouts/demo.liquid

@@ -0,0 +1,98 @@
+---
+layout: default.liquid
+---
+
+<br>
+<br>
+
+<div class="demo-container">
+{% if targets == "html5" %}
+    
+    {% unless height %}
+        {% assign height = 480 %}
+    {% endunless %}
+    
+    {% unless width %}
+        {% assign width = 640 %}
+    {% endunless %}
+    
+    <iframe class="html5-demo" src="https://demos.haxeflixel.com/html5/{{title}}"
+        width="{{width}}"
+        height="{{height}}"
+    ></iframe>
+{% endif %}
+
+{% if targets == "flash" %}
+    <div class="flash-demo">
+        <div id="demoSWF">
+        </div>
+    </div>
+{% endif  %}
+
+</div>
+
+	<div class="container-main-content">
+		<div class="demo-content">
+
+            <br>
+
+			<h1 class="title">{{ title }}</h1>
+
+			<a href="https://github.com/HaxeFlixel/flixel-demos/tree/dev/{{source}}/source" target="_blank" style="float: right;">
+			    <span class="glyphicon glyphicon-book"></span>
+			    source code
+			</a>
+
+			{{ content }}
+
+			<hr>
+
+			<ul class="pager">
+                {% assign prevDemo = collections.demo-item | getPreviousCollectionItem %}
+				{% if prevDemo %}
+				<li class="previous">
+					<a href="{{prevDemo.url}}" title="Previous"> 
+						{% comment %} <img src="<%= @getThumbnail("/images/demos/#{@getPagerPrevious('demos').attributes.title}.png", "zoomcrop", { w: 70, h:70 }) %>" alt="Previous"> {% endcomment %}
+					</a>
+				</li>
+				{% endif  %}
+
+                {% comment %} this is to loop back to the last demo, if you're on the first one {% endcomment %}
+				{% unless prevDemo %}
+				<li class="previous">
+					<a href="<%= @getLast('demos').attributes.url %>" title="Previous"> 
+						{% comment %} <img src="<%= @getThumbnail("/images/demos/#{@getLast('demos').attributes.title}.png", "zoomcrop", { w: 70, h:70 }) %>" alt="Previous"> {% endcomment %}
+					</a>
+				</li>
+				{% endunless  %}
+
+                {% assign nextDemo = collections.demo-item | getNextCollectionItem %}
+				{% if nextDemo %}
+				<li class="next">
+					<a href="{{ nextDemo.url }}" title="Next">
+						{% comment %} <img src="<%= @getThumbnail("/images/demos/#{@getPagerNext('demos').attributes.title}.png", "zoomcrop", {w: 70, h:70 }) %>" alt="Next">
+						> {% endcomment %}
+					</a>
+				</li>
+				{% endif  %}
+
+                {% comment %} gets the first demo, if the "next" one doesn't exist {% endcomment %}
+				{% unless nextDemo %}
+				<li class="next">
+					<a href="{{ nextDemo.url }}" title="Next">
+						{% comment %} <img src="<%= @getThumbnail("/images/demos/#{@getFirst('demos').attributes.title}.png", "zoomcrop", { w:70, h:70 }) %>" alt="Next">
+						> {% endcomment %}
+					</a>
+				</li>
+				{% endunless  %}
+			</ul>
+
+		</div>
+	</div>
+
+</div>
+
+
+{% if targets == "flash" %}
+<script type="text/javascript" src="/vendor/swfobject/swfobject/swfobject.js"></script>
+{% endif  %}

11ty-source/_layouts/partials/head.liquid

@@ -6,7 +6,7 @@
 
 	<title>{{ title }}</title> 
 
-	<meta name="description" content="<%= @description %>"/>
+	<meta name="description" content="HaxeFlixel is a 2D Game Engine that lets you create cross-platform games easier with free, open source technology!"/>
 	<meta name="keywords" content="<%= @keywords %>"/>
 	<meta name="author" content="<%= @author %>"/>
 	<meta name="viewport" content="width=device-width"/>

src/documents/demos/BSPMapGen.html.md 11ty-source/demos/BSPMapGen.md

@@ -2,7 +2,7 @@
 title: "BSPMapGen"
 layout: demo
 source: "Other/BSPMapGen"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 HaxeFlixel port of [Timothy Hely](https://github.com/tutsplus/Using-BSP-Trees-to-Generate-Game-Maps)'s "Using-BSP-Trees-to-Generate-Game-Maps".

src/documents/demos/BlendModeShaders.md 11ty-source/demos/BlendModeShaders.md

@@ -4,7 +4,7 @@ layout: demo
 width: 640
 height: 480
 source: "Effects/BlendModeShaders"
-targets: ['html5']
+targets: html5
 ---
 
 Example of how some blend modes can be replicated using GLSL shaders.

src/documents/demos/Breakout.html.md 11ty-source/demos/Breakout.md

@@ -2,7 +2,7 @@
 title: "Breakout"
 layout: demo
 source: "Arcade/Breakout"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A very simple, but solid Breakout clone originally created by [Photonstorm](http://www.photonstorm.com/) (Richard Davey) in 20 minutes.

src/documents/demos/Calculator.html.md 11ty-source/demos/Calculator.md

@@ -2,7 +2,7 @@
 title: "Calculator"
 layout: demo
 source: "Other/Calculator"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 An interactive calculator implemented using [hscript](https://github.com/HaxeFoundation/hscript).

src/documents/demos/CollisionAndGrouping.html.md 11ty-source/demos/CollisionAndGrouping.md

@@ -4,7 +4,7 @@ layout: demo
 width: 400
 height: 300
 source: "Features/CollisionAndGrouping"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A port of the [Collision and Grouping demo](https://github.com/TestSubject06/CollisionsDemo) by [Zachary Tarvit](https://twitter.com/TestSubject06) featured on [flixel.org/features](http://flixel.org/features.html).

src/documents/demos/Colors.html.md 11ty-source/demos/Colors.md

@@ -2,7 +2,7 @@
 title: "Colors"
 layout: demo
 source: "Features/Colors"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A showcase of the various `FlxColor` features.

src/documents/demos/Cursor.html.md 11ty-source/demos/Cursor.md

@@ -2,7 +2,7 @@
 title: "Cursor"
 layout: demo
 source: "UserInterface/Cursor"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A demo showcasing keyboard navigation with a [flixel-ui](http://github.com/HaxeFlixel/flixel-ui) instance. You can navigate

src/documents/demos/DynamicShadows.html.md 11ty-source/demos/DynamicShadows.md

@@ -4,5 +4,5 @@ layout: demo
 width: 640
 height: 320
 source: "Effects/DynamicShadows"
-targets: ['flash', 'html5']
+targets: "html5"
 ---

src/documents/demos/EZPlatformer.html.md 11ty-source/demos/EZPlatformer.md

@@ -2,7 +2,7 @@
 title: "EZPlatformer"
 layout: demo
 source: "Platformers/EZPlatformer"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 EZPlatformer is a really simple platformer which was originally created by [Adam "Atomic" Saltsman](https://twitter.com/adamatomic) as a tutorial for creating platformers with flixel.

src/documents/demos/FileBrowse.html.md 11ty-source/demos/FileBrowse.md

@@ -2,7 +2,7 @@
 title: "FileBrowse"
 layout: demo
 source: "UserInterface/FileBrowse"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 Demonstrates how to use file browsing on both Flash and Native (CPP/Neko) targets. The Flash target uses FileReference.browse(), while the Native target uses the systools.Dialogs.openFile(). The Native targets depend on the systools library, available on haxelibs.

src/documents/demos/Filters.html.md 11ty-source/demos/Filters.md

@@ -3,5 +3,5 @@ title: "Filters"
 layout: demo
 source: "Effects/Filters"
 tags: ['homepage_demo']
-targets: ['flash', 'html5']
+targets: "html5"
 ---

src/documents/demos/Flappybalt.html.md 11ty-source/demos/Flappybalt.md

@@ -5,7 +5,7 @@ width: 480
 height: 720
 source: "Arcade/Flappybalt"
 tags: ['homepage_demo']
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 Controls: Spacebar

src/documents/demos/FlipRotationAnimationTiles.html.md 11ty-source/demos/FlipRotationAnimationTiles.md

@@ -2,7 +2,7 @@
 title: "FlipRotationAnimationTiles"
 layout: demo
 source: "Platformers/FlipRotationAnimationTiles"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 This demo showcases how to use [FlxTilemapExt](https://github.com/HaxeFlixel/flixel-addons/blob/master/flixel/addons/tile/FlxTilemapExt.hx) and [FlxTileSpecial](https://github.com/HaxeFlixel/flixel-addons/blob/master/flixel/addons/tile/FlxTileSpecial.hx) to flip, rotate and animate tiles.

src/documents/demos/Flixius.html.md 11ty-source/demos/Flixius.md

@@ -4,7 +4,7 @@ layout: demo
 width: 1280
 height: 720
 source: "Arcade/Flixius"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A side-scrolling shooter. Made by [@SeiferTim](https://github.com/seifertim) during a 30-min presentation on how easy it is to make prototypes in HaxeFlixel.

src/documents/demos/FloodFill.html.md 11ty-source/demos/FloodFill.md

@@ -2,5 +2,5 @@
 title: "FloodFill"
 layout: demo
 source: "Effects/FloodFill"
-targets: ['flash', 'html5']
+targets: "html5"
 ---

src/documents/demos/FlxAction.html.md 11ty-source/demos/FlxAction.md

@@ -4,7 +4,7 @@ layout: demo
 width: 672
 height: 480
 source: "Input/FlxAction"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 Showcases the `flixel.input.actions` API added in Flixel 4.6.0.

src/documents/demos/FlxAsepriteUtil.html.md 11ty-source/demos/FlxAsepriteUtil.md

@@ -4,7 +4,7 @@ layout: demo
 width: 640
 height: 480
 source: "Graphics/FlxAsepriteUtils"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 Showcases loading of an [Aseprite](https://www.aseprite.org/) [Sprite Sheet](https://aseprite.com/docs/sprite-sheet/#texture-atlases tools) using [flixel.graphics.FlxAsepriteUtil](https://api.haxeflixel.com/flixel/graphics/FlxAsepriteUtil.html) API added in Flixel 5.4.0. This demo uses the [loadAseAtlasAndTagsByIndex](https://api.haxeflixel.com/flixel/graphics/FlxAsepriteUtil.html#addAseAtlasTagsByIndex) method to create animations.

src/documents/demos/FlxAsyncLoop.html.md 11ty-source/demos/FlxAsyncLoop.md

@@ -2,7 +2,7 @@
 title: "FlxAsyncLoop"
 layout: demo
 source: "Other/FlxAsyncLoop"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 Demonstration for the `FlxAsyncLoop` class, created by [SeiferTim](http://tims-world.com/) (Tim I Hely).
 This utility allows you to setup a loop in a way that still allows `update()` and `draw()` to be called so you can show progress bars or whatever, instead of the game freezing and locking up until the loop has completed.

src/documents/demos/FlxAtlas.html.md 11ty-source/demos/FlxAtlas.md

@@ -2,7 +2,7 @@
 title: "FlxAtlas"
 layout: demo
 source: "Other/FlxAtlas"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 An example of `flixel.graphics.atlas.FlxAtlas`.

src/documents/demos/FlxBitmapText.html.md 11ty-source/demos/FlxBitmapText.md

@@ -4,5 +4,5 @@ layout: demo
 width: 800
 height: 600
 source: "UserInterface/FlxBitmapText"
-targets: ['flash', 'html5']
+targets: "html5"
 ---

src/documents/demos/FlxBunnymark.html.md 11ty-source/demos/FlxBunnymark.md

@@ -2,7 +2,7 @@
 title: "FlxBunnyMark"
 layout: demo
 source: "Performance/FlxBunnyMark"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 This is a HaxeFlixel port of the BunnyMark Benchmark. 

src/documents/demos/FlxCamera.html.md 11ty-source/demos/FlxCamera.md

@@ -2,7 +2,7 @@
 title: "FlxCamera"
 layout: demo
 source: "Features/FlxCamera"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 This demo showcases different flixel camera features like zoom, lerp, lead and follow styles.

src/documents/demos/FlxCaveGenerator.html.md 11ty-source/demos/FlxCaveGenerator.md

@@ -2,7 +2,7 @@
 title: "FlxCaveGenerator"
 layout: demo
 source: "Platformers/FlxCaveGenerator"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A demo showing off the capabilites of [FlxCaveGenerator](https://github.com/HaxeFlixel/flixel-addons/blob/master/flixel/addons/tile/FlxCaveGenerator.hx).

src/documents/demos/FlxClothSprite.html.md 11ty-source/demos/FlxClothSprite.md

@@ -2,7 +2,7 @@
 title: "FlxClothSprite"
 layout: demo
 source: "Effects/FlxClothSprite"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 An example of `flixel.addons.effects.FlxClothSprite`.

src/documents/demos/FlxCollisions.html.md 11ty-source/demos/FlxCollisions.md

@@ -2,7 +2,7 @@
 title: "FlxCollisions"
 layout: demo
 source: "Other/FlxCollisions"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A port of [FlxCollisions ](https://github.com/AdamAtomic/FlxCollisions)created by Adam Atomic, showing off flixel's 2D physics capabilities.

src/documents/demos/FlxEffectSprite.html.md 11ty-source/demos/FlxEffectSprite.md

@@ -2,7 +2,7 @@
 title: "FlxEffectSprite"
 layout: demo
 source: "Effects/FlxEffectSprite"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 An example of the `flixel.addons.effects.chainable` package.

src/documents/demos/FlxFSM.html.md 11ty-source/demos/FlxFSM.md

@@ -2,7 +2,7 @@
 title: "FlxFSM"
 layout: demo
 source: "Features/FlxFSM"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 An example game using the finite state machine implementation in `flixel.addons.util.FlxFSM`.

src/documents/demos/FlxInvaders.html.md 11ty-source/demos/FlxInvaders.md

@@ -2,7 +2,7 @@
 title: "FlxInvaders"
 layout: demo
 source: "Arcade/FlxInvaders"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 A simple invaders game in flixel originally created by [Adam "Atomic" Saltsman](https://twitter.com/ADAMATOMIC). [Link to the original GitHub repo](https://github.com/AdamAtomic/Flx-Invaders). The source code is extremely well documented and thus very hepful for beginners.

src/documents/demos/FlxLightPuzzle.html.md 11ty-source/demos/FlxLightPuzzle.md

@@ -4,5 +4,5 @@ layout: demo
 width: 512
 height: 288
 source: "Arcade/FlxLightPuzzle"
-targets: ['flash', 'html5']
+targets: "html5"
 ---

src/documents/demos/FlxMouseEvent.html.md 11ty-source/demos/FlxMouseEvent.md

@@ -2,7 +2,7 @@
 title: "FlxMouseEvent"
 layout: demo
 source: "Input/FlxMouseEvent"
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 [FlxMouseEvent](https://api.haxeflixel.com/flixel/input/mouse/FlxMouseEvent.html) allows `FlxSprite`s to listen to mouse events like `MouseDown`, `MouseUp`, `MouseOver` and `MouseOut`.

src/documents/demos/FlxNape.html.md 11ty-source/demos/FlxNape.md

@@ -3,7 +3,7 @@ title: "FlxNape"
 layout: demo
 source: "Features/FlxNape"
 tags: ['homepage_demo']
-targets: ['flash', 'html5']
+targets: "html5"
 ---
 
 This demo showcases the integration of the [Nape Physics Engine](https://joecreates.github.io/napephys/) with HaxeFlixel.