diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte index e55e130df9..38846f7b67 100644 --- a/sites/svelte.dev/src/routes/+page.svelte +++ b/sites/svelte.dev/src/routes/+page.svelte @@ -1,11 +1,13 @@ @@ -20,95 +22,51 @@ -
- -
-

Write less code

-

- Build boilerplate-free components using languages you already know — HTML, CSS and - JavaScript -

- - learn more -
- -
-

No virtual DOM

-

- Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and - stays fast -

- - learn more -
- -
-

Truly reactive

-

- No more complex state management libraries — Svelte brings reactivity to JavaScript itself -

- - learn more -
- -
-

- Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks - like React and Vue do the bulk of their work in the browser, Svelte shifts that - work into a - compile step that happens when you build your app. -

- -

- Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically - updates the DOM when the state of your app changes. -

- -

- We're proud that Svelte was recently voted the most loved web framework - with the - most satisfied developers - drawing the - most interest in learning it - in a trio of industry surveys. We think you'll love it too. - Read the introductory blog post to learn more. -

-
- -
- 
npm create svelte@latest myapp
-cd myapp
-npm install
-npm run dev
-
- - Learn Svelte -
- -
+ +
+

compiled

+

+ Svelte shifts as much work as possible out of the browser and into your build step. No more + manual optimisations — just faster, more efficient apps. +

- + +
+ +
+

compact

+

+ Write breathtakingly concise components using languages you already know — HTML, CSS and + JavaScript. Oh, and your application bundles will be tiny as well. +

+ + +
+ +
+

complete

+

+ Built-in scoped styling, state management, motion primitives, form bindings and more — don't + waste time trawling npm for the bare essentials. It's all here. +

+ + +
+ -
-

Who's using Svelte?

+ - -
+ + + -The Svelte logo in a ball pit +{#if $theme.current === 'light'} + The Svelte logo in a ball pit +{:else} + The Svelte logo in a ball pit +{/if}
Tutorial @@ -120,15 +78,8 @@ npm run dev
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte index 39f7e7a51b..7607961b0f 100644 --- a/sites/svelte.dev/src/routes/_components/Demo.svelte +++ b/sites/svelte.dev/src/routes/_components/Demo.svelte @@ -31,14 +31,18 @@ let selected = examples[0]; -
+

Why Svelte?

{#each examples as example, i} - @@ -58,12 +62,11 @@ diff --git a/sites/svelte.dev/src/routes/_components/Image.svelte b/sites/svelte.dev/src/routes/_components/Image.svelte index 5416bdab04..c98266ce8e 100644 --- a/sites/svelte.dev/src/routes/_components/Image.svelte +++ b/sites/svelte.dev/src/routes/_components/Image.svelte @@ -4,13 +4,21 @@ /** @type {string} */ export let alt; + + export let lazy = false; {#each Object.entries(src?.sources ?? {}) as [format, images]} `${i?.src} ${i?.w}w`).join(', ')} type="image/{format}" /> {/each} - + diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/companies.js b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/companies.js index 9101f6e6a7..a6af27e834 100644 --- a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/companies.js +++ b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/companies.js @@ -8,10 +8,10 @@ export const companies = [ }, { href: 'https://www.alaskaair.com/', - style: 'background-color: black', + // style: 'background-color: black', filename: 'alaskaairlines.svg', alt: 'Alaska Airlines logo', - invert: true, + // invert: true, width: 113, height: 48 }, @@ -24,10 +24,9 @@ export const companies = [ }, { href: 'https://chess.com', - style: 'background-color: black', filename: 'chess.svg', alt: 'Chess.com logo', - invert: true, + width: 300, height: 85 }, diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte index 1a182121b0..21c4fc21a7 100644 --- a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte +++ b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte @@ -1,20 +1,30 @@ -
- {#each sorted as { href, filename, alt, style, invert, width, height }} - - - +
+
+

Who's using svelte?

+
+ {#each sorted as { href, filename, alt, style, invert, width, height }} + + + - - {/each} -
+ + {/each} +
+
+
diff --git a/sites/svelte.dev/src/routes/_components/svelte-machine.png b/sites/svelte.dev/src/routes/_components/svelte-machine.png index ddfa0af924..fae8c70b0b 100644 Binary files a/sites/svelte.dev/src/routes/_components/svelte-machine.png and b/sites/svelte.dev/src/routes/_components/svelte-machine.png differ diff --git a/sites/svelte.dev/src/routes/svelte-balls.png b/sites/svelte.dev/src/routes/svelte-balls.png deleted file mode 100644 index d37ce71a2f..0000000000 Binary files a/sites/svelte.dev/src/routes/svelte-balls.png and /dev/null differ diff --git a/sites/svelte.dev/src/routes/svelte-collective-dark.png b/sites/svelte.dev/src/routes/svelte-collective-dark.png new file mode 100755 index 0000000000..32a6b9e7a6 Binary files /dev/null and b/sites/svelte.dev/src/routes/svelte-collective-dark.png differ diff --git a/sites/svelte.dev/src/routes/svelte-collective-light.png b/sites/svelte.dev/src/routes/svelte-collective-light.png new file mode 100755 index 0000000000..fcf5d99dfd Binary files /dev/null and b/sites/svelte.dev/src/routes/svelte-collective-light.png differ diff --git a/sites/svelte.dev/static/whos-using-svelte/alaskaairlines.svg b/sites/svelte.dev/static/whos-using-svelte/alaskaairlines.svg index 15d172c08b..0a3c437786 100644 --- a/sites/svelte.dev/static/whos-using-svelte/alaskaairlines.svg +++ b/sites/svelte.dev/static/whos-using-svelte/alaskaairlines.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/sites/svelte.dev/static/whos-using-svelte/chess.svg b/sites/svelte.dev/static/whos-using-svelte/chess.svg index bd85352a52..06eaa879ad 100644 --- a/sites/svelte.dev/static/whos-using-svelte/chess.svg +++ b/sites/svelte.dev/static/whos-using-svelte/chess.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file