Add markdown-it plugins

Material Design Icon one isn't really working right now, it creates the object sucessfully but there's no font to be injected

package-lock.json

@@ -9,10 +9,19 @@
 			"version": "3.0.0",
 			"license": "MPL-2.0",
 			"dependencies": {
+				"@mdi/js": "^7.2.96",
 				"vitepress-plugin-auto-sidebar": "^1.1.0"
 			},
 			"devDependencies": {
+				"@mdit/plugin-attrs": "^0.4.8",
+				"@mdit/plugin-figure": "^0.4.8",
+				"@mdit/plugin-img-lazyload": "^0.4.8",
+				"@mdit/plugin-img-mark": "^0.4.8",
+				"@mdit/plugin-img-size": "^0.4.8",
+				"@mdit/plugin-include": "^0.4.8",
+				"@mdit/plugin-tab": "^0.4.8",
 				"feed": "^4.2.2",
+				"markdown-it-mdi": "^0.1.0",
 				"markdownlint": "^0.29.0",
 				"markdownlint-cli": "^0.35.0",
 				"prettier": "^3.0.0",
@@ -291,6 +300,97 @@
 			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
 			"dev": true
 		},
+		"node_modules/@mdi/js": {
+			"version": "7.2.96",
+			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
+			"integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA=="
+		},
+		"node_modules/@mdit/plugin-attrs": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-attrs/-/plugin-attrs-0.4.8.tgz",
+			"integrity": "sha512-SB2yTHRNG8j5shh1TtJAPuPFWaMeQp6P/9ieLVPFdXLU6RPobEwf1GAX39YDaIKaWXEmkEJJdKFClOKmyWd9BQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@mdit/plugin-figure": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-figure/-/plugin-figure-0.4.8.tgz",
+			"integrity": "sha512-fzFwKlE34pnenqAshqHtCrgv5Ro9QE0Cjd0BR/wxkFCy4ZyyVHZUNA007HOz/j9t5ryVimdZQPcqfcQEcBk8sA==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@mdit/plugin-img-lazyload": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-img-lazyload/-/plugin-img-lazyload-0.4.8.tgz",
+			"integrity": "sha512-GGppqJQhl5pZ2CftLxstxMVSZQCdOiJB/1aKEMjpi+EehYV1MlKPzaQp+XTyVDJAkv/k6pe+91ZnsSZgHnIUcA==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@mdit/plugin-img-mark": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-img-mark/-/plugin-img-mark-0.4.8.tgz",
+			"integrity": "sha512-00zkJ3cIW1R5O+lk/WHuhOrHFdO17TVVxfBN8mhzH6S17W+2KqBMcBv5fpxi7g3R95rZ1fAZ6T1I5lg069RBkA==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@mdit/plugin-img-size": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-img-size/-/plugin-img-size-0.4.8.tgz",
+			"integrity": "sha512-+fkNRrhkwZgIRJi6ucginEzy95pmhekOer23gBbOOezZev9D4XpA1tFhLAu1srvUVAKh+JmRXiVJUT71Xw9LTg==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@mdit/plugin-include": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-include/-/plugin-include-0.4.8.tgz",
+			"integrity": "sha512-Hd+ZjisjjUS6ZRtjXUkfbYx3HpGKAY4XVpzmvhinK4+EPqiW4SrQor4G03ckpYu2fFjBF6u6+NbMtkHD8dcMZQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1",
+				"upath": "^2.0.1"
+			}
+		},
+		"node_modules/@mdit/plugin-tab": {
+			"version": "0.4.8",
+			"resolved": "https://registry.npmjs.org/@mdit/plugin-tab/-/plugin-tab-0.4.8.tgz",
+			"integrity": "sha512-/YUI4KQAtHUE6AkJUfIEIKjnK8LEAkcBMe2z8SYmzeEs9U0vHvQNawUd6ANHOXrpeqyPrgQnhWqGkF4yMqfAjg==",
+			"dev": true,
+			"dependencies": {
+				"@types/markdown-it": "^12.2.3",
+				"markdown-it": "^13.0.1"
+			}
+		},
 		"node_modules/@pkgjs/parseargs": {
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -301,6 +401,28 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@types/linkify-it": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+			"integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
+			"dev": true
+		},
+		"node_modules/@types/markdown-it": {
+			"version": "12.2.3",
+			"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+			"integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/linkify-it": "*",
+				"@types/mdurl": "*"
+			}
+		},
+		"node_modules/@types/mdurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+			"integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "17.0.45",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
@@ -1033,6 +1155,21 @@
 				"markdown-it": "bin/markdown-it.js"
 			}
 		},
+		"node_modules/markdown-it-mdi": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-mdi/-/markdown-it-mdi-0.1.0.tgz",
+			"integrity": "sha512-2AUhSc/SuuqZLiF4zbGd5MhyR1eyX7fSaOydMzOqmLtSMziCP9LY+JlJm6VSjrz3vg55BD5U5fy9GjoKoUUxUg==",
+			"dev": true,
+			"dependencies": {
+				"markdown-it-regexp": "^0.4.0"
+			}
+		},
+		"node_modules/markdown-it-regexp": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-regexp/-/markdown-it-regexp-0.4.0.tgz",
+			"integrity": "sha512-0XQmr46K/rMKnI93Y3CLXsHj4jIioRETTAiVnJnjrZCEkGaDOmUxTbZj/aZ17G5NlRcVpWBYjqpwSlQ9lj+Kxw==",
+			"dev": true
+		},
 		"node_modules/markdownlint": {
 			"version": "0.29.0",
 			"resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.29.0.tgz",
@@ -1532,6 +1669,16 @@
 			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
 			"dev": true
 		},
+		"node_modules/upath": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+			"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+			"dev": true,
+			"engines": {
+				"node": ">=4",
+				"yarn": "*"
+			}
+		},
 		"node_modules/vite": {
 			"version": "4.4.4",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",

package.json

@@ -20,7 +20,15 @@
 		"lint:mdl": "markdownlint \"**/*.md\" \".github/**/*.md\" --enable sentences-per-line --disable MD025 MD033"
 	},
 	"devDependencies": {
+		"@mdit/plugin-attrs": "^0.4.8",
+		"@mdit/plugin-figure": "^0.4.8",
+		"@mdit/plugin-img-lazyload": "^0.4.8",
+		"@mdit/plugin-img-mark": "^0.4.8",
+		"@mdit/plugin-img-size": "^0.4.8",
+		"@mdit/plugin-include": "^0.4.8",
+		"@mdit/plugin-tab": "^0.4.8",
 		"feed": "^4.2.2",
+		"markdown-it-mdi": "^0.1.0",
 		"markdownlint": "^0.29.0",
 		"markdownlint-cli": "^0.35.0",
 		"prettier": "^3.0.0",
@@ -38,6 +46,7 @@
 		]
 	},
 	"dependencies": {
+		"@mdi/js": "^7.2.96",
 		"vitepress-plugin-auto-sidebar": "^1.1.0"
 	}
 }

src/.vitepress/config/hooks/generateMeta.ts

@@ -20,8 +20,14 @@ const generateMeta = (context: TransformContext, hostname: string) => {
 	head.push(["meta", { name: "twitter:description", content: pageData.frontmatter.description }]);
 
 	if (pageData.frontmatter.image) {
-		head.push(["meta", { property: "og:image", content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}` }]);
+		head.push([
-		head.push(["meta", { name: "twitter:image", content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}` }]);
+			"meta",
+			{ property: "og:image", content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}` },
+		]);
+		head.push([
+			"meta",
+			{ name: "twitter:image", content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}` },
+		]);
 	}
 
 	switch (pageData.frontmatter.imageSize) {

src/.vitepress/config/icons.ts

@@ -0,0 +1,9 @@
+import { mdiBarcode } from "@mdi/js";
+
+export default {
+	setup() {
+		return {
+			mdiBarcode,
+		};
+	},
+};

src/.vitepress/config/index.ts

@@ -1,8 +1,11 @@
 import { defineConfig, loadEnv } from "vitepress";
 
-import theme from "./theme";
+import markdown from "./markdown";
+import themeConfig from "./theme";
 import head from "./head";
 
+import "./icons";
+
 import generateMeta from "./hooks/generateMeta";
 import generateSitemap from "./hooks/generateSitemap";
 import generateFeed from "./hooks/generateFeed";
@@ -21,7 +24,8 @@ export default ({ mode }) => {
 		title: "Tachiyomi",
 		description: "Free and open source manga reader for Android",
 		head,
-		themeConfig: theme,
+		markdown,
+		themeConfig: themeConfig,
 		transformHead: async (context) => generateMeta(context, hostname),
 		buildEnd: async (context) => {
 			generateSitemap(context, hostname);

src/.vitepress/config/markdown.ts

@@ -0,0 +1,29 @@
+import type { MarkdownOptions } from "vitepress";
+
+import { attrs } from "@mdit/plugin-attrs";
+import { figure } from "@mdit/plugin-figure";
+import { imgLazyload } from "@mdit/plugin-img-lazyload";
+import { imgMark } from "@mdit/plugin-img-mark";
+import { imgSize } from "@mdit/plugin-img-size";
+import { include } from "@mdit/plugin-include";
+import { tab } from "@mdit/plugin-tab";
+import mdi from "markdown-it-mdi";
+
+const markdown: MarkdownOptions = {
+	config: (md) => {
+		md.use(attrs),
+			md.use(figure),
+			md.use(imgLazyload),
+			md.use(imgMark),
+			md.use(imgSize),
+			md.use(include, {
+				currentPath: (env) => env.filePath,
+			}),
+			md.use(tab, {
+				name: "tab",
+			}),
+			md.use(mdi);
+	},
+};
+
+export default markdown;

src/.vitepress/config/theme.ts

@@ -19,8 +19,7 @@ const themeConfig: DefaultTheme.Config = {
 	],
 
 	footer: {
-		message:
+		message: `<a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Open-source Apache Licensed</a> | <a href="./privacy">Privacy policy</a> | Powered by <a target="_blank" href="https://www.netlify.com/">Netlify <img src="/img/netlify.svg" height="12px" width="12px" style="display: inline-block"></a>`,
-			`<a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Open-source Apache Licensed</a> | <a href="./privacy">Privacy policy</a> | Powered by <a target="_blank" href="https://www.netlify.com/">Netlify <img src="/img/netlify.svg" height="12px" width="12px" style="display: inline-block"></a>`,
 		copyright: `Copyright © 2015 - ${new Date().getFullYear()} Javier Tomás`,
 	},