diff --git a/.changeset/frank-camels-raise.md b/.changeset/frank-camels-raise.md new file mode 100644 index 0000000..0c8abff --- /dev/null +++ b/.changeset/frank-camels-raise.md @@ -0,0 +1,5 @@ +--- +'shimmer-from-structure': minor +--- + +Lock dependencies diff --git a/README.md b/README.md index f30c51e..b66f9c7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS. -**Documentation:** [Access Full Docs](https://shimmer-from-structure-docs.vercel.app) +**Documentation:** Access Full Docs ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D) diff --git a/docs/app/components/Header.tsx b/docs/app/components/Header.tsx index 13a1f0a..912c1cd 100644 --- a/docs/app/components/Header.tsx +++ b/docs/app/components/Header.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import { useState, useEffect } from 'react'; import { ThemeToggle } from './ThemeToggle'; +import { formatCompactNumber } from '@/lib/formatNumber'; export function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -78,7 +79,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} @@ -162,7 +163,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} diff --git a/docs/app/components/HomeContent.tsx b/docs/app/components/HomeContent.tsx index 0a4bafd..e94bbf4 100644 --- a/docs/app/components/HomeContent.tsx +++ b/docs/app/components/HomeContent.tsx @@ -15,24 +15,85 @@ interface HomeContentProps { latestRelease: Release; } +/** macOS-style terminal window — always rendered outside any wrapper */ +function CliSnippet() { + return ( +
+
+ {/* Traffic-light dots */} +
+ + + +
+ + {/* Command line */} + 
+          
+            ${' '}
+            npm{' '}
+            install shimmer-from-structure
+            {'\n'}
+            # → Zero-maintenance shimmer for your UI
+          
+
+
+
+ ); +} + export function HomeContent({ latestRelease }: HomeContentProps) { const [loading, setLoading] = useState(true); const { resolvedTheme } = useTheme(); useEffect(() => { - // Show shimmer for 3 seconds on first mount - const timer = setTimeout(() => { - setLoading(false); - }, 3000); - + const timer = setTimeout(() => setLoading(false), 3000); return () => clearTimeout(timer); }, []); const handleShowDemo = () => { setLoading(true); - setTimeout(() => { - setLoading(false); - }, 3000); + setTimeout(() => setLoading(false), 3000); }; const isDark = resolvedTheme === 'dark'; @@ -42,6 +103,7 @@ export function HomeContent({ latestRelease }: HomeContentProps) { return (
+ {/* ── Block 1: header + hero title/description ── */}
@@ -57,13 +119,12 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
- {/* Hero Section */} -
+

Shimmer From Structure

-

+

A structure-aware skeleton loader that mirrors your rendered UI at runtime. @@ -71,7 +132,17 @@ export function HomeContent({ latestRelease }: HomeContentProps) { Zero layout duplication. Built for modern frameworks.

+
+
+ + + {/* ── CLI snippet — never inside a Shimmer ── */} + + {/* ── Block 2: CTA buttons + badges + features ── */} + +
+
- - React - - - Vue - - - Svelte - - - Angular - - - SolidJS - + {['React', 'Vue', 'Svelte', 'Angular', 'SolidJS'].map((fw) => ( + + {fw} + + ))}
@@ -190,7 +254,6 @@ export function HomeContent({ latestRelease }: HomeContentProps) { /> {/* Quick Example */} -

Quick Example

diff --git a/docs/lib/formatNumber.ts b/docs/lib/formatNumber.ts new file mode 100644 index 0000000..69e043f --- /dev/null +++ b/docs/lib/formatNumber.ts @@ -0,0 +1,21 @@ +/** + * Formats a number into a compact string representation + * @param num - The number to format + * @returns Formatted string (e.g., 1000 -> "1k", 1234 -> "1.2k", 999 -> "999") + */ +export function formatCompactNumber(num: number): string { + if (num < 1000) { + return num.toString(); + } + + const thousands = num / 1000; + const rounded = Math.round(thousands * 10) / 10; + + // If the rounded value is a whole number, show without decimal + if (rounded % 1 === 0) { + return `${Math.round(rounded)}k`; + } + + // Otherwise show one decimal place + return `${rounded}k`; +} diff --git a/packages/shimmer-from-structure/package.json b/packages/shimmer-from-structure/package.json index 6074e1b..f33e715 100644 --- a/packages/shimmer-from-structure/package.json +++ b/packages/shimmer-from-structure/package.json @@ -1,6 +1,6 @@ { "name": "shimmer-from-structure", - "version": "2.5.0", + "version": "2.4.5", "description": "Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.", "main": "index.js", "types": "index.d.ts",