diff --git a/README.md b/README.md index ff409c86a9..605eee8fa8 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ npm run test -- -g transition ## svelte.dev -The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.technology) To develop locally: +The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.technology). To develop locally: ```bash cd site diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md index 933b0fbc48..4efac90b52 100644 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ b/site/content/blog/2016-11-26-frameworks-without-the-framework.md @@ -28,7 +28,7 @@ Given that, what if the framework *didn't actually run in the browser*? What if, ## Introducing Svelte -Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. +Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. The [Svelte implementation of TodoMVC](http://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC. @@ -52,4 +52,4 @@ Finally, something I've wrestled with a great deal as an open source maintainer: Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on. -But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. +But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md index 394cee6a69..e91166430c 100644 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md @@ -38,28 +38,21 @@ This will serve your app on [localhost:5000](http://localhost:5000) and rebuild When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool. -In the terminal, install degit globally (you only need to do this once): +In the terminal, you can instantly create a new project like so: ```bash -npm install -g degit -``` - -After that, you can instantly create a new project like so: - -```bash -degit sveltejs/template my-new-project -cd my-new-project - +npx degit sveltejs/template my-svelte-project +cd my-svelte-project npm install -npm run dev +npm run dev & open http://localhost:5000 ``` Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead: ```bash -degit your-name/template my-new-project +npx degit your-name/template my-new-project ``` And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Now](https://zeit.co/now) or [Surge](http://surge.sh/). -You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter! +You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter! diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md index 790b0fabac..040e95a8c3 100644 --- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md +++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md @@ -28,7 +28,7 @@ Everything else flows from that breakthrough design decision. Finding the code r But it's not perfect. As churlish as it might be to list the flaws in something *so, so good*, there are some: * Next uses something called 'route masking' to create nice URLs (e.g. `/blog/hello-world` instead of `/post?slug=hello-world`). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms -* All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an [API endpoint](/api/blog/sapper-towards-the-ideal-web-app-framework) that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages +* All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an [API endpoint](/blog/sapper-towards-the-ideal-web-app-framework.json) that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages * To use the client-side router, links can't be standard `` tags. Instead, you have to use framework-specific `` components, which is impossible in the markdown content for a blog post such as this one, for example The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single 'hello world' page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it's 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that's the *baseline*. diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md index 5e8e6ed71b..f77eb83206 100644 --- a/site/content/blog/2018-12-26-svelte-css-in-js.md +++ b/site/content/blog/2018-12-26-svelte-css-in-js.md @@ -19,7 +19,7 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t
@@ -27,4 +27,3 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application! Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library. - diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md index daa22b9206..d6c8b77193 100644 --- a/site/content/blog/2019-04-20-write-less-code.md +++ b/site/content/blog/2019-04-20-write-less-code.md @@ -42,7 +42,7 @@ Reducing the amount of code you have to write is an explicit goal of Svelte. To
@@ -161,4 +161,4 @@ In Vue, meanwhile, we have a default export with a `data` function that returns These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](https://svelte.dev/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). -How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. \ No newline at end of file +How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 5bbd7b4e1e..952272c6e1 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -600,6 +600,9 @@ A `class:` directive provides a shorter way of toggling a class on an element.
...
+ + +
...
``` @@ -934,7 +937,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
No header was provided

Some content between header and footer

- +
``` diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte new file mode 100644 index 0000000000..c8487abefe --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte @@ -0,0 +1,10 @@ + + + + +
+

Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing.

+
\ No newline at end of file diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte new file mode 100644 index 0000000000..9f60c276ce --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte @@ -0,0 +1,15 @@ + + +
+

+
+
+
CSS
+ in JS +
+ in HTML +
+

+
\ No newline at end of file diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json new file mode 100644 index 0000000000..eaa2a1da63 --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json @@ -0,0 +1,3 @@ +{ + "title": "-" +} diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js new file mode 100644 index 0000000000..faf91b13d4 --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js @@ -0,0 +1,33 @@ +import { css } from 'emotion/dist/emotion.umd.min.js'; + +const brand = '#74D900'; + +export const title = css` + color: ${brand}; + font-size: 1em; + white-space: nowrap; +`; + +export const comicSans = css` + font-family: 'Comic Sans MS'; +`; + +export const box = css` + position: relative; + display: inline-block; + border: 2px solid ${brand}; + line-height: 1; + padding: 4px; + border-radius: 4px; +`; + +export const link = css` + color: inherit; + font-weight: bold; + text-decoration: none; + border-bottom: 1px solid ${brand}; + &:hover { + text-decoration: none; + background: ${brand}; + } +`; \ No newline at end of file diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte new file mode 100644 index 0000000000..46cf93b0fc --- /dev/null +++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte @@ -0,0 +1,9 @@ + + + + + +

{a} + {b} = {a + b}

\ No newline at end of file diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json new file mode 100644 index 0000000000..eaa2a1da63 --- /dev/null +++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json @@ -0,0 +1,3 @@ +{ + "title": "-" +} diff --git a/site/content/examples/99-embeds/meta.json b/site/content/examples/99-embeds/meta.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/site/content/examples/99-embeds/meta.json @@ -0,0 +1 @@ +{} diff --git a/site/content/tutorial/06-bindings/11-bind-this/text.md b/site/content/tutorial/06-bindings/11-bind-this/text.md index e1aed607b0..25a7bc9169 100644 --- a/site/content/tutorial/06-bindings/11-bind-this/text.md +++ b/site/content/tutorial/06-bindings/11-bind-this/text.md @@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows > ``` -Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorials/onmount). \ No newline at end of file +Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount). \ No newline at end of file diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md index 4bae964c4c..0745a5924d 100644 --- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md +++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md @@ -31,7 +31,7 @@ The `t` value is `0` at the beginning of an intro or the end of an outro, and `1 Most of the time you should return the `css` property and *not* the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run. -For example the `fade` transition generates a CSS animation somewhat like this: +For example, the `fade` transition generates a CSS animation somewhat like this: ```css 0% { opacity: 0 } @@ -69,4 +69,4 @@ We can get a lot more creative though. Let's make something truly gratuitous: ``` -Remember: with great power comes great responsibility. \ No newline at end of file +Remember: with great power comes great responsibility. diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md index c8fbde91dc..fd2ef28fb6 100644 --- a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md +++ b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md @@ -12,7 +12,7 @@ A component can specify *fallbacks* for any slots that are left empty, by puttin ``` -We can now create instances of `` eithout any children: +We can now create instances of `` without any children: ```html @@ -21,4 +21,4 @@ We can now create instances of `` eithout any children: -``` \ No newline at end of file +``` diff --git a/site/content/tutorial/18-debugging/01-debug/text.md b/site/content/tutorial/18-debugging/01-debug/text.md index 8c9f59d082..76fa77805e 100644 --- a/site/content/tutorial/18-debugging/01-debug/text.md +++ b/site/content/tutorial/18-debugging/01-debug/text.md @@ -2,7 +2,7 @@ title: The @debug tag --- -Occasionally it's useful to inspect a piece of data as it flows through your app. +Occasionally, it's useful to inspect a piece of data as it flows through your app. One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect: @@ -12,4 +12,4 @@ One approach is to use `console.log(...)` inside your markup. If you want to pau

Hello {user.firstname}!

``` -If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. \ No newline at end of file +If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte index 4254e99152..49a1be50d1 100644 --- a/site/src/components/TopNav.svelte +++ b/site/src/components/TopNav.svelte @@ -35,12 +35,21 @@ }; }); + // Prevents navbar to show/hide when clicking in docs sidebar + let hash_changed = false; + function handle_hashchange() { + hash_changed = true; + } + let last_scroll = 0; function handle_scroll() { const scroll = window.pageYOffset; - visible = (scroll < 50 || scroll < last_scroll); + if (!hash_changed) { + visible = (scroll < 50 || scroll < last_scroll); + } last_scroll = scroll; + hash_changed = false; } @@ -227,7 +236,7 @@ } - +