-
Notifications
You must be signed in to change notification settings - Fork 4
/
help.vue
119 lines (110 loc) · 5.17 KB
/
help.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!--
Copyright 2020 DigitalOcean
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
<div class="help">
<h3 id="what-are-globs">
What are globs?
</h3>
<p>
Globs are the patterns you use when you run commands such as <code class="slim">ls src/*.js</code>, or you
might see them used in config files such as a <code class="slim">.gitignore</code> where you might see
<code class="slim">.cache/*</code>, for example.
</p>
<h3 id="what-can-you-use">
What can you use in them?
</h3>
<p>
Alongside plaintext, globs have a set of control (or special) characters that allow them to become far more
powerful that just some boring old text.
<br />
<i>Note: we have examples for all of these at the top of this page!</i>
</p>
<ul>
<li>
The <code class="slim">*</code> character matches zero or more characters.
</li>
<li>
<code class="slim">?</code> matches exactly one character.
</li>
<li>
<code class="slim">{ab,cd,ef}</code> matches exactly one of the "parts" provided.
<br />
<i>
These "parts" can also span multiple "sections" of the glob, so you can include directory separators
in them.
<br />
For example, <code class="slim">{ab,cd/ef}/*.js</code> is valid and would match
<code class="slim">ab/file.js</code> as well as <code class="slim">cd/ef/file.js</code>.
</i>
</li>
<li>
The use of <code class="slim">[abc]</code> matches a range of characters.
<br />
<i>
If the first character of the range is <code class="slim">!</code> or <code class="slim">^</code>
then it matches any character not in the range.
</i>
</li>
<li>
<code class="slim">!(ab|cd|ef)</code> matches anything that does not directly match any of the patterns
in the parentheses.
<br />
<i>
Patterns in the group are separated by the pipe character
<code class="slim" style="font-style: normal;">|</code>.
</i>
</li>
<li>
<code class="slim">?(ab|cd|ef)</code> matches zero or one occurrence of the patterns given.
</li>
<li>
<code class="slim">+(ab|cd|ef)</code> allows for one or more occurrences of the patterns to be matched.
</li>
<li>
<code class="slim">*(ab|cd|ef)</code> matches zero or more occurrences of the patterns listed.
</li>
<li>
<code class="slim">@(ab|cd|ef)</code> ensures that exactly one of the patterns provided matches.
</li>
<li>
When <code class="slim">**</code>, the "globstar", is used it matches zero or more directories and
subdirectories. This allows for recursive directory searching easily.
</li>
</ul>
<h3 id="using-the-tool-programmatically">
Using the tool programmatically
</h3>
<p>
All options for the tool are stored in URL query parameters, which allows for easy programmatic generation
of a glob test page. The glob string is stored in the <code class="slim">glob</code> query parameter, with
the test strings being stored in the <code class="slim">tests</code> query parameter, one parameter per test
string. Eg. <code class="slim">glob=*.js&tests=hello.js&tests=hello.md</code>.
</p>
<p>
The settings are also stored in the query parameters, with the comments enabled setting being controlled via
the <code class="slim">comments</code> query param (<code class="slim">true</code> or
<code class="slim">false</code>). Similarly, the show matches only setting is set with the
<code class="slim">matches</code> query param. Eg. <code class="slim">comments=true&matches=false</code>.
</p>
<p>
If you're generating a long URI (> 4000 chars), it may be advisable to prefix the query string with a hash
(<code class="slim">#</code>) to avoid a 414 request URI too long error. E.g.
<code class="slim">#?glob=*.js&tests=hello.js&tests=hello.md</code>.
</p>
</div>
</template>
<script>
export default {
name: "Help",
}
</script>