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 915269b817..394cee6a69 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 @@ -62,4 +62,4 @@ 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#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! \ No newline at end of file +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! 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 44e2b816b3..790b0fabac 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 @@ -66,7 +66,7 @@ But size is only part of the story. Svelte apps are also extremely performant an The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair. -If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](docs#template-syntax)). You get [scoped CSS](the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](docs#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated! +If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated! But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those. @@ -81,4 +81,4 @@ I believe the next frontier of web performance is 'whole-app optimisation'. Curr Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size. -Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Gitter](https://gitter.im/sveltejs/svelte). \ No newline at end of file +Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](https://discord.gg/yy75DKs). diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md index 7e5441f090..778d703b1d 100644 --- a/site/content/blog/2018-04-18-version-2.md +++ b/site/content/blog/2018-04-18-version-2.md @@ -12,7 +12,7 @@ Almost a year after we first started talking about version 2 on the Svelte issue ## tl;dr -Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Gitter chatroom](https://gitter.im/sveltejs/svelte). +Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](https://discord.gg/yy75DKs). - Install Svelte v2 from npm - Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) @@ -85,7 +85,7 @@ If you need to support IE11 and friends, you will need to use a transpiler like ## New lifecycle hooks -In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](docs#lifecycle-hooks) for responding to state changes: +In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](https://v2.svelte.dev/guide#lifecycle-hooks) for responding to state changes: ```js export default { @@ -168,7 +168,7 @@ This change might seem annoying initially, but it's the right move: among other ## event_handler.destroy -If your app has [custom event handlers](docs#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API). +If your app has [custom event handlers](https://v2.svelte.dev/guide#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API). ## No more type coercion @@ -201,4 +201,4 @@ Before, there was a `svelte.validate` method which checked your component was va ## My app is broken! Help! -Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Gitter](https://gitter.im/sveltejs/svelte) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues). \ No newline at end of file +Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](https://discord.gg/yy75DKs) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues). diff --git a/site/content/blog/2019-04-18-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md similarity index 90% rename from site/content/blog/2019-04-18-svelte-3-rethinking-reactivity.md rename to site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md index d00a680426..dcb8c50fc0 100644 --- a/site/content/blog/2019-04-18-svelte-3-rethinking-reactivity.md +++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md @@ -1,9 +1,8 @@ --- -title: Svelte 3: Rethinking Reactivity +title: Svelte 3: Rethinking reactivity description: It's finally here author: Rich Harris authorURL: https://twitter.com/Rich_Harris -draft: true --- After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way. @@ -23,14 +22,15 @@ Version 3 is a significant overhaul. Our focus for the last five or six months h To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity. -
-Rich Harris delivering a conference talk at You Gotta Love Frontend +
+
+
+ +
-
TKTKTK replace this with a video embed once the YGLF videos appear on YouTube
+
'Rethinking Reactivity' from You Gotta Love Frontend Code Camp
+
## Moving reactivity into the language diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 94c2044224..5bbd7b4e1e 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -360,7 +360,7 @@ on:eventname={handler} --- -Components can emit events using [createEventDispatcher](docs#createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events: +Components can emit events using [createEventDispatcher](docs#createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events: ```html @@ -1107,7 +1107,7 @@ This element makes it possible to insert elements into `document.head`. During s --- -The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](docs#compile). The possible options are: +The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](docs#svelte_compile). The possible options are: * `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed * `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index c6a464ea0f..843ac05e4c 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -20,7 +20,7 @@ onMount(callback: () => () => void) The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live *inside* the component; it can be called from an external module). -`onMount` does not run inside a [server-side component](docs#server-side-component-api). +`onMount` does not run inside a [server-side component](docs#Server-side_component_API). ```html - - - {status} - -

{status}

- -

{error.message}

- -{#if dev && error.stack} - 
{error.stack}
-{/if} + // we don't want to use here, + // because we only care about the online state when + // the page first loads + let online = typeof navigator !== 'undefined' + ? navigator.onLine + : true; + \ No newline at end of file + + /* @media (min-width: 480px) { + h1 { font-size: 4em } + } */ + + + + {status} + + +
+ {#if online} +

Yikes!

+ + {#if error.message} +

{status}: {error.message}

+ {:else} +

Encountered a {status} error

+ {/if} + + {#if dev && error.stack} + 
{error.stack}
+ {:else} + {#if status >= 500} +

Please try reloading the page.

+ {/if} + +

If the error persists, please drop by Discord chatroom and let us know, or raise an issue on GitHub. Thanks!

+ {/if} + {:else} +

It looks like you're offline

+ +

Reload the page once you've found the internet.

+ {/if} +
\ No newline at end of file diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js index 588d2f56cf..040f5c77d7 100644 --- a/site/src/routes/docs/_sections.js +++ b/site/src/routes/docs/_sections.js @@ -48,6 +48,8 @@ export default function() { const { content, metadata } = extract_frontmatter(markdown); + const sectionSlug = makeSlug(metadata.title); + const subsections = []; const renderer = new marked.Renderer(); @@ -142,7 +144,7 @@ export default function() { html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m), metadata, subsections, - slug: file.replace(/^\d+-/, '').replace(/\.md$/, ''), + slug: sectionSlug, file, }; }); diff --git a/site/src/routes/examples/_TableOfContents.svelte b/site/src/routes/examples/_TableOfContents.svelte index a3e8b23216..ec7310c5fa 100644 --- a/site/src/routes/examples/_TableOfContents.svelte +++ b/site/src/routes/examples/_TableOfContents.svelte @@ -1,36 +1,6 @@ -
    +
      {#each sections as section}
    • @@ -114,25 +69,19 @@ {#each section.examples as example} - -
      -
      -
      -
      - {example.title} -
      -
      - {#if example.slug === active_section} - - {/if} -
      -       + {example.title} thumbnail + + {example.title} + {/each}
      • {/each} diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte index 368136bb6e..179a8e4470 100644 --- a/site/src/routes/repl/_components/AppControls/index.svelte +++ b/site/src/routes/repl/_components/AppControls/index.svelte @@ -232,7 +232,7 @@ export default app;` }); {/if} {#if gist} - + {/if} @@ -272,6 +272,7 @@ export default app;` }); transition: opacity .3s; font-family: var(--font); font-size: 1.6rem; + color: white; /* width: 1.6em; height: 1.6em; */ line-height: 1; diff --git a/site/src/server.js b/site/src/server.js index 36491f2aca..3413e218d8 100644 --- a/site/src/server.js +++ b/site/src/server.js @@ -1,12 +1,11 @@ import 'dotenv/config'; -import polka from 'polka'; import sirv from 'sirv'; -import compression from 'compression'; +import polka from 'polka'; +import devalue from 'devalue'; import session from 'express-session'; import passport from 'passport'; import { Strategy } from 'passport-github'; import sessionFileStore from 'session-file-store'; -import devalue from 'devalue'; import * as sapper from '@sapper/server'; const app = polka(); @@ -94,7 +93,6 @@ if (process.env.GITHUB_CLIENT_ID) { } app.use( - compression({ threshold: 0 }), sirv('static', { setHeaders(res) { res.setHeader('Access-Control-Allow-Origin', '*'); diff --git a/site/src/utils/markdown.js b/site/src/utils/markdown.js index cbfb6fb550..392f4512f2 100644 --- a/site/src/utils/markdown.js +++ b/site/src/utils/markdown.js @@ -45,7 +45,7 @@ export const langs = { // links renderer -export function link_renderer(href,title,text) { +export function link_renderer (href, title, text) { let target_attr = ''; let title_attr = ''; diff --git a/site/src/utils/slug.js b/site/src/utils/slug.js index 882d268b08..4ad7b96b2a 100644 --- a/site/src/utils/slug.js +++ b/site/src/utils/slug.js @@ -17,13 +17,6 @@ const unicodeRegex = /\p{Letter}/u; const isNonAlphaNumUnicode = string => !alphaNumRegex.test(string) && unicodeRegex.test(string); -const nonUnicodeSanitizer = string => - string - .toLowerCase() - .replace(/[^a-zA-Z0-9]+/g, '-') - .replace(/^-/, '') - .replace(/-$/, ''); - export const unicodeSafeProcessor = string => string.split('') .reduce((accum, char, index, array) => { @@ -48,7 +41,6 @@ export const unicodeSafeProcessor = string => .reduce((accum, chunk) => { const processed = chunk.type === 'process' ? limaxProcessor(chunk.string) - // ? nonUnicodeSanitizer(chunk.string) : chunk.string; processed.length > 0 && accum.push(processed);