npm - create-starlight-cms - Versions diffs - 0.9.0 - Mend

create-starlight-cms 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (228) hide show

package/template/src/admin/hooks/use-window-size.ts ADDED Viewed

@@ -0,0 +1,93 @@
+"use client"
+import { useEffect, useState } from "react"
+import { useThrottledCallback } from "@/hooks/use-throttled-callback"
+export interface WindowSizeState {
+  /**
+   * The width of the window's visual viewport in pixels.
+   */
+  width: number
+  /**
+   * The height of the window's visual viewport in pixels.
+   */
+  height: number
+  /**
+   * The distance from the top of the visual viewport to the top of the layout viewport.
+   * Particularly useful for handling mobile keyboard appearance.
+   */
+  offsetTop: number
+  /**
+   * The distance from the left of the visual viewport to the left of the layout viewport.
+   */
+  offsetLeft: number
+  /**
+   * The scale factor of the visual viewport.
+   * This is useful for scaling elements based on the current zoom level.
+   */
+  scale: number
+}
+/**
+ * Hook that tracks the window's visual viewport dimensions, position, and provides
+ * a CSS transform for positioning elements.
+ *
+ * Uses the Visual Viewport API to get accurate measurements, especially important
+ * for mobile devices where virtual keyboards can change the visible area.
+ * Only updates state when values actually change to optimize performance.
+ *
+ * @returns An object containing viewport properties and a CSS transform string
+ */
+export function useWindowSize(): WindowSizeState {
+  const [windowSize, setWindowSize] = useState<WindowSizeState>({
+    width: 0,
+    height: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    scale: 0,
+  })
+  const handleViewportChange = useThrottledCallback(() => {
+    if (typeof window === "undefined") return
+    const vp = window.visualViewport
+    if (!vp) return
+    const {
+      width = 0,
+      height = 0,
+      offsetTop = 0,
+      offsetLeft = 0,
+      scale = 0,
+    } = vp
+    setWindowSize((prevState) => {
+      if (
+        width === prevState.width &&
+        height === prevState.height &&
+        offsetTop === prevState.offsetTop &&
+        offsetLeft === prevState.offsetLeft &&
+        scale === prevState.scale
+      ) {
+        return prevState
+      }
+      return { width, height, offsetTop, offsetLeft, scale }
+    })
+  }, 200)
+  useEffect(() => {
+    const visualViewport = window.visualViewport
+    if (!visualViewport) return
+    visualViewport.addEventListener("resize", handleViewportChange)
+    handleViewportChange()
+    return () => {
+      visualViewport.removeEventListener("resize", handleViewportChange)
+    }
+  }, [handleViewportChange])
+  return windowSize
+}

package/template/src/admin/html.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export function adminHtml(): string {
+  return String.raw`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <title>Docs CMS</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/admin/app.css">
+  </head>
+  <body>
+    <div id="admin-root"></div>
+    <script type="module" src="/admin/app.js"></script>
+  </body>
+</html>`;
+}