Skip to content

Commit 3a2cb72

Browse files
JADugasJADugas
committed
Add contribution guide page and update SEO controls
Added a new 'How to Contribute' page at /contribute with detailed instructions and interactive tools for submitting new roles. Updated BaseLayout to support a 'noindex' prop for SEO control and applied it to the new page. Updated robots.txt to disallow search engine indexing of the contribution guide. Added a new .h1__inline style for inline H1 headings.
1 parent 6950077 commit 3a2cb72

File tree

4 files changed

+335
-0
lines changed

4 files changed

+335
-0
lines changed

‎public/robots.txt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
User-agent: *
2+
Allow: /
3+
4+
# Hide contribution guide from search engines
5+
Disallow: /contribute
6+
Disallow: /contribute/

‎src/layouts/BaseLayout.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ export interface Props {
33
title: string;
44
description?: string;
55
canonicalURL?: string;
6+
noindex?: boolean;
67
}
78
89
const {
910
title,
1011
description = "Teach Access provides the Accessibility Skills Hiring Toolkit to help organizations build internal capacity for producing accessible digital products by developing a knowledgeable and skilled workforce. The toolkit currently provides Position Description Language and Interview Questions.",
1112
canonicalURL,
13+
noindex = false,
1214
} = Astro.props;
1315
1416
// Use Astro's built-in URL constructor with site from config
@@ -32,6 +34,7 @@ import "../styles/global.css";
3234
<title>{title}</title>
3335
<meta name="description" content={description} />
3436
<meta property="og:description" content={description} />
37+
{noindex && <meta name="robots" content="noindex, nofollow" />}
3538

3639
<!-- Google tag (gtag.js) -->
3740
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8K0EY6Y3TJ"

‎src/pages/contribute.astro‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
---
2+
import BaseLayout from "../layouts/BaseLayout.astro";
3+
import Header from "../components/Header.astro";
4+
import Footer from "../components/Footer.astro";
5+
---
6+
7+
<BaseLayout
8+
title="How to Contribute | Accessibility Skills Hiring Toolkit"
9+
noindex={true}
10+
>
11+
<Header />
12+
13+
<main class="flex-1">
14+
<div class="max-w-2xl px-4 py-4 mx-auto bg-slate-50">
15+
<h1 class="h1__inline">How to Contribute a Role</h1>
16+
17+
<p>
18+
This guide will help you add a new role to the Accessibility Skills
19+
Hiring Toolkit. Follow these steps to create a properly formatted role
20+
file.
21+
</p>
22+
23+
<h2>Step 1: Create Your File Name</h2>
24+
25+
<p>
26+
File names must be lowercase with hyphens between words, ending in
27+
<code>.md</code>. Use the tool below to convert your role title into the
28+
correct format:
29+
</p>
30+
31+
<div class="file-name-converter">
32+
<label for="roleInput" class="block mb-2 font-bold">
33+
Enter your role name:
34+
</label>
35+
<input
36+
type="text"
37+
id="roleInput"
38+
placeholder="UX Researcher"
39+
class="w-full p-2 mb-2 border border-gray-300 rounded"
40+
/>
41+
<p class="mb-2">
42+
<strong>File name:</strong>
43+
<code id="fileOutput" class="px-2 py-1 bg-gray-100 rounded"
44+
>ux-researcher.md</code
45+
>
46+
</p>
47+
<button
48+
id="copyBtn"
49+
class="px-4 py-2 text-base font-bold text-white bg-blue-900 rounded cursor-pointer focus:outline-2 focus:outline-black outline-offset-2 hover:bg-black focus:bg-black"
50+
>
51+
Copy File Name
52+
</button>
53+
</div>
54+
55+
<h2>Step 2: Understand the H1 (Main Title)</h2>
56+
57+
<p>
58+
The first heading in your file (marked with a single <code>#</code>)
59+
becomes the role title. This is what appears:
60+
</p>
61+
62+
<ul class="pl-6 list-disc">
63+
<li>On the homepage role list</li>
64+
<li>As the page title when someone views the role</li>
65+
</ul>
66+
67+
<p>
68+
<strong>Example:</strong> If your file contains <code
69+
># UX Researcher</code
70+
>, then "UX Researcher" will appear on the homepage and as the page
71+
title.
72+
</p>
73+
74+
<h2>Step 3: Learn Basic Markdown</h2>
75+
76+
<p>
77+
Markdown is a simple way to format text. Here are the basics you'll
78+
need:
79+
</p>
80+
81+
<h3>Headings</h3>
82+
83+
<div class="markdown-example">
84+
<pre><code># Main Title (H1) - Use once at the top
85+
## Section Title (H2)
86+
### Subsection Title (H3)
87+
#### Smaller Section (H4)</code></pre>
88+
</div>
89+
90+
<h3>Bullet Lists</h3>
91+
92+
<div class="markdown-example">
93+
<pre><code>- First item
94+
- Second item
95+
- Third item
96+
- Sub-item (indent with 2 spaces)
97+
- Another sub-item
98+
- Even deeper sub-item (indent with 4 spaces)</code></pre>
99+
</div>
100+
101+
<h3>Numbered Lists</h3>
102+
103+
<div class="markdown-example">
104+
<pre><code>1. First step
105+
2. Second step
106+
3. Third step
107+
- You can mix bullets under numbers
108+
- Just indent with 3 spaces</code></pre>
109+
</div>
110+
111+
<h3>Links</h3>
112+
113+
<div class="markdown-example">
114+
<pre><code>[Link text here](https://example.com)</code></pre>
115+
</div>
116+
117+
<h3>Emphasis</h3>
118+
119+
<div class="markdown-example">
120+
<pre><code>**Bold text**
121+
*Italic text*</code></pre>
122+
</div>
123+
124+
<h2>Step 4: Use the Role Template</h2>
125+
126+
<p>
127+
Copy this template and fill in the sections with your role's specific
128+
information:
129+
</p>
130+
131+
<div class="template-box">
132+
<button
133+
id="copyTemplateBtn"
134+
class="px-4 py-2 mb-3 text-base font-bold text-gray-800 bg-blue-100 rounded cursor-pointer focus:outline-2 focus:outline-blue-200 outline-offset-2 hover:bg-blue-200 focus:bg-blue-200"
135+
>
136+
Copy Template
137+
</button>
138+
<pre
139+
id="templateContent"><code># [Your Role Title Here]
140+
141+
## Position Description
142+
143+
### Responsibilities
144+
145+
- The [Role Title] [brief description of what this role does].
146+
- The [Role Title] ensures compliance with digital accessibility regulations and requirements by performing the following duties and responsibilities:
147+
- [Responsibility 1]
148+
- [Responsibility 2]
149+
- [Responsibility 3]
150+
151+
### Qualifications
152+
153+
#### Required
154+
155+
Applicants for the [Role Title] role are required to have these qualifications:
156+
157+
- [Required qualification 1]
158+
- [Required qualification 2]
159+
- [Required qualification 3]
160+
161+
#### Preferred
162+
163+
Applicants with the following qualifications will be preferred:
164+
165+
- [Preferred qualification 1]
166+
- [Preferred qualification 2]
167+
168+
## Interview Questions
169+
170+
### Screening
171+
172+
- [Qualification or skill being assessed]
173+
- [Question 1]?
174+
- [Question 2]?
175+
- [Question 3]?
176+
177+
### Interview Committee
178+
179+
#### Required
180+
181+
- [Qualification or skill being assessed]
182+
- [Question 1]?
183+
- [Question 2]?
184+
185+
#### Preferred
186+
187+
- [Qualification or skill being assessed]
188+
- [Question 1]?
189+
- [Question 2]?
190+
191+
## Translations
192+
193+
A list of translations will be provided here when received by language. Please submit through GitHub.</code></pre>
194+
</div>
195+
196+
<h2>Step 5: Submit Your Role</h2>
197+
198+
<p>
199+
Once you've created your markdown file using the template above, submit
200+
it through GitHub:
201+
</p>
202+
203+
<ol>
204+
<li>
205+
Go to the <a
206+
href="https://github.com/teachaccess/accessibility-skills-hiring-toolkit/tree/gh-pages/src/content/roles"
207+
target="_blank"
208+
rel="noopener noreferrer">roles folder on GitHub</a
209+
>
210+
</li>
211+
<li>Select "Add file" → "Create new file"</li>
212+
<li>Name your file using the file name from Step 1</li>
213+
<li>Paste your content based on the template from Step 4</li>
214+
<li>Select "Propose new file" to create a pull request</li>
215+
</ol>
216+
</div>
217+
</main>
218+
219+
<Footer />
220+
</BaseLayout>
221+
222+
<style>
223+
code {
224+
background-color: #f3f4f6;
225+
padding: 0.125rem 0.375rem;
226+
border-radius: 0.25rem;
227+
font-family: monospace;
228+
font-size: 0.9em;
229+
}
230+
231+
.markdown-example,
232+
.template-box {
233+
background-color: #1e293b;
234+
color: #e2e8f0;
235+
padding: 1rem;
236+
border-radius: 0.5rem;
237+
margin: 1rem 0;
238+
overflow-x: auto;
239+
}
240+
241+
.markdown-example pre,
242+
.template-box pre {
243+
margin: 0;
244+
}
245+
246+
.markdown-example code,
247+
.template-box code {
248+
background-color: transparent;
249+
color: #e2e8f0;
250+
padding: 0;
251+
font-size: 0.875rem;
252+
}
253+
254+
.file-name-converter {
255+
background-color: #f8fafc;
256+
padding: 1.5rem;
257+
border-radius: 0.5rem;
258+
border: 1px solid #cbd5e1;
259+
margin: 1rem 0;
260+
}
261+
262+
ol {
263+
list-style: decimal;
264+
padding-left: 1.5rem;
265+
margin: 1rem 0;
266+
}
267+
268+
ol li {
269+
margin: 0.5rem 0;
270+
}
271+
</style>
272+
273+
<script>
274+
// File name converter
275+
const roleInput = document.getElementById("roleInput") as HTMLInputElement;
276+
const fileOutput = document.getElementById("fileOutput");
277+
const copyBtn = document.getElementById("copyBtn");
278+
const copyTemplateBtn = document.getElementById("copyTemplateBtn");
279+
const templateContent = document.getElementById("templateContent");
280+
281+
function toKebabCase(str: string): string {
282+
return (
283+
str
284+
.trim()
285+
.toLowerCase()
286+
// Replace spaces and special characters with hyphens
287+
.replace(/[^a-z0-9]+/g, "-")
288+
// Remove leading/trailing hyphens
289+
.replace(/^-+|-+$/g, "") + ".md"
290+
);
291+
}
292+
293+
roleInput?.addEventListener("input", (e) => {
294+
const input = (e.target as HTMLInputElement).value;
295+
const fileName = toKebabCase(input);
296+
if (fileOutput) {
297+
fileOutput.textContent = fileName || "your-role-name.md";
298+
}
299+
});
300+
301+
copyBtn?.addEventListener("click", () => {
302+
const fileName = fileOutput?.textContent || "";
303+
navigator.clipboard.writeText(fileName).then(() => {
304+
const originalText = copyBtn.textContent;
305+
copyBtn.textContent = "Copied!";
306+
setTimeout(() => {
307+
copyBtn.textContent = originalText;
308+
}, 2000);
309+
});
310+
});
311+
312+
copyTemplateBtn?.addEventListener("click", () => {
313+
const template = templateContent?.textContent || "";
314+
navigator.clipboard.writeText(template).then(() => {
315+
const originalText = copyTemplateBtn.textContent;
316+
copyTemplateBtn.textContent = "Copied!";
317+
setTimeout(() => {
318+
copyTemplateBtn.textContent = originalText;
319+
}, 2000);
320+
});
321+
});
322+
</script>

‎src/styles/global.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ a.github-button {
2020
@apply text-white text-3xl md:text-5xl font-bold text-pretty tracking-wide leading-normal inline-block;
2121
}
2222

23+
.h1__inline {
24+
@apply text-gray-800 text-3xl md:text-5xl font-bold text-pretty tracking-wide leading-normal inline-block;
25+
}
26+
2327
.role-content h1 {
2428
@apply text-4xl font-bold text-white tracking-wide bg-sky-800 py-8 mb-4 text-balance;
2529
margin-left: calc(-50vw + 50%);

0 commit comments

Comments
 (0)