Merge pull request #2109 from mainmatter/svelte-workshop

add Svelte workshop

src/authors/paoloricciuti.md

@@ -0,0 +1,8 @@
+---
+name: "Paolo Ricciuti"
+github: paoloricciuti
+twitter: paoloricciuti
+bio:
+  'Senior Software Engineer at Mainmatter, Co-creator of <a
+  href="https://sveltelab.dev">sveltelab.dev</a>'
+---

src/components/layouts/workshop.njk

@@ -46,7 +46,7 @@ layout: 'base'
             </div>
           </div>
           <div class="author__details{% if lead.bio.length > 200 %} author__details--full-width{% endif %} text--sm">
-            <p>{{ lead.bio }}</p>
+            <p>{{ lead.bio | safe }}</p>
           </div>
         </div>
       {%- endfor -%}

src/services/workshops.njk

@@ -45,54 +45,62 @@ title: Workshops | Our Services
 
 {% set 'slide_4' = {
   "color": "white",
+  "title": "Svelte & SvelteKit",
+  "text": "Two or three days hands-on Svelte and SvelteKit workshop. We take participants through the entire process of building a real-world, progressively enhanced application.",
+  "linkUrl": "/services/workshops/svelte-and-sveltekit/",
+  "linkText": "Learn more"
+} %}
+
+{% set 'slide_5' = {
+  "color": "purple",
   "title": "Hands-on Ember.js",
   "text": "Two or three days hands-on Ember.js workshop. We cover all relevant aspects of the framework from the CLI to routing and
   components, ember-data and testing.",
   "linkUrl": "/services/workshops/hands-on-ember/",
   "linkText": "Learn more"
 } %}
 
-{% set 'slide_5' = {
-  "color": "purple",
+{% set 'slide_6' = {
+  "color": "black",
   "title": "Introduction to Rust for Web Developers",
   "text": "Two or three days hands-on Rust workshop teaching all the main concepts by developing a simple web application.",
   "linkUrl": "/services/workshops/introduction-to-rust-for-web-developers/",
   "linkText": "Learn more"
 } %}
 
-{% set 'slide_6' = {
-  "color": "black",
+{% set 'slide_7' = {
+  "color": "white",
   "title": "Web-based Services in Rust",
   "text": "Rust allows creating web services that are fast, reliable, and cost-effective. This workshop aims to guide you through the process of building web services using the ecosystem around the Tokio async runtime.",
   "linkUrl": "/services/workshops/web-based-services-in-rust/",
   "linkText": "Learn more"
 } %}
 
-{% set 'slide_7' = {
-  "color": "white",
+{% set 'slide_8' = {
+  "color": "purple",
   "title": "You can't fix what you can't see: telemetry for Rust APIs",
   "text": "Your Rust application has finally been deployed to production! Nice! But is it working? This workshop will introduce you to a comprehensive toolkit to detect, troubleshoot and resolve issues in your Rust APIs.",
   "linkUrl": "/services/workshops/telemetry-for-rust-apis/",
   "linkText": "Learn more"
 } %}
 
-{% set 'slide_8' = {
-  "color": "purple",
+{% set 'slide_9' = {
+  "color": "black",
   "title": "Testing in Rust: an introduction",
   "text": "Rust's type system is great, but it's not enough on its own to ensure correctness: a solid testing strategy is a requirement for any serious Rust application. By the end of this workshop, you will be well equipped for the testing journey ahead of you!",
   "linkUrl": "/services/workshops/an-introduction-to-testing-in-rust/",
   "linkText": "Learn more"
 } %}
 
-{% set 'slide_9' = {
-  "color": "black",
+{% set 'slide_10' = {
+  "color": "white",
   "title": "Testing in Rust: going beyond the basics",
   "text": "No application is an island: you need to interact with third-party APIs, databases and who knows what else. Testing those interactions is tricky, to say the least! This workshop will focus on expanding your Rust testing toolkit, going beyond the basic techniques you're already familiar with. At the end of the session, you'll have a strategy to test most of the scenarios that are relevant for a complex Rust application.",
   "linkUrl": "/services/workshops/advanced-testing-in-rust/",
   "linkText": "Learn more"
 } %}
 
-{% set slides = [slide_1, slide_2, slide_3, slide_4, slide_5, slide_6, slide_7, slide_8, slide_9] %}
+{% set slides = [slide_1, slide_2, slide_3, slide_4, slide_5, slide_6, slide_7, slide_8, slide_9, slide_10] %}
 {{ scrollSlides('workshops', slides, page.url) }}
 
 {% include 'content/hero-grow-with-us.njk' %}

src/workshops/svelte-and-sveltekit.md

@@ -0,0 +1,99 @@
+---
+title: Svelte & SvelteKit
+format: 2-3 days remote or on-site
+description: <p>Svelte is great choice for building fast and light-weight web
+  applications. Its unique approach of generating reactive code at compile time
+  instead of relying on a runtime, moves work out of the browser and results in
+  highly efficient code. Combined with SvelteKit, it enables engineers to build
+  large applications with ease while being able to choose among patterns like
+  SPA, MPA, SSR, SSG on a per-route basis.</p>
+
+  <p>This workshops takes participants through the entire process of building a
+  complete, real-world application and teaches the theoretical concepts along
+  the way. Each topic is introduced via an in-depth presentation followed by a
+  practice exercise.</p>
+
+  <p>All examples and practical assignments from the workshop are available
+  publicly on GitHub.</p>
+hero:
+  image: "/assets/images/workshops/svelte-and-sveltekit/hero.jpg"
+  imageAlt:
+    "Photo of a computer screen showing an IDE with an open Svelte project"
+og:
+  image: /assets/images/workshops/svelte-and-sveltekit/og-image.jpg
+topics:
+  - heading: Svelte Basics
+    text: >
+      Rendering reactive UIs is the core functionality of Svelte. We cover
+      Svelte’s unique approach to reactivity, the <code>$</code> syntax and its
+      template language. We then look into writing Svelte components, accepting
+      props, and its CSS scoping feature.
+  - heading: SvelteKit Basics
+    text: >
+      This stage introduces SvelteKit, the project framework built on Svelte. We
+      cover project creation and management, SvelteKit’s file system as well as
+      creating and managing pages.
+  - heading: Routing
+    text: >
+      We’ll dive deep into SvelteKit’s file based routing, loading and
+      displaying data as well as topics like route grouping, route params and
+      redirects.
+  - heading: Testing
+    text: >
+      SvelteKit comes with two testing strategies: Vitest for testing components
+      in isolation and Playwright for end-to-end testing. We cover both in depth
+      and present approaches for testing real applications.
+  - heading: Stores
+    text: >
+      This stage kicks off with an introduction of what stores are and how they
+      work. We continue with looking into implementing the three main stores:
+      writable, readable, and derived.
+  - heading: SvelteKit and Progressive Enhancement
+    text: >
+      The final stage of the workshop teaches how to implement progressive
+      enhancement with forms. We cover how to send data to an API, how to
+      validate forms, what server folders are, and give a brief introduction
+      into hooks. We close by looking into how to implement authentication.
+leads:
+  - name: Paolo Ricciuti
+    title: Senior Frontend Engineer
+    handle: paoloricciuti
+    image: /assets/images/authors/paoloricciuti.jpg
+    bio: >
+      Huge nerd, Svelte Ambassador and lover. He's one of the creators of <a
+      href="https://sveltelab.dev">sveltelab.dev</a> - a REPL for SvelteKit -
+      built during the first Svelte hackathon that granted him and his
+      co-creator the first place for best integration.
+  - name: Daniel Beer
+    title: Senior Frontend Engineer
+    handle: beerinho
+    authorHandle: beerinho
+    image: /assets/images/authors/beerinho.jpg
+    bio: >
+      With experience in Angular and EmberJS, Daniel has as a varied background
+      in JS Frameworks and enjoys exploring new technologies. He has used
+      SvelteKit on multiple projects with great success.
+  - name: Gabor Babicz
+    title: Senior Frontend Engineer
+    handle: zeppelin
+    authorHandle: zeppelin
+    image: /assets/images/authors/zeppelin.jpg
+    bio: >
+      Gabor is a passionate frontend engineer who has spent the past two decades
+      designing interfaces, merging functionality and aesthetics to create
+      remarkable digital experiences.
+  - name: Florian Pichler
+    title: Senior Frontend Engineer
+    handle: pichfl
+    authorHandle: pichfl
+    image: /assets/images/authors/pichfl.jpg
+    bio: >
+      Florian has been solving frontend challenges for over 15 years, with all
+      tools that became available. He has built and coached design and
+      development teams of all sizes.
+---
+
+<!--break-->
+
+The workshop can be customized for the specific needs of your team to cover
+topics like performance, debugging, or others.