@lupinum/ginko-content 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lupinum/ginko-content
 
+## 0.15.0
+
+### Patch Changes
+
+- [#92](https://github.com/lupinum-dev/ginko/pull/92) [`586e83a`](https://github.com/lupinum-dev/ginko/commit/586e83a0d3f04a5f61e002d7e6950855b61b2b22) Thanks [@Mat4m0](https://github.com/Mat4m0)! - Fix pages moving while images load: the card image (`::card{image}`) now gets the image's width and height (`imageWidth`, `imageHeight`), and so does the enlarged image of a figure.
+- Updated dependencies [[`586e83a`](https://github.com/lupinum-dev/ginko/commit/586e83a0d3f04a5f61e002d7e6950855b61b2b22), [`586e83a`](https://github.com/lupinum-dev/ginko/commit/586e83a0d3f04a5f61e002d7e6950855b61b2b22)]:
+  - @lupinum/ginko@0.15.0
+
 ## 0.14.0
 
 ### Patch Changes

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { readFileSync, statSync, openSync, readSync, closeSync, existsSync, renameSync, mkdirSync } from 'node:fs';
 import { readFile, readdir } from 'node:fs/promises';
 import { resolve, sep, dirname, join, extname, basename } from 'node:path';
-import { imageInfo, parseMarkdown, todayIn, validate, printOf, routeUrls, urlClashes, effectiveProfile, coreMessage, isDate, slugify, isTranslatable, sha256, resolveRouteLinks, isVisible, buildBundle } from '@lupinum/ginko/internal';
+import { imageInfo, imageSizeProps, parseMarkdown, todayIn, validate, printOf, routeUrls, urlClashes, effectiveProfile, coreMessage, isDate, slugify, isTranslatable, sha256, resolveRouteLinks, isVisible, buildBundle } from '@lupinum/ginko/internal';
 import { load } from 'js-yaml';
 import { createHash } from 'node:crypto';
 import { execFile } from 'node:child_process';
@@ -121,16 +121,17 @@ function rewriteImages(nodes, cx) {
     } else if (Object.hasOwn(cx.imageProps, tag)) {
       for (const prop of cx.imageProps[tag]) {
         if (typeof node[1][prop] !== "string") continue;
-        rewriteImage(node[1], cx, prop, prop === "src" && cx.sized.has(tag) ? "keep" : "none");
+        rewriteImage(node[1], cx, prop, cx.sized[tag]?.includes(prop) ? "keep" : "none");
       }
     }
     rewriteImages(node.slice(2), cx);
   }
 }
-function setSize(props, info, mode) {
+function setSize(props, prop, info, mode) {
   if (mode === "none") return;
-  if (mode === "set" || props.width === void 0) props.width = info.width;
-  if (mode === "set" || props.height === void 0) props.height = info.height;
+  const [w, h] = imageSizeProps(prop);
+  if (mode === "set" || props[w] === void 0) props[w] = info.width;
+  if (mode === "set" || props[h] === void 0) props[h] = info.height;
 }
 function rewriteImage(props, cx, prop, mode) {
   const src = props[prop];
@@ -140,7 +141,7 @@ function rewriteImage(props, cx, prop, mode) {
     const root2 = resolve(cx.publicDir);
     const abs2 = resolve(root2, clean.replace(/^\/+/, ""));
     const info2 = abs2.startsWith(root2 + sep) && isFile(abs2) ? imageInfo(head(abs2, 64 * 1024)) : void 0;
-    if (info2) setSize(props, info2, mode);
+    if (info2) setSize(props, prop, info2, mode);
     return;
   }
   const root = resolve(cx.contentDir);
@@ -161,7 +162,7 @@ function rewriteImage(props, cx, prop, mode) {
   cx.images.set(url, abs);
   cx.renames.set(src, url);
   props[prop] = url;
-  setSize(props, info, mode);
+  setSize(props, prop, info, mode);
   const copies = mode === "set" ? variantFiles(abs, hash, info.width) : [];
   if (copies.length) {
     props.srcset = [...copies.map((c) => `${IMAGE_URL_PREFIX}${c.name} ${c.width}w`), `${url} ${info.width}w`].join(", ");
@@ -491,7 +492,7 @@ async function readContent(contentDir, publicDir, schema, options = {}) {
   const images = /* @__PURE__ */ new Map();
   const components = Object.entries(schema.components ?? {});
   const imageProps = Object.fromEntries(components.map(([tag, def]) => [tag, Object.entries(def.props ?? {}).filter(([, field]) => field.type === "image").map(([name]) => name)]));
-  const sized = new Set(components.filter(([, def]) => def.props && "width" in def.props && "height" in def.props).map(([tag]) => tag));
+  const sized = Object.fromEntries(components.map(([tag, def]) => [tag, imageProps[tag].filter((prop) => imageSizeProps(prop).every((p) => Object.hasOwn(def.props ?? {}, p)))]));
   const main = schema.locales[0];
   const times = await fileTimes(contentDir);
   const urlOwners = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lupinum/ginko-content",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "description": "Ginko bricks from Markdown files in the site's repo. Installed, not imported: the Ginko module loads it.",
   "license": "MIT",
@@ -36,12 +36,12 @@
     "shiki": "^4.3.1"
   },
   "devDependencies": {
-    "@lupinum/ginko": "0.14.0",
+    "@lupinum/ginko": "0.15.0",
     "sharp": "0.35.5",
     "unbuild": "3.6.1"
   },
   "peerDependencies": {
-    "@lupinum/ginko": "^0.14.0",
+    "@lupinum/ginko": "^0.15.0",
     "sharp": "^0.33.0 || ^0.34.0 || ^0.35.0"
   },
   "peerDependenciesMeta": {