diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index 8b939d183e..53c268a27a 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -2,7 +2,11 @@ title: Component format --- -Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML: +--- + +Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML. + +All three sections — script, styles and markup — are optional. ```html ``` - #### 2. Assignments are 'reactive' -To change component state and trigger a re-render, just assign to a locally declared variable: +--- + +To change component state and trigger a re-render, just assign to a locally declared variable. + +Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect. ```html ``` -Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect. - - #### 3. `$:` marks a statement as reactive +--- + Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` label. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed: ```html @@ -84,6 +89,8 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac ``` +--- + If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf: ```html @@ -94,10 +101,13 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve ``` - #### 4. Prefix stores with `$` to access their values -Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, and set up a store subscription that will be unsubscribed when appropriate: +--- + +Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, and set up a store subscription that will be unsubscribed when appropriate. + +Local variables (that do not represent store values) must *not* have a `$` prefix. ```html ``` -Local variables (that do not represent store values) must *not* have a `$` prefix. - #### Module context diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js index 32137c0122..5fb7a61256 100644 --- a/site/src/routes/docs/_sections.js +++ b/site/src/routes/docs/_sections.js @@ -48,6 +48,14 @@ export default function() { const renderer = new marked.Renderer(); + let block_open = false; + + renderer.hr = (...args) => { + block_open = true; + + return '
'; + }; + renderer.code = (source, lang) => { source = source.replace(/^ +/gm, match => match.split(' ').join('\t') @@ -78,7 +86,14 @@ export default function() { lang ); - return `
${prefix}
${highlighted}
`; + let html = `
${prefix}
${highlighted}
`; + + if (block_open) { + block_open = false; + return `
${html}
`; + } + + return html; }; const seen = new Set(); diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte index f04823f900..5635a0d561 100644 --- a/site/src/routes/docs/index.svelte +++ b/site/src/routes/docs/index.svelte @@ -82,7 +82,6 @@ overflow: hidden; border: 1px solid #eee; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); - border-radius: var(--border-r); padding: 1.6rem; transition: width 0.2s, height 0.2s; } @@ -107,7 +106,7 @@ bottom: calc(100vh - var(--nav-h) - 10.8rem); width: 100%; height: 2em; - background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%); + background: linear-gradient(to top, rgba(103,103,120,0) 0%, rgba(103,103,120,0.7) 50%, rgba(103,103,120,1) 100%); pointer-events: none; z-index: 2; } @@ -119,7 +118,7 @@ bottom: 1.9em; width: 100%; height: 2em; - background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%); + background: linear-gradient(to bottom, rgba(103,103,120,0) 0%, rgba(103,103,120,0.7) 50%, rgba(103,103,120,1) 100%); pointer-events: none; } @@ -135,8 +134,8 @@ .content { width: 100%; - max-width: calc(var(--main-width) + var(--side-nav)); - margin: 0 auto; + /* max-width: calc(var(--main-width) + var(--side-nav)); */ + margin: 0; -moz-tab-size: 2; padding: var(--top-offset) 0; tab-size: 2; @@ -146,14 +145,15 @@ aside { display: block; width: var(--sidebar-w); - height: calc(100vh - var(--nav-h)); - top: var(--nav-h); - left: var(--side-nav); + height: 100vh; + top: 0; + left: 0; overflow: hidden; box-shadow: none; border: none; overflow: hidden; - padding: 0; + background-color: var(--second); + color: white; } aside.open::before { @@ -180,21 +180,24 @@ } .content { - max-width: none; - padding-left: 28rem; + /* max-width: none; */ + padding-left: var(--sidebar-w); + } + + .content :global(.side-by-side) { + display: grid; + grid-template-columns: 50% 50%; + grid-gap: 1em; } } @media (min-width: 1200px) { /* can't use vars in @media :( */ aside { display: block; - left: calc(50vw - (60rem - var(--side-nav))); } .content { - width: 80rem; - padding-left: calc(50vw - 32rem); - box-sizing: content-box; + /* box-sizing: content-box; */ /* padding-right: calc(50% - 50rem); */ } } @@ -267,6 +270,10 @@ background: transparent; } + .content :global(pre) { + margin: 0 0 2em 0; + } + .content :global(.icon) { width: 20px; height: 20px;