@gblikas/querykit 0.0.0 → 0.2.0

package/examples/qk-next/app/hooks/use-viewport-info.ts

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export interface IViewportInfo {
+  innerWidth: number;
+  innerHeight: number;
+  shortViewportHeightPx: number;
+  isLessThanHeight: (px: number) => boolean;
+  shortSidePx: number;
+  isShortSideLessThan: (px: number) => boolean;
+}
+
+/**
+ * Returns robust viewport dimensions using small viewport units (svh/svw) fallbacks.
+ * Ensures height reflects the visual viewport on mobile, avoiding URL bar issues.
+ */
+export function useViewportInfo(): IViewportInfo {
+  const readInnerHeight = (): number => {
+    // Prefer visualViewport when available to avoid browser UI chrome affecting measurements
+    const visual = window.visualViewport;
+    if (visual && typeof visual.height === 'number')
+      return Math.round(visual.height);
+    // Fallbacks in order of reliability
+    return Math.round(
+      window.innerHeight || document.documentElement.clientHeight
+    );
+  };
+  const readInnerWidth = (): number => {
+    const visual = window.visualViewport;
+    if (visual && typeof visual.width === 'number')
+      return Math.round(visual.width);
+    return Math.round(
+      window.innerWidth || document.documentElement.clientWidth
+    );
+  };
+
+  const [state, setState] = useState<IViewportInfo>((): IViewportInfo => {
+    const w =
+      typeof window !== 'undefined'
+        ? typeof window.visualViewport?.width === 'number'
+          ? Math.round(window.visualViewport.width)
+          : window.innerWidth
+        : 0;
+    const h = typeof window !== 'undefined' ? readInnerHeight() : 0;
+    const shortSide = Math.min(w, h);
+    return {
+      innerWidth: w,
+      innerHeight: h,
+      shortViewportHeightPx: h,
+      isLessThanHeight: (px: number) => h < px,
+      shortSidePx: shortSide,
+      isShortSideLessThan: (px: number) => shortSide < px
+    };
+  });
+
+  useEffect(() => {
+    let frame = 0;
+    const measure = (): void => {
+      const w = readInnerWidth();
+      const h = readInnerHeight();
+      const shortSide = Math.min(w, h);
+      setState({
+        innerWidth: w,
+        innerHeight: h,
+        shortViewportHeightPx: h,
+        isLessThanHeight: (px: number) => h < px,
+        shortSidePx: shortSide,
+        isShortSideLessThan: (px: number) => shortSide < px
+      });
+    };
+    frame = requestAnimationFrame(measure);
+    const onResize = (): void => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    window.addEventListener('resize', onResize);
+    window.visualViewport?.addEventListener('resize', onResize);
+    window.visualViewport?.addEventListener('scroll', onResize);
+    return (): void => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('resize', onResize);
+      window.visualViewport?.removeEventListener('resize', onResize);
+      window.visualViewport?.removeEventListener('scroll', onResize);
+    };
+  }, []);
+
+  return state;
+}

package/examples/qk-next/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { Toaster } from '@/components/ui/sonner';
@@ -7,6 +7,8 @@ import { ThemeProvider } from '@/components/theme-provider';
 import { GitHubStars } from '@/components/github-stars';
 import AuroraBackground from '@/components/aurora-background';
 import { JSX } from 'react';
+import { Analytics } from '@vercel/analytics/next';
+import { SpeedInsights } from '@vercel/speed-insights/next';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -19,9 +21,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  metadataBase: new URL(
-    process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
-  ),
+  metadataBase: new URL('https://www.querykit.dev/'),
   title: {
     default: 'QueryKit · Next.js Demo',
     template: '%s · QueryKit'
@@ -37,7 +37,12 @@ export const metadata: Metadata = {
     'drizzle orm',
     'pglite',
     'typescript',
-    'next.js'
+    'next.js',
+    'drizzle',
+    'sql',
+    'npm',
+    'npm-package',
+    'nextjs'
   ],
   authors: [{ name: 'gblikas', url: 'https://github.com/gblikas' }],
   creator: 'QueryKit',
@@ -79,15 +84,27 @@ export const metadata: Metadata = {
   ]
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover'
+};
+
 export default function RootLayout({
   children
 }: {
   children: React.ReactNode;
 }): JSX.Element {
   return (
-    <html lang="en" suppressHydrationWarning className="min-h-screen">
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className="min-h-screen overflow-hidden"
+    >
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen overflow-hidden`}
       >
         <ThemeProvider
           attribute="class"
@@ -113,6 +130,8 @@ export default function RootLayout({
             </div>
             <Providers>{children}</Providers>
             <Toaster />
+            <Analytics />
+            <SpeedInsights />
           </div>
         </ThemeProvider>
       </body>