Website docs and demos

.github/ISSUE_TEMPLATE/1-bug-report.yaml

@@ -0,0 +1,160 @@
+name: Bug Report
+description: File a bug report / code-input lack of textarea functionality
+title: '[Bug] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for reporting bugs / behaviour inconsistent with a textarea.
+      description: Bugs are where code-input produces unexpected behaviour or perhaps logs errors in the console, plus when code-input does not act reasonably like a textarea element to your program. For functionality enhancement suggestions, please use the other issue templates.
+      options:
+        - label: I have encountered unexpected behaviour, or code-input is acting differently to a textarea.
+        required: true
+  - type: checkboxes
+    id: latest
+    attributes:
+      label: Please Check your code-input Version
+      description: We're constantly fixing bugs and shipping patches when we notice them, so the quickest way to fix a bug is to upgrade code-input. [Check this page for the latest version and upgrade to it, then check the below box, if possible](https://github.com/WebCoder49/code-input/releases/). If that's impossible, please keep this box unchecked and give us your version number in the steps to reproduce.
+      options:
+        - label: I'm using the latest version of code-input.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: plugins
+    attributes:
+      label: Plugins Used
+      description: Which code-input plugins did you have in your template where you saw this bug?
+      multiple: true
+      options:
+        - AutoCloseBrackets
+        - Autocomplete
+        - Autodetect
+        - FindAndReplace
+        - GoToLine
+        - Indent
+        - PrismLineNumbers
+        - SpecialChars
+        - Another external plugin (please specify in Additional Information)
+  - type: textarea
+    id: demo-or-code
+    attributes:
+      label: (Optional) Demo / Code
+      description: Please give a link to a page where you get the bug or paste your HTML, CSS and JavaScript code here. A minimal reproducible example would also be good if your project is very large / proprietary, which could be on a platform like [CodePen](https://codepen.io).
+      placeholder: Paste code / a link.
+    validations:
+      required: false
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to Reproduce
+      description: From when you loaded the page to when you encountered the bug, what steps did you take?
+      placeholder: List the steps in as much detail as possible so we can reproduce them and encounter the bug.
+      value: "1. "
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also, what did you expect to happen? Give screenshots wherever possible
+      placeholder: Give a short description and screenshots.
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened-console
+    attributes:
+      label: What happened in the console?
+      description: Look in your browser's DevTools (`Ctrl+Shift+I`/`Cmd+Alt+I`) then switch to the console. Has code-input or your program logged any messages? 
+      placeholder: Paste a screenshot of the console, and/or describe it.
+    validations:
+      required: true
+  - type: dropdown
+    id: affected-browsers
+    attributes:
+      label: Affected Browsers
+      description: What browsers are you seeing the problem on? You can select multiple, and don't need to try all of them!
+      multiple: true
+      options:
+        - Google Chrome for Windows (Blink)
+        - Google Chrome for macOS (Blink)
+        - Google Chrome / Chromium for Linux (Blink)
+        - Google Chrome for Android (Blink)
+        - Google Chrome for iOS (WebKit)
+        - Microsoft Edge for Windows (Blink)
+        - Microsoft Edge for macOS (Blink)
+        - Microsoft Edge for Linux (Blink)
+        - Microsoft Edge for iOS (WebKit)
+        - Microsoft Edge for Android (Blink)
+        - Safari for macOS (WebKit)
+        - Safari for iOS (WebKit)
+        - Mozilla Firefox for Windows (Gecko)
+        - Mozilla Firefox for macOS (Gecko)
+        - Mozilla Firefox for Linux (Gecko)
+        - Mozilla Firefox for Android (Gecko)
+        - Mozilla Firefox for iOS (WebKit)
+        - Opera for Windows (Blink)
+        - Opera for macOS (Blink)
+        - Opera for Linux (Blink)
+        - Opera Mobile for Android (Blink)
+        - Opera Mini for Android (Blink)
+        - Opera Mobile for iOS (WebKit)
+        - Opera Mini for iOS (WebKit)
+        - Internet Explorer for Windows (Trident)
+        - Samsung Internet for Android (Blink)
+        - Other (please specify in Additional Information)
+    validations:
+      required: true
+  - type: dropdown
+    id: unaffected-browsers
+    attributes:
+      label: (Optional) Unaffected Browsers
+      description: What browsers, if any, are you *not* seeing the problem on? You can select multiple, and don't need to try all of them!
+      multiple: true
+      options:
+        - Google Chrome for Windows (Blink)
+        - Google Chrome for macOS (Blink)
+        - Google Chrome / Chromium for Linux (Blink)
+        - Google Chrome for Android (Blink)
+        - Google Chrome for iOS (WebKit)
+        - Microsoft Edge for Windows (Blink)
+        - Microsoft Edge for macOS (Blink)
+        - Microsoft Edge for Linux (Blink)
+        - Microsoft Edge for iOS (WebKit)
+        - Microsoft Edge for Android (Blink)
+        - Safari for macOS (WebKit)
+        - Safari for iOS (WebKit)
+        - Mozilla Firefox for Windows (Gecko)
+        - Mozilla Firefox for macOS (Gecko)
+        - Mozilla Firefox for Linux (Gecko)
+        - Mozilla Firefox for Android (Gecko)
+        - Mozilla Firefox for iOS (WebKit)
+        - Opera for Windows (Blink)
+        - Opera for macOS (Blink)
+        - Opera for Linux (Blink)
+        - Opera Mobile for Android (Blink)
+        - Opera Mini for Android (Blink)
+        - Opera Mobile for iOS (WebKit)
+        - Opera Mini for iOS (WebKit)
+        - Internet Explorer for Windows (Trident)
+        - Samsung Internet for Android (Blink)
+        - Other (please specify in Additional Information)
+    validations:
+      required: fakse
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: (Optional) Additional Information
+      description: Is there anything else it might be useful for us to know about this bug?
+      placeholder: Markdown supported
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2-plugin-suggestion.yaml

@@ -0,0 +1,74 @@
+name: Plugin Suggestion
+description: Suggest or Contribute a new plugin / change to an existing plugin for code-input
+title: '[Plugin] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for suggesting additional plugins or parts of plugins.
+      description: Bugs should be mentioned in the Bug Report template, and suggestions for the core code-input.js and code-input.css files should be filed as a Core Suggestion.
+      options:
+        - label: This is an enhancement, not a bug fix, and is about plugins.
+        required: true
+  - type: checkboxes
+    id: plugin-is-new
+    attributes:
+      label: Please Check the Plugin Doesn't Already Exist
+      description: We're accumulating a good number of [plugins in the `plugin` folder](https://github.com/WebCoder49/code-input/tree/main/plugins). What you want may already exist!
+      options:
+        - label: The plugin / all the functionality I want isn't yet implemented.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: plugins-to-extend
+    attributes:
+      label: (Optional) Enhancement of an Existing Plugin?
+      description: If you want to add more functionality to an existing plugin, please select the plugin you want more functionality in below. This is unlikely, as plugins are meant to provide small but self-contained pieces of functionality, but things like extending the Indentation plugin from tabs to also support spaces (already done) would count here. Basically, a plugin should make sense to run by itself.
+      options:
+        - AutoCloseBrackets
+        - Autocomplete
+        - Autodetect
+        - FindAndReplace
+        - GoToLine
+        - Indent
+        - PrismLineNumbers
+        - SpecialChars
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use Cases
+      description: When might this plugin be used? When do *you* plan to use it?
+    validations:
+      required: true
+  - type: textarea
+    id: parameters
+    attributes:
+      label: Parameters
+      description: List the parameters you want to be able to pass into the plugin when you instantiate it, which let you customise how it runs. If there are no needed parameters, state it.
+    validations:
+      required: true
+  - type: textarea
+    id: desired-behaviour
+    attributes:
+      label: Desired Behaviour
+      description: How do you want the plugin to look and work? If you know what user stories are, you can include them, and if you have ideas about the implementation, you can note them down here too.
+      placeholder: You can be brief if you want.
+    validations:
+      required: true
+  - type: checkboxes
+    id: plugin-is-new
+    attributes:
+      label: Will you submit a pull request?
+      description: Just suggesting a plugin is contributing, but if you want to really help us out and have the time, you can contribute the plugin via the normal fork-and-pull-request Git flow. Either way, we will contact you via the Issue you are creating for advice.
+      options:
+        - label: I will contribute this plugin through a pull request.
+          required: false

.github/ISSUE_TEMPLATE/3-core-suggestion.yaml

@@ -0,0 +1,29 @@
+name: Core Functionality Suggestion
+description: Suggest or Contribute a change to the core code-input.js / code-input.css files
+title: '[Core] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for suggesting new features / refactors of the core code-input code.
+      description: For example, a template creation function for another syntax-highlighting library. The code-input element not supporting a piece of native textarea functionality itself is classified as a bug and should be filed in the Bug Report template. For changes to plugins, use the Plugin Suggestion template.
+      options:
+        - label: I want a change to the core code that is not patching textarea functionality into the code-input element (as this would need a Bug Report).
+        required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: suggestions
+    attributes:
+      label: Suggestions
+      description: List your suggestions below.
+    validations:
+      required: true

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+<!--
+Thank you for your contribution!
+
+Please read the instructions in comments so we can organise the pull request.
+
+Please make the Pull Request title describe what you have implemented clearly and concisely.
+-->
+
+Fixes #
+
+<!--
+Type the number of the Issue this is for after the #.
+
+If this does not completely resolve / implement the Issue, please remove the word Fixes and change the line to a description of what you have done. Make sure you keep the issue reference.
+-->

CONTRIBUTING.md

@@ -1,35 +1,34 @@
 # Contributing to `code-input`
 
-🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of the aims below, but others will be considered:
+🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of our aims below, but others will be considered:
 
-* The `code-input` element should act like a normal HTML `textarea` in all browsers, working with all of the normal attributes, events and other types of behaviour.
-* The `code-input` element should be easy to use with all popular syntax-highlighting libraries.
-* Any modifications of `code-input` that would be useful for the open-source community but are not core to this functionality should be available as optional plugins in the `plugins` folder. Here's where most feature contributions will go.
+1. **📝 Just like a `<textarea>`:** The core `code-input` element acts *as much as possible* like a `textarea`, including HTML forms support, but supports syntax highlighting.
+2. **🎨 Choose any highlighter:** This syntax highlighting can be implemented by *any available* library, such as Prism.js and highlight.js but including many more.
+3. **🔌 Plug (your selected plugins) and play:** The core functionality and code of `code-input` are *as lean as possible* without compromising the first two aims, and extra features that might be wanted are available as plugins, including ones in this repository. The choice to select plugins and isolate them creates user freedom and helps developers / contributors.
 
-We will generally *not* consider the following contributions:
-* Excess functionality and/or complexity in the main code-input files - these types of contributions should go in the plugin folder instead.
-* Issues that have been closed as not planned in the past (you can search the issue list to check), unless you bring a change that overcomes the reason they were not planned.
+We will generally *not* consider the contributions that place excess functionality in the `code-input.js` file rather than in a plugin. 
 
 This said, if you're not sure whether your change will be accepted, please ask in an issue.
 
----
 
-To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md).
+> To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md). I think it's mostly common sense.
 
----
 # Ways you could contribute:
-## 1. I've found a bug but don't know how / don't have time to fix it.
-If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A demo using [CodePen](https://codepen.io/) would be incredibly useful.
 
-## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others.
-The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input`. If you do this, you could contribute it as in point 3 below.
-Otherwise, if you do not have the time needed / do not want to implement it, any potential plugins would be [welcome as an Issue](https://github.com/WebCoder49/code-input/issues) which specifies the uses and desired characteristics.
+## Always start by submitting / finding an Issue
+
+We have a guided process in place to let you submit bug reports and feature suggestions as GitHub Issues, which you should do whether you are going to contribute a solution through a Pull Request or not.
+
+Firstly, [search the issues here](https://github.com/WebCoder49/code-input/issues) to check whether anyone else has already reported/suggested it. If so, comment that you have the same bug/idea and add any more details you think are useful.
+
+If the issue doesn't exist, [create the issue from a template here](https://github.com/WebCoder49/code-input/issues/new/choose).
+
+## Code contributions via Pull Requests
 
-## 3. I want to contribute code that I need / have seen in the Issues.
 Firstly, thank you for doing this! This is probably the most time consuming way of contributing but is also the most rewarding for both you and me as a maintainer.
 
-Please first open an issue if one doesn't already exist, and assign yourself to it. Then, [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects).
+Once you have followed the steps above to get an Issue, check that nobody else is implementing it (i.e. it is not assigned to anyone), and comment on the Issue that you want to contribute to, notifying @WebCoder49. I will assign you to the Issue to welcome your contribution, while you [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects).
 
-In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know! 
+You can be pretty sure I'll accept contributions that match the main aims of `code-input`, but if you doubt they will be useful you can wait until I assign you and give you the go-ahead.
 
-If an issue is open but already assigned to someone, it is probably already being worked on - you could still suggest a method of fixing it in the comments but shouldn't open a pull request as it would waste your time.
+In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know!