codeowners.org/index.html at main · systemsoverload/codeowners.org · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>codeowners.org</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .CodeMirror {
        height: 100% !important;
        width: 100% !important;
      }
      .CodeMirror div.CodeMirror-cursor {
        border-left: 3px solid red;
      }
      .query-error {
        text-decoration: underline red dashed;
        -webkit-text-decoration: underline red dashed;
      }
      .section-label {
        @apply px-3 py-2 font-medium text-sm text-gray-600 bg-gray-100 border-b border-gray-300;
      }

      .ast-line{
        font-size: small;
      }
    </style>
</head>
<body class="m-0 p-0 min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 py-8">
        <header class="text-center mb-16">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">CODEOWNERS</h1>
            <p class="text-xl text-gray-600">The official CODEOWNERS grammar and parser</p>
        </header>

        <main>
            <section class="mb-12">
                <h2 class="text-2xl font-semibold text-gray-900 mb-4">What is CODEOWNERS?</h2>
                <p class="text-gray-700 mb-4">
                    CODEOWNERS is a simple yet powerful way to define ownership rules for your codebase.
                    It helps teams automatically route code reviews, enforce permissions, and maintain clear
                    ownership boundaries in repositories.
                </p>
                <div class="bg-white rounded-lg shadow-sm p-6 mb-4">
                    <h3 class="text-lg font-semibold mb-2">Key Benefits:</h3>
                    <ul class="list-disc pl-6 text-gray-700">
                        <li>Automatic PR reviewer assignment</li>
                        <li>Clear ownership documentation</li>
                        <li>Enforced review requirements</li>
                        <li>Simplified permissions management</li>
                    </ul>
                </div>
            </section>

            <section class="mb-12">
                <h2 class="text-2xl font-semibold text-gray-900 mb-4">Original GitHub Syntax</h2>
                <p class="text-gray-700 mb-4">
                    The original GitHub CODEOWNERS syntax provides a straightforward way to map paths to owners:
                </p>
                <div class="bg-gray-800 rounded-lg p-6 mb-4">
                    <pre class="text-green-400"><code># Basic syntax
/path/to/code   @username
*.js            @org/frontend-team
/docs/*         @org/docs-team alice@example.com

# Comments explain ownership
/backend/*      @org/backend-team  # Inline comments expand on explanation</code></pre>
                </div>
            </section>

            <section class="mb-12">
                <h2 class="text-2xl font-semibold text-gray-900 mb-4">Extended Syntax</h2>
                <p class="text-gray-700 mb-4">
                    The extended CODEOWNERS syntax adds powerful features for applying review logic for groups of users:
                </p>
                <div class="bg-gray-800 rounded-lg p-6 mb-4">
                    <pre class="text-green-400"><code># Selection strategies
/frontend/*   @org/web-team:random(2)  # Randomly select 2 reviewers
/backend/*    @org/backend:least_busy(3)  # Select 3 least busy members
/core/*       @org/platform:all  # Require all team members

# Mixed ownership types
/shared/*     dev-lead@example.com @org/team:random # strategy args are optional</code></pre>
                </div>
            </section>
            <section class="mb-12">
                <h2 class="text-2xl font-semibold text-gray-900 mb-4">Using the Playground</h2>
                <p class="text-gray-700 mb-4">
                  The CODEOWNERS playground allows you to test and visualize your CODEOWNERS rules, understand the syntax tree, and validate your ownership patterns.
                </p>

                <div class="space-y-6">
                  <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">Quick Start Guide</h3>
                    <div class="space-y-4">
                      <div class="flex items-start">
                        <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                          <span class="w-6 h-6 flex items-center justify-center text-blue-600 font-semibold">1</span>
                        </div>
                        <div>
                          <h4 class="font-medium text-gray-900 mb-1">Enter Your CODEOWNERS Rules</h4>
                          <p class="text-gray-600">Paste your CODEOWNERS file content into the left editor panel or modify the example provided.</p>
                        </div>
                      </div>

                      <div class="flex items-start">
                        <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                          <span class="w-6 h-6 flex items-center justify-center text-blue-600 font-semibold">2</span>
                        </div>
                        <div>
                          <h4 class="font-medium text-gray-900 mb-1">Examine the Syntax Tree</h4>
                          <p class="text-gray-600">The right panel shows the parsed syntax tree. Click on tree nodes to highlight the corresponding code.</p>
                        </div>
                      </div>

                      <div class="flex items-start">
                        <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                          <span class="w-6 h-6 flex items-center justify-center text-blue-600 font-semibold">3</span>
                        </div>
                        <div>
                          <h4 class="font-medium text-gray-900 mb-1">Write Tree Queries</h4>
                          <p class="text-gray-600">Use the query panel to search for specific patterns in your CODEOWNERS file. (See <a href="https://tree-sitter.github.io/tree-sitter/using-parsers#query-syntax">tree-sitter documentation</a> for more details.</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-3">Query Examples</h3>
                    <p class="text-gray-700 mb-4">
                      Use these example queries to explore your CODEOWNERS file structure:
                    </p>
                    <div class="space-y-4">
                      <div class="bg-gray-100 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-2">Find all owners</h4>
                        <pre class="text-sm text-gray-800"><code>(owners) @owners</code></pre>
                      </div>

                      <div class="bg-gray-100 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-2">Find all owners of a given type</h4>
                        <pre class="text-sm text-gray-800"><code>(owners)(group) @groups</code></pre>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            <div id="playground-container" class="bg-white rounded-lg shadow-sm">
        <header class="flex items-center px-5 py-4 h-[60px] border-b border-gray-300">
            <div class="flex items-center">
                <strong>CODEOWNERS Playground</strong>
            </div>
        </header>

        <main class="flex flex-col min-h-[600px]">
            <!-- Query section at the top -->
            <div class="border-b border-gray-300">
                <div class="section-label">
                    Tree-sitter Query
                </div>
                <div id="query-container" class="h-[150px]">
                    <textarea id="query-input" class="w-full">(owners)(group)(group_name) @group</textarea>
                </div>
            </div>

            <!-- Code and AST panels below -->
            <div class="flex flex-1">
                <div class="flex flex-col flex-1 border-r border-gray-300">
                    <div class="section-label">
                        CODEOWNERS File
                    </div>
                    <div id="code-container" class="flex flex-1">
                        <textarea id="code-input" class="w-full">
# This is the CODEOWNERS file
# Lines starting with # are comments

# Global owners - default reviewers for everything
*       @bob

# Frontend code
*.js    @org/frontend-team
*.ts    @org/frontend-team
*.css   alice@example.com
/web/   @org/web-team

# Backend code
*.py          @org/backend-team
/api/         @org/api-team
/database/    @org/db-team:random(2)

# Documentation
*.md             @org/docs-team
/docs/           @org/technical-writers
/architecture/   @org/architects:all</textarea>
                    </div>
                </div>
                <div class="flex flex-col flex-1">
                    <div class="section-label">
                        Syntax Tree
                    </div>
                    <div id="output-container-scroll" class="flex-1 overflow-auto">
                        <pre id="output-container" class="px-3 m-0"></pre>
                    </div>
                </div>
            </div>
        </main>
    </div>

        </main>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
    <script src="tree-sitter.js"></script>
    <script src="playground.js"></script>
</body>
</html>