Skip to content

Commit fc1f636

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
initial draft
1 parent 74cd705 commit fc1f636

File tree

1 file changed

+366
-0
lines changed

1 file changed

+366
-0
lines changed

‎src/routes/community/blog-posts/+page.svelte‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
<script>
2+
import WarningText from "$lib/components/content/WarningText.svelte";
3+
import InsetText from "$lib/components/content/InsetText.svelte";
4+
import RelatedContent from "$lib/components/ui/RelatedContent.svelte";
5+
</script>
6+
7+
<svelte:head>
8+
<title>Blog posts, videos and podcasts - MHCLG Svelte Component Library</title
9+
>
10+
<meta
11+
name="description"
12+
content="Discover blog posts, videos, and podcasts about the MHCLG Svelte Component Library, including technical insights, team updates, and community resources."
13+
/>
14+
</svelte:head>
15+
16+
<div class="govuk-grid-row">
17+
<div class="govuk-grid-column-two-thirds">
18+
<h1 class="govuk-heading-xl">Blog posts, videos and podcasts</h1>
19+
20+
<p class="govuk-body-l">
21+
Stay up to date with the latest insights, technical articles, and updates
22+
from the MHCLG Svelte Component Library team and the wider government
23+
design community.
24+
</p>
25+
26+
<WarningText
27+
assistiveText="Note"
28+
text="This is an alpha service. Content will be added regularly as we publish new articles, videos, and podcast appearances."
29+
/>
30+
31+
<h2 class="govuk-heading-l">What you'll find here</h2>
32+
33+
<p class="govuk-body">
34+
We share our experiences, learnings, and technical insights through
35+
various content formats to help the government design and development
36+
community:
37+
</p>
38+
39+
<div class="govuk-grid-row govuk-!-margin-top-6">
40+
<div class="govuk-grid-column-one-half">
41+
<h3 class="govuk-heading-m">Blog posts</h3>
42+
<ul class="govuk-list govuk-list--bullet">
43+
<li>Technical deep-dives into Svelte 5 and modern web development</li>
44+
<li>Case studies from our real-world government projects</li>
45+
<li>Accessibility best practices for data visualisation</li>
46+
<li>Performance optimisation techniques</li>
47+
<li>Design system evolution and decision-making</li>
48+
</ul>
49+
</div>
50+
<div class="govuk-grid-column-one-half">
51+
<h3 class="govuk-heading-m">Videos and podcasts</h3>
52+
<ul class="govuk-list govuk-list--bullet">
53+
<li>Conference talks and presentations</li>
54+
<li>Component library demonstrations</li>
55+
<li>Team interviews and behind-the-scenes content</li>
56+
<li>Community discussions and Q&A sessions</li>
57+
<li>Technical tutorials and walkthroughs</li>
58+
</ul>
59+
</div>
60+
</div>
61+
62+
<h2 class="govuk-heading-l">Featured content</h2>
63+
64+
<p class="govuk-body">Here are some highlights from our content library:</p>
65+
66+
<h3 class="govuk-heading-m">Technical articles</h3>
67+
68+
<div class="content-item">
69+
<h4 class="govuk-heading-s">
70+
"Building Accessible Data Visualisations with Svelte 5"
71+
</h4>
72+
<p class="govuk-body-s">
73+
<strong>Coming soon</strong> - A comprehensive guide to creating charts,
74+
maps, and interactive data displays that meet WCAG 2.1 AA standards.
75+
</p>
76+
<p class="govuk-body-s">
77+
<em
78+
>Topics: Accessibility, Data visualisation, Svelte 5, ARIA patterns</em
79+
>
80+
</p>
81+
</div>
82+
83+
<div class="content-item">
84+
<h4 class="govuk-heading-s">
85+
"From SPA in Plotly Dash to Progressive Enhancement: A Government Data Platform
86+
Journey"
87+
</h4>
88+
<p class="govuk-body-s">
89+
<strong>Coming soon</strong> - How we moved from a SPA
90+
to a modern, accessible web platform using Svelte and progressive enhancement
91+
principles.
92+
</p>
93+
<p class="govuk-body-s">
94+
<em
95+
>Topics: Progressive enhancement, Government services, Performance</em
96+
>
97+
</p>
98+
</div>
99+
100+
<div class="content-item">
101+
<h4 class="govuk-heading-s">
102+
"Component Library Architecture: Lessons from Production"
103+
</h4>
104+
<p class="govuk-body-s">
105+
<strong>Coming soon</strong> - Technical decisions, trade-offs, and lessons
106+
learned from building and maintaining a component library used across multiple
107+
government services.
108+
</p>
109+
<p class="govuk-body-s">
110+
<em>Topics: Architecture, TypeScript, Testing, Maintenance</em>
111+
</p>
112+
</div>
113+
114+
<h3 class="govuk-heading-m">Team insights</h3>
115+
116+
<div class="content-item">
117+
<h4 class="govuk-heading-s">
118+
"Why We Chose Svelte for Government Services"
119+
</h4>
120+
<p class="govuk-body-s">
121+
<strong>Coming soon</strong> - The decision-making process behind choosing
122+
Svelte 5 over other frameworks for government digital services, including
123+
performance, accessibility, and developer experience considerations.
124+
</p>
125+
<p class="govuk-body-s">
126+
<em
127+
>Topics: Framework selection, Government requirements, Team decisions</em
128+
>
129+
</p>
130+
</div>
131+
132+
<div class="content-item">
133+
<h4 class="govuk-heading-s">
134+
"Multidisciplinary Team Collaboration in Component Libraries"
135+
</h4>
136+
<p class="govuk-body-s">
137+
<strong>Coming soon</strong> - How our team of developers, designers, user
138+
researchers, and data engineers work together to create user-centred components.
139+
</p>
140+
<p class="govuk-body-s">
141+
<em>Topics: Team collaboration, Agile practices, User research</em>
142+
</p>
143+
</div>
144+
145+
<div class="content-item">
146+
<h4 class="govuk-heading-s">
147+
"Modern Data Visualisation in Government: Beyond the Dashboard"
148+
</h4>
149+
<p class="govuk-body-s">
150+
<strong>Coming soon</strong> - Presentation exploring alternatives
151+
to traditional dashboard approaches for government data products.
152+
</p>
153+
<p class="govuk-body-s">
154+
<em>Format: Conference talk (video and slides)</em>
155+
</p>
156+
</div>
157+
158+
<div class="content-item">
159+
<h4 class="govuk-heading-s">
160+
"Svelte 5 in Production: A Government Case Study"
161+
</h4>
162+
<p class="govuk-body-s">
163+
<strong>Coming soon</strong> - Real-world experiences of using Svelte 5 in
164+
government services, including challenges, benefits, and lessons learned.
165+
</p>
166+
<p class="govuk-body-s">
167+
<em>Format: Webinar and podcast episode</em>
168+
</p>
169+
</div>
170+
171+
<!-- <h3 class="govuk-heading-m">Conference talks and presentations</h3> -->
172+
173+
174+
175+
<h2 class="govuk-heading-l">Community contributions</h2>
176+
177+
<p class="govuk-body">
178+
We also feature content from the wider government design and development
179+
community:
180+
</p>
181+
182+
<InsetText>
183+
{#snippet content()}
184+
<strong>Want to contribute?</strong> If you've written about design
185+
systems, Svelte, accessibility, or government digital services, we'd
186+
love to feature your content.
187+
<a
188+
href="mailto:[email protected]"
189+
class="govuk-link">Get in touch</a
190+
> to discuss collaboration opportunities.
191+
{/snippet}
192+
</InsetText>
193+
194+
<h3 class="govuk-heading-m">Guest articles</h3>
195+
196+
<div class="content-item">
197+
<h4 class="govuk-heading-s">
198+
"Accessibility Testing in Government: Tools and Techniques"
199+
</h4>
200+
<p class="govuk-body-s">
201+
<strong>Coming soon</strong> - Guest article from accessibility specialists
202+
across government sharing practical testing approaches and tools.
203+
</p>
204+
<p class="govuk-body-s">
205+
<em>Contributors: Cross-government accessibility community</em>
206+
</p>
207+
</div>
208+
209+
<h3 class="govuk-heading-m">Community discussions</h3>
210+
211+
<div class="content-item">
212+
<h4 class="govuk-heading-s">
213+
"Design System Governance: Lessons from Multiple Departments"
214+
</h4>
215+
<p class="govuk-body-s">
216+
<strong>Coming soon</strong> - Panel discussion with design system leads
217+
from across government sharing governance approaches and challenges.
218+
</p>
219+
<p class="govuk-body-s">
220+
<em>Format: Recorded panel discussion and podcast</em>
221+
</p>
222+
</div>
223+
224+
<h2 class="govuk-heading-l">Stay updated</h2>
225+
226+
<p class="govuk-body">
227+
We're continuously creating new content. Here's how to stay informed:
228+
</p>
229+
230+
<ul class="govuk-list govuk-list--bullet">
231+
<li>
232+
<strong>Email updates</strong> - Contact us at
233+
<a
234+
href="mailto:[email protected]"
235+
class="govuk-link"
236+
>
237+
[email protected]
238+
</a>
239+
to join our mailing list
240+
</li>
241+
<li>
242+
<strong>GitHub discussions</strong> - Follow our
243+
<a
244+
href="https://github.com/your-org/component-library/discussions"
245+
class="govuk-link"
246+
rel="external">GitHub repository</a
247+
>
248+
for announcements
249+
</li>
250+
<li>
251+
<strong>Community events</strong> - We'll announce speaking engagements and
252+
community sessions through our usual channels
253+
</li>
254+
</ul>
255+
256+
<h2 class="govuk-heading-l">Suggest content topics</h2>
257+
258+
<p class="govuk-body">
259+
Is there something specific you'd like us to write about or present on? We
260+
welcome suggestions from the community:
261+
</p>
262+
263+
<ul class="govuk-list govuk-list--bullet">
264+
<li>Technical tutorials or deep-dives</li>
265+
<li>Case studies from specific projects</li>
266+
<li>Accessibility guidance for particular scenarios</li>
267+
<li>Design system governance and processes</li>
268+
<li>Team collaboration and working practices</li>
269+
</ul>
270+
271+
<p class="govuk-body">
272+
<a
273+
href="mailto:[email protected]"
274+
class="govuk-link"
275+
>
276+
Send us your suggestions
277+
</a>
278+
and we'll consider them for future content.
279+
</p>
280+
</div>
281+
282+
<div class="govuk-grid-column-one-third">
283+
<RelatedContent
284+
sections={[
285+
{
286+
type: "main",
287+
id: "related-content",
288+
title: "Related content",
289+
links: [
290+
{
291+
title: "Our team and delivery approach",
292+
base_path: "/community/team-approach",
293+
},
294+
{
295+
title: "Projects",
296+
base_path: "/community/projects",
297+
},
298+
{
299+
title: "Roadmap",
300+
base_path: "/community/roadmap",
301+
},
302+
],
303+
},
304+
{
305+
type: "subheading",
306+
id: "get-involved",
307+
subheading: "Get involved",
308+
links: [
309+
{
310+
title: "Propose a component or pattern",
311+
base_path: "/community/propose-component",
312+
},
313+
{
314+
title: "Contribution criteria",
315+
base_path: "/community/contribution-criteria",
316+
},
317+
{
318+
title: "Share findings about your users",
319+
base_path: "/community/share-findings",
320+
},
321+
],
322+
},
323+
{
324+
type: "other",
325+
id: "external-resources",
326+
subheading: "External resources",
327+
links: [
328+
{
329+
title: "Government Design Community",
330+
url: "https://designnotes.blog.gov.uk/",
331+
},
332+
{
333+
title: "GOV.UK Design System blog",
334+
url: "https://designsystem.service.gov.uk/community/",
335+
},
336+
{
337+
title: "Cross-Government Design Community",
338+
url: "https://www.gov.uk/service-manual/communities/design-community",
339+
},
340+
],
341+
},
342+
]}
343+
/>
344+
</div>
345+
</div>
346+
347+
<style>
348+
.content-item {
349+
margin-bottom: 2rem;
350+
padding: 1rem;
351+
border-left: 4px solid #00625e;
352+
background-color: #f8f8f8;
353+
}
354+
355+
.content-item h4 {
356+
margin-bottom: 0.5rem;
357+
}
358+
359+
.content-item p {
360+
margin-bottom: 0.5rem;
361+
}
362+
363+
.content-item p:last-child {
364+
margin-bottom: 0;
365+
}
366+
</style>

0 commit comments

Comments
 (0)