update docs

site/content/docs/02-routing.md

@@ -7,12 +7,12 @@ As we've seen, there are two types of route in Sapper — pages, and server rout
 
 ### Pages
 
-Pages are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel.
+Pages are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel.
 
-The filename determines the route. For example, `src/routes/index.html` is the root of your site:
+The filename determines the route. For example, `src/routes/index.svelte` is the root of your site:
 
 ```html
-<!-- src/routes/index.html -->
+<!-- src/routes/index.svelte -->
 <svelte:head>
 	<title>Welcome</title>
 </svelte:head>
@@ -20,10 +20,10 @@ The filename determines the route. For example, `src/routes/index.html` is the r
 <h1>Hello and welcome to my site!</h1>
 ```
 
-A file called either `src/routes/about.html` or `src/routes/about/index.html` would correspond to the `/about` route:
+A file called either `src/routes/about.svelte` or `src/routes/about/index.svelte` would correspond to the `/about` route:
 
 ```html
-<!-- src/routes/about.html -->
+<!-- src/routes/about.svelte -->
 <svelte:head>
 	<title>About</title>
 </svelte:head>
@@ -35,7 +35,30 @@ A file called either `src/routes/about.html` or `src/routes/about/index.html` wo
 Dynamic parameters are encoded using `[brackets]`. For example, here's how you could create a page that renders a blog post:
 
 ```html
-<!-- src/routes/blog/[slug].html -->
+<!-- src/routes/blog/[slug].svelte -->
+<script context="module">
+	// the (optional) preload function takes a
+	// `{ path, params, query }` object and turns it into
+	// the data we need to render the page
+	export async function preload(page, session) {
+		// the `slug` parameter is available because this file
+		// is called [slug].svelte
+		const { slug } = page.params;
+
+		// `this.fetch` is a wrapper around `fetch` that allows
+		// you to make credentialled requests on both
+		// server and client
+		const res = await this.fetch(`blog/${slug}.json`);
+		const article = await res.json();
+
+		return { article };
+	}
+</script>
+
+<script>
+	export let article;
+</script>
+
 <svelte:head>
 	<title>{article.title}</title>
 </svelte:head>
@@ -43,28 +66,11 @@ Dynamic parameters are encoded using `[brackets]`. For example, here's how you c
 <h1>{article.title}</h1>
 
 <div class='content'>
-	{@html article.html}
+	{@html article.svelte}
 </div>
-
-<script>
-	export default {
-		// the (optional) preload function takes a
-		// `{ params, query }` object and turns it into
-		// the data we need to render the page
-		preload({ params, query }) {
-			// the `slug` parameter is available because this file
-			// is called [slug].html
-			const { slug } = params;
-
-			return this.fetch(`blog/${slug}.json`).then(r => r.json()).then(article => {
-				return { article };
-			});
-		}
-	};
-</script>
 ```
 
-> See the section on [preloading](guide#preloading) for more info about `preload` and `this.fetch`
+> See the section on [preloading](docs#preloading) for more info about `preload` and `this.fetch`
 
 
 ### Server routes
@@ -98,15 +104,15 @@ export async function get(req, res, next) {
 
 There are three simple rules for naming the files that define your routes:
 
-* A file called `src/routes/about.html` corresponds to the `/about` route. A file called `src/routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to `preload`
-* The file `src/routes/index.html` corresponds to the root of your app. `src/routes/about/index.html` is treated the same as `src/routes/about.html`.
+* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to `preload`
+* The file `src/routes/index.svelte` corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
 * Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
 
 
 
 ### Error page
 
-In addition to regular pages, there is a 'special' page that Sapper expects to find — `src/routes/_error.html`. This will be shown when an error occurs while rendering a page.
+In addition to regular pages, there is a 'special' page that Sapper expects to find — `src/routes/_error.svelte`. This will be shown when an error occurs while rendering a page.
 
 The `error` object is made available to the template along with the HTTP `status` code.
 
@@ -116,6 +122,6 @@ The `error` object is made available to the template along with the HTTP `status
 
 You can use a subset of regular expressions to qualify route parameters, by placing them in parentheses after the parameter name.
 
-For example, `src/routes/items/[id([0-9]+)].html` would only match numeric IDs — `/items/123` would match, but `/items/xyz` would not.
+For example, `src/routes/items/[id([0-9]+)].svelte` would only match numeric IDs — `/items/123` would match, but `/items/xyz` would not.
 
 Because of technical limitations, the following characters cannot be used: `/`, `\`, `?`, `:`, `(` and `)`.