TheGeniusOfEternity · TheGeniusOfEternity · Aug 18, 2026 · Aug 17, 2026 · Aug 18, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 All notable changes to this project are documented here.
 
+## [Unreleased]
+
+### Added
+
+- Added live SVG image export URLs and README-ready HTML snippets for public widgets.
+- Added proportional `width` and `height` query scaling for SVG image URLs.
+- Extracted shared widget SVG-rendering primitives for server-side export.
+- Added shared `languageColor` utility used by both client and server.
+
+### Fixed
+
+- Localized LeetCode ranking and contest rating labels in Russian and English.
+- Added live LeetCode contest rating data to rendered statistics.
+- Added skeleton cards for the initial widgets gallery load instead of showing the empty state prematurely.
+- Kept public iframe preview skeletons visible until the widget payload and block data are ready.
+- Stabilized the public widget loading layout to prevent the decorative background orb from jumping.
+
+### Security
+
+- Resolved `deepmerge-ts` high-severity vulnerability via npm overrides (GHSA-ggr8-5vv4-36mx).
+
 ## [0.3.0] - 2026-08-02
 
 ### Added

diff --git a/api/widgets-resource.ts b/api/widgets-resource.ts
@@ -10,12 +10,24 @@ const queryValue = (request: Request, key: string): string | undefined => {
   return typeof value === 'string' ? value : undefined;
 };
 
+const buildQueryString = (params: Record<string, string | undefined>): string => {
+  const entries = Object.entries(params).filter(
+    (entry): entry is [string, string] => entry[1] !== undefined,
+  );
+  return entries.length > 0
+    ? `?${entries.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&')}`
+    : '';
+};
+
 export default (request: Request, response: Response) => {
   const resource = queryValue(request, 'resource');
   const widgetId = queryValue(request, 'widgetId');
   const blockId = queryValue(request, 'blockId');
   const slug = queryValue(request, 'slug');
   const action = queryValue(request, 'action');
+  const locale = queryValue(request, 'locale');
+  const queryWidth = queryValue(request, 'width');
+  const queryHeight = queryValue(request, 'height');
 
   const path =
     resource === 'widget' && widgetId
@@ -26,9 +38,11 @@ export default (request: Request, response: Response) => {
           : `/api/widgets/${encodeURIComponent(widgetId)}`
       : resource === 'block' && blockId
         ? `/api/blocks/${encodeURIComponent(blockId)}`
-        : resource === 'public' && slug
-          ? `/api/public/widgets/${encodeURIComponent(slug)}`
-          : null;
+        : resource === 'public-image' && slug
+          ? `/api/public/widgets/${encodeURIComponent(slug)}/image.svg${buildQueryString({ locale, width: queryWidth, height: queryHeight })}`
+          : resource === 'public' && slug
+            ? `/api/public/widgets/${encodeURIComponent(slug)}`
+            : null;
 
   if (!path) {
     response.status(404).json({ error: 'Resource route not found' });

diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
@@ -14,11 +14,13 @@ import {
   deleteWidget,
   getPublicWidgetUrl,
   getPublicWidgetPath,
+  getPublicWidgetImageUrl,
   listWidgets,
   API_BASE_URL,
   type CreateWidgetInput,
 } from '@/shared/api';
 import { AuthTransitionLoader } from '@/shared/ui/auth-transition-loader/AuthTransitionLoader';
+import { escapeHtmlAttribute } from '@/shared/lib/escapeHtml';
 import {
   APP_LOCALE_STORAGE_KEY,
   APP_THEME_STORAGE_KEY,
@@ -282,12 +284,17 @@ export const App = () => {
     setVisibleWidgets((currentWidgets) => currentWidgets.filter((widget) => widget.id !== id));
   };
 
-  const handleCopyWidget = async (widget: WidgetCardData) => {
-    const src = getPublicWidgetUrl(widget.slug, true, {
-      width: widget.width,
-      height: widget.height,
-    });
-    const code = `<iframe src="${src}" width="${widget.width}" height="${widget.height}" frameborder="0" style="display:block;border:0" loading="lazy"></iframe>`;
+  const handleCopyWidget = async (widget: WidgetCardData, format: 'iframe' | 'svg') => {
+    const code =
+      format === 'svg'
+        ? `<img src="${getPublicWidgetImageUrl(widget.slug, locale)}" alt="${escapeHtmlAttribute(widget.title)}" width="${widget.width}" height="${widget.height}" />`
+        : (() => {
+            const src = getPublicWidgetUrl(widget.slug, true, {
+              width: widget.width,
+              height: widget.height,
+            });
+            return `<iframe src="${src}" width="${widget.width}" height="${widget.height}" frameborder="0" style="display:block;border:0" loading="lazy"></iframe>`;
+          })();
     await navigator.clipboard?.writeText(code);
   };
 

diff --git a/client/src/entities/widget/ui/WidgetCanvas.tsx b/client/src/entities/widget/ui/WidgetCanvas.tsx
@@ -9,9 +9,12 @@ import type {
   WidgetBlock,
 } from '@/entities/widget/model';
 import { paletteTokens } from '@/entities/widget/model';
+import { languageColor } from '@shared/widget/WidgetCanvas';
 import { messages } from '@/shared/locale/content';
 import styles from '@/entities/widget/ui/WidgetCanvas.module.css';
 
+type WidgetLocale = 'ru' | 'en';
+
 type WidgetCanvasProps = {
   blocks: WidgetBlock[];
   palette: PaletteId;
@@ -23,12 +26,10 @@ type WidgetCanvasProps = {
   interactive?: boolean;
   selectedBlockId?: string;
   onSelectBlock?: (id: string) => void;
-  locale?: 'ru' | 'en';
+  locale?: WidgetLocale;
   showChrome?: boolean;
 };
 
-type WidgetLocale = 'ru' | 'en';
-
 const sampleData: Record<BlockType, Record<string, unknown>> = {
   text: { text: 'Build something worth sharing.', align: 'left' },
   'github-stats': {
@@ -57,37 +58,18 @@ const sampleData: Record<BlockType, Record<string, unknown>> = {
 const renderedData = (block: WidgetBlock, renderedBlocks?: RenderedBlock[]) =>
   renderedBlocks?.find((rendered) => rendered.id === block.id);
 
-const githubLanguageColors: Record<string, string> = {
-  assembly: '#6e4c13',
-  c: '#555555',
-  'c#': '#178600',
-  'c++': '#f34b7d',
-  css: '#663399',
-  dart: '#00b4ab',
-  go: '#00add8',
-  html: '#e34c26',
-  java: '#b07219',
-  javascript: '#f1e05a',
-  kotlin: '#a97bff',
-  lua: '#000080',
-  'objective-c': '#438eff',
-  perl: '#0298c3',
-  php: '#4f5d95',
-  python: '#3572a5',
-  r: '#198ce7',
-  ruby: '#701516',
-  rust: '#dea584',
-  scala: '#c22d40',
-  shell: '#89e051',
-  svelte: '#ff3e00',
-  swift: '#f05138',
-  typescript: '#3178c6',
-  vue: '#41b883',
+const getBlockLayout = (block: WidgetBlock): BlockLayout => {
+  const value = block.config.layout;
+  if (!value || typeof value !== 'object') return { x: 0, y: 0, width: 1, height: 1 };
+  const layout = value as Partial<BlockLayout>;
+  return {
+    x: typeof layout.x === 'number' ? layout.x : 0,
+    y: typeof layout.y === 'number' ? layout.y : 0,
+    width: typeof layout.width === 'number' ? layout.width : 1,
+    height: typeof layout.height === 'number' ? layout.height : 1,
+  };
 };
 
-const languageColor = (name: string) =>
-  githubLanguageColors[name.trim().toLowerCase()] ?? '#8b949e';
-
 const PreviewState = ({
   locale,
   source,
@@ -126,18 +108,6 @@ const WidgetBlockSkeleton = () => (
   </div>
 );
 
-const getBlockLayout = (block: WidgetBlock): BlockLayout => {
-  const value = block.config.layout;
-  if (!value || typeof value !== 'object') return { x: 0, y: 0, width: 1, height: 1 };
-  const layout = value as Partial<BlockLayout>;
-  return {
-    x: typeof layout.x === 'number' ? layout.x : 0,
-    y: typeof layout.y === 'number' ? layout.y : 0,
-    width: typeof layout.width === 'number' ? layout.width : 1,
-    height: typeof layout.height === 'number' ? layout.height : 1,
-  };
-};
-
 const formatNumber = (value: number | undefined) =>
   value === undefined ? '—' : value.toLocaleString();
 

diff --git a/client/src/entities/widget/ui/WidgetCard.module.css b/client/src/entities/widget/ui/WidgetCard.module.css
@@ -306,6 +306,15 @@
   animation: card-skeleton-shimmer 1s linear infinite;
 }
 
+.copyMenu {
+  display: contents;
+}
+
+.copyAction {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
 @media (max-width: 760px) {
   .configureAction {
     display: none;
@@ -318,6 +327,11 @@
   .actions button:last-child {
     grid-column: 1 / 2;
   }
+
+  .copyAction {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
 }
 
 .modalContent {

diff --git a/client/src/entities/widget/ui/WidgetCard.tsx b/client/src/entities/widget/ui/WidgetCard.tsx
@@ -1,5 +1,5 @@
 import { Copy, Gear, TrashBin } from '@gravity-ui/icons';
-import { Button, Card, Icon, Modal } from '@gravity-ui/uikit';
+import { Button, Card, DropdownMenu, Icon, Modal } from '@gravity-ui/uikit';
 import { useEffect, useRef, useState, type CSSProperties } from 'react';
 
 import { paletteTokens, type WidgetCardData } from '@/entities/widget/model';
@@ -11,6 +11,8 @@ export type WidgetCardLabels = {
   open: string;
   configure: string;
   copy: string;
+  copyIframe: string;
+  copySvg: string;
   published: string;
   draft: string;
   remove: string;
@@ -26,7 +28,7 @@ type WidgetCardProps = {
   onDelete: (id: string) => void;
   onConfigure: (id: string) => void;
   onOpenPreview: (widget: WidgetCardData) => void;
-  onCopy: (widget: WidgetCardData) => void;
+  onCopy: (widget: WidgetCardData, format: 'iframe' | 'svg') => void | Promise<void>;
   isLanguageLoading: boolean;
 };
 
@@ -217,14 +219,31 @@ export const WidgetCard = ({
             >
               <Icon data={Gear} size={18} />
             </Button>
-            <Button
+            <DropdownMenu
               disabled={!widget.public}
-              view="outlined"
-              onClick={() => onCopy(widget)}
-              aria-label={labels.copy}
-            >
-              <Icon data={Copy} size={18} />
-            </Button>
+              items={[
+                {
+                  text: labels.copyIframe,
+                  action: () => void onCopy(widget, 'iframe'),
+                },
+                {
+                  text: labels.copySvg,
+                  action: () => void onCopy(widget, 'svg'),
+                },
+              ]}
+              switcherWrapperClassName={styles.copyMenu}
+              renderSwitcher={({ onClick, onKeyDown }) => (
+                <Button
+                  className={styles.copyAction}
+                  view="outlined"
+                  onClick={onClick}
+                  onKeyDown={onKeyDown}
+                  aria-label={labels.copy}
+                >
+                  <Icon data={Copy} size={18} />
+                </Button>
+              )}
+            />
             <Button
               view="outlined-danger"
               onClick={() => setDeleteModalOpen(true)}

diff --git a/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx b/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
@@ -16,12 +16,14 @@ import {
   addBlock,
   deleteBlock,
   getWidget,
+  getPublicWidgetImageUrl,
   getPublicWidgetUrl,
   previewWidgetBlock,
   updateBlock,
   updateBlockLayouts,
   updateWidget,
 } from '@/shared/api';
+import { escapeHtmlAttribute } from '@/shared/lib/escapeHtml';
 import {
   blockDefinitions,
   defaultBlockConfig,
@@ -320,6 +322,7 @@ export const WidgetEditorPage = ({
   const [isSaving, setSaving] = useState(false);
   const [isDirty, setDirty] = useState(false);
   const [isCopied, setCopied] = useState(false);
+  const [isSvgCopied, setSvgCopied] = useState(false);
   const [draggingBlockId, setDraggingBlockId] = useState<string | null>(null);
   const [dropCell, setDropCell] = useState<{ x: number; y: number } | null>(null);
   const [gridWidth, setGridWidth] = useState(0);
@@ -739,6 +742,16 @@ export const WidgetEditorPage = ({
     window.setTimeout(() => setCopied(false), 1600);
   };
 
+  const copySvgEmbed = async () => {
+    if (!widget || !widget.public) return;
+    const src = getPublicWidgetImageUrl(widget.slug, locale);
+    const alt = escapeHtmlAttribute(widget.title);
+    const code = `<img src="${src}" alt="${alt}" width="${widget.width}" height="${widget.height}" />`;
+    await navigator.clipboard?.writeText(code);
+    setSvgCopied(true);
+    window.setTimeout(() => setSvgCopied(false), 1600);
+  };
+
   const guardLeave = () => {
     onBack();
   };
@@ -824,7 +837,13 @@ export const WidgetEditorPage = ({
           {widget.public && (
             <Button view="outlined-action" onClick={copyEmbed}>
               <Icon data={isCopied ? Check : Copy} size={17} />
-              {isCopied ? t.copied : t.copy}
+              {isCopied ? t.copied : t.copyIframe}
+            </Button>
+          )}
+          {widget.public && (
+            <Button view="outlined-action" onClick={copySvgEmbed}>
+              <Icon data={isSvgCopied ? Check : Copy} size={17} />
+              {isSvgCopied ? t.copied : t.copySvg}
             </Button>
           )}
           {!widget.public && (

diff --git a/client/src/pages/widgets-gallery/ui/WidgetsGalleryPage.tsx b/client/src/pages/widgets-gallery/ui/WidgetsGalleryPage.tsx
@@ -27,7 +27,7 @@ type WidgetsGalleryPageProps = {
   onCreateWidget: (input: CreateWidgetInput) => Promise<void>;
   onOpenWidget: (id: string) => void;
   onOpenPreview: (widget: WidgetCardData) => void;
-  onCopyWidget: (widget: WidgetCardData) => void;
+  onCopyWidget: (widget: WidgetCardData, format: 'iframe' | 'svg') => void | Promise<void>;
   onLogout: () => void;
   onDeleteWidget: (id: string) => void;
 };
@@ -63,6 +63,8 @@ export const WidgetsGalleryPage = ({
     open: t.open,
     configure: t.configure,
     copy: t.copy,
+    copyIframe: t.copyIframe,
+    copySvg: t.copySvg,
     published: t.published,
     draft: t.draft,
     remove: t.remove,

diff --git a/client/src/shared/api/index.ts b/client/src/shared/api/index.ts
@@ -11,6 +11,8 @@ export {
   deleteBlock,
   deleteWidget,
   getPublicWidget,
+  getPublicWidgetImagePath,
+  getPublicWidgetImageUrl,
   getPublicWidgetPath,
   getPublicWidgetUrl,
   PUBLIC_WIDGET_MESSAGE_SOURCE,

diff --git a/client/src/shared/api/widgets.ts b/client/src/shared/api/widgets.ts
@@ -129,3 +129,11 @@ export const getPublicWidgetUrl = (
   embed = false,
   dimensions?: PublicWidgetDimensions,
 ) => `${window.location.origin}${getPublicWidgetPath(slug, embed, dimensions)}`;
+
+export const getPublicWidgetImagePath = (slug: string, locale: 'ru' | 'en' = 'en') => {
+  const query = locale === 'ru' ? '?locale=ru' : '';
+  return `/api/public/widgets/${encodeURIComponent(slug)}/image.svg${query}`;
+};
+
+export const getPublicWidgetImageUrl = (slug: string, locale: 'ru' | 'en' = 'en') =>
+  `${window.location.origin}${getPublicWidgetImagePath(slug, locale)}`;
diff --git a/client/src/shared/lib/escapeHtml.ts b/client/src/shared/lib/escapeHtml.ts
@@ -0,0 +1,11 @@
+export const escapeHtmlAttribute = (value: string) =>
+  value.replace(/[&<>"']/g, (character) => {
+    const entities: Record<string, string> = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    };
+    return entities[character] ?? character;
+  });