{string}
\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte new file mode 100644 index 0000000000..527e9a4830 --- /dev/null +++ b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte @@ -0,0 +1,5 @@ + + +{@html string}
\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/06-html-tags/text.md b/site/content/tutorial/01-introduction/06-html-tags/text.md new file mode 100644 index 0000000000..5920f873e5 --- /dev/null +++ b/site/content/tutorial/01-introduction/06-html-tags/text.md @@ -0,0 +1,15 @@ +--- +title: HTML tags +--- + +Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning. + +But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML. + +In Svelte, you do this with the special `{@html ...}` tag: + +```html +{@html string}
+``` + +> Svelte doesn't perform any sanitization of the data before it gets inserted into the DOM. In other words, it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks \ No newline at end of file diff --git a/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte b/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md new file mode 100644 index 0000000000..f6f32cd626 --- /dev/null +++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md @@ -0,0 +1,29 @@ +--- +title: Making an app +--- + +This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. + +First, you'll need to integrate Svelte with a build tool. Popular choices are: + +* [Rollup](https://rollupjs.org) / [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) +* [webpack](https://webpack.js.org/) / [svelte-loader](https://github.com/sveltejs/svelte-loader) +* [Parcel](https://parceljs.org/) / [parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte) + +Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process. + +Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`: + +```js +import App from './App.svelte'; + +const app = new App({ + target: document.body, + props: { + // we'll learn about props later + answer: 42 + } +}); +``` + +You can then interact with `app` using the [component API](docs/component-api) if you need to. \ No newline at end of file diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md index 960d009378..63188e6a26 100644 --- a/site/content/tutorial/99-todo/99-todo/text.md +++ b/site/content/tutorial/99-todo/99-todo/text.md @@ -8,6 +8,13 @@ title: TODO Outline (subject to change): + + ## Introduction @@ -15,8 +22,10 @@ Outline (subject to change): * [x] Dynamic attributes * [x] Styling (mention DCE? global styles?) * [x] Nested components -* [ ] HTML tags -* [ ] Creating an app — how to import components into JS, etc +* [x] HTML tags +* [x] Creating an app — how to import components into JS, etc + +Side-quest: create a 'Svelte for new developers' blog post that assumes no knowledge beyond HTML, CSS and JS (i.e. CLI, Node and npm, degit, build tools) ## Reactivity diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte index b8488742f5..4d49998c99 100644 --- a/site/src/routes/tutorial/[slug]/index.svelte +++ b/site/src/routes/tutorial/[slug]/index.svelte @@ -116,8 +116,7 @@ } .chapter-markup :global(ul) { - padding: 0; - list-style: none; + padding: 0 0 0 2em; } .chapter-markup :global(blockquote) {