diff --git a/.github/workflows/deploy-pr.yml b/.github/workflows/deploy-pr.yml new file mode 100644 index 0000000..5769543 --- /dev/null +++ b/.github/workflows/deploy-pr.yml @@ -0,0 +1,80 @@ +name: Deploy PR Preview + +on: + pull_request: + types: [opened, synchronize, reopened] + +permissions: + contents: write + pull-requests: write + +concurrency: + group: "pr-preview-${{ github.event.pull_request.number }}" + cancel-in-progress: true + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + + - name: Install npm dependencies + run: npm install + + - name: Install bower dependencies + run: npx bower install --allow-root + + - name: Build + run: npm run build + + - name: Deploy PR preview + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist + destination_dir: pr/${{ github.event.pull_request.number }} + keep_files: true + + - name: Comment on PR + uses: actions/github-script@v7 + with: + script: | + const prNumber = context.payload.pull_request.number; + 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)`; + + // Check if a preview comment already exists + const comments = await github.rest.issues.listComments({ + owner, + repo, + issue_number: prNumber, + }); + + const existingComment = comments.data.find(c => + c.body.includes('PR Preview deployed') + ); + + if (existingComment) { + await github.rest.issues.updateComment({ + owner, + repo, + comment_id: existingComment.id, + body, + }); + } else { + await github.rest.issues.createComment({ + owner, + repo, + issue_number: prNumber, + body, + }); + } diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..27fbf7d --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,56 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - master + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + + - name: Install npm dependencies + run: npm install + + - name: Install bower dependencies + run: npx bower install --allow-root + + - name: Build + run: npm run build + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: './dist' + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md index 519a903..f82ef52 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,50 @@ -# easeljs-backbone -GUI engine combining easeljs and backbonejs. Developed to be used with flash cc html5 output, but can be used with any easeljs content. +# easelbone -Example available at +A GUI engine combining [EaselJS](https://createjs.com/easeljs) and [Backbone.js](https://backbonejs.org/). Originally developed for use with Flash CC HTML5 output, but can be used with any EaselJS content. -* Control elements: -http://dev.catlab.eu/easelbone/examples/controls.html +## Features +- Navigatable views with keyboard and mouse support +- UI controls: sliders, checkboxes, selectboxes, and buttons +- Scrollable containers +- Text rendering with auto-sizing +- Alpha mask support +- Built on top of AMD modules (RequireJS) -* Scrollable areas: -http://dev.catlab.eu/easelbone/examples/scroll.html +## Installation +```bash +npm install easelbone +``` -* Big Text: -http://dev.catlab.eu/easelbone/examples/bigtext.html \ No newline at end of file +Or with Bower: +```bash +bower install easelbone +``` + +## Examples + +Live examples are hosted on GitHub Pages: + +- [Controls](https://catlabinteractive.github.io/easelbone/examples/controls.html) — Sliders, checkboxes, selectboxes, and buttons +- [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 + +Pull request previews are automatically deployed to `https://catlabinteractive.github.io/easelbone/pr//examples/`. + +## Development + +```bash +# Install dependencies +npm install +npx bower install + +# Build +npm run build + +# Watch for changes +npx grunt watch +``` + +## License + +[MIT](LICENSE) \ No newline at end of file