Skip to content

Commit 70202d8

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
intial community page
1 parent 57d5130 commit 70202d8

File tree

2 files changed

+343
-5
lines changed

2 files changed

+343
-5
lines changed

‎src/routes/+layout.svelte‎

Lines changed: 84 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,47 @@
7575
7676
const communityNavGroups: SideNavGroup[] = [
7777
{
78-
title: "Community",
78+
title: "What we're working on",
79+
items: [{ text: "Roadmap", href: "/community/roadmap" }],
80+
},
81+
{
82+
title: "Ways to get involved",
83+
items: [
84+
{
85+
text: "Share findings about your users",
86+
href: "/community/share-findings",
87+
},
88+
{
89+
text: "Propose a component or pattern",
90+
href: "/community/propose-component",
91+
},
92+
{
93+
text: "Develop a component or pattern",
94+
href: "/community/develop-component",
95+
},
96+
{
97+
text: "Propose a content change using GitHub",
98+
href: "/community/propose-content-change",
99+
},
100+
],
101+
},
102+
{
103+
title: "How we work",
79104
items: [
80-
{ text: "Updates", href: "/community/updates" },
81-
{ text: "Contributing", href: "/community/contributing" },
105+
{
106+
text: "Our team and delivery approach",
107+
href: "/community/team-approach",
108+
},
109+
{ text: "Projects", href: "/community/projects" },
110+
{ text: "Community principles", href: "/community/principles" },
111+
{
112+
text: "Contribution approach",
113+
href: "/community/contribution-approach",
114+
},
115+
{
116+
text: "Blog posts, videos and podcasts",
117+
href: "/community/blog-posts",
118+
},
82119
],
83120
},
84121
];
@@ -175,8 +212,50 @@
175212
title: "Community",
176213
href: "/community",
177214
items: [
178-
{ text: "Updates", href: "/community/updates" },
179-
{ text: "Contributing", href: "/community/contributing" },
215+
{
216+
title: "What we're working on",
217+
items: [{ text: "Roadmap", href: "/community/roadmap" }],
218+
},
219+
{
220+
title: "Ways to get involved",
221+
items: [
222+
{
223+
text: "Share findings about your users",
224+
href: "/community/share-findings",
225+
},
226+
{
227+
text: "Propose a component or pattern",
228+
href: "/community/propose-component",
229+
},
230+
{
231+
text: "Develop a component or pattern",
232+
href: "/community/develop-component",
233+
},
234+
{
235+
text: "Propose a content change using GitHub",
236+
href: "/community/propose-content-change",
237+
},
238+
],
239+
},
240+
{
241+
title: "How we work",
242+
items: [
243+
{
244+
text: "Our team and delivery approach",
245+
href: "/community/team-approach",
246+
},
247+
{ text: "Projects", href: "/community/projects" },
248+
{ text: "Community principles", href: "/community/principles" },
249+
{
250+
text: "Contribution approach",
251+
href: "/community/contribution-approach",
252+
},
253+
{
254+
text: "Blog posts, videos and podcasts",
255+
href: "/community/blog-posts",
256+
},
257+
],
258+
},
180259
],
181260
},
182261
];

‎src/routes/community/+page.svelte‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
<script lang="ts">
2+
import InsetText from "$lib/components/content/InsetText.svelte";
3+
import WarningText from "$lib/components/content/WarningText.svelte";
4+
import RelatedContent from "$lib/components/ui/RelatedContent.svelte";
5+
import type { RelatedContentSection } from "$lib/components/ui/RelatedContent.svelte";
6+
7+
const relatedSections: RelatedContentSection[] = [
8+
{
9+
type: "main",
10+
id: "related-main",
11+
title: "Related",
12+
links: [
13+
{ title: "Get started guide", base_path: "/get-started/" },
14+
{ title: "Browse components", base_path: "/components/" },
15+
{ title: "View patterns", base_path: "/patterns/" },
16+
{
17+
title: "About & Benefits",
18+
base_path: "/get-started/about-benefits/",
19+
},
20+
],
21+
},
22+
];
23+
</script>
24+
25+
{#snippet ContributingSnippet()}
26+
<strong>Join our community:</strong> We're building this component library
27+
collaboratively with teams across government. Your expertise and feedback help
28+
us create better solutions for everyone.
29+
<a href="mailto:[email protected]" class="govuk-link"
30+
>Get in touch</a
31+
>
32+
to start contributing.
33+
{/snippet}
34+
35+
<svelte:head>
36+
<title>Community - MHCLG Svelte Component Library</title>
37+
<meta
38+
name="description"
39+
content="Join the MHCLG Svelte Component Library community. Contribute components, share research, and help build better government services."
40+
/>
41+
</svelte:head>
42+
43+
<div class="govuk-grid-row">
44+
<div class="govuk-grid-column-two-thirds">
45+
<h1 class="govuk-heading-xl">Community</h1>
46+
47+
<p class="govuk-body-l">
48+
The MHCLG Svelte Component Library is built by and for the government
49+
community. We work together to create, test, and improve components and
50+
patterns that help teams build better digital services.
51+
</p>
52+
53+
54+
<WarningText
55+
text="This community section is currently being developed. Some pages may not be available yet, but we're working to add comprehensive guidance and resources."
56+
/>
57+
58+
<InsetText content={ContributingSnippet} />
59+
60+
<h2 class="govuk-heading-l">What we're working on</h2>
61+
62+
<p class="govuk-body">
63+
We're continuously developing new components and patterns based on real
64+
user needs across government. Our work is guided by research, user
65+
feedback, and the evolving requirements of digital government services.
66+
</p>
67+
68+
<h3 class="govuk-heading-m">Current priorities</h3>
69+
70+
<ul class="govuk-list govuk-list--bullet">
71+
<li>
72+
<strong>Data visualisation components</strong> - Charts, graphs, and interactive
73+
data displays for government statistics and reporting
74+
</li>
75+
<li>
76+
<strong>Geographic and mapping components</strong> - Tools for displaying
77+
location-based data and services
78+
</li>
79+
<li>
80+
<strong>Advanced form patterns</strong> - Complex data entry workflows and
81+
validation patterns
82+
</li>
83+
<li>
84+
<strong>Accessibility enhancements</strong> - Ensuring all components meet
85+
WCAG 2.1 AA standards and work with assistive technologies
86+
</li>
87+
<li>
88+
<strong>Performance optimisation</strong> - Lightweight, fast-loading components
89+
for better user experience
90+
</li>
91+
</ul>
92+
93+
<p class="govuk-body">
94+
<a href="/community/roadmap/" class="govuk-link"
95+
>View our detailed roadmap</a
96+
> to see what's planned and when.
97+
</p>
98+
99+
<h2 class="govuk-heading-l govuk-!-margin-top-8">Ways to get involved</h2>
100+
101+
<p class="govuk-body">
102+
There are many ways to contribute to the MHCLG Svelte Component Library,
103+
whether you're a designer, developer, user researcher, or content
104+
designer.
105+
</p>
106+
107+
<div class="govuk-grid-row govuk-!-margin-top-6">
108+
<div class="govuk-grid-column-one-half">
109+
<h3 class="govuk-heading-s">Share your research</h3>
110+
<p class="govuk-body-s">
111+
Help us understand user needs by sharing research findings, usability
112+
testing results, and user feedback from your services.
113+
</p>
114+
<p class="govuk-body-s">
115+
<a href="/community/share-findings/" class="govuk-link"
116+
>Share findings about your users</a
117+
>
118+
</p>
119+
</div>
120+
<div class="govuk-grid-column-one-half">
121+
<h3 class="govuk-heading-s">Propose new solutions</h3>
122+
<p class="govuk-body-s">
123+
Suggest new components or patterns based on common problems you've
124+
encountered in your work.
125+
</p>
126+
<p class="govuk-body-s">
127+
<a href="/community/propose-component/" class="govuk-link"
128+
>Propose a component or pattern</a
129+
>
130+
</p>
131+
</div>
132+
</div>
133+
134+
<div class="govuk-grid-row govuk-!-margin-top-4">
135+
<div class="govuk-grid-column-one-half">
136+
<h3 class="govuk-heading-s">Develop components</h3>
137+
<p class="govuk-body-s">
138+
Contribute code, help with testing, or improve existing components
139+
with new features and bug fixes.
140+
</p>
141+
<p class="govuk-body-s">
142+
<a href="/community/develop-component/" class="govuk-link"
143+
>Develop a component or pattern</a
144+
>
145+
</p>
146+
</div>
147+
<div class="govuk-grid-column-one-half">
148+
<h3 class="govuk-heading-s">Improve documentation</h3>
149+
<p class="govuk-body-s">
150+
Help make our guidance clearer by suggesting improvements to
151+
documentation and examples.
152+
</p>
153+
<p class="govuk-body-s">
154+
<a href="/community/propose-content-change/" class="govuk-link"
155+
>Propose a content change using GitHub</a
156+
>
157+
</p>
158+
</div>
159+
</div>
160+
161+
<h2 class="govuk-heading-l govuk-!-margin-top-8">How we work</h2>
162+
163+
<p class="govuk-body">
164+
Our community operates on principles of openness, collaboration, and
165+
user-centred design. We believe in working in the open, sharing our
166+
processes, and learning from each other.
167+
</p>
168+
169+
<h3 class="govuk-heading-m">Our approach</h3>
170+
171+
<ul class="govuk-list govuk-list--bullet">
172+
<li>
173+
<strong>User research first</strong> - All components and patterns are based
174+
on real user needs and tested with actual users
175+
</li>
176+
<li>
177+
<strong>Accessibility by design</strong> - We build accessibility in from
178+
the start, not as an afterthought
179+
</li>
180+
<li>
181+
<strong>Iterative development</strong> - We release early, gather feedback,
182+
and continuously improve
183+
</li>
184+
<li>
185+
<strong>Cross-government collaboration</strong> - We work with teams across
186+
different departments and agencies
187+
</li>
188+
<li>
189+
<strong>Open source</strong> - All our code is open source and available
190+
for anyone to use and contribute to
191+
</li>
192+
</ul>
193+
194+
<h3 class="govuk-heading-m">Learn more about our work</h3>
195+
196+
<ul class="govuk-list govuk-list--bullet">
197+
<li>
198+
<a href="/community/team-approach/" class="govuk-link"
199+
>Our team and delivery approach</a
200+
> - How we're organised and how we work
201+
</li>
202+
<li>
203+
<a href="/community/projects/" class="govuk-link">Projects</a> - Current
204+
and completed projects
205+
</li>
206+
<li>
207+
<a href="/community/principles/" class="govuk-link"
208+
>Community principles</a
209+
> - The values that guide our work
210+
</li>
211+
<li>
212+
<a href="/community/contribution-approach/" class="govuk-link"
213+
>Contribution approach</a
214+
> - How we review and accept contributions
215+
</li>
216+
<li>
217+
<a href="/community/blog-posts/" class="govuk-link"
218+
>Blog posts, videos and podcasts</a
219+
> - Updates and insights from our team
220+
</li>
221+
</ul>
222+
223+
<h2 class="govuk-heading-l govuk-!-margin-top-8">Get started</h2>
224+
225+
<p class="govuk-body">
226+
Ready to get involved? Here are some good first steps:
227+
</p>
228+
229+
<ol class="govuk-list govuk-list--number">
230+
<li>
231+
<strong>Explore the library</strong> - Browse our
232+
<a href="/components/" class="govuk-link">components</a>
233+
and <a href="/patterns/" class="govuk-link">patterns</a> to see what's available
234+
</li>
235+
<li>
236+
<strong>Try it in your service</strong> - Follow our
237+
<a href="/get-started/" class="govuk-link">installation guide</a> to start
238+
using components in your project
239+
</li>
240+
<li>
241+
<strong>Share your feedback</strong> - Let us know how the components work
242+
for your users and what could be improved
243+
</li>
244+
<li>
245+
<strong>Join the conversation</strong> -
246+
<a
247+
href="mailto:[email protected]"
248+
class="govuk-link">Get in touch</a
249+
> to connect with other teams using the library
250+
</li>
251+
</ol>
252+
253+
254+
</div>
255+
256+
<div class="govuk-grid-column-one-third">
257+
<RelatedContent sections={relatedSections} />
258+
</div>
259+
</div>

0 commit comments

Comments
 (0)