From 5ae4650b0f56b8c3a60efe313bc730136e89ede3 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 12:34:30 -0700 Subject: [PATCH 1/8] Adding linting.yml actions workflow --- .github/workflows/demo-hosting.yml | 3 ++- .github/workflows/linting.yml | 38 ++++++++++++++++++++++++++++++ README.md | 1 + 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/linting.yml diff --git a/.github/workflows/demo-hosting.yml b/.github/workflows/demo-hosting.yml index 3c09b16..5b32cd9 100644 --- a/.github/workflows/demo-hosting.yml +++ b/.github/workflows/demo-hosting.yml @@ -1,9 +1,10 @@ +name: Deploy examples directory to demo.kcarlile.com on main branch releases + on: release: types: [published] branches: [main] -name: Deploy examples directory to demo.kcarlile.com on main branch releases jobs: web-deploy: name: Deploy diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml new file mode 100644 index 0000000..dbfb32e --- /dev/null +++ b/.github/workflows/linting.yml @@ -0,0 +1,38 @@ +name: Linting + +on: # yamllint disable-line rule:truthy + push: null + pull_request: null + +permissions: { } + +jobs: + build: + name: Linting codebase + runs-on: ubuntu-latest + + permissions: + contents: read + packages: read + # To report GitHub Actions status checks + statuses: write + + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + # super-linter needs the full git history to get the + # list of files that changed across commits + fetch-depth: 0 + + - name: Super-linter + uses: super-linter/super-linter/slim@v6.5.1 + env: + # To report GitHub Actions status checks + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + VALIDATE_JAVASCRIPT_ES: true + VALIDATE_HTML: true + VALIDATE_CSS: true + VALIDATE_MARKDOWN: true + IGNORE_GITIGNORED_FILES: true + DEFAULT_BRANCH: main diff --git a/README.md b/README.md index f8f417d..820542d 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ [![GitHub Release](https://img.shields.io/github/v/release/KCarlile/guitar-diagrams-js?include_prereleases&logo=github&label=Latest%20version)](https://github.com/KCarlile/guitar-diagrams-js/releases) [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/KCarlile/guitar-diagrams-js/release-package.yml?logo=github&label=NPM%20build)](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml) +[![Super-Linter](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/linting.yml/badge.svg)](https://github.com/marketplace/actions/super-linter) [![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://ecma-international.org/publications-and-standards/standards/ecma-262/) [![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)](https://www.w3.org/standards/history/html52/) From 833619c44e532d9480cdaf56416bfc04f34a4b91 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 12:43:00 -0700 Subject: [PATCH 2/8] Adding CSS linting config --- .config/linters/stylelint.config.js | 6 ++++++ .github/workflows/linting.yml | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 .config/linters/stylelint.config.js diff --git a/.config/linters/stylelint.config.js b/.config/linters/stylelint.config.js new file mode 100644 index 0000000..6a84158 --- /dev/null +++ b/.config/linters/stylelint.config.js @@ -0,0 +1,6 @@ +/** @type {import('stylelint').Config} */ +export default { + rules: { + "block-no-empty": true + } +}; diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml index dbfb32e..460adfb 100644 --- a/.github/workflows/linting.yml +++ b/.github/workflows/linting.yml @@ -30,6 +30,8 @@ jobs: env: # To report GitHub Actions status checks GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + LINTER_RULES_PATH: .config/linters/ + CSS_FILE_NAME: stylelint.config.js VALIDATE_JAVASCRIPT_ES: true VALIDATE_HTML: true VALIDATE_CSS: true From 0bce3e1510bf469b3bda190066421963a0220c99 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 12:46:10 -0700 Subject: [PATCH 3/8] Fixing CSS linting config --- .config/linters/stylelint.config.js | 6 ------ .config/linters/stylelint.config.json | 5 +++++ .github/workflows/linting.yml | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) delete mode 100644 .config/linters/stylelint.config.js create mode 100644 .config/linters/stylelint.config.json diff --git a/.config/linters/stylelint.config.js b/.config/linters/stylelint.config.js deleted file mode 100644 index 6a84158..0000000 --- a/.config/linters/stylelint.config.js +++ /dev/null @@ -1,6 +0,0 @@ -/** @type {import('stylelint').Config} */ -export default { - rules: { - "block-no-empty": true - } -}; diff --git a/.config/linters/stylelint.config.json b/.config/linters/stylelint.config.json new file mode 100644 index 0000000..576f38c --- /dev/null +++ b/.config/linters/stylelint.config.json @@ -0,0 +1,5 @@ +{ + "rules": { + "block-no-empty": true + } +} \ No newline at end of file diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml index 460adfb..797a9b8 100644 --- a/.github/workflows/linting.yml +++ b/.github/workflows/linting.yml @@ -31,7 +31,7 @@ jobs: # To report GitHub Actions status checks GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} LINTER_RULES_PATH: .config/linters/ - CSS_FILE_NAME: stylelint.config.js + CSS_FILE_NAME: stylelint.config.json VALIDATE_JAVASCRIPT_ES: true VALIDATE_HTML: true VALIDATE_CSS: true From b2e8aa4a42fe34523afeecad9904c208a451ad19 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 12:55:43 -0700 Subject: [PATCH 4/8] Fixing HTML id value casing --- docs/examples/js/testing.js | 2 +- docs/examples/testing.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/examples/js/testing.js b/docs/examples/js/testing.js index a48a98c..3a9190d 100644 --- a/docs/examples/js/testing.js +++ b/docs/examples/js/testing.js @@ -18,7 +18,7 @@ gdjTesting.config.orientHorizontally = true; //gdj4.config.fretStartingNumber = 3; gdjTesting.config.downloadImageEnabled = true; //gdj4.config.scaleFactor = .5; -gdjTesting.addCanvas('diagramTesting'); +gdjTesting.addCanvas('diagram-testing'); gdjTesting.drawNeck(); gdjTesting.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); gdjTesting.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); diff --git a/docs/examples/testing.html b/docs/examples/testing.html index 46cf996..6e5701e 100644 --- a/docs/examples/testing.html +++ b/docs/examples/testing.html @@ -16,7 +16,7 @@

Guitar Diagrams JS - Testing

Testing

-
+
From f80605d9de962d2b8f593bdaa8b84de8cabf2825 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 12:59:36 -0700 Subject: [PATCH 5/8] Fixing markdown linting issues --- README.md | 2 +- docs/CONTRIBUTING.md | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 820542d..187d1df 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ For full details, see the Node JS packages released by this project here: Date: Thu, 30 May 2024 13:21:08 -0700 Subject: [PATCH 6/8] Updating documentation and code for HTML standards, adding image download example --- README.md | 21 ++++++------ docs/examples/index.html | 67 +++++++++++++++++++++++++++---------- docs/examples/js/main.js | 37 ++++++++++++++------ docs/examples/js/testing.js | 2 +- guitar-diagrams.js | 2 +- 5 files changed, 89 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 187d1df..eb1be87 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ [![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/) [![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://www.github.com/) [![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/KCarlile/guitar-diagrams-js/actions) +[![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com/) ## Overview @@ -59,13 +60,13 @@ For full details, see the Node JS packages released by this project here: ``` @@ -94,25 +95,25 @@ You can also install this package manually by downloading it, placing the files 1. `guitar-diagrams-config.js`: config object 1. `guitar-diagrams-marker.js`: marker object 1. Place those files in your application at `wherever/you/put/your/js/files/guitar-diagram-js/`. -1. In the JS file with your primary entrypoint, add an import statement:\ +1. In the JS file with your primary entrypoint, add an import statement: ```javascript import { GuitarDiagramsJS } from 'wherever/you/put/your/js/files/guitar-diagrams-js/guitar-diagrams.js'; ``` -1. Following that import statement, begin to reference the library:\ +1. Following that import statement, begin to reference the library: ```javascript let gdj1 = new GuitarDiagramsJS(); - gdj1.config.canvasID = 'diagram1Canvas'; // specify the canvas element's an ID - gdj1.addCanvas('diagram1'); // add the canvas to the specified element ID on the page + gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID + gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page gdj1.drawNeck(); // draw the fretboard ``` -1. Be sure to add some target element with the matching ID in your JS code so Guitar Diagrams JS knows where to add your drawing:\ +1. Be sure to add some target element with the matching ID in your JS code so Guitar Diagrams JS knows where to add your drawing: ```html -
+
``` ### More Information diff --git a/docs/examples/index.html b/docs/examples/index.html index a98ab49..48fa031 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -24,24 +24,24 @@

Preface - Setup

tags, or it could be in its own JavaScript file that you include or reference in some other way.

To give Guitar Diagrams JS a place to add the drawing, you'll need to specify a block-level element with an ID, such as the following:

- 
<div id="diagram1"></div>
-

That div's ID doesn't need to be diagram1 as shown, but it needs to be a unique name that + 

<div id="diagram-1"></div>
+

That div's ID doesn't need to be diagram-1 as shown, but it needs to be a unique name that you will reference later on in your code, like this:

- 
gdj1.addCanvas('diagram1');
+ 
gdj1.addCanvas('diagram-1');

Example 1 - Basic fretboard

-
+

This example demonstrates the most basic usage with a vertical fretboard and no additional options.

Code
let gdj1 = new GuitarDiagramsJS();
-gdj1.config.canvasID = 'diagram1Canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram1'); // add the canvas to the specified element ID on the page
+gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
+gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard
@@ -50,7 +50,7 @@
Code

Example 2 - Adding markers

-
+

This example shows a vertical fretboard with the following configuration options:

@@ -60,9 +60,9 @@

Example 2 - Adding markers

Code
let gdj2 = new GuitarDiagramsJS();
-gdj2.config.canvasID = 'diagram2Canvas';
+gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram2');
+gdj2.addCanvas('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -79,7 +79,7 @@ 
Code

             
Example 3 - Changing string and fret count with custom string names and horizontal orientation

             

                 

-                    

+                    

                 

                 

                     
This example shows a horizontal fretboard with the following configuration options:

@@ -93,13 +93,13 @@ 
Example 3 - Changing string and fret cou
                     
                     
Code

                     
let gdj3 = new GuitarDiagramsJS();
-gdj3.config.canvasID = 'diagram3Canvas';
+gdj3.config.canvasID = 'diagram-3-canvas';
 gdj3.config.stringNamesEnabled = true; // set string names enabled
 gdj3.config.orientHorizontally = true; // set horizontal orientation
 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram3');
+gdj3.addCanvas('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -123,7 +123,7 @@ 
Code

             
Example 4 - Scaling

             

                 

-                    

+                    

                 

                 

                     
This example shows a vertical fretboard with the following configuration options:

@@ -133,9 +133,9 @@ 
Example 4 - Scaling

                     
                     
Code

                     
let gdj4 = new GuitarDiagramsJS();
-gdj4.config.canvasID = 'diagram4Canvas';
+gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram4');
+gdj4.addCanvas('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -152,7 +152,7 @@ 
Code

             
Example 5 - Customizing visuals

             

                 

-                    

+                    

                 

                 

                     
This example, while _intentionally_ not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:

@@ -176,9 +176,9 @@ 
Example 5 - Customizing visuals

                     
                     
Code

                     
let gdj5 = new GuitarDiagramsJS();
+gdj5.config.canvasID = 'diagram-5-canvas';
 gdj5.config.stringNamesEnabled = true;
 gdj5.config.fretStartingNumber = 2;
-gdj5.config.canvasID = 'diagram5Canvas';
 gdj5.config.colorFretboard = '#FFE0B2'; // specify the fretboard background color
 gdj5.config.colorNut = '#FFFFFF'; // specify the nut color
 gdj5.config.colorNutOutline = '#7E5109'; // specify the nut outline color
@@ -189,7 +189,7 @@ 
Code

 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram5');
+gdj5.addCanvas('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -202,6 +202,37 @@ 
Code

                 

             

             
+            
+            
Example 6 - Controls

+            

+                

+                    

+                

+                

+                    
This example demonstrates some configuration options for controls as shown below:

+                    
    
+                        
  • String names are enabled
    • 
+                        
  • Image download button is enabled
    • 
+                        
  • Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)
    • 
+                    

+                    
Code

+                    
let gdj6 = new GuitarDiagramsJS();
+gdj6.config.canvasID = 'diagram-6-canvas';
+gdj6.config.stringNamesEnabled = true;
+gdj6.config.downloadImageEnabled = true;
+gdj6.addCanvas('diagram-6');
+gdj6.drawNeck();
+gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
+gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
+gdj6.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
+gdj6.addMarker(4, 4, '4');
+gdj6.addMarker(5, 5, '5');
+gdj6.addMarker(6, 4, '6');
+gdj6.addMarker(3, 1);
+gdj6.drawAllMarkers();

+                

+            

+            
             

                 

                     
Guitar Diagram JS

diff --git a/docs/examples/js/main.js b/docs/examples/js/main.js
index 45b1ea0..ce86af4 100644
--- a/docs/examples/js/main.js
+++ b/docs/examples/js/main.js
@@ -12,16 +12,16 @@ import { GuitarDiagramsJS } from './guitar-diagrams-js/guitar-diagrams.js';
 
 // ========== BEGIN example 1
 let gdj1 = new GuitarDiagramsJS();
-gdj1.config.canvasID = 'diagram1Canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram1'); // add the canvas to the specified element ID on the page
+gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
+gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard
 // ========== END example 1
 
 // ========== BEGIN example 2
 let gdj2 = new GuitarDiagramsJS();
-gdj2.config.canvasID = 'diagram2Canvas';
+gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram2');
+gdj2.addCanvas('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -35,13 +35,13 @@ gdj2.drawAllMarkers(); // draw the markers
 
 // ========== BEGIN example 3
 let gdj3 = new GuitarDiagramsJS();
-gdj3.config.canvasID = 'diagram3Canvas';
+gdj3.config.canvasID = 'diagram-3-canvas';
 gdj3.config.stringNamesEnabled = true; // set string names enabled
 gdj3.config.orientHorizontally = true; // set horizontal orientation
 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram3');
+gdj3.addCanvas('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -55,9 +55,9 @@ gdj3.drawAllMarkers();
 
 // ========== BEGIN example 4
 let gdj4 = new GuitarDiagramsJS();
-gdj4.config.canvasID = 'diagram4Canvas';
+gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram4');
+gdj4.addCanvas('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -71,9 +71,9 @@ gdj4.drawAllMarkers();
 
 // ========== BEGIN example 5
 let gdj5 = new GuitarDiagramsJS();
+gdj5.config.canvasID = 'diagram-5-canvas';
 gdj5.config.stringNamesEnabled = true;
 gdj5.config.fretStartingNumber = 2;
-gdj5.config.canvasID = 'diagram5Canvas';
 gdj5.config.colorFretboard = '#FFE0B2'; // specify the fretboard background color
 gdj5.config.colorNut = '#FFFFFF'; // specify the nut color
 gdj5.config.colorNutOutline = '#7E5109'; // specify the nut outline color
@@ -84,7 +84,7 @@ gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram backgroun
 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram5');
+gdj5.addCanvas('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -95,3 +95,20 @@ gdj5.addMarker(6, 4, '6');
 gdj5.addMarker(3, 1);
 gdj5.drawAllMarkers();
 // ========== END example 5
+
+// ========== BEGIN example 6
+let gdj6 = new GuitarDiagramsJS();
+gdj6.config.canvasID = 'diagram-6-canvas';
+gdj6.config.stringNamesEnabled = true;
+gdj6.config.downloadImageEnabled = true;
+gdj6.addCanvas('diagram-6');
+gdj6.drawNeck();
+gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
+gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
+gdj6.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
+gdj6.addMarker(4, 4, '4');
+gdj6.addMarker(5, 5, '5');
+gdj6.addMarker(6, 4, '6');
+gdj6.addMarker(3, 1);
+gdj6.drawAllMarkers();
+// ========== END example 6
diff --git a/docs/examples/js/testing.js b/docs/examples/js/testing.js
index 3a9190d..93a3dae 100644
--- a/docs/examples/js/testing.js
+++ b/docs/examples/js/testing.js
@@ -12,7 +12,7 @@ import { GuitarDiagramsJS } from '../../../guitar-diagrams.js';
 
 // ========== BEGIN testing
 let gdjTesting = new GuitarDiagramsJS();
-gdjTesting.config.canvasID = 'diagramTestingCanvas';
+gdjTesting.config.canvasID = 'diagram-testing-canvas';
 gdjTesting.config.stringNamesEnabled = true;
 gdjTesting.config.orientHorizontally = true;
 //gdj4.config.fretStartingNumber = 3;
diff --git a/guitar-diagrams.js b/guitar-diagrams.js
index 451f009..235ca1c 100644
--- a/guitar-diagrams.js
+++ b/guitar-diagrams.js
@@ -562,7 +562,7 @@ export class GuitarDiagramsJS {
             let downloadButton = document.createElement('input');
 
             downloadButton.type = 'button';
-            downloadButton.id = this.#config.canvasID + 'DownloadButton';
+            downloadButton.id = this.#config.canvasID + '-download-button';
             downloadButton.style = 'display: block;';
             downloadButton.classList.add('guitar-diagrams-button-download');
             downloadButton.value = String.fromCodePoint(0x1F4BE);

From 21949527cf8bf598a6a4029330a2c8aa736fc580 Mon Sep 17 00:00:00 2001
From: Kenny Carlile 
Date: Thu, 30 May 2024 13:28:31 -0700
Subject: [PATCH 7/8] Changing linting to PR and push for main, develop

---
 .github/workflows/linting.yml | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
index 797a9b8..766b2bb 100644
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -1,8 +1,14 @@
 name: Linting
 
 on:  # yamllint disable-line rule:truthy
-  push: null
-  pull_request: null
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
 
 permissions: { }
 

From 9e8cae050cdbd33790fc7748c3f8f0b0a9a222cb Mon Sep 17 00:00:00 2001
From: Kenny Carlile 
Date: Thu, 30 May 2024 13:30:57 -0700
Subject: [PATCH 8/8] Fixing missing closing line

---
 .config/linters/stylelint.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.config/linters/stylelint.config.json b/.config/linters/stylelint.config.json
index 576f38c..6613d10 100644
--- a/.config/linters/stylelint.config.json
+++ b/.config/linters/stylelint.config.json
@@ -2,4 +2,4 @@
     "rules": {
         "block-no-empty": true
     }
-}
\ No newline at end of file
+}