From 829362c1658f1adeb3bafd92869de52397f52b0b Mon Sep 17 00:00:00 2001 From: Puru Date: Fri, 29 Dec 2023 10:44:13 +0530 Subject: [PATCH] Add intros --- documentation/docs/02-template-syntax/02-basic-markup.md | 2 ++ documentation/docs/02-template-syntax/03-logic-blocks.md | 2 ++ documentation/docs/02-template-syntax/04-special-tags.md | 2 ++ .../docs/02-template-syntax/06-component-directives.md | 2 ++ documentation/docs/02-template-syntax/07-special-elements.md | 2 ++ .../docs/04-compiler-and-api/02-client-side-component-api.md | 2 ++ 6 files changed, 12 insertions(+) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index e6192230d4..fc437ad285 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -2,6 +2,8 @@ title: Basic markup --- +Basics of svelte's template syntax. These are smallest building blocks of [svelte components](./svelte-components). + ## Tags A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_. diff --git a/documentation/docs/02-template-syntax/03-logic-blocks.md b/documentation/docs/02-template-syntax/03-logic-blocks.md index af47f6dfa7..ba21aa10f2 100644 --- a/documentation/docs/02-template-syntax/03-logic-blocks.md +++ b/documentation/docs/02-template-syntax/03-logic-blocks.md @@ -2,6 +2,8 @@ title: Logic blocks --- +HTML doesn't have a way of expressing logic, like conditionals and loops. Svelte does. It uses special tags `{#if}`, `{#each}` and `{#await}` to add logic to your markup. + ## {#if ...} ```svelte diff --git a/documentation/docs/02-template-syntax/04-special-tags.md b/documentation/docs/02-template-syntax/04-special-tags.md index 4145d8d6d6..0b9fd95189 100644 --- a/documentation/docs/02-template-syntax/04-special-tags.md +++ b/documentation/docs/02-template-syntax/04-special-tags.md @@ -2,6 +2,8 @@ title: Special tags --- +These are special tags to add logic to your markup, inline. + ## {@html ...} ```svelte diff --git a/documentation/docs/02-template-syntax/06-component-directives.md b/documentation/docs/02-template-syntax/06-component-directives.md index 39bdf80010..ed13aa0340 100644 --- a/documentation/docs/02-template-syntax/06-component-directives.md +++ b/documentation/docs/02-template-syntax/06-component-directives.md @@ -2,6 +2,8 @@ title: Component directives --- +Directives supported on invoking components. These allow listening to events, binding to props, and more. + ## on:_eventname_ ```svelte diff --git a/documentation/docs/02-template-syntax/07-special-elements.md b/documentation/docs/02-template-syntax/07-special-elements.md index 74a42d486e..e47f3b9fce 100644 --- a/documentation/docs/02-template-syntax/07-special-elements.md +++ b/documentation/docs/02-template-syntax/07-special-elements.md @@ -2,6 +2,8 @@ title: Special elements --- +Svelte provides a variety of built-in elements. These are not part of the DOM, but are instead handled by the compiler, and ease the process of working with higher level DOM elements easier, alongside providing instructions to the compiler. + ## `` ```svelte diff --git a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md index 6889b192e5..c6ba6aefa1 100644 --- a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md +++ b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md @@ -2,6 +2,8 @@ title: 'Client-side component API' --- +Svelte provides a client-side API for interacting with components. This allows you to create components programmatically, and to access their properties and methods. + ## Creating a component ```ts