feat: migrate IM website to github pages (#322)

.editorconfig

@@ -9,4 +9,4 @@ indent_style = space
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true

.github/PULL_REQUEST_TEMPLATE.md

@@ -26,7 +26,7 @@ Example: When "Adding a function to do X", explain why it is necessary to have a
 
 ## Test plan (required)
 
-Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. The existing test framework (iqTest) is somewhat limited so if you are unable to add a test due to a limitation in the framework, please instead create a new example specific to the fuctionality changed/added covered in the PR.
+Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. The existing test framework (iqTest) is somewhat limited so if you are unable to add a test due to a limitation in the framework, please instead create a new example specific to the functionality changed/added covered in the PR.
 
 ## Closing issues
 

.github/workflows/gh-pages-deploy.yml

@@ -4,8 +4,9 @@ on:
   # Trigger the workflow every time you push to the `main` branch
   # Using a different branch name? Replace `main` with your branch’s name
   push:
-    branches: [main, add-im-website]
+    branches: main
   # Allows you to run this workflow manually from the Actions tab on GitHub.
+  # eslint-disable-next-line yml/no-empty-mapping-value
   workflow_dispatch:
 
 # Allow this job to clone the repo and create a page deployment

.gitignore

@@ -18,4 +18,3 @@ build/
 !.vscode/extensions.json
 !.vscode/settings.json
 /docs/
-

.remarkrc.js

@@ -13,7 +13,8 @@ module.exports = {
     'remark-preset-lint-markdown-style-guide',
     'remark-preset-lint-recommended',
     'remark-preset-prettier',
-    ['remark-lint-list-item-indent', 'space'],
+    ['remark-lint-file-extension', ['md', 'mdx']],
+    ['remark-lint-list-item-indent', 'one'],
     ['remark-lint-maximum-line-length', false],
     ['remark-lint-list-item-spacing', { checkBlanks: true }],
     ['remark-lint-no-file-name-irregular-characters', false],
@@ -23,7 +24,15 @@ module.exports = {
     ['remark-lint-link-title-style', "'"],
     ['remark-lint-rule-style', '---'],
     ['remark-lint-strong-marker', '*'],
+    // remark-validate-links does NOT check headings in other markdown files, the CLI is required for that (see
+    // the note at the bottom of the Use section at https://github.com/remarkjs/remark-validate-links?tab=readme-ov-file#use).
+    // TODO: Determine how to configure .remarkrc.js to parse/evaluate content inside of MDX blocks when invoked via CLI and
+    // then add call to CLI during dist build to validate all links
+    'remark-validate-links',
+    // remark-link-no-dead-urls slows down eslint a lot so we disable during standard processing
+    // and check external urls only when explicitly enabled (e.g., dist build)
+    process.env.CHECK_LINKS ? 'remark-lint-no-dead-urls' : null,
     'remark-frontmatter',
     'remark-gfm'
-  ]
+  ].filter(Boolean)
 };

.vscode/settings.json

@@ -2,10 +2,15 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    // causes special characters to be escaped in md/mdx files unnecessarily
+    // so commenting out waiting for https://github.com/microsoft/vscode-eslint/issues/1814
+    //"source.fixAll.eslint": "explicit"
   },
   "eslint.validate": [
     "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
     "html",
     "markdown",
     "mdx",
@@ -15,5 +20,6 @@
     "typescript",
     "astro"
   ],
-  "prettier.documentSelectors": ["**/*.astro"]
+  "prettier.documentSelectors": ["**/*.astro"],
+  "mdx.validate.validateFileLinks": "ignore"
 }

README.md

@@ -7,15 +7,14 @@
 [![jsDelivr downloads](https://data.jsdelivr.com/v1/package/npm/imagemapster/badge?style=rounded)](https://www.jsdelivr.com/package/npm/imagemapster)
 [![cdnjs version](https://img.shields.io/cdnjs/v/imagemapster.svg?color=orange)](https://cdnjs.com/libraries/imagemapster)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+[![Deploy to GitHub Pages](https://github.com/jamietre/ImageMapster/actions/workflows/gh-pages-deploy.yml/badge.svg)](https://github.com/jamietre/ImageMapster/actions/workflows/gh-pages-deploy.yml)
 
 ImageMapster activates the areas in HTML image maps so you can highlight and select them. It has lots of other features for manual control, tooltips, resizing, and more. It is designed to be compatible with every common platform, and is tested with Internet Explorer 6-10, Firefox 3.0+, Safari, Opera, and Chrome. It works on mobile devices and doesn't use Flash.
 
 ## Release Information
 
 See the [change log](CHANGELOG.md) for details on the release history and roadmap.
 
-Read the [release notes](http://blog.outsharked.com/2012/06/imagemapster-125-released.html) for 1.2.5, the last significant feature update.
-
 ## Getting Started
 
 ### Installation
@@ -74,7 +73,7 @@ $('img[usemap]').mapster({
 
 #### Methods
 
-There are lots of ways to manipulate the image map from Javascript. Here area a few, see the [ImageMapster web site](http://www.outsharked.com/imagemapster) for complete documentation.
+There are lots of ways to manipulate the image map from Javascript. Here area a few, see the [ImageMapster web site](https://jamietre.github.io/ImageMapster/) for complete documentation.
 
 **select**: Cause an area to become "selected"
 
@@ -149,7 +148,7 @@ To simply indentify a set of areas to turn on or off, but not treat them as a lo
 
 #### Options
 
-Please see the [ImageMapster web site](http://www.outsharked.com/imagemapster/default.aspx?docs.html) for complete documentation.
+Please see the [ImageMapster web site](https://jamietre.github.io/ImageMapster/) for complete documentation.
 
 ## Demos
 
@@ -266,6 +265,10 @@ Please see our [Contributing Guidelines](CONTRIBUTING.md).
 
 ## Development
 
+The below covers the ImageMapster jQuery plugin. For information on how to develop the ImageMapster website, see its [README](site/README.md).
+
+You can simultaneously make changes to both the plugin and the website by running `npm run dev` in both the plugin (./) and site (./site) directories. Any changes made to the plugin will be reflected in the site as its [imagemapster](./site/package.json#L16) dependency is linked to the root plugin package.
+
 ### Build
 
 The source code is broken into several modules to make management easier and to make it possible to create feature-targeted builds. ImageMapster is built using grunt and can be invoked as follows:
@@ -276,11 +279,11 @@ The source code is broken into several modules to make management easier and to
    - Debug Build (uncompressed) - `npm run build`
    - Release Build (uncompressed/compressed/sourcemap) - `npm run dist`
 
-### Debug
+### Dev
 
 1. Clone the repo
 2. Install NPM dependencies - `npm install`
-3. Run the debug task - `npm run debug`
+3. Run the dev task - `npm run dev`
 
 ### Tests
 

SUPPORT.md

@@ -1,14 +1,14 @@
 # ImageMapster Support
 
-**Please do not use the issue tracker for personal support requests.**
+> \[!NOTE]
+> Please do not use the issue tracker for personal support requests.
 
 Have questions? Looking for support for ImageMapster?
 
-- There are lots of examples and documentation on the [ImageMapster web site](http://www.outsharked.com/imagemapster).
-- I write about ImageMapster on my blog from time to time. See [posts about imagemapster](http://blog.outsharked.com/search/label/imagemapster).
+- There are lots of examples and documentation on the [ImageMapster web site](https://jamietre.github.io/ImageMapster/).
 - Take a look at [ImageMapster questions on StackOverflow](http://stackoverflow.com/search?q=imagemapster); there are quite a few. Maybe someone's asked the same question already.
 - There are also some very detailed discussions in the [GitHub issues](https://github.com/jamietre/imagemapster/issues?direction=desc&labels=support&page=1&sort=created&state=closed) section that I've flagged as "support". The issues section is no longer the way to request support but these issues can provide valuable insight.
-- You can also check the [feedback](http://www.outsharked.com/imagemapster/default.aspx?feedback.html) page on the project web site.
+- You can also check the [feedback](https://jamietre.github.io/ImageMapster/resources/feedback/) page on the project web site.
 - You can review the [source code on GitHub](https://github.com/jamietre/ImageMapster).
 
 If you identify a bug, please file a [bug report](https://github.com/jamietre/ImageMapster/issues/new?template=bug_report.yml) and if you'd like to see a new feature, please file a [feature request](https://github.com/jamietre/ImageMapster/issues/new?template=feature_request.yml)!

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "ImageMapster",
   "version": "1.6.0",
-  "homepage": "https://github.com/jamietre/ImageMapster",
+  "homepage": "https://jamietre.github.io/ImageMapster",
   "description": "jQuery plugin that activates areas in HTML image maps with support for highlighting, selecting, tooltips, resizing and more",
   "main": "dist/jquery.imagemapster.min.js",
   "keywords": [
@@ -12,15 +12,22 @@
     "html",
     "plugin",
     "maps",
+    "map",
     "image",
     "imagemap",
+    "image map",
     "canvas",
     "highlight",
     "select",
     "resize",
     "tooltip"
   ],
-  "authors": ["James Treworgy <[email protected]>"],
+  "authors": [
+    {
+      "name": "James Treworgy",
+      "homepage": "https://github.com/jamietre"
+    }
+  ],
   "license": "MIT",
   "ignore": [
     "**/.*",

examples/usa.html

@@ -66,9 +66,9 @@ <h2>USA Demo</h2>
     <div id="map_demo" style="width: 920px; height: 1000px">
       <p>
         <b>Disclaimer:</b> This demo is old and the code is stylistically bad
-        and probably difficult to understand. I <b>strongly</b> recommend using
+        and probably difficult to understand. It is <b>strongly</b> recommend to use
         the online demos at
-        <a href="http://www.outsharked.com/imagemapster"
+        <a href="https://jamietre.github.io/ImageMapster/overview/demos/"
           >the project web site</a
         >
         as references for learning how to use imagemapster. I have kept this in

gruntfile.js

@@ -198,6 +198,12 @@ module.exports = function (grunt) {
       },
       formatfix: {
         command: 'prettier . --write'
+      },
+      checklinks: {
+        // Except for links within MDX blocks, will check all links including heading links to other files
+        // see comments in .remarkrc.js
+        command:
+          'remark --ext md,mdx --no-config --use remark-validate-links --use remark-lint-no-dead-urls .'
       }
     },
     eslint: {
@@ -229,13 +235,16 @@ module.exports = function (grunt) {
         },
         src: ['.']
       }
+    },
+    env: {
+      dist: {
+        CHECK_LINKS: 'true'
+      }
     }
   });
 
-  grunt.registerTask('default', ['build']);
+  grunt.registerTask('default', ['clean', 'lint', 'build']);
   grunt.registerTask('build', [
-    'clean',
-    'lint',
     'concat:jquery',
     'concat:zepto',
     'umd:jquery',
@@ -245,10 +254,22 @@ module.exports = function (grunt) {
     'concat:jqueryesmdist',
     'concat:zeptodist'
   ]);
-  grunt.registerTask('dist', ['build', 'uglify']);
-  grunt.registerTask('debug', ['build', 'connect', 'watch']);
-  grunt.registerTask('example', ['build', 'connect:examples', 'watch']);
-  grunt.registerTask('test', ['build', 'connect:tests', 'watch']);
+  grunt.registerTask('dist', ['env:dist', 'clean', 'lint', 'build', 'uglify']);
+  grunt.registerTask('dev', ['build', 'connect', 'watch']);
+  grunt.registerTask('example', [
+    'clean',
+    'lint',
+    'build',
+    'connect:examples',
+    'watch'
+  ]);
+  grunt.registerTask('test', [
+    'clean',
+    'lint',
+    'build',
+    'connect:tests',
+    'watch'
+  ]);
   grunt.registerTask('lint', ['eslint:check']);
   grunt.registerTask('lint:fix', ['eslint:fix']);
   grunt.registerTask('format', ['shell:formatcheck']);
@@ -318,4 +339,5 @@ module.exports = function (grunt) {
         done(e);
       });
   });
+  grunt.registerTask('checklinks', ['shell:checklinks']);
 };