Skip to main content

Development Setup

Contributing to OpenKeyNav is a great way to help improve the project and collaborate with the community. This guide will walk you through setting up a development environment for OpenKeyNav.

Prerequisites​

Before you begin, make sure you have the following software installed:

  • Node.js: Download and install from nodejs.org
  • npm: Comes with Node.js. Verify installation by running npm -v in your terminal.

Step 1: Fork the Repository​

Fork the OpenKeyNav repository on GitHub to your own account.

Step 2: Clone the Repository​

Clone your forked repository to your local machine:

git clone https://github.com/YOUR_GITHUB_USERNAME/OpenKeyNav.git
cd OpenKeyNav

Step 3: Create a New Branch​

Create a new branch for your feature or bugfix:

git checkout -b my-feature-branch

Step 4: Install Dependencies​

Install the required dependencies using npm:

npm install

Step 5: Build the Project​

Build the project to generate the necessary files:

npm run build

This command runs Babel to transpile the source code from src to dist and then uses Terser to minify the JavaScript file.

Step 6: Test Your Changes​

You can test your changes by including the outputted files in a webpage. Here's how to do it:

  1. Include the Built Files in an HTML File
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test OpenKeyNav</title>
    <script src="dist/openkeynav.min.js"></script>
</head>
<body>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const openKeyNav = new OpenKeyNav();
            openKeyNav.init();
        });
    </script>
</body>
</html>
  1. Open the HTML File in a Browser

Open the HTML file in a web browser to see OpenKeyNav in action with your changes.

Summary​

By following these steps, you can set up a development environment for OpenKeyNav and start contributing to the project. If you have any questions or need further assistance, feel free to reach out to the community. We appreciate your contributions and look forward to collaborating with you!