Skip to content

Commit 35fdac2

Browse files
WebCoder49WebCoder49
authored
Merge pull request #113 from WebCoder49/website-docs-and-demos
Website docs and demos
2 parents dff3c50 + 59a25ed commit 35fdac2

13 files changed

+851
-64
lines changed

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

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
name: Bug Report
2+
description: File a bug report / code-input lack of textarea functionality
3+
title: '[Bug] '
4+
body:
5+
- type: markdown
6+
attributes:
7+
value: |
8+
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!
9+
10+
---
11+
- type: checkboxes
12+
id: correct-template
13+
attributes:
14+
label: This is just for reporting bugs / behaviour inconsistent with a textarea.
15+
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.
16+
options:
17+
- label: I have encountered unexpected behaviour, or code-input is acting differently to a textarea.
18+
required: true
19+
- type: checkboxes
20+
id: latest
21+
attributes:
22+
label: Please Check your code-input Version
23+
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.
24+
options:
25+
- label: I'm using the latest version of code-input.
26+
validations:
27+
required: true
28+
- type: markdown
29+
attributes:
30+
value: |
31+
---
32+
- type: dropdown
33+
id: plugins
34+
attributes:
35+
label: Plugins Used
36+
description: Which code-input plugins did you have in your template where you saw this bug?
37+
multiple: true
38+
options:
39+
- AutoCloseBrackets
40+
- Autocomplete
41+
- Autodetect
42+
- FindAndReplace
43+
- GoToLine
44+
- Indent
45+
- PrismLineNumbers
46+
- SpecialChars
47+
- Another external plugin (please specify in Additional Information)
48+
- type: textarea
49+
id: demo-or-code
50+
attributes:
51+
label: (Optional) Demo / Code
52+
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).
53+
placeholder: Paste code / a link.
54+
validations:
55+
required: false
56+
- type: textarea
57+
id: steps-to-reproduce
58+
attributes:
59+
label: Steps to Reproduce
60+
description: From when you loaded the page to when you encountered the bug, what steps did you take?
61+
placeholder: List the steps in as much detail as possible so we can reproduce them and encounter the bug.
62+
value: "1. "
63+
validations:
64+
required: true
65+
- type: textarea
66+
id: what-happened
67+
attributes:
68+
label: What happened?
69+
description: Also, what did you expect to happen? Give screenshots wherever possible
70+
placeholder: Give a short description and screenshots.
71+
validations:
72+
required: true
73+
- type: textarea
74+
id: what-happened-console
75+
attributes:
76+
label: What happened in the console?
77+
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?
78+
placeholder: Paste a screenshot of the console, and/or describe it.
79+
validations:
80+
required: true
81+
- type: dropdown
82+
id: affected-browsers
83+
attributes:
84+
label: Affected Browsers
85+
description: What browsers are you seeing the problem on? You can select multiple, and don't need to try all of them!
86+
multiple: true
87+
options:
88+
- Google Chrome for Windows (Blink)
89+
- Google Chrome for macOS (Blink)
90+
- Google Chrome / Chromium for Linux (Blink)
91+
- Google Chrome for Android (Blink)
92+
- Google Chrome for iOS (WebKit)
93+
- Microsoft Edge for Windows (Blink)
94+
- Microsoft Edge for macOS (Blink)
95+
- Microsoft Edge for Linux (Blink)
96+
- Microsoft Edge for iOS (WebKit)
97+
- Microsoft Edge for Android (Blink)
98+
- Safari for macOS (WebKit)
99+
- Safari for iOS (WebKit)
100+
- Mozilla Firefox for Windows (Gecko)
101+
- Mozilla Firefox for macOS (Gecko)
102+
- Mozilla Firefox for Linux (Gecko)
103+
- Mozilla Firefox for Android (Gecko)
104+
- Mozilla Firefox for iOS (WebKit)
105+
- Opera for Windows (Blink)
106+
- Opera for macOS (Blink)
107+
- Opera for Linux (Blink)
108+
- Opera Mobile for Android (Blink)
109+
- Opera Mini for Android (Blink)
110+
- Opera Mobile for iOS (WebKit)
111+
- Opera Mini for iOS (WebKit)
112+
- Internet Explorer for Windows (Trident)
113+
- Samsung Internet for Android (Blink)
114+
- Other (please specify in Additional Information)
115+
validations:
116+
required: true
117+
- type: dropdown
118+
id: unaffected-browsers
119+
attributes:
120+
label: (Optional) Unaffected Browsers
121+
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!
122+
multiple: true
123+
options:
124+
- Google Chrome for Windows (Blink)
125+
- Google Chrome for macOS (Blink)
126+
- Google Chrome / Chromium for Linux (Blink)
127+
- Google Chrome for Android (Blink)
128+
- Google Chrome for iOS (WebKit)
129+
- Microsoft Edge for Windows (Blink)
130+
- Microsoft Edge for macOS (Blink)
131+
- Microsoft Edge for Linux (Blink)
132+
- Microsoft Edge for iOS (WebKit)
133+
- Microsoft Edge for Android (Blink)
134+
- Safari for macOS (WebKit)
135+
- Safari for iOS (WebKit)
136+
- Mozilla Firefox for Windows (Gecko)
137+
- Mozilla Firefox for macOS (Gecko)
138+
- Mozilla Firefox for Linux (Gecko)
139+
- Mozilla Firefox for Android (Gecko)
140+
- Mozilla Firefox for iOS (WebKit)
141+
- Opera for Windows (Blink)
142+
- Opera for macOS (Blink)
143+
- Opera for Linux (Blink)
144+
- Opera Mobile for Android (Blink)
145+
- Opera Mini for Android (Blink)
146+
- Opera Mobile for iOS (WebKit)
147+
- Opera Mini for iOS (WebKit)
148+
- Internet Explorer for Windows (Trident)
149+
- Samsung Internet for Android (Blink)
150+
- Other (please specify in Additional Information)
151+
validations:
152+
required: fakse
153+
- type: textarea
154+
id: additional-information
155+
attributes:
156+
label: (Optional) Additional Information
157+
description: Is there anything else it might be useful for us to know about this bug?
158+
placeholder: Markdown supported
159+
validations:
160+
required: false

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
name: Plugin Suggestion
2+
description: Suggest or Contribute a new plugin / change to an existing plugin for code-input
3+
title: '[Plugin] '
4+
body:
5+
- type: markdown
6+
attributes:
7+
value: |
8+
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!
9+
10+
---
11+
- type: checkboxes
12+
id: correct-template
13+
attributes:
14+
label: This is just for suggesting additional plugins or parts of plugins.
15+
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.
16+
options:
17+
- label: This is an enhancement, not a bug fix, and is about plugins.
18+
required: true
19+
- type: checkboxes
20+
id: plugin-is-new
21+
attributes:
22+
label: Please Check the Plugin Doesn't Already Exist
23+
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!
24+
options:
25+
- label: The plugin / all the functionality I want isn't yet implemented.
26+
required: true
27+
- type: markdown
28+
attributes:
29+
value: |
30+
---
31+
- type: dropdown
32+
id: plugins-to-extend
33+
attributes:
34+
label: (Optional) Enhancement of an Existing Plugin?
35+
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.
36+
options:
37+
- AutoCloseBrackets
38+
- Autocomplete
39+
- Autodetect
40+
- FindAndReplace
41+
- GoToLine
42+
- Indent
43+
- PrismLineNumbers
44+
- SpecialChars
45+
- type: textarea
46+
id: use-cases
47+
attributes:
48+
label: Use Cases
49+
description: When might this plugin be used? When do *you* plan to use it?
50+
validations:
51+
required: true
52+
- type: textarea
53+
id: parameters
54+
attributes:
55+
label: Parameters
56+
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.
57+
validations:
58+
required: true
59+
- type: textarea
60+
id: desired-behaviour
61+
attributes:
62+
label: Desired Behaviour
63+
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.
64+
placeholder: You can be brief if you want.
65+
validations:
66+
required: true
67+
- type: checkboxes
68+
id: plugin-is-new
69+
attributes:
70+
label: Will you submit a pull request?
71+
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.
72+
options:
73+
- label: I will contribute this plugin through a pull request.
74+
required: false

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: Core Functionality Suggestion
2+
description: Suggest or Contribute a change to the core code-input.js / code-input.css files
3+
title: '[Core] '
4+
body:
5+
- type: markdown
6+
attributes:
7+
value: |
8+
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!
9+
10+
---
11+
- type: checkboxes
12+
id: correct-template
13+
attributes:
14+
label: This is just for suggesting new features / refactors of the core code-input code.
15+
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.
16+
options:
17+
- 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).
18+
required: true
19+
- type: markdown
20+
attributes:
21+
value: |
22+
---
23+
- type: textarea
24+
id: suggestions
25+
attributes:
26+
label: Suggestions
27+
description: List your suggestions below.
28+
validations:
29+
required: true

‎.github/pull_request_template.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!--
2+
Thank you for your contribution!
3+
4+
Please read the instructions in comments so we can organise the pull request.
5+
6+
Please make the Pull Request title describe what you have implemented clearly and concisely.
7+
-->
8+
9+
Fixes #
10+
11+
<!--
12+
Type the number of the Issue this is for after the #.
13+
14+
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.
15+
-->

‎CONTRIBUTING.md

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
# Contributing to `code-input`
22

3-
🎉**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:
3+
🎉**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:
44

5-
* 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.
6-
* The `code-input` element should be easy to use with all popular syntax-highlighting libraries.
7-
* 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.
5+
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.
6+
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.
7+
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.
88

9-
We will generally *not* consider the following contributions:
10-
* Excess functionality and/or complexity in the main code-input files - these types of contributions should go in the plugin folder instead.
11-
* 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.
9+
We will generally *not* consider the contributions that place excess functionality in the `code-input.js` file rather than in a plugin.
1210

1311
This said, if you're not sure whether your change will be accepted, please ask in an issue.
1412

15-
---
1613

17-
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).
14+
> 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.
1815
19-
---
2016
# Ways you could contribute:
21-
## 1. I've found a bug but don't know how / don't have time to fix it.
22-
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.
2317

24-
## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others.
25-
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.
26-
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.
18+
## Always start by submitting / finding an Issue
19+
20+
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.
21+
22+
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.
23+
24+
If the issue doesn't exist, [create the issue from a template here](https://github.com/WebCoder49/code-input/issues/new/choose).
25+
26+
## Code contributions via Pull Requests
2727

28-
## 3. I want to contribute code that I need / have seen in the Issues.
2928
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.
3029

31-
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).
30+
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).
3231

33-
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!
32+
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.
3433

35-
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.
34+
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!

0 commit comments

Comments
 (0)