tweak some content and styles

6 years ago · 60023f6f7e
parent 570098e8dd
commit 60023f6f7e
2 changed files with 87 additions and 74 deletions
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@ -101,7 +101,7 @@ Text can also contain JavaScript expressions:
 ```


-### `{#if ...}`
+### {#if ...}

 ```sv
 {#if expression}...{/if}
@ -138,7 +138,7 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
 ```


-### `{#each ...}`
+### {#each ...}

 ```sv
 {#each expression as name}...{/each}
@ -209,7 +209,7 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
 ```


-### `{#await ...}`
+### {#await ...}

 ```sv
 {#await expression}...{:then name}...{:catch name}...{/await}
@ -263,7 +263,7 @@ If you don't care about the pending state, you can also omit the initial block.
 ```


-### `{@html ...}`
+### {@html ...}

 ```sv
 {@html expression}
@ -283,7 +283,7 @@ In a text expression, characters like `<` and `>` are escaped. With HTML express
 ```


-### `{@debug ...}`
+### {@debug ...}

 ```sv
 {@debug}
@ -333,7 +333,10 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that

 ### Element directives

-#### on:*event*
+As well as attributes, elements can have *directives*, which control the element's behaviour in some way.
+
+
+#### [on:*eventname*](on_component_event)

 ```sv
 on:eventname={handler}
@ -420,17 +423,11 @@ It's possible to have multiple event listeners for the same event:
 <button on:click={increment} on:click={track}>Click me!</button>
 ```

-#### bind:*name*
+#### [bind:*property*](bind_element_property)

 ```sv
 bind:property={variable}
 ```
-```sv
-bind:group={variable}
-```
-```sv
-bind:this={dom_node}
-```

 ---

@ -464,53 +461,8 @@ Numeric input values are coerced; even though `input.value` is a string as far a
 <input type="range" bind:value={num}>
 ```

-#### `bind:group`
-
---
-
-Inputs that work together can use `bind:group`.
-
-```html
-<script>
-	let tortilla = 'Plain';
-	let fillings = [];
-</script>
-
-<!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain">
-<input type="radio" bind:group={tortilla} value="Whole wheat">
-<input type="radio" bind:group={tortilla} value="Spinach">
-
-<!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice">
-<input type="checkbox" bind:group={fillings} value="Beans">
-<input type="checkbox" bind:group={fillings} value="Cheese">
-<input type="checkbox" bind:group={fillings} value="Guac (extra)">
-```
-
-#### `bind:this` (elements)
-
---
-
-To get a reference to a DOM node, use `bind:this`.
-
-```html
-<script>
-	import { onMount } from 'svelte';
-
-	let canvasElement;
-
-	onMount(() => {
-		const ctx = canvasElement.getContext('2d');
-		drawStuff(ctx);
-	});
-</script>
-
-<canvas bind:this={canvasElement}></canvas>
-```
-

-#### Binding `<select>` value
+##### Binding `<select>` value

 ---

@ -550,7 +502,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```

-#### Media element bindings
+##### Media element bindings

 ---

@ -580,7 +532,7 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — four
 ></video>
 ```

-#### Block-level element bindings
+##### Block-level element bindings

 ---

@ -600,8 +552,61 @@ Block-level elements have 4 readonly bindings, measured using a technique simila
 </div>
 ```

+#### bind:group
+
+```sv
+bind:group={variable}
+```
+
+---
+
+Inputs that work together can use `bind:group`.
+
+```html
+<script>
+	let tortilla = 'Plain';
+	let fillings = [];
+</script>
+
+<!-- grouped radio inputs are mutually exclusive -->
+<input type="radio" bind:group={tortilla} value="Plain">
+<input type="radio" bind:group={tortilla} value="Whole wheat">
+<input type="radio" bind:group={tortilla} value="Spinach">
+
+<!-- grouped checkbox inputs populate an array -->
+<input type="checkbox" bind:group={fillings} value="Rice">
+<input type="checkbox" bind:group={fillings} value="Beans">
+<input type="checkbox" bind:group={fillings} value="Cheese">
+<input type="checkbox" bind:group={fillings} value="Guac (extra)">
+```
+
+#### [bind:this](bind_element)
+
+```sv
+bind:this={dom_node}
+```
+
+---
+
+To get a reference to a DOM node, use `bind:this`.
+
+```html
+<script>
+	import { onMount } from 'svelte';
+
+	let canvasElement;
+
+	onMount(() => {
+		const ctx = canvasElement.getContext('2d');
+		drawStuff(ctx);
+	});
+</script>
+
+<canvas bind:this={canvasElement}></canvas>
+```
+

-#### `class:`
+#### class:*name*

 ```sv
 class:name={value}
@ -627,7 +632,7 @@ A `class:` directive provides a shorter way of toggling a class on an element.
 ```


-#### `use:`
+#### use:*action*

 ```sv
 use:action
@ -692,7 +697,7 @@ An action can have parameters. If the returned value has an `update` method, it
 ```


-#### `transition:`/`in:`/`out:`
+#### transition:/in:/out:

 ```sv
 transition:name
@ -908,7 +913,7 @@ Local transitions only play when the block they belong to is created or destroye
 ```


-#### `animate:`
+#### animate:

 ```sv
 animate:name
@ -1044,7 +1049,7 @@ A custom animation function can also return a `tick` function, which is called *

 ### Component directives

-#### on:*event* <span hidden>components</span>
+#### [on:*eventname*](on_component_event)

 ```sv
 on:eventname={handler}
@ -1067,7 +1072,7 @@ As with DOM events, if the `on:` directive is used without a value, the componen
 ```


-#### bind:*property* <span hidden>components</span>
+#### [bind:*property*](bind_component_property)

 ```sv
 bind:property={variable}
@ -1081,7 +1086,7 @@ You can bind to component props using the same mechanism.
 <Keypad bind:value={pin}/>
 ```

-#### `bind:this` <span hidden>components</span>
+#### [bind:this](bind_component)

 ```sv
 bind:this={component_instance}
@ -1135,7 +1140,7 @@ The content is exposed in the child component using the `<slot>` element, which
 </div>
 ```

-#### Named slots (slot="name")
+#### [`<slot name="`*name*`">`](slot_name)

 ---

@ -1156,7 +1161,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 </div>
 ```

-#### Let directive (let:name)
+#### [`<slot let:`*name*`={`*value*`}>`](slot_let)

 ---

--- a/site/src/routes/docs/_sections.js
+++ b/site/src/routes/docs/_sections.js
@ -38,7 +38,7 @@ const blockTypes = [
 ];

 export default function() {
-	const makeSlug = make_session_slug_processor({
+	const make_slug = make_session_slug_processor({
 		preserve_unicode: SLUG_PRESERVE_UNICODE,
 		separator: SLUG_SEPARATOR
 	});
@ -51,7 +51,7 @@ export default function() {

 			const { content, metadata } = extract_frontmatter(markdown);

-			const sectionSlug = makeSlug(metadata.title);
+			const section_slug = make_slug(metadata.title);

 			const subsections = [];

@ -108,7 +108,15 @@ export default function() {
 			};

 			renderer.heading = (text, level, rawtext) => {
-				const slug = makeSlug(rawtext);
+				let slug;
+
+				const match = /<a href="([^"]+)">(.+)<\/a>/.exec(text);
+				if (match) {
+					slug = match[1];
+					text = match[2];
+				} else {
+					slug = make_slug(rawtext);
+				}

 				if (level === 3 || level === 4) {
 					const title = text
@ -145,7 +153,7 @@ export default function() {
 				html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m),
 				metadata,
 				subsections,
-				slug: sectionSlug,
+				slug: section_slug,
 				file,
 			};
 		});