@chassis-ui/docs 0.3.8 → 0.3.10

package/README.md

@@ -2,7 +2,7 @@
 
 > Shared Astro layouts, components, and utilities for Chassis documentation sites.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.8](https://img.shields.io/badge/Version-0.3.8-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.10](https://img.shields.io/badge/Version-0.3.10-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 
 ## Overview
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "type": "module",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@astrojs/markdown-remark": "^7.0.0",
-    "@chassis-ui/css": ">=0.3.3",
+    "@chassis-ui/css": ">=0.3.4",
     "@pagefind/component-ui": "^1.0.0",
     "@shikijs/transformers": "^4.3.1",
     "astro": "^7.0.0",
@@ -59,6 +59,7 @@
     "image-size": "^2.0.2",
     "mdast-util-from-markdown": "^2.0.3",
     "mdast-util-to-string": "^4.0.0",
+    "medium-zoom": "^1.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "unist-util-visit": "^5.1.0"

package/src/components/ResponsiveImage.astro

@@ -18,9 +18,11 @@ interface Props {
   width?: number
   /** Image height in pixels */
   height?: number
+  /** Any other attribute is passed through to the rendered element. */
+  [key: string]: unknown
 }
 
-const { imgPath, alt, classes = '', lazyload = true, width, height } = Astro.props
+const { imgPath, alt, classes = '', lazyload = true, width, height, ...rest } = Astro.props
 
 const classNames = ['image', classes].filter(Boolean).join(' ')
 
@@ -40,4 +42,5 @@ const imgPath2x = `${basePath}/${basename}@2x${ext}`
   loading={lazyload ? 'lazy' : undefined}
   width={width}
   height={height}
+  {...rest}
 />

package/src/js/zoom.js

@@ -0,0 +1,11 @@
+/*
+ * Enables Medium-like click-to-zoom on any image tagged data-zoomable.
+ * https://github.com/francoischalifour/medium-zoom
+ */
+
+import mediumZoom from 'medium-zoom'
+
+mediumZoom('[data-zoomable]', {
+  margin: 24,
+  background: 'var(--cx-alternate-dim-main)'
+})

package/src/layouts/footer/Scripts.astro

@@ -16,6 +16,7 @@ const { layout } = Astro.props
 ---
 
 <script src="../../js/search.js"></script>
+<script src="../../js/zoom.js"></script>
 <script>
   import '@chassis-ui/css'
 </script>

package/src/layouts/head/Social.astro

@@ -8,7 +8,7 @@
 import path from 'node:path'
 import { getConfig } from '@libs/config'
 import { getDocsPublicFsPath } from '@libs/path'
-import { getStaticImageSize } from '../../libs/image'
+import { getRemoteImageSize, getStaticImageSize } from '../../libs/image'
 import type { Layout } from '../../libs/layout'
 
 interface Props {
@@ -25,7 +25,10 @@ interface Props {
 const { description, layout, thumbnail, title } = Astro.props
 
 const socialImageUrl = new URL(thumbnail, Astro.site)
-const socialImageSize = await getStaticImageSize(path.join(getDocsPublicFsPath(), thumbnail))
+const isRemoteThumbnail = /^https?:\/\//i.test(thumbnail)
+const socialImageSize = isRemoteThumbnail
+  ? await getRemoteImageSize(thumbnail)
+  : await getStaticImageSize(path.join(getDocsPublicFsPath(), thumbnail))
 ---
 
 <meta name="twitter:card" content="summary_large_image" />
@@ -39,6 +42,7 @@ const socialImageSize = await getStaticImageSize(path.join(getDocsPublicFsPath()
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:type" content={layout === 'docs' ? 'article' : 'website'} />
+<meta property="og:site_name" content={getConfig().title} />
 <meta property="og:image" content={socialImageUrl} />
 <meta property="og:image:type" content="image/png" />
 <meta property="og:image:width" content={String(socialImageSize.width)} />

package/src/layouts/header/Navigation.astro

@@ -99,6 +99,7 @@ const isActive = (path: string) => {
             <div class="vr d-none large:d-flex my-auto large:mx-small"></div>
             <hr class="large:d-none" />
           </li>
+          <NavLink active={isActive('/blog')} href="/blog">Blog</NavLink>
           <NavLink active={isActive('/examples')} href="/examples">Examples</NavLink>
         </ul>
 

package/src/libs/image.ts

@@ -22,3 +22,30 @@ export async function getStaticImageSize(imagePath: string) {
 
   return { height: size.height, width: size.width }
 }
+
+/**
+ * Fetches a remote image and returns its pixel dimensions.
+ *
+ * Intended for build-time use only (e.g. generating `<meta og:image:width/height>`
+ * tags) for images hosted outside the project, such as on a CDN.
+ *
+ * @param imageUrl - Absolute URL of the image.
+ * @returns An object with `width` and `height` in pixels.
+ * @throws If the image cannot be fetched or its dimensions cannot be determined.
+ */
+export async function getRemoteImageSize(imageUrl: string) {
+  const response = await fetch(imageUrl)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch remote image at '${imageUrl}' (status ${response.status}).`)
+  }
+
+  const buffer = await response.arrayBuffer()
+  const size = sizeOf(new Uint8Array(buffer))
+
+  if (!size?.height || !size?.width) {
+    throw new Error(`Failed to get size of remote image at '${imageUrl}'.`)
+  }
+
+  return { height: size.height, width: size.width }
+}