Skip to content

Commit

Permalink
prettier (#45)
Browse files Browse the repository at this point in the history
* prettier

* missed a spot
  • Loading branch information
Rich-Harris authored Jun 21, 2024
1 parent a6fac29 commit 8090d46
Show file tree
Hide file tree
Showing 15 changed files with 78 additions and 84 deletions.
2 changes: 1 addition & 1 deletion apps/svelte.dev/content/blog/2023-06-22-svelte-4.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Announcing Svelte 4"
title: 'Announcing Svelte 4'
description: 'Updated performance, developer experience, and site'
author: The Svelte team
authorURL: https://svelte.dev/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
---
title: "What's new in Svelte: July 2023"
description: "Svelte 4.0, new website and a tour around the community"
description: 'Svelte 4.0, new website and a tour around the community'
author: Dani Sandoval
authorURL: https://dreamindani.com
---

Svelte 4 is out and folks have been building! There's a bunch of new showcases, libraries and tutorials to share. So let's get right into it...

## What's new in Svelte

The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.

If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details.

For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).

## What's new in SvelteKit

This month there were lots of awesome [bug fixes](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), so be sure to upgrade to the latest version! There are also a few new features to mention:

- The new `event.isSubRequest` boolean indicates whether this is a same-origin fetch request to one of the app's own APIs during a server request (**1.21.0**, [Docs](https://kit.svelte.dev/docs/types#public-types-requestevent), [#10170](https://github.com/sveltejs/kit/pull/10170))
- A new config option, `config.kit.env.privatePrefix` will set a private prefix on environment variables. This defaults to `''` (**1.21.0**, [Docs](https://kit.svelte.dev/docs/configuration), [#9996](https://github.com/sveltejs/kit/pull/9996))
- `VERSION` is now exported and accessible via `@sveltejs/kit`. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (**1.21.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-version), [#9969](https://github.com/sveltejs/kit/pull/9969))
Expand All @@ -27,6 +30,7 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter`
## Community Showcase

**Apps & Sites built with Svelte**

- [Heerdle](https://github.com/DreaminDani/heerdle) is a remake of Spotify's now-defunct Heardle - the daily music guessing game
- [Meoweler](https://meoweler.com/) is a travel site filled with cats and helpful facts about popular destinations
- [A tech lead from IKEA](https://www.reddit.com/r/sveltejs/comments/13w4zg3/comment/jmaxial/?utm_source=share&utm_medium=web2x&context=3) gave a few more details on the way they build pages (and page template) using Svelte
Expand All @@ -39,10 +43,12 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter`
- [YABin](https://github.com/Yureien/YABin) is Yet Another Pastebin with some very specific features

**Learning Resources**

- [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4)
- [svelte.dev: A complete overhaul](https://svelte.dev/blog/svelte-dev-overhaul)

_Featuring Svelte Contributors and Ambassadors_

- [Dev Vlog: June 2023](https://www.youtube.com/watch?v=AOXq89h8saI) - Svelte 4.0 with Rich Harris
- [PodRocket: Svelte 4](https://podrocket.logrocket.com/svelte-4) with Geoff
- [This Dot Media: Svelte 4 Launch Party](https://www.youtube.com/watch?v=-9gy_leMmcQ) with Simon, Ben, Geoff, and Puru
Expand All @@ -60,12 +66,13 @@ _Featuring Svelte Contributors and Ambassadors_
- [Svelte Society - London June 2023](https://www.youtube.com/watch?v=EkH0aMgeIKw)
- [Using The Svelte Context API With Stores](https://www.youtube.com/watch?v=dp-7NvLDrK4), [Impossible FLIP Layout Animations With Svelte And GSAP](https://www.youtube.com/watch?v=ecP8RwpkiQw) and [Create Beautiful Presentations With Svelte](https://www.youtube.com/watch?v=67lqa5kTQkA) by Joy of Code


_To Watch_

- [Server-side filtered, paginated and sorted Table in SvelteKit](https://www.youtube.com/watch?v=VgCU0cVWgJE) by hartenfellerdev
- [Best Icon Library for Svelte and SvelteKit in 2023](https://www.youtube.com/watch?v=qJP6hC4YIhk) by SvelteRust

_To Read_

- [From Zero to Production with SvelteKit](https://www.okupter.com/events/from-zero-to-production-with-sveltekit) by Justin Ahinon
- [Thoughts on Svelte(Kit), one year and 3 billion requests later](https://claudioholanda.ch/en/blog/svelte-kit-after-3-billion-requests/) by Claudio Holanda
- [How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor](https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/) by Stanislav Khromov
Expand All @@ -77,8 +84,8 @@ _To Read_
- [Svelte Real‑time Multiplayer Game: User Presence](https://rodneylab.com/svelte-realtime-multiplayer-game/) and [SvelteKit PostCSS Tutorial: use Future CSS Today](https://rodneylab.com/sveltekit-postcss-tutorial/) by Rodney Lab
- [SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters](https://www.inow.dev/sveltekits-world-of-routing-unleash-power-of-your-app-using-dynamic-routes-and-parameters/) by Igor Nowosad


**Libraries, Tools & Components**

- [The Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk) is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte
- [Superforms 1.0](https://superforms.rocks/) has been released. Check out the [migration guide](https://superforms.rocks/migration) and [new feature list](https://superforms.rocks/whats-new-v1) for more details
- [Panda CSS](https://panda-css.com/docs/getting-started/svelte) is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "What's new in Svelte: August 2023"
description: "Extending Custom Element Classes and new +server exports"
description: 'Extending Custom Element Classes and new +server exports'
author: Dani Sandoval
authorURL: https://dreamindani.com
---
Expand All @@ -10,13 +10,15 @@ Some sweet new features have dropped in both Svelte and SvelteKit, this month. I
More on all that down below...

## What's new in Svelte & Language Tools

There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).

The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!

In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).

## What's new in SvelteKit

- The `HEAD` server method is now available in API routes (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#9753](https://github.com/sveltejs/kit/pull/9753))
- Responses with `Vary` headers are now cached, too (except for `Vary: *`) (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server-content-negotiation), [#9993](https://github.com/sveltejs/kit/pull/9993))
- There's now a more helpful error for preview if SvelteKit's build output doesn't exist (**1.22.2**, [#10337](https://github.com/sveltejs/kit/pull/10337))
Expand All @@ -28,6 +30,7 @@ For all the patches and performance updates from this month, check out the [Svel
## Community Showcase

**Apps & Sites built with Svelte**

- [GitLight](https://github.com/ColinLienard/gitlight) brings GitHub & GitLab notifications to your desktop
- [Days](https://github.com/paprikka/days) is paprikka's life in days, inspired by Buster Benson's Life in Weeks
- [Mofi](https://mofi.loud.red/) is a content-aware fill and trim for music
Expand All @@ -37,23 +40,23 @@ For all the patches and performance updates from this month, check out the [Svel
- [Maktaba](https://www.maktaba.digital/) is a bookmark manager that "you will actually use"
- [Whispering](https://github.com/braden-w/whispering-extension) is a Chrome extension that lets you access OpenAI's Whisper API for fast transcription in the browser (including ChatGPT)
- [DocuTalk](https://docutalk.co/) is an AI Customer Support chatbot for your website
- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite
- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite
- [Been](https://beeneverywhere.net/) is a map builder with travel stats like visited countries, extreme visited points, etc.
- [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail
- [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects


**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_

- [Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod](https://www.youtube.com/watch?v=YOL0HGGVib4) by This Dot Media
- [Svelte Sirens Stream Design Systems: Lessons Learned](https://www.youtube.com/live/YHZaiIGSqsE?feature=share) featuring Eric Liu, creator of Carbon Components Svelte and the `sveld` docgen library
- This Week in Svelte:
- [2023 June 30](https://www.youtube.com/watch?v=sDz4_BLoYQ4) - Svelte 4.0.1, SK 1.21, lists, screen readers, loading
- [2023 July 7](https://www.youtube.com/watch?v=0tq1ph4DDFA) - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
- [2023 July 21](https://www.youtube.com/watch?v=AG4_3kon3zU) - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement


_To Watch/Hear_

- [What is The Transitional Web? with Chris Ferdinandi](https://www.smashingmagazine.com/2023/07/smashing-podcast-episode-63/?ref=dailydevbytes.com) by Smashing Podcast
- [SvelteKit in 100 seconds](https://www.youtube.com/watch?v=H1eEFfAkIik) by Fireship
- [Primo V2 Introduction](https://www.youtube.com/watch?v=ThInVXgxJ1Q) by Primo (a [visual CMS](https://primocms.org/) based on Svelte)
Expand All @@ -62,8 +65,8 @@ _To Watch/Hear_
- [Markdown in SvelteKit with custom Components: mdsvex](https://www.youtube.com/watch?v=VJFkyGd0FEA) by hartenfellerdev
- [How To Add Confetti for Svelte and Sveltekit 🎉](https://www.youtube.com/watch?v=gXtWSb94704) and [Make Your SvelteKit Code 10x Faster With Rust and WebAssembly](https://www.youtube.com/watch?v=Vn2bIv_J_UE) by SvelteRust


_To Read_

- [SvelteJS: My ecosystem is bigger than yours](https://hackmd.io/@roguegpu/r1RKQMdt3) by roguegpu
- [Avoid shared state on the server in SvelteKit](https://blog.aakashgoplani.in/avoid-shared-state-on-the-server-in-sveltekit) by Aakash Goplani
- [SvelteKit Fontaine: Reduce Custom Font CLS](https://rodneylab.com/sveltekit-fontaine/) by Rodney Lab
Expand All @@ -74,8 +77,8 @@ _To Read_
- [Deploying Sveltekit on IIS](https://dev.to/nnutnonn/deploying-sveltekit-on-iis--5gf6) by Nutchapon Makelai
- [Streamlined Authentication and Secrets Management](https://eman.hashnode.dev/streamlined-authentication-and-secrets-management) by Eman


**Libraries, Tools & Components**

- [Melt UI](https://github.com/melt-ui/melt-ui) is a set of headless, accessible component builders for Svelte
- [MDsveX](https://github.com/pngwn/MDsveX/releases/tag/mdsvex%400.11.0) has been updated to work with Svelte 4
- [Svelte Sonner](https://github.com/wobsoriano/svelte-sonner) is an opinionated toast component for Svelte
Expand All @@ -85,7 +88,7 @@ _To Read_
- [better-svelte-writable](https://github.com/tnthung/better-svelte-writable) provides a type-safe writable which gives you more control over the container
- [Svetch.ts](https://github.com/Bewinxed/svetch#readme) is a client/types/schema/docs generator for your API endpoints
- [sveltekit-localize-url](https://github.com/rinart73/sveltekit-localize-url) handles URL localization and routing
- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte
- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte
- [Molly](https://github.com/renefournier/molly/tree/main) is a bash script and npm module that helps you clean up unused Svelte components in your project
- [sveltekit-bot](https://github.com/begoon/sveltekit-bot) is a Telegram bot made with SvelteKit and Vercel

Expand Down
23 changes: 12 additions & 11 deletions apps/svelte.dev/content/blog/2023-08-31-view-transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,12 +133,15 @@ We can also customize this page transition using CSS animation. In the style blo
}

:root::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both
slide-from-right;
animation:
210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
```

Expand Down Expand Up @@ -233,17 +236,15 @@ While this may be the safest option, reduced motion does not necessarily mean no
```css
@media (prefers-reduced-motion: no-preference) {
:root::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both
slide-to-left;
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(
0.4,
0,
0.2,
1
) both slide-from-right;
animation:
210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
}
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ Happy September y'all! With all the [sneak peeks at what's coming soon in Svelte
Before we jump in, a warm welcome to the new Svelte Ambassadors: [@cainux](https://github.com/cainux) and [@grischaerbe](https://github.com/grischaerbe)! Welcome to the crew ⛴️

## What's new in Svelte & Language Tools

- `svelteHTML` has moved from language-tools into Svelte core so that `svelte/element` types will now load correctly (**4.2.0** in Svelte, **107.10.0** in Language Tools)

## What's new in SvelteKit

- `URL` is now accepted in the `redirect` function (**1.23.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect), [#10570](https://github.com/sveltejs/kit/pull/10570))
- Mistyped route filenames will now throw a warning (**1.23.0**, [#10558](https://github.com/sveltejs/kit/pull/10558))
- The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](https://svelte.dev/blog/view-transitions) for more info (**1.24.0**, [Docs](https://kit.svelte.dev/docs/modules#app-navigation-onnavigate), [#9605](https://github.com/sveltejs/kit/pull/9605))
Expand All @@ -24,6 +26,7 @@ But that's just the new features! For all the patches and performance updates fr
## Community Showcase

**Apps & Sites built with Svelte**

- [Planet Of The Bugs](https://planetofthebugs.xyz/) allows developers to practice and hone their skill-sets by exposing them to an endless supply of unique, curated issues and bugs from popular open-source projects on Github
- [Minesweeper](https://github.com/ProductionPanic/minesweeper/tree/main) is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the [Google Play Store](https://play.google.com/store/apps/details?id=com.production.panic.minesweeper&pli=1))
- [Pendor](https://www.pendor.ai/) is an AI component generator for Svelte
Expand All @@ -36,10 +39,9 @@ But that's just the new features! For all the patches and performance updates fr
- [Ubuntu 22.04 in Svelte](https://github.com/manhhungpc/ubuntu2204-svelte) aims to replicate the Ubuntu 22.04 desktop experience on the web
- [My Queue](https://www.myqueue.so/) creates a playlist of written articles by turning them into audio stories



**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_

- [Svelte Society - London August 2023](https://www.youtube.com/watch?v=90Psdk5rAnU)
- [Building a Blog using SvelteKit and Nostr as a CMS (Part 1](https://kevinak.se/blog/building-a-blog-using-sveltekit-and-nostr-as-a-cms-part-1-1690807337563)) by Kev
- [Mastering SvelteKit with Geoff Rich | JS Drops](https://www.youtube.com/watch?v=MaF8kRbHbi0) by This Dot Media
Expand All @@ -60,15 +62,15 @@ _Featuring Svelte Contributors and Ambassadors_
- [Medusa and SvelteKit E-Commerce Stack](https://www.youtube.com/watch?v=rVVHxows9dY) with Lacey Pevey
- [Design Systems: Lessons Learned](https://www.youtube.com/watch?v=YHZaiIGSqsE) with Eric Liu


_To Watch_

- [Image optimization in SvelteKit with vite-imagetools](https://www.youtube.com/watch?v=285vSLe9LQ8) by hartenfellerdev
- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust
- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust
- [Leaflet maps in SvelteKit like it's 2023 (HowTo)](https://www.youtube.com/watch?v=JFctWXEzFZw)
ShipBit

ShipBit

_To Read_

- [Internationalization in SvelteKit (Series)](https://blog.aakashgoplani.in/series/i18n-in-sveltekit) by Aakash Goplani
- [The easiest Chatbot you will ever build](https://simon-prammer.vercel.app/blog/post/sveltekit-langchain) and [Intro to LangSmith🦜️🛠️](https://simon-prammer.vercel.app/blog/post/langsmith) by Simon Prammer
- [SvelteKit: How to make code-based router, instead of file-based router [August 2023]](https://dev.to/maxcore/sveltekit-how-to-make-code-based-router-instead-of-file-based-router-august-2023-5f9) by Max Core
Expand All @@ -81,9 +83,8 @@ _To Read_
- [Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis](https://upstash.com/blog/lucia-sveltekit) by Chris Jayden
- [Document Svelte Projects with HTML and JSDoc Comments](https://blog.robino.dev/posts/doc-comments-svelte) by Ross Robino



**Libraries, Tools & Components**

- [Carta](https://github.com/BearToCode/carta-md) is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked
- [Threlte](https://threlte.xyz/), the 3D framework built from Svelte and Three.js has released version 6
- [vite-plugin-web-extension](https://vite-plugin-web-extension.aklinker1.io/guide/frontend-frameworks.html#svelte-integration) works great with Svelte to make building browser extensions easier
Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Hacktoberfest 2023 with SvelteKit"
description: "SvelteKit joins in the Hacktoberfest event in 2023"
title: 'Hacktoberfest 2023 with SvelteKit'
description: 'SvelteKit joins in the Hacktoberfest event in 2023'
author: Willow (GHOST) & Braden Wiggins
authorURL: https://ghostdev.xyz
---
Expand All @@ -21,4 +21,4 @@ It's a good idea to communicate clearly and often about what you're trying to so

Join our [Discord](https://svelte.dev/chat) and ask questions in the dedicated `#hacktoberfest` channel. We're happy to help you get started!

We're excited to see what you've got in store for SvelteKit! Happy hacking! 🎃
We're excited to see what you've got in store for SvelteKit! Happy hacking! 🎃
Loading

0 comments on commit 8090d46

Please sign in to comment.