feat: add plugins

docs/.vitepress/config.mts

@@ -1,4 +1,6 @@
 import { defineConfig } from "vitepress";
+import { imgMark} from "@mdit/plugin-img-mark";
+import { figure } from "@mdit/plugin-figure";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -24,7 +26,7 @@ export default defineConfig({
 
       copyleft: {
         show: true,
-        license: "GPL-3.0 license",
+        license: "GPL-3.0 License",
         info: "https://www.gnu.org/licenses/gpl-3.0.html",
       },
 
@@ -35,6 +37,13 @@ export default defineConfig({
     },
   },
 
+  markdown: {
+    config: (md) => {
+      md.use(imgMark);
+      md.use(figure);
+    },
+  },
+
   head: [
     ["meta", { name: "author", content: "Gabriel Cozma" }],
     ["link", { rel: "icon", href: "/icon.png" }],

docs/.vitepress/theme/custom.scss

@@ -74,3 +74,16 @@ aside {
     margin-bottom: 0;
   }
 }
+
+
+@media (prefers-color-scheme: light) {
+img[data-mode="darkmode-only"] {
+    display: none !important;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  img[data-mode="lightmode-only"] {
+    display: none !important;
+  }
+}

docs/index.md

@@ -7,10 +7,10 @@ _Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning,
 ## Why is it important?
 
 <aside>
-    <picture>
-        <source srcset="/sh-exemple-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="/sh-exemple-light.svg" alt="A diagram of a basic website structure using semantic HTML elements">
-    </picture>
+
+![A diagram of a basic website structure using semantic HTML elements](sh-exemple-light.svg#light)
+![A diagram of a basic website structure using semantic HTML elements](sh-exemple-dark.svg#dark)
+
 <figcaption>A diagram of a basic website structure using semantic HTML elements</figcaption>
 </aside>
 

package.json

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