Skip to content

Commit 3e9d9fd

Browse files
Ibrahim-HaizelIbrahim-Haizel
authored
Merge pull request #79 from communitiesuk/media-page-content
Media page content
2 parents db47d00 + 0d23fb5 commit 3e9d9fd

File tree

3 files changed

+313
-0
lines changed

3 files changed

+313
-0
lines changed

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

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
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="Stay up to date with the latest insights, technical deep-dives, and community discussions from the MHCLG Svelte Component Library team."
13+
/>
14+
</svelte:head>
15+
16+
<div class="govuk-grid-row">
17+
<div class="govuk-grid-column-full">
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 deep-dives, and
22+
community discussions from our team. We regularly share our learnings,
23+
best practices, and behind-the-scenes content about building accessible,
24+
performant government services.
25+
</p>
26+
27+
<WarningText
28+
text="Our content library is currently being developed. We'll be publishing regular updates about our work, technical insights, and community activities soon."
29+
/>
30+
31+
<div class="govuk-grid-row govuk-!-margin-top-8">
32+
<div class="govuk-grid-column-one-half">
33+
<img
34+
src="/assets/images/undraw_content-creator_vuqg.svg"
35+
alt="Illustration of a person creating content with documents and interface elements"
36+
class="govuk-!-margin-bottom-4"
37+
style="width: 100%; max-width: 300px; height: 200px; object-fit: contain;"
38+
/>
39+
40+
<h2 class="govuk-heading-l">Blog posts</h2>
41+
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>Component library evolution and decision-making</li>
48+
</ul>
49+
</div>
50+
51+
<div class="govuk-grid-column-one-half">
52+
<img
53+
src="/assets/images/undraw_online-media_opxh.svg"
54+
alt="Illustration of a person interacting with video content and media interfaces"
55+
class="govuk-!-margin-bottom-4"
56+
style="width: 100%; max-width: 300px; height: 200px; object-fit: contain;"
57+
/>
58+
59+
<h2 class="govuk-heading-l">Videos and podcasts</h2>
60+
61+
<ul class="govuk-list govuk-list--bullet">
62+
<li>Conference talks and presentations</li>
63+
<li>Component library demonstrations</li>
64+
<li>Team interviews and behind-the-scenes content</li>
65+
<li>Community discussions and Q&A sessions</li>
66+
<li>Technical tutorials and walkthroughs</li>
67+
</ul>
68+
</div>
69+
</div>
70+
71+
<h2 class="govuk-heading-l govuk-!-margin-top-8">Featured content</h2>
72+
73+
<p class="govuk-body">Here are some highlights from our content library:</p>
74+
75+
<div class="govuk-grid-row govuk-!-margin-top-6">
76+
<div class="govuk-grid-column-full">
77+
<!-- <img
78+
src="/assets/images/undraw_content-creator_vuqg.svg"
79+
alt="Illustration representing featured content and articles"
80+
class="govuk-!-margin-bottom-6"
81+
style="width: 100%; max-width: 400px; height: 250px; object-fit: contain; margin: 0 auto; display: block;"
82+
/> -->
83+
84+
<h3 class="govuk-heading-m">Technical articles</h3>
85+
86+
<div class="content-item">
87+
<h4 class="govuk-heading-s">
88+
"Building Accessible Data Visualisations with Svelte 5"
89+
</h4>
90+
<p class="govuk-body-s">
91+
<strong>Coming soon</strong> - A comprehensive guide to creating charts,
92+
maps, and interactive data displays that meet WCAG 2.1 AA standards.
93+
</p>
94+
<p class="govuk-body-s">
95+
<em
96+
>Topics: Accessibility, Data visualisation, Svelte 5, ARIA
97+
patterns</em
98+
>
99+
</p>
100+
</div>
101+
102+
<div class="content-item">
103+
<h4 class="govuk-heading-s">
104+
"From SPA in Plotly Dash to Progressive Enhancement: A Government
105+
Data Platform Journey"
106+
</h4>
107+
<p class="govuk-body-s">
108+
<strong>Coming soon</strong> - How we moved from a SPA to a modern, accessible
109+
web platform using Svelte and progressive enhancement principles.
110+
</p>
111+
<p class="govuk-body-s">
112+
<em
113+
>Topics: Progressive enhancement, Government services, Performance</em
114+
>
115+
</p>
116+
</div>
117+
118+
<div class="content-item">
119+
<h4 class="govuk-heading-s">
120+
"Component Library Architecture: Lessons from Production"
121+
</h4>
122+
<p class="govuk-body-s">
123+
<strong>Coming soon</strong> - Technical decisions, trade-offs, and lessons
124+
learned from building and maintaining a component library used across
125+
multiple government services.
126+
</p>
127+
<p class="govuk-body-s">
128+
<em>Topics: Architecture, TypeScript, Testing, Maintenance</em>
129+
</p>
130+
</div>
131+
132+
<h3 class="govuk-heading-m">Team insights</h3>
133+
134+
<div class="content-item">
135+
<h4 class="govuk-heading-s">
136+
"Why We Chose Svelte for Government Services"
137+
</h4>
138+
<p class="govuk-body-s">
139+
<strong>Coming soon</strong> - The decision-making process behind choosing
140+
Svelte 5 over other frameworks for government digital services, including
141+
performance, accessibility, and developer experience considerations.
142+
</p>
143+
<p class="govuk-body-s">
144+
<em
145+
>Topics: Framework selection, Government requirements, Team
146+
decisions</em
147+
>
148+
</p>
149+
</div>
150+
151+
<div class="content-item">
152+
<h4 class="govuk-heading-s">
153+
"Multidisciplinary Team Collaboration in Component Libraries"
154+
</h4>
155+
<p class="govuk-body-s">
156+
<strong>Coming soon</strong> - How our team of developers, designers,
157+
user researchers, and data engineers work together to create user-centred
158+
components.
159+
</p>
160+
<p class="govuk-body-s">
161+
<em>Topics: Team collaboration, Agile practices, User research</em>
162+
</p>
163+
</div>
164+
165+
<h3 class="govuk-heading-m govuk-!-margin-top-6">
166+
Video content and presentations
167+
</h3>
168+
169+
<div class="content-item">
170+
<h4 class="govuk-heading-s">
171+
"Modern Data Visualisation in Government: Beyond the Dashboard"
172+
</h4>
173+
<p class="govuk-body-s">
174+
<strong>Coming soon</strong> - Presentation exploring alternatives to
175+
traditional dashboard approaches for government data products.
176+
</p>
177+
<p class="govuk-body-s">
178+
<em>Format: Webinar (video and slides)</em>
179+
</p>
180+
</div>
181+
182+
<div class="content-item">
183+
<h4 class="govuk-heading-s">
184+
"Svelte 5 in Production: A Government Case Study"
185+
</h4>
186+
<p class="govuk-body-s">
187+
<strong>Coming soon</strong> - Real-world experiences of using Svelte
188+
5 in government services, including challenges, benefits, and lessons
189+
learned.
190+
</p>
191+
<p class="govuk-body-s">
192+
<em>Format: Webinar (video and slides)</em>
193+
</p>
194+
</div>
195+
196+
<div class="content-item">
197+
<h4 class="govuk-heading-s">
198+
"Component Library Walkthrough: Interactive Documentation in Action"
199+
</h4>
200+
<p class="govuk-body-s">
201+
<strong>Coming soon</strong> - Live demonstration of our component library's
202+
interactive documentation and "try before you buy" philosophy.
203+
</p>
204+
<p class="govuk-body-s">
205+
<em>Format: Webinar (video and slides)</em>
206+
</p>
207+
</div>
208+
209+
<InsetText>
210+
{#snippet content()}
211+
Want to be notified when we publish new content? <a
212+
href="mailto:[email protected]"
213+
class="govuk-link">Get in touch</a
214+
> to join our mailing list and stay up to date with our latest posts
215+
and videos.
216+
{/snippet}
217+
</InsetText>
218+
219+
<h2 class="govuk-heading-l govuk-!-margin-top-8">
220+
Community contributions
221+
</h2>
222+
223+
<p class="govuk-body">
224+
We encourage contributions from the wider government community. If
225+
you've used our components in your service or have insights to share,
226+
we'd love to feature your work.
227+
</p>
228+
229+
<h3 class="govuk-heading-m">How to contribute</h3>
230+
231+
<ul class="govuk-list govuk-list--bullet">
232+
<li>
233+
<strong>Case studies</strong> - Share how you've used our components
234+
in your service
235+
</li>
236+
<li>
237+
<strong>Technical insights</strong> - Write about challenges you've solved
238+
or patterns you've discovered
239+
</li>
240+
<li>
241+
<strong>User research</strong> - Share findings that could help improve
242+
our components
243+
</li>
244+
<li>
245+
<strong>Guest posts</strong> - Contribute articles about related topics
246+
like accessibility, performance, or design systems
247+
</li>
248+
</ul>
249+
250+
<p class="govuk-body">
251+
<a
252+
href="mailto:[email protected]"
253+
class="govuk-link govuk-!-font-weight-bold">Contact us</a
254+
>
255+
to discuss your contribution ideas.
256+
</p>
257+
258+
<h2 class="govuk-heading-l govuk-!-margin-top-8">Stay connected</h2>
259+
260+
<p class="govuk-body">
261+
Follow our work and join the conversation about government design
262+
systems and modern web development.
263+
</p>
264+
265+
<ul class="govuk-list govuk-list--bullet">
266+
<li>
267+
<a href="/community/team-approach/" class="govuk-link"
268+
>Learn about our team and approach</a
269+
>
270+
</li>
271+
<li>
272+
<a href="/community/projects/" class="govuk-link"
273+
>See our current projects</a
274+
>
275+
</li>
276+
<li>
277+
<a href="/community/roadmap/" class="govuk-link">View our roadmap</a
278+
>
279+
</li>
280+
<li>
281+
<a
282+
href="mailto:[email protected]"
283+
class="govuk-link">Get in touch with our team</a
284+
>
285+
</li>
286+
</ul>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
291+
292+
<style>
293+
.content-item {
294+
margin-bottom: 2rem;
295+
padding: 1.5rem;
296+
border-left: 4px solid #00625e;
297+
background-color: #f8f8f8;
298+
}
299+
300+
.content-item h4 {
301+
margin-bottom: 0.5rem;
302+
}
303+
304+
.content-item p {
305+
margin-bottom: 0.5rem;
306+
}
307+
308+
.content-item p:last-child {
309+
margin-bottom: 0;
310+
}
311+
</style>

‎static/assets/images/undraw_content-creator_vuqg.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)