diff --git a/src/lib/layouts/Recipe.svelte b/src/lib/layouts/Recipe.svelte index 834a7ea99..f8e6c2010 100644 --- a/src/lib/layouts/Recipe.svelte +++ b/src/lib/layouts/Recipe.svelte @@ -6,6 +6,8 @@ import Seo from '$lib/components/Seo.svelte'; export let title; + export let published; + export let updated; @@ -30,6 +32,18 @@

{title}

+ {#if published}
+
+ Published: +
+ {#if updated}
+ Last update: +
{/if} +
{/if}
@@ -40,6 +54,16 @@ align-content: flex-start; } + article > footer { + margin-top: 1em; + border-top: 1px solid var(--gray); + padding-top: 1em; + } + + time { + color: var(--dark-gray); + } + strong { font-size: var(--font-500); } diff --git a/src/lib/layouts/RecipeCategory.svelte b/src/lib/layouts/RecipeCategory.svelte index a02f5159b..e0bc0c071 100644 --- a/src/lib/layouts/RecipeCategory.svelte +++ b/src/lib/layouts/RecipeCategory.svelte @@ -7,6 +7,8 @@ const childrenNodes = $categories.find((c) => c.path === $page.url.pathname).children || []; export let title; + export let published; + export let updated; @@ -34,6 +36,18 @@ {/each} + {#if published}
+
+ Published: +
+ {#if updated}
+ Last update: +
{/if} +
{/if} @@ -43,7 +57,15 @@ grid-template-columns: minmax(0, 1fr); align-content: flex-start; } + article > footer { + margin-top: 1em; + border-top: 1px solid var(--gray); + padding-top: 1em; + } + time { + color: var(--dark-gray); + } strong { font-size: var(--font-500); } diff --git a/src/routes/recipes/build-setup/transpiling-es6-to-es5-for-legacy-browser-support/+page.svx b/src/routes/recipes/build-setup/transpiling-es6-to-es5-for-legacy-browser-support/+page.svx index 939d13976..a6efe6dd8 100644 --- a/src/routes/recipes/build-setup/transpiling-es6-to-es5-for-legacy-browser-support/+page.svx +++ b/src/routes/recipes/build-setup/transpiling-es6-to-es5-for-legacy-browser-support/+page.svx @@ -1,6 +1,7 @@ --- title: Transpiling ES6 to ES5 for Legacy Browser (IE11) Support with Babel layout: recipe +published: 2021-06-14T11:30:41-07:00 --- Svelte outputs modern JavaScript, therefore for legacy browser support, you need to transpile this output back to ES5 (or older). The main strategy people adopt is having 2 builds: diff --git a/src/routes/recipes/build-setup/using-future-js-syntax-in-svelte-using-babel/+page.svx b/src/routes/recipes/build-setup/using-future-js-syntax-in-svelte-using-babel/+page.svx index 9c6000fd7..fe322e322 100644 --- a/src/routes/recipes/build-setup/using-future-js-syntax-in-svelte-using-babel/+page.svx +++ b/src/routes/recipes/build-setup/using-future-js-syntax-in-svelte-using-babel/+page.svx @@ -1,6 +1,7 @@ --- title: Using Future JS Syntax in Svelte with Babel layout: recipe +published: 2021-06-14T11:30:41-07:00 --- The other, less common but still handy usecase for Babel with Svelte is transpiling _future_ syntax inside ` - ``` The default `color` prop is set to `currentColor` so the icon will inherit the color of whatever text surrounds it. Of course, this csn be overridden with a specific color. @@ -67,14 +66,12 @@ To use it, say we had a Svelte component called `PencilAlt.svelte` that containe d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /> - ``` We can use the `Icon` component as follows: ```svelte - ``` Now, if we’d like to make many sizes for the icon, we can do so very easily: @@ -88,7 +85,6 @@ Now, if we’d like to make many sizes for the icon, we can do so very easily:

- ``` ### Additional Notes diff --git a/src/routes/recipes/publishing-and-deploying/dockerize-a-sapper-app/+page.svx b/src/routes/recipes/publishing-and-deploying/dockerize-a-sapper-app/+page.svx index 343951fce..70844ffba 100644 --- a/src/routes/recipes/publishing-and-deploying/dockerize-a-sapper-app/+page.svx +++ b/src/routes/recipes/publishing-and-deploying/dockerize-a-sapper-app/+page.svx @@ -1,6 +1,7 @@ --- title: Dockerize a Sapper App layout: recipe +published: 2021-06-14T11:30:41-07:00 --- _This example is taken from the [https://svelte.dev/](https://svelte.dev/)._ diff --git a/src/routes/recipes/publishing-and-deploying/dockerize-a-svelte-app/+page.svx b/src/routes/recipes/publishing-and-deploying/dockerize-a-svelte-app/+page.svx index 38cabc7b6..6ac534ddc 100644 --- a/src/routes/recipes/publishing-and-deploying/dockerize-a-svelte-app/+page.svx +++ b/src/routes/recipes/publishing-and-deploying/dockerize-a-svelte-app/+page.svx @@ -1,6 +1,7 @@ --- title: Dockerize a Svelte App layout: recipe +published: 2021-06-14T11:30:41-07:00 --- Let's pull down the [basic svelte template](https://github.com/sveltejs/template) using [degit](https://github.com/Rich-Harris/degit). diff --git a/src/routes/recipes/stores/+page.svx b/src/routes/recipes/stores/+page.svx index 22a245745..46ed5f5f7 100644 --- a/src/routes/recipes/stores/+page.svx +++ b/src/routes/recipes/stores/+page.svx @@ -2,6 +2,8 @@ title: Stores layout: recipeCategory icon: database +published: 2021-06-14T11:30:41-07:00 +updated: 2023-01-27T20:05:46-08:00 --- diff --git a/src/routes/recipes/svelte-language-fundamentals/looping/+page.svx b/src/routes/recipes/svelte-language-fundamentals/looping/+page.svx index 5316ea069..271296d12 100644 --- a/src/routes/recipes/svelte-language-fundamentals/looping/+page.svx +++ b/src/routes/recipes/svelte-language-fundamentals/looping/+page.svx @@ -1,6 +1,7 @@ --- title: Looping layout: recipe +published: 2021-06-14T11:30:41-07:00 --- `{#each}` block allows you to loop only **array** or **array-like object** (i.e. it has a `.length` property). @@ -24,7 +25,6 @@ You can use spread operator `[...value]` for [Map](https://developer.mozilla.org {key}: {value} {/each} - ``` Both [`Map.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys) and [`Map.values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values) method return an iterable. To use `{#each}` with iterable, you can use spread operator `[...value]` on the iterable. @@ -48,7 +48,6 @@ Both [`Map.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe {value} {/each} - ``` ### Looping a set @@ -65,7 +64,6 @@ You can use spread operator `[...value]` for [Set](https://developer.mozilla.org {item} {/each} - ``` ### Looping a string @@ -82,7 +80,6 @@ You can use spread operator `[...value]` for [Set](https://developer.mozilla.org {character} {/each} - ``` ### Looping a generator function @@ -104,7 +101,6 @@ To use `{#each}` with generator function, you can use spread operator `[...value {item} {/each} - ``` ### Binding to a spread item @@ -123,7 +119,6 @@ Once you spread a Map, Set, Generator, or any Iterable, you are creating a new a {/each} - ``` To workaround this, you can use `on:input` listener @@ -145,5 +140,4 @@ To workaround this, you can use `on:input` listener }} /> {/each} - ``` diff --git a/src/routes/recipes/svelte-language-fundamentals/options-immutable/+page.svx b/src/routes/recipes/svelte-language-fundamentals/options-immutable/+page.svx index 282d9778c..ea0e8627a 100644 --- a/src/routes/recipes/svelte-language-fundamentals/options-immutable/+page.svx +++ b/src/routes/recipes/svelte-language-fundamentals/options-immutable/+page.svx @@ -1,6 +1,8 @@ --- title: Using the `immutable` Compiler Option layout: recipe +published: 2021-06-14T11:30:41-07:00 +updated: 2022-08-31T22:24:38+01:00 --- `` is a performance optimization you can add to your Svelte components. diff --git a/src/routes/recipes/svelte-language-fundamentals/passing-data-between-component/+page.svx b/src/routes/recipes/svelte-language-fundamentals/passing-data-between-component/+page.svx index be2999f28..62872a93b 100644 --- a/src/routes/recipes/svelte-language-fundamentals/passing-data-between-component/+page.svx +++ b/src/routes/recipes/svelte-language-fundamentals/passing-data-between-component/+page.svx @@ -1,6 +1,8 @@ --- title: Passing data between components layout: recipe +published: 2022-08-30T00:07:30+02:00 +updated: 2022-10-12T23:14:11+02:00 --- - ``` Whenever Svelte sees a reactive declaration, it makes sure to execute any reactive statements that depend on one another in the correct order and only when their direct dependencies have changed. A 'direct dependency' is a variable that is referenced inside the reactive declaration itself. References to variables inside functions that a reactive declaration _calls_ are not considered dependencies. @@ -150,7 +145,6 @@ Whenever Svelte sees a reactive declaration, it makes sure to execute any reacti - ``` In the above example, `n_squared` will _not_ be recalculated when `n` changes because Svelte is not looking inside the `squareIt` function to define the reactive declaration's dependencies. diff --git a/src/routes/recipes/svelte-language-fundamentals/scoped-global-css/+page.svx b/src/routes/recipes/svelte-language-fundamentals/scoped-global-css/+page.svx index 77de00ed0..50c35062d 100644 --- a/src/routes/recipes/svelte-language-fundamentals/scoped-global-css/+page.svx +++ b/src/routes/recipes/svelte-language-fundamentals/scoped-global-css/+page.svx @@ -1,6 +1,7 @@ --- title: Scoped global CSS layout: recipe +published: 2021-06-14T11:30:41-07:00 --- Sometimes your template code doesn't match your CSS. If you generate html via `{@html}` or have some un-styled elements inside child components, you might want to style it. However, Svelte won't let you write CSS that doesn't exist in the templates. You might feel forced to use `:global()` to make the CSS work, but that would leak it out to the rest of your app. So, instead you could try this trick: @@ -17,7 +18,6 @@ Sometimes your template code doesn't match your CSS. If you generate html via `{ margin-top: 1rem; } - ``` Now that `p` styling will be output by Svelte, AND it won't leak out to the rest of your app. diff --git a/src/routes/recipes/testing-and-debugging/benchmarking-svelte-components/+page.svx b/src/routes/recipes/testing-and-debugging/benchmarking-svelte-components/+page.svx index dd5f25212..88353cef7 100644 --- a/src/routes/recipes/testing-and-debugging/benchmarking-svelte-components/+page.svx +++ b/src/routes/recipes/testing-and-debugging/benchmarking-svelte-components/+page.svx @@ -1,6 +1,7 @@ --- title: Benchmarking Svelte Components layout: recipe +published: 2021-06-14T11:30:41-07:00 --- _This is a stub, if you are interested in this topic please reach out [via GitHub](https://github.com/svelte-society/sveltesociety.dev/issues/60) and lets work on this together._ diff --git a/src/routes/recipes/testing-and-debugging/unit-testing-svelte-component/+page.svx b/src/routes/recipes/testing-and-debugging/unit-testing-svelte-component/+page.svx index 854e6780b..ecd37fafc 100644 --- a/src/routes/recipes/testing-and-debugging/unit-testing-svelte-component/+page.svx +++ b/src/routes/recipes/testing-and-debugging/unit-testing-svelte-component/+page.svx @@ -1,6 +1,8 @@ --- title: Unit Testing Svelte Components layout: recipe +published: 2021-06-14T11:30:41-07:00 +updated: 2023-07-16T10:12:46-05:00 --- _Some assumptions here, this was pulled from something I wrote and the context was different. Edits will be required._ @@ -79,7 +81,6 @@ Slots are more difficult to test as there is no programmatic interface for worki

Test Data

 - ``` Then the component you wish to test can be passed to the constructor as a prop in order to mount the component correctly: @@ -115,7 +116,6 @@ As with slots, there is no programmatic interface for the Context API (setContex - ``` The component we wish to test looks something like this: @@ -128,7 +128,6 @@ The component we wish to test looks something like this: - ``` We can test this like so: