Use <Spoiler> component directly & remove micromark extension (with…

…astro#2308)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

astro.config.ts

@@ -10,7 +10,6 @@ import remarkSmartypants from 'remark-smartypants';
 
 import { asideAutoImport, astroAsides } from './integrations/astro-asides';
 import { astroCodeSnippets, codeSnippetAutoImport } from './integrations/astro-code-snippets';
-import { astroSpoilers, spoilerAutoImport } from './integrations/astro-spoilers';
 import { sitemap } from './integrations/sitemap';
 import { autolinkConfig } from './plugins/rehype-autolink-config';
 import { rehypei18nAutolinkHeadings } from './plugins/rehype-i18n-autolink-headings';
@@ -23,12 +22,11 @@ export default defineConfig({
 	site: 'https://docs.astro.build/',
 	integrations: [
 		AutoImport({
-			imports: [asideAutoImport, codeSnippetAutoImport, spoilerAutoImport],
+			imports: [asideAutoImport, codeSnippetAutoImport],
 		}),
 		preact({ compat: true }),
 		sitemap(),
 		astroAsides(),
-		astroSpoilers(),
 		astroCodeSnippets(),
 		mdx(),
 	],

src/pages/en/tutorial/2-pages/3.mdx

@@ -6,6 +6,7 @@ description: |-
   Use variables and conditional rendering on your Astro pages
 ---
 import Checklist from '~/components/Checklist.astro';
+import Spoiler from '~/components/Spoiler.astro';
 import Blanks from '~/components/tutorial/Blanks.astro';
 import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
@@ -240,19 +241,27 @@ For each Astro template expression, can you predict the HTML (if any!) that will
 
 1.  `<p>{operatingSystem}</p>`
 
-    ||  `<p>Linux</p>` ||
+    <p>
+      <Spoiler>`<p>Linux</p>`</Spoiler>
+    </p>
 
 2.  `{student && <p>I am still in school.</p>}`
 
-    || Nothing will display because `student` evaluates to false. ||
+    <p>
+      <Spoiler>Nothing will display because `student` evaluates to false.</Spoiler>
+    </p>
 
 3.  `<p>I have {quantity + 8} pairs of {footwear}</p>`
 
-    ||  `<p>I have 11 pairs of boots</p>` ||
+    <p>
+      <Spoiler>`<p>I have 11 pairs of boots</p>`</Spoiler>
+    </p>
 
 4.  `{operatingSystem === "MacOS" ? <p>I am using a Mac.</p> : <p>I am not using a Mac.</p>}`
 
-    || `<p>I am not using a Mac.</p>` ||
+    <p>
+      <Spoiler>`<p>I am not using a Mac.</p>`</Spoiler>
+    </p>
 </Box>
 
 ## Checklist

src/pages/en/tutorial/2-pages/4.mdx

@@ -7,6 +7,7 @@ description: |-
 ---
 import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
+import Spoiler from '~/components/Spoiler.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 
@@ -45,11 +46,11 @@ Using Astro's own `<style></style>` tags, you can style items on your page. Addi
 
     - Which color is the page title of:
 
-        - Your Home page?  ||black||
-        - Your About page? ||purple||
-        - Your Blog page? ||black||
+        - Your Home page?  <Spoiler>black</Spoiler>
+        - Your About page? <Spoiler>purple</Spoiler>
+        - Your Blog page? <Spoiler>black</Spoiler>
 
-    - The page with the biggest title text is? ||Your About page||
+    - The page with the biggest title text is? <Spoiler>Your About page</Spoiler>
 
     :::tip
     If you are unable to determine colors visually, you can use the dev tools in your browser to inspect the `<h1>` title elements and verify the text color applied.

src/pages/en/tutorial/2-pages/5.mdx

@@ -7,6 +7,7 @@ description: |-
 ---
 import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
+import Spoiler from '~/components/Spoiler.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 
@@ -108,19 +109,27 @@ Your About page is now styled using *both* the imported `global.css` file *and*
 
 - Are styles from both styling methods being applied? 
 
-    || Yes ||
+    <p>
+      <Spoiler>Yes</Spoiler>
+    </p>
 
 - Are there any conflicting styles, and if so, which are applied?
 
-    || Yes, h1 has a size of 2.5rem globally, but 4rem locally in the <style> tag. The local 4rem rule is applied on the About page. ||
+    <p>
+      <Spoiler>Yes, `<h1>`  has a size of `2.5rem` globally, but `4rem` locally in the `<style>` tag. The local `4rem` rule is applied on the About page.</Spoiler>
+    </p>
 
 - Describe how `global.css` and `<style>` work together.
 
-    || When conflicting styles are defined both globally and in a page's local <style> tag, the local styles should overwrite any global styles. (But, there can be other factors involved, so always visually inspect your site to make sure your styles are properly applied!)  ||
+    <p>
+      <Spoiler>When conflicting styles are defined both globally and in a page's local `<style>` tag, the local styles should overwrite any global styles. (But, there can be other factors involved, so always visually inspect your site to make sure your styles are properly applied!)</Spoiler>
+    </p>
 
 - How would you choose whether to declare a style in a `global.css` file or a `<style>` tag?
 
-    || If you want a style to be applied site-wide, you would choose to use a global.css file. However, if you want styles to apply to only the HTML content in a single Astro file, and not affect other elements on your site, you would choose a <style> tag. ||
+    <p>
+      <Spoiler>If you want a style to be applied site-wide, you would choose to use a `global.css` file. However, if you want styles to apply to only the HTML content in a single `.astro` file, and not affect other elements on your site, you would choose a `<style>` tag.</Spoiler>
+    </p>
 
 </Box>
 

src/pages/en/tutorial/6-islands/1.mdx

@@ -7,6 +7,7 @@ description: |-
 ---
 import Box from '~/components/tutorial/Box.astro';
 import Checklist from '~/components/Checklist.astro';
+import Spoiler from '~/components/Spoiler.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
@@ -140,15 +141,21 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
 
 1. Which of the five components will be **hydrated** islands, sending JavaScript to the client?
 
-    || `<PreactBanner client:load />` and `<SvelteCounter client:visible />` will be hydrated islands. ||
+    <p>
+      <Spoiler>`<PreactBanner client:load />` and `<SvelteCounter client:visible />` will be hydrated islands.</Spoiler>
+    </p>
 
 2. In what way(s) will the two `<PreactBanner />` components be the same? In what way(s) will they be different? 
 
-  || **Same**: They both show the same HTML elements and look the same initially. **Different**: The component with the `client:load` directive will rerender after the page is loaded, and any interactive elements that it has will work. ||
+    <p>
+      <Spoiler>**Same**: They both show the same HTML elements and look the same initially. **Different**: The component with the `client:load` directive will rerender after the page is loaded, and any interactive elements that it has will work.</Spoiler>
+    </p>
 
 3. Assume the `SvelteCounter` component shows a number and has a button to increase it. If you couldn't see your website's code, only the live published page, how would you tell which of the two `<SvelteCounter />` component used `client:visible`? 
 
-    || Try clicking the button, and see which one is interactive. If it responds to your input, it must have had a `client:` directive. ||
+    <p>
+      <Spoiler>Try clicking the button, and see which one is interactive. If it responds to your input, it must have had a `client:` directive.</Spoiler>
+    </p>
 </Box>