From 032309a2c61fdfd8279475b62bebd71f7cac4985 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Thu, 14 Aug 2025 15:10:14 +0600 Subject: [PATCH] feat: enhance markdown configuration and styling with rehype plugins and update global styles --- website/astro.config.mjs | 34 +++++- website/package.json | 3 + website/pnpm-lock.yaml | 114 ++++++++++++------ .../docs/get-started/installing-plugins.mdx | 6 +- website/src/styles/global.css | 13 ++ 5 files changed, 130 insertions(+), 40 deletions(-) diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 5f6e3eda..f1a228e2 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -1,17 +1,45 @@ // @ts-check import { defineConfig } from "astro/config"; - import tailwindcss from "@tailwindcss/vite"; - import react from "@astrojs/react"; - import mdx from "@astrojs/mdx"; +import rehypeSlug from "rehype-slug"; +import rehypeAutolinkHeadings from "rehype-autolink-headings"; // https://astro.build/config export default defineConfig({ vite: { plugins: [tailwindcss()], }, + markdown: { + syntaxHighlight: "shiki", + shikiConfig: { + langAlias: { + hetu_script: "javascript", + }, + }, + gfm: true, + rehypePlugins: [ + [rehypeSlug, {}], + [ + rehypeAutolinkHeadings, + { + behavior: "wrap", // Adds the link at the end of the heading + properties: { + className: ["heading-link"], // Add a class for styling + "aria-hidden": "true", + }, + content: { + // Optional: Use an SVG icon or text for the link + type: "element", + tagName: "span", + properties: { className: ["icon", "icon-link"] }, + children: [{ type: "text", value: " #" }], + }, + }, + ], + ], + }, integrations: [react(), mdx()], redirects: { "/docs": "/docs/get-started/introduction", diff --git a/website/package.json b/website/package.json index 1afec40e..8298f851 100644 --- a/website/package.json +++ b/website/package.json @@ -22,7 +22,10 @@ "react": "^19.1.1", "react-dom": "^19.1.1", "react-icons": "^5.5.0", + "rehype-autolink-headings": "^7.1.0", + "rehype-slug": "^6.0.0", "sanitize-html": "^2.17.0", + "shiki": "^3.9.2", "tailwindcss": "^4.1.11", "usehooks-ts": "^3.1.1" }, diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 39774bf8..d0f27f9e 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -47,9 +47,18 @@ importers: react-icons: specifier: ^5.5.0 version: 5.5.0(react@19.1.1) + rehype-autolink-headings: + specifier: ^7.1.0 + version: 7.1.0 + rehype-slug: + specifier: ^6.0.0 + version: 6.0.0 sanitize-html: specifier: ^2.17.0 version: 2.17.0 + shiki: + specifier: ^3.9.2 + version: 3.9.2 tailwindcss: specifier: ^4.1.11 version: 4.1.11 @@ -645,23 +654,23 @@ packages: cpu: [x64] os: [win32] - '@shikijs/core@3.9.1': - resolution: {integrity: sha512-W5Vwen0KJCtR7KFRo+3JLGAqLUPsfW7e+wZ4yaRBGIogwI9ZlnkpRm9ZV8JtfzMxOkIwZwMmmN0hNErLtm3AYg==} + '@shikijs/core@3.9.2': + resolution: {integrity: sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA==} - '@shikijs/engine-javascript@3.9.1': - resolution: {integrity: sha512-4hGenxYpAmtALryKsdli2K58F0s7RBYpj/RSDcAAGfRM6eTEGI5cZnt86mr+d9/4BaZ5sH5s4p3VU5irIdhj9Q==} + '@shikijs/engine-javascript@3.9.2': + resolution: {integrity: sha512-kUTRVKPsB/28H5Ko6qEsyudBiWEDLst+Sfi+hwr59E0GLHV0h8RfgbQU7fdN5Lt9A8R1ulRiZyTvAizkROjwDA==} - '@shikijs/engine-oniguruma@3.9.1': - resolution: {integrity: sha512-WPlL/xqviwS3te4unSGGGfflKsuHLMI6tPdNYvgz/IygcBT6UiwDFSzjBKyebwi5GGSlXsjjdoJLIBnAplmEZw==} + '@shikijs/engine-oniguruma@3.9.2': + resolution: {integrity: sha512-Vn/w5oyQ6TUgTVDIC/BrpXwIlfK6V6kGWDVVz2eRkF2v13YoENUvaNwxMsQU/t6oCuZKzqp9vqtEtEzKl9VegA==} - '@shikijs/langs@3.9.1': - resolution: {integrity: sha512-Vyy2Yv9PP3Veh3VSsIvNncOR+O93wFsNYgN2B6cCCJlS7H9SKFYc55edsqernsg8WT/zam1cfB6llJsQWLnVhA==} + '@shikijs/langs@3.9.2': + resolution: {integrity: sha512-X1Q6wRRQXY7HqAuX3I8WjMscjeGjqXCg/Sve7J2GWFORXkSrXud23UECqTBIdCSNKJioFtmUGJQNKtlMMZMn0w==} - '@shikijs/themes@3.9.1': - resolution: {integrity: sha512-zAykkGECNICCMXpKeVvq04yqwaSuAIvrf8MjsU5bzskfg4XreU+O0B5wdNCYRixoB9snd3YlZ373WV5E/g5T9A==} + '@shikijs/themes@3.9.2': + resolution: {integrity: sha512-6z5lBPBMRfLyyEsgf6uJDHPa6NAGVzFJqH4EAZ+03+7sedYir2yJBRu2uPZOKmj43GyhVHWHvyduLDAwJQfDjA==} - '@shikijs/types@3.9.1': - resolution: {integrity: sha512-rqM3T7a0iM1oPKz9iaH/cVgNX9Vz1HERcUcXJ94/fulgVdwqfnhXzGxO4bLrAnh/o5CPLy3IcYedogfV+Ns0Qg==} + '@shikijs/types@3.9.2': + resolution: {integrity: sha512-/M5L0Uc2ljyn2jKvj4Yiah7ow/W+DJSglVafvWAJ/b8AZDeeRAdMu3c2riDzB7N42VD+jSnWxeP9AKtd4TfYVw==} '@shikijs/vscode-textmate@10.0.2': resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} @@ -1312,6 +1321,9 @@ packages: hast-util-from-parse5@8.0.3: resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==} + hast-util-heading-rank@3.0.0: + resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} @@ -1333,6 +1345,9 @@ packages: hast-util-to-parse5@8.0.0: resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} + hast-util-to-string@3.0.1: + resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + hast-util-to-text@4.0.2: resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} @@ -1884,6 +1899,9 @@ packages: regex@6.0.1: resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} + rehype-autolink-headings@7.1.0: + resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} + rehype-parse@9.0.1: resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} @@ -1893,6 +1911,9 @@ packages: rehype-recma@1.0.0: resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + rehype-slug@6.0.0: + resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} + rehype-stringify@10.0.1: resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==} @@ -1957,8 +1978,8 @@ packages: resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} - shiki@3.9.1: - resolution: {integrity: sha512-HogZ8nMnv9VAQMrG+P7BleJFhrKHm3fi6CYyHRbUu61gJ0lpqLr6ecYEui31IYG1Cn9Bad7N2vf332iXHnn0bQ==} + shiki@3.9.2: + resolution: {integrity: sha512-t6NKl5e/zGTvw/IyftLcumolgOczhuroqwXngDeMqJ3h3EQiTY/7wmfgPlsmloD8oYfqkEDqxiaH37Pjm1zUhQ==} simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} @@ -2340,7 +2361,7 @@ snapshots: remark-parse: 11.0.0 remark-rehype: 11.1.2 remark-smartypants: 3.0.2 - shiki: 3.9.1 + shiki: 3.9.2 smol-toml: 1.4.1 unified: 11.0.5 unist-util-remove-position: 5.0.0 @@ -2868,33 +2889,33 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.46.2': optional: true - '@shikijs/core@3.9.1': + '@shikijs/core@3.9.2': dependencies: - '@shikijs/types': 3.9.1 + '@shikijs/types': 3.9.2 '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 hast-util-to-html: 9.0.5 - '@shikijs/engine-javascript@3.9.1': + '@shikijs/engine-javascript@3.9.2': dependencies: - '@shikijs/types': 3.9.1 + '@shikijs/types': 3.9.2 '@shikijs/vscode-textmate': 10.0.2 oniguruma-to-es: 4.3.3 - '@shikijs/engine-oniguruma@3.9.1': + '@shikijs/engine-oniguruma@3.9.2': dependencies: - '@shikijs/types': 3.9.1 + '@shikijs/types': 3.9.2 '@shikijs/vscode-textmate': 10.0.2 - '@shikijs/langs@3.9.1': + '@shikijs/langs@3.9.2': dependencies: - '@shikijs/types': 3.9.1 + '@shikijs/types': 3.9.2 - '@shikijs/themes@3.9.1': + '@shikijs/themes@3.9.2': dependencies: - '@shikijs/types': 3.9.1 + '@shikijs/types': 3.9.2 - '@shikijs/types@3.9.1': + '@shikijs/types@3.9.2': dependencies: '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 @@ -3338,7 +3359,7 @@ snapshots: prompts: 2.4.2 rehype: 13.0.2 semver: 7.7.2 - shiki: 3.9.1 + shiki: 3.9.2 smol-toml: 1.4.1 tinyexec: 0.3.2 tinyglobby: 0.2.14 @@ -3739,6 +3760,10 @@ snapshots: vfile-location: 5.0.3 web-namespaces: 2.0.1 + hast-util-heading-rank@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-is-element@3.0.0: dependencies: '@types/hast': 3.0.4 @@ -3828,6 +3853,10 @@ snapshots: web-namespaces: 2.0.1 zwitch: 2.0.4 + hast-util-to-string@3.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-text@4.0.2: dependencies: '@types/hast': 3.0.4 @@ -4613,6 +4642,15 @@ snapshots: dependencies: regex-utilities: 2.3.0 + rehype-autolink-headings@7.1.0: + dependencies: + '@types/hast': 3.0.4 + '@ungap/structured-clone': 1.3.0 + hast-util-heading-rank: 3.0.0 + hast-util-is-element: 3.0.0 + unified: 11.0.5 + unist-util-visit: 5.0.0 + rehype-parse@9.0.1: dependencies: '@types/hast': 3.0.4 @@ -4633,6 +4671,14 @@ snapshots: transitivePeerDependencies: - supports-color + rehype-slug@6.0.0: + dependencies: + '@types/hast': 3.0.4 + github-slugger: 2.0.0 + hast-util-heading-rank: 3.0.0 + hast-util-to-string: 3.0.1 + unist-util-visit: 5.0.0 + rehype-stringify@10.0.1: dependencies: '@types/hast': 3.0.4 @@ -4789,14 +4835,14 @@ snapshots: '@img/sharp-win32-x64': 0.33.5 optional: true - shiki@3.9.1: + shiki@3.9.2: dependencies: - '@shikijs/core': 3.9.1 - '@shikijs/engine-javascript': 3.9.1 - '@shikijs/engine-oniguruma': 3.9.1 - '@shikijs/langs': 3.9.1 - '@shikijs/themes': 3.9.1 - '@shikijs/types': 3.9.1 + '@shikijs/core': 3.9.2 + '@shikijs/engine-javascript': 3.9.2 + '@shikijs/engine-oniguruma': 3.9.2 + '@shikijs/langs': 3.9.2 + '@shikijs/themes': 3.9.2 + '@shikijs/types': 3.9.2 '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 diff --git a/website/src/content/docs/get-started/installing-plugins.mdx b/website/src/content/docs/get-started/installing-plugins.mdx index 73431747..3c82095b 100644 --- a/website/src/content/docs/get-started/installing-plugins.mdx +++ b/website/src/content/docs/get-started/installing-plugins.mdx @@ -1,5 +1,5 @@ --- -layout: 'layouts/DocLayout.astro' +layout: "layouts/DocLayout.astro" title: Installing plugins description: Learn how to install and manage plugins in Spotube order: 1 @@ -22,7 +22,7 @@ A malicious plugin given full access can easily steal your credentials. So be ca Try to use the `Official` tagged plugins all the time if you don't want to deal with potential security risks. -- **Upload plugin from local file**: You can also install plugins from local file (plugin.smplug) using the *Orange Upload button* on the top right beside the text field. +- **Upload plugin from local file**: You can also install plugins from local file (plugin.smplug) using the _Orange Upload button_ on the top right beside the text field. - **Install plugin from URL**: If you have a direct link to a plugin file, you can just paste the URL in the text field and use the gray download button beside it -> If you're a developer, you can create your own plugins and share them with the community. Check out the [Plugin Development Guide](/docs/developing-plugins) for more information. \ No newline at end of file +> If you're a developer, you can create your own plugins and share them with the community. Check out the [Plugin Development Guide](/docs/developing-plugins) for more information. diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 29df24d9..5a94f657 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -6,3 +6,16 @@ @import "@skeletonlabs/skeleton"; @import "@skeletonlabs/skeleton/optional/presets"; @import "@skeletonlabs/skeleton/themes/wintry"; + +.prose code::before, +.prose code::after { + content: none !important; +} + +.prose code:not(pre code) { + @apply bg-surface-100-900 px-1 py-0.5 rounded-sm; +} + +.prose a code { + @apply text-primary-500 underline decoration-primary-500; +}