feat(markdown): replace figure plugin with footnote

Author: GabsEdits

docs/.vitepress/config.mts

@@ -1,6 +1,6 @@
 import { defineConfig } from "vitepress";
 import { imgMark } from "@mdit/plugin-img-mark";
-import { figure } from "@mdit/plugin-figure";
+import { footnote } from "@mdit/plugin-footnote";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -40,7 +40,7 @@ export default defineConfig({
   markdown: {
     config: (md) => {
       md.use(imgMark);
-      md.use(figure);
+      md.use(footnote);
     },
   },
 

docs/index.md

@@ -2,7 +2,7 @@
 
 ## What is Semantic HTML
 
-_Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. <abbr title="Cascading Style Sheets">CSS</abbr> is used to suggest its presentation to human users.[¹](#wikipedia) Semantic means "relating to meaning". Writing semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance.[²](#webdev)_
+_Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. <abbr title="Cascading Style Sheets">CSS</abbr> is used to suggest its presentation to human users.[^wikipedia] Semantic means "relating to meaning". Writing semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance. [^webdev]_
 
 ## Why is it important?
 
@@ -43,7 +43,5 @@ As the web evolves towards cleaner and more structured code, Semantic HTML plays
 - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
 </section>
 
----
-
-- ¹ - https://en.wikipedia.org/wiki/Semantic_HTML { #wikipedia }
-- ² - https://web.dev/learn/html/semantic-html/ { #webdev }
+[^wikipedia]: https://en.wikipedia.org/wiki/Semantic_HTML
+[^webdev]: https://web.dev/learn/html/semantic-html/

package.json

@@ -6,7 +6,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@mdit/plugin-figure": "^0.12.0",
+    "@mdit/plugin-footnote": "^0.12.0",
     "@mdit/plugin-img-mark": "^0.12.0",
     "aplos": "2.1.0",
     "prettier": "^3.3.2"