Skip to content
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

feat: Unit tests + compatibility enhancements #1

Merged
merged 3 commits into from
Feb 15, 2025
Merged

feat: Unit tests + compatibility enhancements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7b508a
Added basic unit tests and github action to automate test runs
rbonestell Feb 14, 2025
7352df8
Added unit tests, discovered and fixed bugs for dynamically added ele…
rbonestell Feb 15, 2025
e6d1b0c
Bumped version 0.2.0
rbonestell Feb 15, 2025
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
3 changes: 3 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}
23 changes: 23 additions & 0 deletions .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
name: Test 🧪
on:
workflow_dispatch:
pull_request:
push:
branches:
- main
paths:
- 'src/**'
- '.github/workflows/test.yml'
- 'package.json'
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '22.x'
cache: 'npm'
- run: npm install
- name: Run Unit Tests 🧪
run: npm run test
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"jest.runMode": "on-demand"
}
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Retroify.js ![NPM Version](https://img.shields.io/npm/v/retroify.js) ![License](https://img.shields.io/github/license/rbonestell/retroify.js)
# Retroify.js [![NPM Version](https://img.shields.io/npm/v/retroify.js?logo=npm&logoColor=white)](https://www.npmjs.com/package/retroify.js) [![License](https://img.shields.io/github/license/rbonestell/retroify.js)](https://github.com/rbonestell/retroify.js/blob/main/LICENSE) [![GitHub Copilot](https://img.shields.io/badge/GitHub-Copilot-000?logo=githubcopilot&logoSize=auto)](#)


Add instant retro 8-bit styling to any website with a single line of JavaScript. Retroify.js transforms your modern web elements into a nostalgic, pixelelated interface inspired by classic video games.

Expand Down
96 changes: 91 additions & 5 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,23 @@
<style>
.container { padding: 2rem; }
.demo-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
.btn.github { background: #333333; color: #ffffff; }
.btn.github { background: #333333; color: #ffffff; white-space: nowrap; }
.btn.github:hover { background: #222222; color: #ffffff; }
.btn.github:active { background: #111111; color: #ffffff; }
</style>
</head>
<body>
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: center">
<h1>Retroify.js Demo</h1>
<span><a href="https://github.com/rbonestell/retroify.js" class="btn github">View on GitHub <i class="fab fa-github"></i></a></span>
<div>
<h1>Retroify.js Demo</h1>
<p>This demo shows how Retroify.js works with various HTML elements and Bootstrap components.</p>
</div>
<div>
<a href="https://github.com/rbonestell/retroify.js" class="btn github">View on GitHub <i class="fab fa-github"></i></a>
</div>
</div>
<p>This demo shows how Retroify.js works with various HTML elements and Bootstrap components.</p>

<button onclick="retroify.toggle()" class="btn btn-primary" aria-pressed="false">Toggle Retroification</button>
<button onclick="retroify.toggleScanlines()" class="btn btn-secondary" aria-pressed="false">Toggle Scanlines</button>

Expand Down Expand Up @@ -61,7 +66,7 @@ <h2>Bootstrap Cards</h2>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h4 class="card-title">Card Title</h4>
<p class="card-text">Some quick example text for the card.</p>
<button class="btn btn-primary">Go somewhere</button>
</div>
Expand All @@ -70,6 +75,18 @@ <h5 class="card-title">Card Title</h5>
</div>
</div>

<div class="demo-section">
<h2>Dynamic Controls</h2>
<p>This section demonstrates how Retroify.js handles dynamically added and removed elements.</p>
<div class="mb-3">
<button class="btn btn-success" onclick="addElement()">Add Element</button>
<button class="btn btn-danger" onclick="removeElement()">Remove Last Element</button>
</div>
<div id="dynamic-elements" class="mt-3">
<!-- Dynamic elements will be added here -->
</div>
</div>

<div class="demo-section">
<h2>Tables</h2>
<table class="table">
Expand Down Expand Up @@ -115,6 +132,47 @@ <h2>Links</h2>
</p>
<p>Try hovering over these links to see the 8-bit hover effect!</p>
</div>

<div class="demo-section">
<h2>Font Awesome Icons</h2>
<p>This section demonstrates how Retroify.js works with Font Awesome icons in various contexts.</p>

<div class="mb-3">
<button class="btn btn-primary">
<i class="fas fa-save"></i> Save Changes
</button>
<button class="btn btn-danger">
<i class="fas fa-trash"></i> Delete Item
</button>
</div>

<div class="mb-3">
<label class="form-label">
<i class="fas fa-user"></i> Username
</label>
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-at"></i>
</span>
<input type="text" class="form-control" placeholder="Enter username">
</div>
</div>

<div class="alert alert-info">
<i class="fas fa-info-circle"></i>
This is an informational message with an icon
</div>

<div class="mb-3">
<span class="badge bg-success">
<i class="fas fa-check"></i> Complete
</span>
<span class="badge bg-warning text-dark">
<i class="fas fa-clock"></i> Pending
</span>
</div>
</div>

</div>
<script>
// Event listeners
Expand All @@ -124,6 +182,34 @@ <h2>Links</h2>
console.log(`Retroify.js ${event} to:`, e.detail.target);
});
});

// Dynamic element handlers
let elementCounter = 0;

function addElement() {
const container = document.getElementById('dynamic-elements');
const element = document.createElement('div');
element.className = 'mb-2';
elementCounter++;
element.innerHTML = `
<div class="card">
<div class="card-body">
<h4 class="card-title">Dynamic Element ${elementCounter}</h4>
<p class="card-text">This element was added dynamically.</p>
<button class="btn btn-primary">Dynamic Button</button>
</div>
</div>
`;
container.appendChild(element);
}

function removeElement() {
const container = document.getElementById('dynamic-elements');
if (container.lastChild) {
container.removeChild(container.lastChild);
elementCounter--;
}
}
</script>
</body>
</html>
Loading
Loading