Add date on recipes (#441)

* Add date on recipes

* Use Intl.DateTimeFormat instead of date-fns lib

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;
 </script>
 
 <Seo {title} />
@@ -30,6 +32,18 @@
 	<article>
 		<h1>{title}</h1>
 		<slot />
+		{#if published}<footer>
+				<div>
+					Published: <time datetime={published}
+						>{new Intl.DateTimeFormat([], { dateStyle: 'full' }).format(new Date(published))}</time
+					>
+				</div>
+				{#if updated}<div>
+						Last update: <time datetime={updated}
+							>{new Intl.DateTimeFormat([], { dateStyle: 'full' }).format(new Date(updated))}</time
+						>
+					</div>{/if}
+			</footer>{/if}
 	</article>
 </main>
 
@@ -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);
 	}

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;
 </script>
 
 <Seo {title} />
@@ -34,6 +36,18 @@
 				</li>
 			{/each}
 		</ul>
+		{#if published}<footer>
+				<div>
+					Published: <time datetime={published}
+						>{new Intl.DateTimeFormat([], { dateStyle: 'full' }).format(new Date(published))}</time
+					>
+				</div>
+				{#if updated}<div>
+						Last update: <time datetime={updated}
+							>{new Intl.DateTimeFormat([], { dateStyle: 'full' }).format(new Date(updated))}</time
+						>
+					</div>{/if}
+			</footer>{/if}
 	</article>
 </main>
 
@@ -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);
 	}

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:

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 `<script>` tags. For example, the [Stage 3 Optional Chaining proposal](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) is popular, but not yet in browsers, and more relevantly, is not yet understood by [Acorn](https://github.com/acornjs/acorn), which is what Svelte uses to parse `<script>` tags.
@@ -23,7 +24,6 @@ Example usage:
 <main>
 	<h1>Hello {sub}!</h1>
 </main>
-
 ```
 
 When we try to run this, Acorn throws a `ParseError: Unexpected token` error.

src/routes/recipes/build-setup/using-postcss-with-svelte/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Using PostCSS with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 **Option 1 - Write your own**
@@ -76,7 +77,6 @@ and you can write SCSS/SASS in your Svelte template:
 		color: $color;
 	}
 </style>
-
 ```
 
 The same is true for PostCSS as well, which also applies to any PostCSS plugins, like TailwindCSS (see [Tailwind demo here](https://github.com/tailwindcss/setup-examples/tree/master/examples/sapper)).

src/routes/recipes/build-setup/using-typescript-with-svelte/+page.svx

@@ -1,6 +1,8 @@
 ---
 title: Using TypeScript with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
+updated: 2022-09-13T16:29:38+02:00
 ---
 
 **It is a common misconception that Svelte doesn't work with TypeScript**. Svelte is, of course, written in TypeScript, so the project strongly believes in the value of typing. An [offical blog post](https://svelte.dev/blog/svelte-and-typescript) announced full support for it in mid 2020. Here is how to get started:
@@ -44,7 +46,6 @@ Then you can write your Svelte components with TypeScript:
 <template>
 	<div>Hello {hello}</div>
 </template>
-
 ```
 
 More information from community blogposts:

src/routes/recipes/build-setup/writing-your-own-preprocessors/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Writing Your Own Preprocessors
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 > This article references `svelte.preprocess` throughout but you may be more familiar with the `preprocess` option of `svelte-loader` or `rollup-plugin-svelte`. This `preprocess` option calls `svelte.preprocess` internally. The bundler plugin gives you easy access to it, so you don't need to transform your components before compilation manually.
@@ -44,7 +45,6 @@ p Hello World!
 		color: red;
 	}
 </style>
-
 ```
 
 We need to run it through Svelte to generate JavaScript, not HTML:
@@ -231,7 +231,6 @@ p Hello World!
 		color: red;
 	}
 </style>
-
 ```
 
 This guarantees no ambiguity when you have a Svelte codebase that is a mix of Pug and HTML templates. In order to process this you will have to add some checking and preprocessing:

src/routes/recipes/component-recipes/form-validation-with-svelte/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Form Validation with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 ### Form Validation with Yup
@@ -51,5 +52,4 @@ We can use `bind:value` to bind input value, and validate the form using `schema
 		<button type="submit">Register</button>
 	</div>
 </form>
-
 ```

src/routes/recipes/component-recipes/getting-references-to-components-in-each-blocks/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Getting references to Components generated in an each block
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 Using `bind:this` allows a component to store a reference to it's children, this can also be used when generating a series of components in an `{#each}` block.
@@ -22,7 +23,6 @@ This method simply binds the generated component to an array element based on it
 {#each array as item, i}
 	<Child title={item.title} bind:this={children[i]} />
 {/each}
-
 ```
 
 **Method 2: Using an object as a hashtable**
@@ -42,5 +42,4 @@ An alternative is to use an _unique_ key and bind the component to an object, ef
 {#each array as item, i (item.id)}
 	<Child title={item.title} bind:this={children[item.id]} />
 {/each}
-
 ```

src/routes/recipes/component-recipes/passing-attributes-to-component-dom-element/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Passing attributes to component DOM element
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 When you want to "forward" any attributes that you can't control before compile time or that changes between each use of the component, like `class` or `style`, to your component wrapper DOM element (instead of declaring variables), use `$$restProps`, like the code below. However, be aware that it isn't generally recommended to use this approach, as it is difficult for Svelte to optimize it, since it doesn't know how many atributes it will receive.
@@ -11,7 +12,6 @@ When you want to "forward" any attributes that you can't control before compile
 
 <!-- App.svelte -->
 <Component class="li-item-class">{name}</Component>
-
 ```
 
 [Svelte Playground here](https://svelte.dev/repl/24139d8599d348b9bcad5c0a1f471230?version=3.23.0). See [relevant part of docs](https://svelte.dev/docs#Attributes_and_props) for more.

src/routes/recipes/component-recipes/using-fetch-to-consume-apis/+page.svx

@@ -1,6 +1,8 @@
 ---
 title: Using Fetch to Consume APIs with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
+updated: 2022-03-22T23:11:24+01:00
 ---
 
 Working with external data in Svelte is important. Here's a guide.
@@ -26,7 +28,6 @@ We can declare a `data` variable and use the `onMount` lifecycle to fetch on mou
 <pre>
   {JSON.stringify(data, null, 2)}
 </pre>
-
 ```
 
 You can further improve this implementation by showing a placeholder while `data` is undefined and also showing an error notification if an error occurs.
@@ -53,7 +54,6 @@ This example is exactly equal to Method 1 above:
 {:catch error}
 	<!-- optionally show something while promise was rejected -->
 {/await}
-
 ```
 
 Here you can see that it is very intuitive where to place your loading placeholder and error display.
@@ -86,7 +86,6 @@ If we don't want to immediately load data on component mount, we can wait for us
 <pre>
   {JSON.stringify(data, null, 2)}
 </pre>
-
 ```
 
 The user now has an intuitive way to refresh their data.
@@ -118,7 +117,6 @@ It would be better to make all these commonplace UI idioms declarative. Await bl
 {:catch error}
 	<!-- optionally show something while promise was rejected -->
 {/await}
-
 ```
 
 The trick here is we can simply reassign the `promise` to trigger a refetch, which then also clears the UI of stale data while fetching.
@@ -153,7 +151,6 @@ Of course, it is up to you what UX you want - you may wish to keep displaying st
 {:catch error}
 	<!-- optionally show something while promise was rejected -->
 {/await}
-
 ```
 
 **Method 4: Data Stores**
@@ -197,7 +194,6 @@ export function getNewCount() {
 <pre>
 {$count}
 </pre>
-
 ```
 
 This has the added benefit of keeping state around if the component gets remounted again with no need for a new data fetch.

src/routes/recipes/design-patterns/authentication-with-svelte/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Authentication with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 Figuring out how to authenticate with Svelte can be tricky business. The official docs for Sapper, the Server-Side Rendering platform designed for Svelte, recognize that session management should be handled by some other service such as [express-session](https://github.com/expressjs/session), but you are not limited to using any backend with Svelte. Moreover, Sapper does not have native support for persistent sessions (as of April 2020).
@@ -96,5 +97,4 @@ It is important to note that this example includes `preventDefault` to prevent t
 		{/await}
 	{/if}
 </div>
-
 ```

src/routes/recipes/design-patterns/routing-with-svelte/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Routing with Svelte
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 _to be written_

src/routes/recipes/design-patterns/server-side-rendering/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Server-side Rendering
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 _some content_

src/routes/recipes/other/editable-svg-icon-systems-with-svelte-and-heroicons/+page.svx

@@ -1,6 +1,7 @@
 ---
 title: Editable SVG Icon Systems with Svelte and Heroicons
 layout: recipe
+published: 2021-06-14T11:30:41-07:00
 ---
 
 There are many ways to create an SVG Icon System, but one method that takes advantage of Svelte's capabilities is to create editable inline icons as components. Some of the advantages of this way of working is:
@@ -35,7 +36,6 @@ The next step is to create a base icon component (`Icon.svelte`). Start with the
 		<slot />
 	</g>
 </svg>
-
 ```
 
 You can use this `Icon` component as is - the only thing you might need to update is the `viewBox` depending on the `viewBox` of the icons you are using. The `width`, `height`, `color`, and `name` props of the icon will allow the icon to be dynamically updated.
@@ -51,7 +51,6 @@ Our script will look like this:
 	export let name = '';
 	export let color = 'currentColor';
 </script>
-
 ```
 
 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
 <Icon name="pencil-alt"><PencilAlt /></Icon>
-
 ```
 
 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:
 	<!-- or bump up the size, too -->
 	<Icon width="30" height="30" name="pencilAlt"><PencilAlt /></Icon>
 </p>
-
 ```
 
 ### Additional Notes

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/)._

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).

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
 ---
 
 <script>import Warning from '../../../lib/components/recipes/Warning.svelte'</script>