Commit 6d108b1

HPCesia <me@hpcesia.com>
2026-09-18 14:08:19
build: fix image break points
1 parent b4ba24b
Changed files (2)
src
contents
_lib
components
src/contents/_lib/components/image.typ
@@ -101,7 +101,8 @@
   let scaling = element.at("scaling", default: auto)
   let alt = element.at("alt", default: none)
 
-  let options = (layout: "constrained") + astro
+  // `<article>` max size: 780px
+  let options = (layout: "constrained", width: 780) + astro
   let styles = ("display": "block")
   if width != none { styles.insert("width", width) }
   if height != none { styles.insert("height", height) }
@@ -127,12 +128,14 @@
 
   let attributes = jsx-attributes(options)
   let tag = (
-    "<Image src={import(" + repr(specifier) + ").then(m => m.default)} style={",
+    "<Image",
+    "src={import(" + repr(specifier) + ").then(m => m.default)}",
+    "style={",
     js-value(styles),
-    "} ",
-    attributes.join(" "),
-    " />",
-  ).join("")
+    "}",
+    ..attributes,
+    "/>",
+  ).join("  ")
 
   import-counter.step()
 
astro.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
   image: {
     // Required by the `constrained` layout that `kp.img` sets by default.
     responsiveStyles: true,
+    breakpoints: [640, 960, 1280],
   },
   integrations: [
     sitemap(),