@ardly/bunext 1.0.0

package/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

package/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+build
+dist 

package/README.md

@@ -0,0 +1,121 @@
+# Bunext
+
+A Next.js 15 app with Tailwind CSS template. [Live deployment](https://bunext.ardastroid.com/)
+
+## Usage (run locally)
+
+> required `bun` or `nodejs` installed and make sure they're up to date
+
+Go to the `root` folder where `package.json` exists.
+
+```bash
+bun install
+```
+
+```bash
+npm install
+```
+
+### Then
+
+```bash
+bun --bun run dev
+```
+
+```bash
+bun run dev
+```
+
+```bash
+npm run dev
+```
+
+## Features
+
+- Next.js 15 App Directory
+- Tailwind CSS
+- [Shadcn](https://ui.shadcn.com/) components
+- Custom util components like `share modal, multi-select(no library), Img, Icons, etc`
+- CustomFont Optimization using [Next font](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
+- Icons using [lucide-react](https://lucide.dev/)
+- Next theme provider (dark and light mode)
+- Url stage management using [nuqs](https://nuqs.47ng.com/)
+- Tailwind css only animations using [tailwindcss-motion](https://docs.rombo.co/tailwind)
+- Feature flags
+- Metadata generator for SEO (including apple-touch-icon)
+- [zod](https://zod.dev/) validation
+- Per Link page transition (without any library)
+- Custom Image components with lazy loading and auto generated placeholder (worsk with or without `next/image`)
+- [Biome](https://biomejs.dev/) for linting and formatting
+- [Fluid Tailwind](https://fluid.tw/) for easier responsive design (disabled by default, to enable go to `tailwind.config.ts` and uncomment the fluid plugin variables, Note: the `min-*` and `max-*` variants don't work while using fluid-tailwind)
+- Utilities like `qrCode gen, string shortner, uniqueCode gen, img placeholder, email validation, hashing etc`
+
+## Config
+
+- for generating colors use [realtime-colors](https://www.realtimecolors.com/) shadcn template and pase it on `src/styles/globals.css`
+- add fonts on `src/styles/tailwind/fonts.ts`
+- to configure feature flags got to `src/lib/config/featureflags.ts`
+- to configure Metadata got to `src/lib/data/siteData.ts`
+- advance Metadata config in `src/lib/config/siteConfig.ts`
+- for base styles (scrollbar style, selection highlighting etc) go to `src/styles/tailwind/base.ts`
+
+## Roadmap
+
+- [x] add next themes
+- [x] feature flags
+- [x] add sample responsive nav
+- [ ] add sample footer
+- [ ] add sample server actions
+- [ ] add syntax highlighting for code blocks
+- [ ] add a branch with animation features using motion
+- [ ] add a feature full branch with drizzle orm, analytics, auth
+
+### Multi-select sample code
+
+```tsx
+'use client'
+import React, { useState } from 'react'
+import { MultiSelect } from '@/components/ui/multi-select'
+
+const catsList = [
+  { value: 'persian', label: 'Persian Cat' },
+  { value: 'siamese', label: 'Siamese Cat' },
+  { value: 'maine-coon', label: 'Maine Coon' },
+  { value: 'ragdoll', label: 'Ragdoll' },
+  { value: 'bengal', label: 'Bengal Cat' },
+]
+
+function Home() {
+  const [selectedCats, setSelectedCats] = useState<string[]>([
+    'persian',
+    'siamese',
+  ])
+
+  return (
+    <div className="max-w-xl p-4">
+      <h1 className="mb-4 text-2xl font-bold">Multi-Select Component</h1>
+      <MultiSelect
+        options={catsList}
+        onValueChange={setSelectedCats}
+        defaultValue={selectedCats}
+        placeholder="Select cats"
+        variant="inverted"
+        animation={2}
+        maxCount={3}
+      />
+      <div className="mt-4">
+        <h2 className="text-xl font-semibold">Selected Cats:</h2>
+        <ul className="list-inside list-disc">
+          {selectedCats.map((cat) => (
+            <li key={cat}>{cat}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+```
+
+<!-- ### [Conventions](./CONVENTION.md) -->
+<!-- ## License
+Licensed under the [MIT license](./LICENSE). -->

package/STRUCTURE.md

@@ -0,0 +1,77 @@
+## Bunext Folder Structure
+
+```sh
+├── .env
+├── .env.example
+├── .eslintrc.json
+├── .gitignore
+├── CONVENTION.md
+├── README.md
+├── biome.json
+├── bun.lockb
+├── components.json
+├── next-env.d.ts
+├── next.config.ts
+├── package.json
+├── postcss.config.mjs
+├── tailwind.config.ts
+├── tsconfig.json
+├── public/
+└── src/
+    ├── actions/
+    ├── app/
+    │   ├── (index)/
+    │   │   ├── intr/
+    │   │   ├── pagetr/
+    │   │   └── page.tsx
+    │   ├── layout.tsx
+    │   ├── not-found.tsx
+    │   └── sitemap.ts
+    ├── components/
+    │   ├── Providers/ # providers for the app
+    │   │   ├── root-provider.tsx
+    │   │   └── theme-provider.tsx
+    │   ├── navigation/ # navigation components
+    │   │   ├── footer.tsx
+    │   │   ├── main-nav.tsx
+    │   │   ├── mobile-nav.tsx
+    │   │   └── site-header.tsx
+    │   ├── ui/  # shadcn-ui components
+    │   ├── utils/ # custom utility components
+    │   │   ├── ConditionalLink.tsx
+    │   │   ├── Image.tsx
+    │   │   ├── Img.tsx
+    │   │   ├── Spinner.tsx
+    │   │   ├── TopButton.tsx
+    │   │   ├── TransitionLink.tsx
+    │   │   ├── featureFlag.tsx
+    │   │   ├── icons.tsx
+    │   │   └── share-modal.tsx
+    │   ├── brand.tsx
+    │   └── TestComp.tsx
+    ├── hooks/
+    │   ├── use-intersection.ts
+    │   ├── use-lazy-load.ts
+    │   ├── use-meta-color.ts
+    │   └── use-toast.ts
+    ├── lib/
+    │   ├── config/
+    │   │   ├── featureflags.ts
+    │   │   ├── siteConfig.ts
+    │   │   └── user.ts
+    │   ├── data/ # data files for core site config & seo
+    │   │   ├── footer-data.ts
+    │   │   ├── nav-data.ts
+    │   │   └── siteData.ts
+    │   └── utils.ts # utility functions
+    ├── styles/
+    │   ├── customGlobal.css
+    │   ├── globals.css
+    │   └── tailwind/
+    │       ├── base.ts
+    │       ├── fonts.ts
+    │       ├── tailwindUtils.ts
+    │       └── fonts/
+    └── types/
+        └── index.ts
+```

package/bin/cli.js

@@ -0,0 +1,67 @@
+#! /usr/bin/env node
+
+import { execSync } from 'child_process'
+import readline from 'readline'
+
+const runCommand = (command) => {
+  try {
+    execSync(`${command}`, { stdio: 'inherit' })
+  } catch (error) {
+    console.error(`Failed to run command: ${command}`, error)
+    return false
+  }
+  return true
+}
+
+const repoName = process.argv[2]
+const gitCheckout = `git clone --depth 1 https://github.com/DarkidOP/Bunext.git ${repoName}`
+const installDeps = `cd ${repoName} && bun install`
+const removeGit = `rm -rf .git`
+const initGit = `git init && git add . && git commit -m "Initial commit"`
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+})
+
+console.log(`Creating project template in ./${repoName}`)
+const checkedOut = runCommand(gitCheckout)
+if (!checkedOut) {
+  console.error(
+    'Failed to clone template repository "https://github.com/DarkidOP/Bunext.git"'
+  )
+  process.exit(1)
+}
+
+console.log('Removing Git history...')
+const removedGit = runCommand(removeGit)
+if (!removedGit) {
+  console.error('Failed to remove Git history')
+  process.exit(1)
+}
+
+console.log('Installing dependencies...')
+const installedDeps = runCommand(installDeps)
+if (!installedDeps) {
+  console.error('Failed to install dependencies')
+  process.exit(1)
+}
+
+// Add Git initialization prompt
+rl.question(
+  'Would you like to initialize a new git repository? (y/n) ',
+  (answer) => {
+    if (answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes') {
+      console.log('Initializing Git repository...')
+      const initializedGit = runCommand(initGit)
+      if (!initializedGit) {
+        console.error('Failed to initialize Git repository')
+        process.exit(1)
+      }
+      console.log('Git repository initialized successfully!')
+    }
+
+    console.log('\nHappy coding! 🎉')
+    rl.close()
+  }
+)

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/next.config.ts

@@ -0,0 +1,22 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  eslint: {
+    ignoreDuringBuilds: false,
+  },
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: 'v0.dev', pathname: '/placeholder.svg' },
+    ],
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+  compiler:
+    process.env.NODE_ENV === 'production' ? { removeConsole: true } : {},
+}
+
+export default nextConfig

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@ardly/bunext",
+  "description": "Bunext - A Next.js 15 template with Tailwind CSS, shadcn ui and Bun with some utilities built in",
+  "author": "Ard Astroid <ardastroid@gmail.com>",
+  "version": "1.0.0",
+  "bin": "./bin/cli.js",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "preview": "next build && next start",
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "lucide-react": "^0.460.0",
+    "next": "15.1.1",
+    "next-themes": "^0.4.4",
+    "nuqs": "^2.2.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.10",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "15.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "fluid-tailwind": "^1.0.4",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-motion": "^1.0.0",
+    "typescript": "^5.7.2"
+  },
+  "overrides": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+	plugins: {
+		tailwindcss: {},
+	},
+};
+
+export default config;

package/prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+}

package/public/favicon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-3,.cls-4{fill:#070707;}.cls-3{opacity:0.14;}.cls-4{opacity:0.3;}.cls-5{fill:#08090a;}.cls-6{fill:#f18a5c;}</style><linearGradient id="linear-gradient" x1="41.94" y1="17.58" x2="38.61" y2="71.97" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f1e1"/><stop offset="1" stop-color="#faf8fa"/></linearGradient></defs><path class="cls-1" d="M74.11,34.38C70.67,27,64.91,23,59,19.35h0a89.47,89.47,0,0,1-11.58-9c-.21-.2-.48-.33-.71-.51a.69.69,0,0,0-1,0C44,11.28,42.48,10.91,41,9.25c-.15-.17-.37-.26-.51-.44-.82-1-1.47-.87-2.31.12-1.82,2.13-2,2.16-4.16.68-1.09-.74-1.81-.53-2.63.47a64.85,64.85,0,0,1-10.08,9.63c-2.71,2.15-5.4,4.34-7.94,6.78A38.59,38.59,0,0,0,4.66,38.16a25,25,0,0,0-1.4,17.2h0c1.37,5.8,4.16,10,9,12A70.48,70.48,0,0,0,31.6,71.92a94.32,94.32,0,0,0,30.29-2.31,37.85,37.85,0,0,0,9.37-3.37A9.56,9.56,0,0,0,76.12,60,35.27,35.27,0,0,0,74.11,34.38Z"/><path class="cls-2" d="M39.34,74.87a81.43,81.43,0,0,1-26.26-4.5C5.59,67.83,1.76,61.53.54,52.52S2.14,36.33,7.05,30C11,25,15.72,21.14,20.46,17.36A69,69,0,0,0,30.19,8c1.67-2,2.49-2.13,4.54-.77a1.49,1.49,0,0,0,2.32-.37c2-2.28,2.27-2.25,4.44-.38a3,3,0,0,1,.42.37C43,8.1,44,8.49,45.27,7.22a1.3,1.3,0,0,1,1.5-.12,8.46,8.46,0,0,1,2.62,1.78c3.76,3.69,8,6.39,12.21,9.19,3.88,2.59,7.68,5.32,10.76,9.27,4.47,5.72,6.78,12.62,7.3,20.46a36.52,36.52,0,0,1-2,14.27,10.57,10.57,0,0,1-4.43,5.81c-3.84,2.43-8,3.58-12.19,4.53A105.83,105.83,0,0,1,39.34,74.87ZM59,19.35a89.47,89.47,0,0,1-11.58-9c-.21-.2-.48-.33-.71-.51a.69.69,0,0,0-1,0C44,11.28,42.48,10.91,41,9.25c-.15-.17-.37-.26-.51-.44-.82-1-1.47-.87-2.31.12-1.82,2.13-2,2.16-4.16.68-1.09-.74-1.81-.53-2.63.47a64.85,64.85,0,0,1-10.08,9.63c-2.71,2.15-5.4,4.34-7.94,6.78A38.59,38.59,0,0,0,4.66,38.16a25,25,0,0,0-1.4,17.2c1.37,5.8,4.15,10,9,12A70.48,70.48,0,0,0,31.6,71.92a94.32,94.32,0,0,0,30.29-2.31,37.85,37.85,0,0,0,9.37-3.37A9.56,9.56,0,0,0,76.12,60a35.27,35.27,0,0,0-2-25.64C70.67,27,64.91,23,59,19.35Z"/><path class="cls-3" d="M3.26,55.36c1.18.51,1.76,1.86,2.57,2.84A25.48,25.48,0,0,0,20.9,67.13a66.14,66.14,0,0,0,16.18.94,77.8,77.8,0,0,0,11.21-1.52,82.55,82.55,0,0,0,14.39-4.33,26.23,26.23,0,0,0,3.77-1.84c3-1.74,4.49-4.73,5.26-8.5a45.47,45.47,0,0,0,.77-8.55,22.15,22.15,0,0,0-4.21-13.81c-2.58-3.49-5.66-6.21-8.64-9.1-.3-.3-.64-.52-.64-1.07C64.91,23,70.67,27,74.11,34.38a35.27,35.27,0,0,1,2,25.64,9.56,9.56,0,0,1-4.86,6.22,37.85,37.85,0,0,1-9.37,3.37A94.32,94.32,0,0,1,31.6,71.92a70.48,70.48,0,0,1-19.38-4.61C7.41,65.38,4.63,61.16,3.26,55.36Z"/><path class="cls-4" d="M37.53,13.92a14.62,14.62,0,0,1,1.83,8.89,5.31,5.31,0,0,1-.69,2.11,14,14,0,0,1-8.9,6.35,5.76,5.76,0,0,1,.91-1.86,36.31,36.31,0,0,1,3.86-5.16,8.82,8.82,0,0,0,2.11-5.09A39.25,39.25,0,0,1,37.53,13.92Z"/><path class="cls-4" d="M41.16,33.28a27.11,27.11,0,0,1,.35-7.78,27.36,27.36,0,0,0-.14-9.34c-.1-.66-.13-1.34-.2-2.05,2.29,1.21,4.32,5.16,4.19,8.39A18.11,18.11,0,0,1,41.16,33.28Z"/><path class="cls-4" d="M51,30.28a18.68,18.68,0,0,1-1.75-6A19.33,19.33,0,0,0,47,17.37c-.46-.84-.81-1.77-1.22-2.68,1.63-.33,4.38,1.37,5.51,3.64C53.24,22.24,52.4,26.14,51,30.28Z"/><path class="cls-4" d="M33.66,13.9C34.9,18.62,32.88,23,29.21,24a8.64,8.64,0,0,1-5.92-.35A8.41,8.41,0,0,1,26.54,21a11.64,11.64,0,0,0,6-5.57A11.68,11.68,0,0,1,33.66,13.9Z"/><path class="cls-5" d="M50.14,50.89a4.48,4.48,0,0,1-4.25-4.74,4.34,4.34,0,1,1,8.64.18A4.44,4.44,0,0,1,50.14,50.89Z"/><path class="cls-5" d="M35.11,58C32.28,57.75,30,56,27.9,53.82a1.15,1.15,0,0,1-.07-1.49.76.76,0,0,1,1.22-.2c.57.45,1.09,1,1.66,1.45,3.64,2.94,6.58,2.74,9.94-.66a2.2,2.2,0,0,0,.2-.23c.49-.64,1-1,1.61-.22a1.36,1.36,0,0,1-.33,1.86A11.49,11.49,0,0,1,35.11,58Z"/><path class="cls-5" d="M21.93,42a4.56,4.56,0,0,1,4.12,4.91,4.51,4.51,0,0,1-4.5,4.46,4.61,4.61,0,0,1-4.14-4.76A4.52,4.52,0,0,1,21.93,42Z"/><path class="cls-6" d="M13.72,53.48a2.42,2.42,0,0,1-2.65-2.2,2.47,2.47,0,0,1,2.63-2.05c1.45,0,2.74,1,2.74,2.12S15.22,53.48,13.72,53.48Z"/><path class="cls-6" d="M57.16,53.57c-1.51,0-2.78-1-2.73-2.11s1.27-2,2.7-2,2.73.84,2.74,2S58.73,53.58,57.16,53.57Z"/></svg>

package/public/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 192"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-3{fill:#070707;}.cls-2{opacity:0.14;}.cls-3{opacity:0.3;}.cls-4{fill:#08090a;}.cls-5{fill:#f18a5c;}</style><linearGradient id="linear-gradient" x1="100.54" y1="42.93" x2="92.74" y2="170.51" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f1e1"/><stop offset="1" stop-color="#faf8fa"/></linearGradient></defs><path class="cls-1" d="M176,82.34c-8.07-17.28-21.58-26.61-35.47-35.26h0c-9.37-6.43-18.67-13-27.16-21.12a15.65,15.65,0,0,0-1.68-1.22,1.63,1.63,0,0,0-2.27,0c-4,3.39-7.61,2.52-11-1.37-.35-.4-.85-.62-1.19-1-1.91-2.37-3.44-2-5.43.29-4.25,5-4.61,5.07-9.75,1.59C79.5,22.5,77.81,23,75.9,25.33,68.78,34,60.68,41.23,52.25,47.92,45.9,53,39.58,58.09,33.63,63.83,25.57,71.59,18.2,80.12,13.1,91.19c-5.93,12.86-6.9,26.33-3.28,40.36h0c3.21,13.59,9.75,23.5,21,28A164.25,164.25,0,0,0,76.3,170.37c23.87,2.35,47.55,0,71-5.4a89.21,89.21,0,0,0,22-7.9c5.53-2.91,9.33-7.5,11.41-14.6C186.88,121.45,184.92,101.44,176,82.34Z"/><path class="cls-2" d="M9.82,131.55c2.76,1.18,4.13,4.36,6,6.65,9.89,11.9,21.81,18.18,35.34,21,12.61,2.59,25.27,2.71,37.94,2.19,8.81-.36,17.58-1.9,26.31-3.56a194.37,194.37,0,0,0,33.75-10.16,59.46,59.46,0,0,0,8.83-4.31c6.93-4.08,10.54-11.1,12.34-19.94a106.48,106.48,0,0,0,1.82-20.06c.14-12.21-3-23.09-9.89-32.39-6.05-8.18-13.26-14.58-20.25-21.35-.72-.69-1.52-1.2-1.51-2.5,13.89,8.65,27.4,18,35.47,35.26,8.91,19.1,10.87,39.11,4.72,60.13-2.08,7.1-5.88,11.69-11.41,14.6a89.21,89.21,0,0,1-22,7.9c-23.49,5.37-47.17,7.75-71,5.41a164.62,164.62,0,0,1-45.48-10.82C19.57,155.05,13,145.14,9.82,131.55Z"/><path class="cls-3" d="M90.21,34.35c3.55,6.71,5.21,13.39,4.29,20.85a12.59,12.59,0,0,1-1.63,4.95C87.72,68.6,80.53,72.72,72,75a13.88,13.88,0,0,1,2.13-4.35,85.47,85.47,0,0,1,9.06-12.11,20.79,20.79,0,0,0,5-11.94A86.45,86.45,0,0,1,90.21,34.35Z"/><path class="cls-3" d="M98.71,79.76a63.7,63.7,0,0,1,.84-18.26c1.4-7.41.77-14.62-.34-21.9-.23-1.55-.31-3.14-.47-4.82,5.38,2.85,10.15,12.1,9.82,19.69C108.15,64.22,104.6,72.31,98.71,79.76Z"/><path class="cls-3" d="M121.7,72.71a43.74,43.74,0,0,1-4.09-14,45.43,45.43,0,0,0-5.21-16.24c-1.08-2-1.9-4.14-2.86-6.29,3.81-.77,10.26,3.22,12.92,8.54C127.05,53.86,125.09,63,121.7,72.71Z"/><path class="cls-3" d="M81.13,34.29C84,45.36,79.3,55.69,70.69,58c-5,1.33-10,1.07-13.89-.83A19.68,19.68,0,0,1,64.43,51a27.38,27.38,0,0,0,14-13.09A30.63,30.63,0,0,1,81.13,34.29Z"/><path class="cls-4" d="M119.78,121.06c-5.62-.07-10.11-5.07-10-11.12S114.6,99,120.13,99.15s10.06,5.17,10,11.21S125.47,121.13,119.78,121.06Z"/><path class="cls-4" d="M84.54,137.83c-6.65-.67-12-4.86-16.93-9.89a2.68,2.68,0,0,1-.15-3.5,1.79,1.79,0,0,1,2.86-.48c1.33,1.06,2.56,2.33,3.88,3.4,8.54,6.91,15.44,6.44,23.32-1.54a5.82,5.82,0,0,0,.46-.53c1.15-1.5,2.45-2.4,3.79-.52,1.2,1.69.35,3.18-.77,4.37A27,27,0,0,1,84.54,137.83Z"/><path class="cls-4" d="M53.61,100.24c5.61.29,10,5.46,9.68,11.51s-5.12,10.79-10.57,10.45-9.8-5.31-9.7-11.15C43.12,104.87,48,100,53.61,100.24Z"/><path class="cls-5" d="M34.35,127.13c-3.5,0-6.33-2.34-6.22-5.15.12-2.65,2.86-4.78,6.19-4.82s6.41,2.29,6.42,5S37.87,127.12,34.35,127.13Z"/><path class="cls-5" d="M136.24,127.36c-3.54,0-6.51-2.33-6.39-5s3-4.63,6.32-4.69c3.67-.06,6.41,2,6.43,4.8S139.93,127.37,136.24,127.36Z"/></svg>

package/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+	"name": "Bunext",
+	"short_name": "Bunext",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#fbf0df",
+	"background_color": "#2d2b2a",
+	"display": "standalone"
+}

package/src/actions/placeholder.ts

@@ -0,0 +1,30 @@
+'use server';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import sharp from 'sharp';
+function bufferToBase64(buffer: Buffer): string {
+    return `data:image/png;base64,${buffer.toString('base64')}`;
+}
+async function getFileBufferLocal(src: string) {
+    const realsrc = path.join(process.cwd(), 'public', src);
+    return fs.readFile(realsrc);
+}
+async function getFileBufferRemote(url: string) {
+    const response = await fetch(url);
+    return Buffer.from(await response.arrayBuffer());
+}
+function getFileBuffer(src: string) {
+    const isRemote = src.startsWith('http');
+    return isRemote ? getFileBufferRemote(src) : getFileBufferLocal(src);
+}
+export async function getPlaceholderImage(src: string) {
+    try {
+        const originalBuffer = await (src.startsWith('http')
+            ? getFileBuffer(src)
+            : getFileBufferLocal(src));
+        const resizedBuffer = await sharp(originalBuffer).resize(20).toBuffer();
+        return bufferToBase64(resizedBuffer);
+    } catch {
+        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOsa2yqBwAFCAICLICSyQAAAABJRU5ErkJggg==';
+    }
+}

package/src/actions/sampleAction.ts

@@ -0,0 +1,39 @@
+'use server'
+// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+
+export async function createSampleItem(formData: FormData) {
+  try {
+    const rawFormData = {
+      title: formData.get('title'),
+      description: formData.get('description'),
+    }
+
+    // Sample validation
+    if (!rawFormData.title || !rawFormData.description) {
+      throw new Error('Title and description are required')
+    }
+
+    // Here you would typically:
+    // 1. Validate the data
+    // 2. Insert into database
+    // 3. Handle any errors
+
+    // Sample success path
+    revalidatePath('/items') // Revalidate the items list
+    redirect('/items') // Redirect to items page
+  } catch (error) {
+    // Handle errors appropriately
+    if (error instanceof Error) {
+      return {
+        success: false,
+        error: error.message,
+      }
+    }
+    return {
+      success: false,
+      error: 'Something went wrong',
+    }
+  }
+}

package/src/app/(index)/intr/TestCard.tsx

@@ -0,0 +1,31 @@
+'use client'
+import { useIntersection } from '@/hooks/use-intersection'
+import { cn } from '@/lib/utils'
+
+type TTestCard = {
+  className?: string
+  index: number
+}
+
+export function TestCard({ className, index }: TTestCard) {
+  const { ref, isInView } = useIntersection({ threshold: 0.2, once: true })
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'w-full max-w-md rounded-lg bg-muted/45 p-6 shadow-lg transition-opacity duration-500',
+        isInView
+          ? 'motion-scale-in-[0.41] motion-translate-x-in-[2%] motion-translate-y-in-[111%] motion-blur-in-[60px] motion-delay-75'
+          : 'opacity-0',
+        className
+      )}
+    >
+      <h2 className="mb-4 text-2xl font-semibold">Card {index + 1}</h2>
+      <p className="text-muted-foreground">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+        tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam.
+      </p>
+    </div>
+  )
+}

package/src/app/(index)/intr/page.tsx

@@ -0,0 +1,17 @@
+import { TestCard } from './TestCard'
+
+export default function Page() {
+  // Simulate a production error
+
+  return (
+    <main className="container mx-auto">
+      <div className="flex flex-col items-center gap-8 py-12">
+        <h1 className="text-4xl font-bold">Scroll Intersection Example</h1>
+
+        {Array.from({ length: 20 }).map((_, i) => (
+          <TestCard key={i} index={i} />
+        ))}
+      </div>
+    </main>
+  )
+}