diff --git a/package.json b/package.json index d746529f..c4fef1c3 100755 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@gtm-support/vue-gtm": "^3.1.0", "@justinribeiro/lite-youtube": "^1.8.2", + "markdown-it-image-size": "^15.0.1", "smartlook-client": "^10.0.0" } } diff --git a/src/.vitepress/components/YouTube.vue b/src/.vitepress/components/YouTube.vue index bf2fbd41..94627490 100644 --- a/src/.vitepress/components/YouTube.vue +++ b/src/.vitepress/components/YouTube.vue @@ -18,4 +18,10 @@ const props = defineProps({ diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts index 7f573644..9b6ea7ee 100644 --- a/src/.vitepress/config.mts +++ b/src/.vitepress/config.mts @@ -1,5 +1,7 @@ -import { defineConfig } from "vitepress"; +import { defineConfig, } from "vitepress"; import en from "./sidebar/en"; +import { markdownItImageSize } from "markdown-it-image-size"; +import path from "path"; // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -10,6 +12,51 @@ export default defineConfig({ ignoreDeadLinks: true, cleanUrls: true, outDir: "../dist/docs", + vue: { + template: { + compilerOptions: { + isCustomElement: (tag) => tag === 'lite-youtube' + } + } + }, + markdown: { + config(md) { + // Fix for image width and height handling for proper scrolling + const maxHeight = 500 /* px */ + + const img = md.renderer.rules.image! + md.renderer.rules.image = function (tokens, idx, options, env, self) { + const token = tokens[idx] + + const widthAttr = token.attrGet('width') + const heightAttr = token.attrGet('height') + const existingStyle = token.attrGet('style') || '' + + const style: string[] = [] + + let w = widthAttr ? Number.parseInt(widthAttr, 10) : null + let h = heightAttr ? Number.parseInt(heightAttr, 10) : null + + if (w) { + if (h && h > maxHeight) { + const scale = maxHeight / h + w = Math.round(w * scale) + h = maxHeight + } + style.push(`width: ${w}px;`) + } + + if (style.length > 0) { + const sep = existingStyle && !existingStyle.trim().endsWith(';') ? ';' : '' + token.attrSet('style', existingStyle + sep + style.join(' ')) + } + + return img(tokens, idx, options, env, self) + } + + markdownItImageSize(md, { publicDir: path.resolve(import.meta.dirname, '../public') }) + }, + }, themeConfig: { // https://vitepress.dev/reference/default-theme-config search: { diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts index 8277d5d6..a165868a 100644 --- a/src/.vitepress/theme/index.ts +++ b/src/.vitepress/theme/index.ts @@ -1,5 +1,5 @@ // https://vitepress.dev/guide/custom-theme -import { h } from "vue"; +import { h, nextTick, watch } from "vue"; import type { Theme } from "vitepress"; import DefaultTheme, { VPBadge } from "vitepress/theme"; import "./style.css"; diff --git a/src/.vitepress/theme/style.css b/src/.vitepress/theme/style.css index 3ebe57de..81afd72d 100644 --- a/src/.vitepress/theme/style.css +++ b/src/.vitepress/theme/style.css @@ -146,7 +146,6 @@ a img,svg { img { max-width: 90%; - max-height: 500px; cursor: pointer; } @@ -157,3 +156,8 @@ img { align-items: center; gap: 0.25em; } + +h1, h2, h3, h4, h5{ + /** For proper anchor offset when using scroll to hash links */ + scroll-margin-top: 60px; +} diff --git a/yarn.lock b/yarn.lock index fe545055..39d73350 100644 --- a/yarn.lock +++ b/yarn.lock @@ -170,6 +170,24 @@ "@babel/helper-string-parser" "^7.25.9" "@babel/helper-validator-identifier" "^7.25.9" +"@cacheable/memory@^2.0.6": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@cacheable/memory/-/memory-2.0.7.tgz#1e066dc543b7c6797d0d230ce23d90898aca14c7" + integrity sha512-RbxnxAMf89Tp1dLhXMS7ceft/PGsDl1Ip7T20z5nZ+pwIAsQ1p2izPjVG69oCLv/jfQ7HDPHTWK0c9rcAWXN3A== + dependencies: + "@cacheable/utils" "^2.3.3" + "@keyv/bigmap" "^1.3.0" + hookified "^1.14.0" + keyv "^5.5.5" + +"@cacheable/utils@^2.3.2", "@cacheable/utils@^2.3.3": + version "2.3.3" + resolved "https://registry.yarnpkg.com/@cacheable/utils/-/utils-2.3.3.tgz#56f0c0a3b2cad85f32ee2de3c73ff05d455e2c6c" + integrity sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A== + dependencies: + hashery "^1.3.0" + keyv "^5.5.5" + "@docsearch/css@3.8.2": version "3.8.2" resolved "https://registry.npmjs.org/@docsearch/css/-/css-3.8.2.tgz" @@ -344,6 +362,19 @@ resolved "https://registry.yarnpkg.com/@justinribeiro/lite-youtube/-/lite-youtube-1.8.2.tgz#7b0b1b43623a52fe8381a8b84d8ee4153191fc14" integrity sha512-wayU5sYA/e5J/1j7zFk8Hoi72Hk67Axy7Za2OFRzsytd9gvtv7ZeWhmdi2lOGbnXwMZHkeMsqxRGFxH60lo5bg== +"@keyv/bigmap@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@keyv/bigmap/-/bigmap-1.3.0.tgz#f06d9bb38488a59f012cd2758e6f429dfd312fb5" + integrity sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg== + dependencies: + hashery "^1.2.0" + hookified "^1.13.0" + +"@keyv/serialize@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@keyv/serialize/-/serialize-1.1.1.tgz#0c01dd3a3483882af7cf3878d4e71d505c81fc4a" + integrity sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA== + "@parcel/watcher-android-arm64@2.5.1": version "2.5.1" resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1" @@ -828,6 +859,17 @@ braces@^3.0.3: dependencies: fill-range "^7.1.1" +cacheable@^2.2.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/cacheable/-/cacheable-2.3.1.tgz#db374342fbb48b032d57a2a7d296555be4ad574e" + integrity sha512-yr+FSHWn1ZUou5LkULX/S+jhfgfnLbuKQjE40tyEd4fxGZVMbBL5ifno0J0OauykS8UiCSgHi+DV/YD+rjFxFg== + dependencies: + "@cacheable/memory" "^2.0.6" + "@cacheable/utils" "^2.3.2" + hookified "^1.14.0" + keyv "^5.5.5" + qified "^0.5.3" + ccount@^2.0.0: version "2.0.1" resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz" @@ -935,6 +977,20 @@ fill-range@^7.1.1: dependencies: to-regex-range "^5.0.1" +flat-cache@^6.1.17: + version "6.1.19" + resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-6.1.19.tgz#20e5b201c9b181a7b773b3b150108932077d2bbf" + integrity sha512-l/K33newPTZMTGAnnzaiqSl6NnH7Namh8jBNjrgjprWxGmZUuxx/sJNIRaijOh3n7q7ESbhNZC+pvVZMFdeU4A== + dependencies: + cacheable "^2.2.0" + flatted "^3.3.3" + hookified "^1.13.0" + +flatted@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358" + integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg== + focus-trap@^7.6.4: version "7.6.4" resolved "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz" @@ -947,6 +1003,13 @@ fsevents@~2.3.2, fsevents@~2.3.3: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== +hashery@^1.2.0, hashery@^1.3.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/hashery/-/hashery-1.4.0.tgz#3af04d9af0c63ff2f15a353ee9c2d11fdef7919f" + integrity sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ== + dependencies: + hookified "^1.14.0" + hast-util-to-html@^9.0.4: version "9.0.5" resolved "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz" @@ -976,11 +1039,21 @@ hookable@^5.5.3: resolved "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz" integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ== +hookified@^1.13.0, hookified@^1.14.0: + version "1.15.0" + resolved "https://registry.yarnpkg.com/hookified/-/hookified-1.15.0.tgz#d51db9fe134b8bd19c1aa88f9fcd7878995e4b66" + integrity sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw== + html-void-elements@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz" integrity sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg== +image-size@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/image-size/-/image-size-2.0.2.tgz#84a7b43704db5736f364bf0d1b029821299b4bdc" + integrity sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w== + immutable@^5.0.2: version "5.0.3" resolved "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz" @@ -1008,6 +1081,13 @@ is-what@^4.1.8: resolved "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz" integrity sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A== +keyv@^5.5.5: + version "5.5.5" + resolved "https://registry.yarnpkg.com/keyv/-/keyv-5.5.5.tgz#a975b32fc03e300a0e443c705b103d8b05220834" + integrity sha512-FA5LmZVF1VziNc0bIdCSA1IoSVnDCqE8HJIZZv2/W8YmoAM50+tnUgJR/gQZwEeIMleuIOnRnHA/UaZRNeV4iQ== + dependencies: + "@keyv/serialize" "^1.1.1" + magic-string@^0.30.11: version "0.30.17" resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz" @@ -1020,6 +1100,16 @@ mark.js@8.11.1: resolved "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz" integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ== +markdown-it-image-size@^15.0.1: + version "15.0.1" + resolved "https://registry.yarnpkg.com/markdown-it-image-size/-/markdown-it-image-size-15.0.1.tgz#bdf544a3649478ed28cb8654b971ef955bcd6748" + integrity sha512-qnnnYtXXdUsBtNyywsMpgXDGi0X4Judba0+MJFGa2GrKrE9zwWlng+3GWlv2uRRtM0BO/le3G6x1Xw/iCjiT5g== + dependencies: + "@types/markdown-it" "^14.1.2" + flat-cache "^6.1.17" + image-size "^2.0.2" + sync-fetch "^0.5.2" + mdast-util-to-hast@^13.0.0: version "13.2.0" resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz" @@ -1095,6 +1185,13 @@ node-addon-api@^7.0.0: resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz" integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ== +node-fetch@^2.6.1: + version "2.7.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" + integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A== + dependencies: + whatwg-url "^5.0.0" + oniguruma-to-es@^3.1.0: version "3.1.1" resolved "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-3.1.1.tgz" @@ -1138,6 +1235,13 @@ property-information@^7.0.0: resolved "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz" integrity sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg== +qified@^0.5.3: + version "0.5.3" + resolved "https://registry.yarnpkg.com/qified/-/qified-0.5.3.tgz#2d01866eb99c8de3a18965a4a809d9349e26210a" + integrity sha512-kXuQdQTB6oN3KhI6V4acnBSZx8D2I4xzZvn9+wFLLFCoBNQY/sFnCW6c43OL7pOQ2HvGV4lnWIXNmgfp7cTWhQ== + dependencies: + hookified "^1.13.0" + readdirp@^4.0.1: version "4.1.2" resolved "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz" @@ -1256,6 +1360,13 @@ superjson@^2.2.1: dependencies: copy-anything "^3.0.2" +sync-fetch@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/sync-fetch/-/sync-fetch-0.5.2.tgz#65e7ae1133219938dc92eb19aa21d5eb79ebadec" + integrity sha512-6gBqqkHrYvkH65WI2bzrDwrIKmt3U10s4Exnz3dYuE5Ah62FIfNv/F63inrNhu2Nyh3GH5f42GKU3RrSJoaUyQ== + dependencies: + node-fetch "^2.6.1" + tabbable@^6.2.0: version "6.2.0" resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz" @@ -1268,6 +1379,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +tr46@~0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== + trim-lines@^3.0.0: version "3.0.1" resolved "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz" @@ -1392,6 +1508,19 @@ vue@^3.5.13: "@vue/server-renderer" "3.5.13" "@vue/shared" "3.5.13" +webidl-conversions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== + +whatwg-url@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== + dependencies: + tr46 "~0.0.3" + webidl-conversions "^3.0.0" + zwitch@^2.0.4: version "2.0.4" resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"