Merge branch 'develop' into update-usage-guide

.vitepress/config.mts

@@ -3,6 +3,7 @@ import process from 'node:process';
 import { URL, fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitepress';
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
+import { markdownFitMedia } from './plugins/markdown-fit-media';
 
 const __dirname = path.dirname(fileURLToPath(new URL(import.meta.url)));
 
@@ -123,6 +124,13 @@ export default defineConfig({
   markdown: {
     config(md) {
       md.use(tabsMarkdownPlugin);
+      md.use(markdownFitMedia, {
+        imgDir: './public',
+        lazyLoad: true,
+        decoding: 'auto',
+        aspectRatio: true,
+        imgSizeHint: true,
+      });
     },
   },
   vite: {

.vitepress/plugins/markdown-fit-media.ts

@@ -0,0 +1,192 @@
+// Modified from https://github.com/ulfschneider/markdown-it-fitmedia
+import * as cheerio from 'cheerio';
+import sizeOf from 'image-size';
+import type MarkdownIt from 'markdown-it';
+
+interface FitMediaOptions {
+  imgDir?: string;
+  imgLazyLoad?: boolean;
+  imgDecoding?: string;
+  imgSizeHint?: boolean;
+  lazyLoad?: boolean;
+  decoding?: string;
+  sizeHint?: boolean;
+  fitElements?: string[];
+}
+
+interface Dimensions {
+  width: number;
+  height: number;
+}
+
+interface Token {
+  content: string;
+  attrIndex: (key: string) => number;
+  attrs: [string, string][];
+  attrPush: (attr: [string, string]) => void;
+}
+
+function getDimensions(src: string, fitMediaOptions: FitMediaOptions): Dimensions {
+  if (fitMediaOptions.imgDir) {
+    return sizeOf(`${fitMediaOptions.imgDir}${src}`);
+  }
+  return sizeOf(src);
+}
+
+function styleAspectRatio(style: string | undefined, width: number, height: number): string {
+  if (style && !/aspect-ratio/i.test(style)) {
+    if (!/;\s*$/.test(style)) {
+      style += '; ';
+    }
+    style += `aspect-ratio:${width}/${height};`;
+  }
+  else {
+    style = `aspect-ratio:${width}/${height};`;
+  }
+  return style;
+}
+
+function fitHtmlElements(md: MarkdownIt, fitMediaOptions: FitMediaOptions): void {
+  const blockRenderer = md.renderer.rules.html_block;
+  const elementRenderer = (tokens: Token[], idx: number): string | undefined => {
+    try {
+      const token = tokens[idx];
+      const $ = cheerio.load(token.content);
+      const elements = $(fitMediaOptions.fitElements?.toString() || '');
+
+      if (elements.length > 0) {
+        elements.each(function () {
+          const width = parseInt($(this).attr('width') || '0');
+          const height = parseInt($(this).attr('height') || '0');
+          if (width > 0 && height > 0) {
+            let style = $(this).attr('style');
+            style = styleAspectRatio(style, width, height);
+            style += ' width:100%; max-width:100%; height:auto;';
+            $(this).attr('style', style);
+          }
+        });
+        return $('body').html() || undefined;
+      }
+    }
+    catch (error) {
+      console.error(`Failure when fitting media element ${error}`);
+    }
+  };
+
+  md.renderer.rules.html_block = (tokens: Token[], idx: number, options: any, env: any, self: any): string => {
+    const html = elementRenderer(tokens, idx);
+    return html || blockRenderer(tokens, idx, options, env, self);
+  };
+}
+
+function fitHtmlImgs(md: MarkdownIt, fitMediaOptions: FitMediaOptions): void {
+  const inlineRenderer = md.renderer.rules.html_inline;
+  const blockRenderer = md.renderer.rules.html_block;
+  const imgRenderer = (tokens: Token[], idx: number): string | undefined => {
+    try {
+      const token = tokens[idx];
+      const $ = cheerio.load(token.content);
+      const imgs = $('img');
+      if (imgs.length > 0) {
+        imgs.each(function () {
+          if (fitMediaOptions.imgLazyLoad) {
+            $(this).attr('loading', 'lazy');
+          }
+          if (fitMediaOptions.imgDecoding && fitMediaOptions.imgDecoding !== 'auto') {
+            $(this).attr('decoding', fitMediaOptions.imgDecoding);
+          }
+          const src = $(this).attr('src');
+          if (src) {
+            const dimensions = getDimensions(src, fitMediaOptions);
+            const height = dimensions.height;
+            const width = dimensions.width;
+            if (height > 0 && width > 0) {
+              let style = $(this).attr('style');
+              style = styleAspectRatio(style, width, height);
+              $(this).attr('style', style);
+              $(this).attr('width', width.toString());
+              $(this).attr('height', height.toString());
+            }
+          }
+        });
+        return $('body').html() || undefined;
+      }
+    }
+    catch (error) {
+      console.error(`Failure when adjusting img ${error}`);
+    }
+  };
+
+  md.renderer.rules.html_inline = (tokens: Token[], idx: number, options: any, env: any, self: any): string => {
+    const html = imgRenderer(tokens, idx);
+    return html || inlineRenderer(tokens, idx, options, env, self);
+  };
+
+  md.renderer.rules.html_block = (tokens: Token[], idx: number, options: any, env: any, self: any): string => {
+    const html = imgRenderer(tokens, idx);
+    return html || blockRenderer(tokens, idx, options, env, self);
+  };
+}
+
+function fitMarkdownImgs(md: MarkdownIt, fitMediaOptions: FitMediaOptions): void {
+  const attr = (token: Token, key: string, value?: string): string | null => {
+    const idx = token.attrIndex(key);
+    if (value === undefined) {
+      return idx >= 0 ? token.attrs[idx][1] : null;
+    }
+    else {
+      if (idx < 0) {
+        token.attrPush([key, value]);
+      }
+      else {
+        token.attrs[idx][1] = value;
+      }
+      return value;
+    }
+  };
+
+  const defaultRender = md.renderer.rules.image;
+  md.renderer.rules.image = (tokens: Token[], idx: number, options: any, env: any, self: any): string => {
+    try {
+      const img = tokens[idx];
+
+      if (fitMediaOptions.imgLazyLoad) {
+        attr(img, 'loading', 'lazy');
+      }
+      if (fitMediaOptions.imgDecoding && fitMediaOptions.imgDecoding !== 'auto') {
+        attr(img, 'decoding', fitMediaOptions.imgDecoding);
+      }
+
+      const src = attr(img, 'src');
+      if (src) {
+        const dimensions = getDimensions(src, fitMediaOptions);
+        const height = dimensions.height;
+        const width = dimensions.width;
+        if (height > 0 && width > 0) {
+          let style = attr(img, 'style');
+          style = styleAspectRatio(style || '', width, height);
+          attr(img, 'style', style);
+          attr(img, 'width', width.toString());
+          attr(img, 'height', height.toString());
+        }
+      }
+    }
+    catch (error) {
+      console.error(`Failure when adjusting img ${error}`);
+    }
+
+    return defaultRender(tokens, idx, options, env, self);
+  };
+}
+
+function fitImgs(md: MarkdownIt, fitMediaOptions: FitMediaOptions): void {
+  fitHtmlImgs(md, fitMediaOptions);
+  fitMarkdownImgs(md, fitMediaOptions);
+}
+
+function markdownFitMedia(md: MarkdownIt, options: FitMediaOptions): void {
+  fitImgs(md, options);
+  fitHtmlElements(md, options);
+}
+
+export { markdownFitMedia };

contribution-guides/contribute-as-developer.md

@@ -130,8 +130,13 @@ Hopefully, this situation with CryptoCompare is temporary and they will remove t
 ## Working with the develop branch
 
 The big changes to the code all happen in the `develop` branch. Those might include changes to the schema both in the user database and the global database. Errors related to partially migrated databases might manifest as errors in the UI when executing queries or failures to start the app or sign in. For working on develop instead of the normal `data` rotki directory, we use another in the root path called `develop_data`.
+
 To avoid losing information, we recommend copying your account from `data` to `develop_data` each time you pull new changes in develop, especially if you know that any DB schema changes happened.
 
+:::warning
+If your production data in `data` has syncing with Rotki Premium enabled, please ensure that you disable this after copying to `develop_data`, otherwise there is a strong risk of syncing non-production data back to your production environment, and this could cause problems.
+:::
+
 ## Adding new Centralized Exchanges (CEXes)
 
 All centralized exchanges modules live in a separate python file under [here](https://github.com/rotki/rotki/tree/develop/rotkehlchen/exchanges).

package.json

@@ -34,9 +34,12 @@
     "@types/node": "20.17.9",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/runtime-dom": "3.5.13",
+    "cheerio": "1.0.0",
     "eslint": "9.16.0",
     "husky": "9.1.7",
+    "image-size": "1.1.1",
     "lint-staged": "15.2.10",
+    "markdown-it": "14.1.0",
     "papaparse": "5.4.1",
     "url": "0.11.4",
     "vitepress": "1.5.0",