Convert 2022 posts from Svelte to Mdsvex

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/+page.svelte → src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/+page.svx

@@ -2,14 +2,14 @@
 	import { StackblitzEmbed } from '$lib/components';
 	import { Code, CodeSnippet, Figure, H2, P } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
-	import srcActiveExampleButtonActive from './active-example-button-active.png?enhanced';
-	import srcActiveExampleInputActive from './active-example-input-active.png?enhanced';
-	import srcActiveExampleInputFocus from './active-example-input-focus.png?enhanced';
-	import srcFocusExampleButton from './focus-example-button.png?enhanced';
-	import srcFocusExampleInput from './focus-example-input.png?enhanced';
-	import srcFocusVisibleExampleButtonKeyboard from './focus-visible-example-button-keyboard.png?enhanced';
-	import srcFocusVisibleExampleButtonMouse from './focus-visible-example-button-mouse.png?enhanced';
-	import srcFocusVisibleExampleInput from './focus-visible-example-input.png?enhanced';
+	import ActiveExampleButtonActive from './ActiveExampleButtonActive.svelte';
+	import ActiveExampleInputActive from './ActiveExampleInputActive.svelte';
+	import ActiveExampleInputFocus from './ActiveExampleInputFocus.svelte';
+	import FocusExampleButton from './FocusExampleButton.svelte';
+	import FocusExampleInput from './FocusExampleInput.svelte';
+	import FocusVisibleExampleButtonKeyboard from './FocusVisibleExampleButtonKeyboard.svelte';
+	import FocusVisibleExampleButtonMouse from './FocusVisibleExampleButtonMouse.svelte';
+	import FocusVisibleExampleInput from './FocusVisibleExampleInput.svelte';
 
 	let { data }: PageProps = $props();
 </script>
@@ -72,10 +72,7 @@ button:active {
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcActiveExampleInputActive}
-		alt="A simple web form with a name input field and a submit button. The name input field is active and highlighted with a red dashed outline."
-	/>
+	<ActiveExampleInputActive />
 </Figure>
 
 <P>
@@ -84,19 +81,13 @@ button:active {
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcActiveExampleInputFocus}
-		alt="A simple web form with a name input field and a submit button. The name input field has focus, and the browser applies a blue outline to it."
-	/>
+	<ActiveExampleInputFocus />
 </Figure>
 
 <P>While you click the submit button, you can see the dashed red outline until you release it.</P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcActiveExampleButtonActive}
-		alt="A simple web form with a name input field and a submit button. The submit button is highlighted with a dashed red outline."
-	/>
+	<ActiveExampleButtonActive />
 </Figure>
 
 <P>
@@ -134,21 +125,15 @@ button:focus {
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcFocusExampleInput}
-		alt="A simple web form with a name input field and a submit button. The input field is focused and highlighted with a dashed red outline."
-	/>
+	<FocusExampleInput />
 </Figure>
 
 <P>
 	Likewise, when you click the submit button, you can see the dashed outline until it loses focus:
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcFocusExampleButton}
-		alt="A simple web form with a name input field and a submit button. The submit button has focus and the browser applied a dashed red outline to it."
-	/>
+	<FocusExampleButton />
 </Figure>
 
 <P>
@@ -192,10 +177,7 @@ button:focus-visible {
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcFocusVisibleExampleInput}
-		alt="A simple web form with a name input field and a submit button. The name input field has focus, and the browser applied :focus-visible and a dashed red outline."
-	/>
+	<FocusVisibleExampleInput />
 </Figure>
 
 <P>
@@ -205,21 +187,15 @@ button:focus-visible {
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcFocusVisibleExampleButtonMouse}
-		alt="A simple web form with a name input field and a submit button. Even though the submit has focus, the browser did not apply :focus-visible and the corresponding styling."
-	/>
+	<FocusVisibleExampleButtonMouse />
 </Figure>
 
 <P>
 	But when you use the <key>Tab</key> key to focus the submit button, the dashed red outline is visible:
 </P>
 
 <Figure class="mb-6">
-	<enhanced:img
-		src={srcFocusVisibleExampleButtonKeyboard}
-		alt="A simple web form with a name input field and a submit button. This time, the browser applied :focus-visible and a dashed red outline to the submit button."
-	/>
+	<FocusVisibleExampleButtonKeyboard />
 </Figure>
 
 <P>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/ActiveExampleButtonActive.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './active-example-button-active.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The submit button is highlighted with a dashed red outline."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/ActiveExampleInputActive.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './active-example-input-active.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The name input field is active and highlighted with a red dashed outline."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/ActiveExampleInputFocus.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './active-example-input-focus.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The name input field has focus, and the browser applies a blue outline to it."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/FocusExampleButton.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './focus-example-button.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The submit button has focus and the browser applied a dashed red outline to it."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/FocusExampleInput.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './focus-example-input.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The input field is focused and highlighted with a dashed red outline."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/FocusVisibleExampleButtonKeyboard.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './focus-visible-example-button-keyboard.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. This time, the browser applied :focus-visible and a dashed red outline to the submit button."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/FocusVisibleExampleButtonMouse.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './focus-visible-example-button-mouse.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. Even though the submit has focus, the browser did not apply :focus-visible and the corresponding styling."
+/>

src/routes/posts/(2022)/groking-active-focus-and-focus-visible-pseudo-classes/FocusVisibleExampleInput.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './focus-visible-example-input.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="A simple web form with a name input field and a submit button. The name input field has focus, and the browser applied :focus-visible and a dashed red outline."
+/>

src/routes/posts/(2022)/handling-breaking-changes-in-sveltekit-pre-1-0/+page.svelte → src/routes/posts/(2022)/handling-breaking-changes-in-sveltekit-pre-1-0/+page.svx

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import { Code, CodeSnippet, Figure, H2, H3, P, Ul } from '@maiertech/sveltekit-helpers';
 </script>
 

src/routes/posts/(2022)/how-to-make-sveltekit-hmr-work-with-gitpod/+page.svelte → src/routes/posts/(2022)/how-to-make-sveltekit-hmr-work-with-gitpod/+page.svx

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import { Code, CodeSnippet, Figure, H2, P, Ul } from '@maiertech/sveltekit-helpers';
 </script>
 

src/routes/posts/(2022)/recording-screencasts-on-a-hidpi-display/+page.svelte → src/routes/posts/(2022)/recording-screencasts-on-a-hidpi-display/+page.svx

@@ -1,6 +1,6 @@
-<script lang="ts">
+<script>
 	import { Figure, H2, Ol, P, Table, Td, Th, Thead } from '@maiertech/sveltekit-helpers';
-	import srcDisplayPreferences from './display-preferences-light.png?enhanced';
+	import DisplayPreferences from './DisplayPreferences.svelte';
 	import ScaledPixelSVG from './scaled-pixel.svelte';
 </script>
 
@@ -87,7 +87,7 @@
 <P>macOS always uses the default resolution unless you opt for a different scaled resolution:</P>
 
 <Figure caption="macOS lets you choose your preferred scaled resolution." class="mb-6">
-	<enhanced:img src={srcDisplayPreferences} alt="Screenshot of display preferences on macOS." />
+	<DisplayPreferences />
 </Figure>
 
 <P>

src/routes/posts/(2022)/recording-screencasts-on-a-hidpi-display/DisplayPreferences.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import src from './display-preferences-light.png?enhanced';
+</script>
+
+<enhanced:img src={src} alt="Screenshot of display preferences on macOS." />

src/routes/posts/(2022)/route-matching-in-sveltekit/+page.svelte → src/routes/posts/(2022)/route-matching-in-sveltekit/+page.svx

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import { StackblitzEmbed } from '$lib/components';
 	import { Code, Figure, H2, P, CodeSnippet, Ul } from '@maiertech/sveltekit-helpers';
 </script>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.svelte → src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.svx

@@ -1,11 +1,11 @@
-<script lang="ts">
+<script>
 	import { StackblitzEmbed } from '$lib/components';
 	import { CodeSnippet, Figure, H2, P } from '@maiertech/sveltekit-helpers';
-	import srcCsbNewSandboxDialog from './csb-new-sandbox-dialog.png?enhanced';
-	import srcCsbSvelteTemplate from './csb-svelte-template.png?enhanced';
-	import srcStackblitzDashboard from './stackblitz-dashboard.png?enhanced';
-	import srcSvelteRepl from './svelte-repl.png?enhanced';
-	import srcSvelteTemplate from './svelte-template.png?enhanced';
+	import CsbNewSandboxDialog from './CsbNewSandboxDialog.svelte';
+	import CsbSvelteTemplate from './CsbSvelteTemplate.svelte';
+	import StackblitzDashboard from './StackblitzDashboard.svelte';
+	import SvelteRepl from './SvelteRepl.svelte';
+	import SvelteTemplate from './SvelteTemplate.svelte';
 </script>
 
 <P>
@@ -42,10 +42,7 @@
 	caption="Click the download button in the Svelte REPL to download the source code of an example."
 	class="mb-6"
 >
-	<enhanced:img
-		src={srcSvelteRepl}
-		alt="Screenshot of a project running in the Svelte REPL. A blue arrow points at the download button."
-	/>
+	<SvelteRepl />
 </Figure>
 
 <P>
@@ -57,10 +54,7 @@
 	caption="Code examples in the Svelte REPL use the legacy Svelte template, which uses Rollup as a bundler."
 	class="mb-6"
 >
-	<enhanced:img
-		src={srcSvelteTemplate}
-		alt="Screenshot of VS Code with the code downloaded from the Svelte REPL. File package.json is open, and you can see the dependencies of the deprecated Svelte template."
-	/>
+	<SvelteTemplate />
 </Figure>
 
 <P>
@@ -85,10 +79,7 @@
 </P>
 
 <Figure caption="CodeSandbox has a sandbox template for Svelte." class="mb-6">
-	<enhanced:img
-		src={srcCsbNewSandboxDialog}
-		alt="Screenshot of the CodeSandbox dialog to select a template for a new sandbox. The Svelte template is highlighted."
-	/>
+	<CsbNewSandboxDialog />
 </Figure>
 
 <P>
@@ -100,10 +91,7 @@
 	caption="CodeSandbox's Svelte template is a variation of the deprecated Svelte template."
 	class="mb-6"
 >
-	<enhanced:img
-		src={srcCsbSvelteTemplate}
-		alt="Screenshot of CodeSandbox's Svelte template running in-browser. File package.json is open, and you can see the dependencies of the deprecated Svelte template."
-	/>
+	<CsbSvelteTemplate />
 </Figure>
 
 <P>
@@ -131,10 +119,7 @@
 </P>
 
 <Figure caption="StackBlitz supports the official Vite Svelte templates." class="mb-6">
-	<enhanced:img
-		src={srcStackblitzDashboard}
-		alt="Screenshot of StackBlitz's dashboard. The two Svelte templates, one for vanilla JavaScript and one for TypeScript, are highlighted."
-	/>
+	<StackblitzDashboard />
 </Figure>
 
 <P>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/CsbNewSandboxDialog.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './csb-new-sandbox-dialog.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="Screenshot of the CodeSandbox dialog to select a template for a new sandbox. The Svelte template is highlighted."
+/>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/CsbSvelteTemplate.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './csb-svelte-template.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="Screenshot of CodeSandbox's Svelte template running in-browser. File package.json is open, and you can see the dependencies of the deprecated Svelte template."
+/>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/StackblitzDashboard.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './stackblitz-dashboard.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="Screenshot of StackBlitz's dashboard. The two Svelte templates, one for vanilla JavaScript and one for TypeScript, are highlighted."
+/>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/SvelteRepl.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './svelte-repl.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="Screenshot of a project running in the Svelte REPL. A blue arrow points at the download button."
+/>

src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/SvelteTemplate.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import src from './svelte-template.png?enhanced';
+</script>
+
+<enhanced:img
+	{src}
+	alt="Screenshot of VS Code with the code downloaded from the Svelte REPL. File package.json is open, and you can see the dependencies of the deprecated Svelte template."
+/>

src/routes/posts/(2022)/using-the-at-and-hash-symbols-in-tweets-with-a-word-joiner-character/+page.svelte → src/routes/posts/(2022)/using-the-at-and-hash-symbols-in-tweets-with-a-word-joiner-character/+page.svx

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import { Code, CodeSnippet, Figure, P } from '@maiertech/sveltekit-helpers';
 	import { Tweet } from 'sveltekit-embed';
 	import CopyButton from './copy-button.svelte';