Merge pull request #28 from KCarlile/develop

Linting added for HTML, CSS, JS, MD on PR/push to main, develop

.config/linters/stylelint.config.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "block-no-empty": true
+    }
+}

.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

.github/workflows/linting.yml

@@ -0,0 +1,46 @@
+name: Linting
+
+on:  # yamllint disable-line rule:truthy
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+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 }}
+          LINTER_RULES_PATH: .config/linters/
+          CSS_FILE_NAME: stylelint.config.json
+          VALIDATE_JAVASCRIPT_ES: true
+          VALIDATE_HTML: true
+          VALIDATE_CSS: true
+          VALIDATE_MARKDOWN: true
+          IGNORE_GITIGNORED_FILES: true
+          DEFAULT_BRANCH: main

README.md

@@ -2,13 +2,15 @@
 
 [![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/)
 [![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)](https://www.w3.org/TR/CSS/#css)
 [![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
 
@@ -58,13 +60,13 @@ For full details, see the Node JS packages released by this project here: <https
 You can install Guitar Diagrams JS in your project as a Node JS dependency via NPM. Run the following command from your project's directory:
 
 ```bash
-$ npm install @kcarlile/guitar-diagrams-js@0.1.0
+npm install @kcarlile/guitar-diagrams-js@0.9.0
 ```
 
 Or, alternately, you can manually edit your `package.json` file and add the following entry:
 
 ```json
-"@kcarlile/guitar-diagrams-js": "0.1.0",
+"@kcarlile/guitar-diagrams-js": "0.9.0",
 ```
 
 #### Option 2: Manual Installation via CDN
@@ -77,8 +79,8 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at
    import { GuitarDiagramsJS } from 'https://cdn.jsdelivr.net/gh/KCarlile/guitar-diagrams-js@main/guitar-diagrams.js';
 
    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
 </script>
 ```
@@ -93,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
-   <div id="diagram1"></div>
+   <div id="diagram-1"></div>
    ```
 
 ### More Information
@@ -141,7 +143,11 @@ There are no specific requirements<sup>[1](#footnotes)</sup> for dependencies to
 - Color reference: <https://htmlcolorcodes.com/color-chart/>
 - Canvas API reference: <https://www.w3schools.com/jsref/api_canvas.asp>
 - Bootstrap API: <https://getbootstrap.com/docs/>
-- [<img alt="Deployed with FTP Deploy Action" src="https://img.shields.io/badge/Deployed With-FTP DEPLOY ACTION-%3CCOLOR%3E?style=for-the-badge&color=0077b6">](https://github.com/SamKirkland/FTP-Deploy-Action)
+- How to Use GitHub Super Linter in Your Projects: <https://www.freecodecamp.org/news/github-super-linter/>
+- GitHub Action - Super-Linter: <https://github.com/super-linter/super-linter/>
+  - [![Super-Linter](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/linting.yml/badge.svg)](https://github.com/marketplace/actions/super-linter)
+- GitHub Action - FTP Deploy: <https://github.com/SamKirkland/FTP-Deploy-Action>
+  - [<img alt="Deployed with FTP Deploy Action" src="https://img.shields.io/badge/Deployed With-FTP DEPLOY ACTION-%3CCOLOR%3E?style=for-the-badge&color=0077b6">](https://github.com/SamKirkland/FTP-Deploy-Action)
 
 ### <a href="footnotes"></a>Footnotes
 

docs/CONTRIBUTING.md

@@ -33,7 +33,8 @@ If you find a bug or have a feature request, first [search to see if an issue al
 
 #### Solve an issue
 
-Scan through our [existing issues](https://github.com/KCarlile/guitar-diagrams-js/issues) to find one that interests you. You can narrow down the search using `labels` as filters. See "[Label reference](https://docs.github.com/en/contributing/collaborating-on-github-docs/label-reference)" for more information. As a general rule, we don't assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix.
+Scan through our [existing issues](https://github.com/KCarlile/guitar-diagrams-js/issues) to find one that interests you. You can narrow down the search using `labels` as filters. See "[Label reference](https://docs.github.com/en/contributing/collaborating-on-github-docs/label-reference)" for more information.
+As a general rule, we don't assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix.
 
 ### Make Changes
 

docs/examples/index.html

@@ -24,24 +24,24 @@ <h2 class="border-bottom border-1 mb-4">Preface - Setup</h2>
                         tags, or it could be in its own JavaScript file that you include or reference in some other way.</p>
                     <p>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:</p>
-                    <pre><code class="language-html">&lt;div id="diagram1"&gt;&lt;/div&gt;</code></pre>
-                    <p>That div's ID doesn't need to be <em>diagram1</em> as shown, but it needs to be a unique name that
+                    <pre><code class="language-html">&lt;div id="diagram-1"&gt;&lt;/div&gt;</code></pre>
+                    <p>That div's ID doesn't need to be <em>diagram-1</em> as shown, but it needs to be a unique name that
                         you will reference later on in your code, like this:</p>
-                    <pre><code class="language-javascript">gdj1.addCanvas('diagram1');</code></pre>
+                    <pre><code class="language-javascript">gdj1.addCanvas('diagram-1');</code></pre>
                 </div>
             </div>
             <!-- BEGIN: example 1 -->
             <h2 class="border-bottom border-1 mb-4">Example 1 - Basic fretboard</h2>
             <div class="row mb-5">
                 <div class="col-6">
-                    <div id="diagram1"></div>
+                    <div id="diagram-1"></div>
                 </div>
                 <div class="col-6">
                     <p>This example demonstrates the most basic usage with a vertical fretboard and no additional options.</p>
                     <h5>Code</h5>
                     <pre><code class="language-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</code></pre>
                 </div>
             </div>
@@ -50,7 +50,7 @@ <h5>Code</h5>
             <h2 class="border-bottom border-1 mb-4">Example 2 - Adding markers</h2>
             <div class="row mb-5">
                 <div class="col-6">
-                    <div id="diagram2"></div>
+                    <div id="diagram-2"></div>
                 </div>
                 <div class="col-6">
                     <p>This example shows a vertical fretboard with the following configuration options:</p>
@@ -60,9 +60,9 @@ <h2 class="border-bottom border-1 mb-4">Example 2 - Adding markers</h2>
                     </ul>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">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 @@ <h5>Code</h5>
             <h2 class="border-bottom border-1 mb-4">Example 3 - Changing string and fret count with custom string names and horizontal orientation</h2>
             <div class="row mb-5">
                 <div class="col-6">
-                    <div id="diagram3"></div>
+                    <div id="diagram-3"></div>
                 </div>
                 <div class="col-6">
                     <p>This example shows a horizontal fretboard with the following configuration options:</p>
@@ -93,13 +93,13 @@ <h2 class="border-bottom border-1 mb-4">Example 3 - Changing string and fret cou
                     </ul>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">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 @@ <h5>Code</h5>
             <h2 class="border-bottom border-1 mb-4">Example 4 - Scaling</h2>
             <div class="row mb-5">
                 <div class="col-6">
-                    <div id="diagram4"></div>
+                    <div id="diagram-4"></div>
                 </div>
                 <div class="col-6">
                     <p>This example shows a vertical fretboard with the following configuration options:</p>
@@ -133,9 +133,9 @@ <h2 class="border-bottom border-1 mb-4">Example 4 - Scaling</h2>
                     </ul>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">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 @@ <h5>Code</h5>
             <h2 class="border-bottom border-1 mb-4">Example 5 - Customizing visuals</h2>
             <div class="row mb-5">
                 <div class="col-6">
-                    <div id="diagram5"></div>
+                    <div id="diagram-5"></div>
                 </div>
                 <div class="col-6">
                     <p>This example, while _intentionally_ not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:</p>
@@ -176,9 +176,9 @@ <h2 class="border-bottom border-1 mb-4">Example 5 - Customizing visuals</h2>
                     </ul>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">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 @@ <h5>Code</h5>
 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 @@ <h5>Code</h5>
                 </div>
             </div>
             <!-- END: example 5 -->
+            <!-- BEGIN: example 6 -->
+            <h2 class="border-bottom border-1 mb-4">Example 6 - Controls</h2>
+            <div class="row mb-5">
+                <div class="col-6">
+                    <div id="diagram-6"></div>
+                </div>
+                <div class="col-6">
+                    <p>This example demonstrates some configuration options for controls as shown below:</p>
+                    <ul class="list-group mb-3">
+                        <li class="list-group-item">String names are enabled</li>
+                        <li class="list-group-item">Image download button is enabled</li>
+                        <li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)</li>
+                    </ul>
+                    <h5>Code</h5>
+                    <pre><code class="language-javascript">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();</code></pre>
+                </div>
+            </div>
+            <!-- END: example 6 -->
             <div class="row">
                 <div class="col border-top small">
                     <p><span class="fw-bold">Guitar Diagram JS</span></p>