Skip to content

Add index page and include all example scripts in README and workflows #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daedeloth merged 2 commits into from
Feb 10, 2026
Merged

Add index page and include all example scripts in README and workflows #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a34477
Initial plan
Copilot Feb 10, 2026
72f442c
Add index page, update README and workflows with all examples
Copilot Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/deploy-pr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ jobs:
const owner = context.repo.owner;
const repo = context.repo.repo;
const previewUrl = `https://${owner.toLowerCase()}.github.io/${repo}/pr/${prNumber}/examples/`;
const body = `📦 PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)`;
const body = `📦 PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)\n- [Background & Fill](${previewUrl}background.html)\n- [BigText](${previewUrl}bigtext.html)\n- [Emoji Text](${previewUrl}emoji.html)`;

// Check if a preview comment already exists
const comments = await github.rest.issues.listComments({
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ dist/scripts/vendor/
.idea
node_modules/
dist/scripts/main.js
dist/examples
dist/examples
dist/index.html
7 changes: 7 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,13 @@ module.exports = function (grunt) {
'cwd': './app/',
'src': 'scripts/vendor/**/*',
'dest': 'dist/'
},

{
'expand': true,
'cwd': './app/',
'src': 'index.html',
'dest': 'dist/'
}
]
}
Expand Down
12 changes: 10 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,16 @@ A GUI engine combining [EaselJS](https://createjs.com/easeljs) and [Backbone.js]
## Features
- Navigatable views with keyboard and mouse support
- UI controls: sliders, checkboxes, selectboxes, and buttons
- Scrollable containers
- Text rendering with auto-sizing
- Scrollable containers with list and float layouts
- Text rendering with auto-sizing and emoji support
- Alpha mask support
- Asset loading and management
- Built on top of AMD modules (RequireJS)

## Documentation

Visit the [documentation and examples page](https://catlabinteractive.github.io/easelbone/) for a full overview of the library and live demos.

## Installation
```bash
npm install easelbone
Expand All @@ -28,6 +33,9 @@ Live examples are hosted on GitHub Pages:
- [Scrollable Areas](https://catlabinteractive.github.io/easelbone/examples/scroll.html) — Scrollable container demo
- [Float Layout](https://catlabinteractive.github.io/easelbone/examples/float.html) — Float layout demo
- [Alpha Mask](https://catlabinteractive.github.io/easelbone/examples/alphamask.html) — Alpha mask demo
- [Background & Fill](https://catlabinteractive.github.io/easelbone/examples/background.html) — Background fill and placeholder demo
- [BigText](https://catlabinteractive.github.io/easelbone/examples/bigtext.html) — Auto-sizing text rendering demo
- [Emoji Text](https://catlabinteractive.github.io/easelbone/examples/emoji.html) — Text rendering with emoji support

Pull request previews are automatically deployed to `https://catlabinteractive.github.io/easelbone/pr/<PR_NUMBER>/examples/`.

Expand Down
301 changes: 301 additions & 0 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EaselBone — GUI Engine for EaselJS + Backbone.js</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}

header {
background: #2c3e50;
color: #ecf0f1;
padding: 2rem 1rem;
text-align: center;
}

header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

header p {
font-size: 1.1rem;
color: #bdc3c7;
max-width: 600px;
margin: 0 auto;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1rem;
}

h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c3e50;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 0.5rem;
}

.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}

.feature {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 1.25rem;
}

.feature h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #2c3e50;
}

.feature p {
font-size: 0.9rem;
color: #666;
}

.examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}

.example-card {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 1.25rem;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, border-color 0.2s;
}

.example-card:hover {
border-color: #3498db;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
}

.example-card h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #3498db;
}

.example-card p {
font-size: 0.9rem;
color: #666;
}

pre {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
margin-bottom: 1rem;
font-size: 0.9rem;
}

code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.inline-code {
background: #e9ecef;
padding: 0.15rem 0.4rem;
border-radius: 3px;
font-size: 0.85rem;
}

section {
margin-bottom: 2.5rem;
}

footer {
text-align: center;
padding: 1.5rem 1rem;
color: #999;
font-size: 0.85rem;
border-top: 1px solid #dee2e6;
}

footer a {
color: #3498db;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

.install-section p {
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<header>
<h1>EaselBone</h1>
<p>A GUI engine combining EaselJS and Backbone.js for building interactive canvas-based user interfaces.</p>
</header>

<div class="container">
<section>
<h2>Features</h2>
<div class="features">
<div class="feature">
<h3>Navigatable Views</h3>
<p>Keyboard and mouse navigatable views built on Backbone.js, with support for multiple input users.</p>
</div>
<div class="feature">
<h3>UI Controls</h3>
<p>Sliders, checkboxes, selectboxes, and buttons with full keyboard navigation support.</p>
</div>
<div class="feature">
<h3>Scrollable Containers</h3>
<p>Scroll areas with list and float layout support, including programmatic scrolling and focus management.</p>
</div>
<div class="feature">
<h3>Text Rendering</h3>
<p>BigText auto-sizing text rendering with custom font support and emoji rendering via EmojiText.</p>
</div>
<div class="feature">
<h3>Alpha Masks</h3>
<p>Alpha mask support for creating complex visual effects on canvas elements.</p>
</div>
<div class="feature">
<h3>Asset Loading</h3>
<p>Built-in asset loader for managing spritesheets, images, and other resources with AMD/RequireJS modules.</p>
</div>
</div>
</section>

<section>
<h2>Live Examples</h2>
<div class="examples">
<a class="example-card" href="examples/controls.html">
<h3>Controls</h3>
<p>Interactive sliders, checkboxes, selectboxes, and buttons with keyboard navigation.</p>
</a>
<a class="example-card" href="examples/scroll.html">
<h3>Scrollable Areas</h3>
<p>Scrollable container with a list of items and programmatic focus scrolling.</p>
</a>
<a class="example-card" href="examples/float.html">
<h3>Float Layout</h3>
<p>Float container layout for arranging elements in a flexible grid within a scroll area.</p>
</a>
<a class="example-card" href="examples/alphamask.html">
<h3>Alpha Mask</h3>
<p>Demonstrates alpha mask capabilities for creating visual effects on canvas.</p>
</a>
<a class="example-card" href="examples/background.html">
<h3>Background &amp; Fill</h3>
<p>Background fill and placeholder display objects for image rendering in containers.</p>
</a>
<a class="example-card" href="examples/bigtext.html">
<h3>BigText</h3>
<p>Auto-sizing text rendering with custom fonts that fills available container space.</p>
</a>
<a class="example-card" href="examples/emoji.html">
<h3>Emoji Text</h3>
<p>Text rendering with inline emoji support using OpenMoji font rendering.</p>
</a>
</div>
</section>

<section class="install-section">
<h2>Installation</h2>
<p>Install via npm:</p>
<pre><code>npm install easelbone</code></pre>
<p>Or with Bower:</p>
<pre><code>bower install easelbone</code></pre>
</section>

<section>
<h2>Quick Start</h2>
<pre><code>require(['easelbone'], function (easelbone) {
// Create a root view attached to a DOM container
var rootView = new easelbone.Views.Root({
container: document.getElementById('container')
});

// Create a navigatable view
var MyView = easelbone.Views.Navigatable.extend({
initialize: function () {
this.initializeNavigatable({ orientation: 'vertical' });
},
render: function () {
// Add your content here
}
});

var view = new MyView();
rootView.setView(view);
});</code></pre>
</section>

<section>
<h2>API Overview</h2>
<div class="features">
<div class="feature">
<h3>Views</h3>
<p><code class="inline-code">Views.Root</code> — Root stage container<br>
<code class="inline-code">Views.Navigatable</code> — Keyboard/mouse navigatable view<br>
<code class="inline-code">Views.Layer</code> — View layering<br>
<code class="inline-code">Views.LoadingView</code> — Loading state view</p>
</div>
<div class="feature">
<h3>Controls</h3>
<p><code class="inline-code">Controls.Slider</code> — Range slider<br>
<code class="inline-code">Controls.Checkbox</code> — Toggle checkbox<br>
<code class="inline-code">Controls.Button</code> — Clickable button<br>
<code class="inline-code">Controls.Selectbox</code> — Dropdown select<br>
<code class="inline-code">Controls.ScrollArea</code> — Scrollable area<br>
<code class="inline-code">Controls.List</code> — List container<br>
<code class="inline-code">Controls.FloatContainer</code> — Float layout</p>
</div>
<div class="feature">
<h3>Display Objects</h3>
<p><code class="inline-code">EaselJS.BigText</code> — Auto-sizing text<br>
<code class="inline-code">EaselJS.EmojiText</code> — Emoji-enabled text<br>
<code class="inline-code">EaselJS.Placeholder</code> — Placeholder container<br>
<code class="inline-code">EaselJS.Fill</code> — Fill display object<br>
<code class="inline-code">EaselJS.Background</code> — Background renderer</p>
</div>
</div>
</section>
</div>

<footer>
<p>
<a href="https://github.com/CatLabInteractive/easelbone">GitHub Repository</a> ·
Built by <a href="https://github.com/CatLabInteractive">CatLab Interactive</a> ·
Licensed under MIT
</p>
</footer>
</body>
</html>