bsmnt 0.1.2 → 0.2.0

package/packages/create-basement-app/templates/webgl/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +0,0 @@
-## Summary
-
-<!-- Brief description of what this PR does -->
-
-## Changes
-
-- 
-
-## Checklist
-
-- [ ] `bun lint` passes
-- [ ] Tested locally in dev mode
-- [ ] No breaking changes (or documented in summary)
-

package/packages/create-basement-app/templates/webgl/.github/workflows/lighthouse-to-slack.yml

@@ -1,136 +0,0 @@
-# Lighthouse Performance Reports
-#
-# Runs Lighthouse on Vercel deployments and posts results as commit comments.
-# Our GitHub → Slack integration forwards these to Slack automatically.
-#
-# Required GitHub Secrets:
-#   VERCEL_TOKEN - Vercel API token (Settings → Tokens)
-
-name: Lighthouse
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    types: [opened, synchronize]
-    branches: [main]
-    paths:
-      # Only runs when relevant files change
-      - 'app/**'
-      - 'components/**'
-      - 'lib/**'
-      - 'public/**'
-      - 'package.json'
-      - 'package-lock.json'
-      - 'next.config.**'
-
-permissions:
-  contents: write
-  pull-requests: write
-  actions: read
-
-jobs:
-  lighthouse:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Discover Vercel Project
-        id: vercel_info
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        run: |
-          project_name="${GITHUB_REPOSITORY##*/}"
-          echo "Looking for Vercel project: $project_name"
-
-          # Get team ID for basement.studio
-          teams=$(curl -s -H "Authorization: Bearer $VERCEL_TOKEN" "https://api.vercel.com/v2/teams")
-          team_id=$(echo "$teams" | jq -r '.teams[] | select(.slug=="basement") | .id')
-          echo "Team ID: $team_id"
-
-          # Get project ID by matching repo name
-          projects=$(curl -s -H "Authorization: Bearer $VERCEL_TOKEN" "https://api.vercel.com/v9/projects?teamId=$team_id")
-          project_id=$(echo "$projects" | jq -r ".projects[] | select(.name==\"$project_name\") | .id")
-          echo "Project ID: $project_id"
-
-          echo "team_id=$team_id" >> $GITHUB_OUTPUT
-          echo "project_id=$project_id" >> $GITHUB_OUTPUT
-
-      - name: Get Vercel Preview URL
-        id: vercel_url
-        uses: zentered/vercel-preview-url@v1.4.0
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        with:
-          vercel_team_id: ${{ steps.vercel_info.outputs.team_id }}
-          vercel_project_id: ${{ steps.vercel_info.outputs.project_id }}
-
-      - name: Wait for Deployment
-        id: await
-        uses: UnlyEd/github-action-await-vercel@v2.0.0
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        with:
-          deployment-url: ${{ steps.vercel_url.outputs.preview_url }}
-          timeout: 300
-          poll-interval: 10
-        continue-on-error: true
-
-      - name: Run Lighthouse
-        if: steps.await.outcome == 'success'
-        id: lighthouse
-        uses: treosh/lighthouse-ci-action@v12
-        env:
-          LHCI_BUILD_CONTEXT__CURRENT_HASH: ${{ github.sha }}
-        with:
-          urls: https://${{ steps.vercel_url.outputs.preview_url }}
-          uploadArtifacts: true
-          temporaryPublicStorage: true
-
-      - name: Format Results
-        id: format
-        uses: actions/github-script@v8
-        env:
-          DEPLOYMENT_FAILED: ${{ steps.await.outcome != 'success' }}
-          PREVIEW_URL: ${{ steps.vercel_url.outputs.preview_url }}
-          MANIFEST: ${{ steps.lighthouse.outputs.manifest }}
-          LINKS: ${{ steps.lighthouse.outputs.links }}
-        with:
-          script: |
-            if (process.env.DEPLOYMENT_FAILED === 'true') {
-              core.setOutput('comment', '⚠️ Vercel deployment failed or timed out. Lighthouse audit skipped.');
-              return;
-            }
-
-            try {
-              const manifest = JSON.parse(process.env.MANIFEST);
-              const links = JSON.parse(process.env.LINKS);
-              const previewUrl = process.env.PREVIEW_URL;
-
-              const scores = manifest[0].summary;
-              const reportUrl = Object.values(links)[0];
-
-              const emoji = (score) => score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';
-              const format = (score) => Math.round(score * 100);
-
-              const comment = [
-                `⚡️ [Lighthouse report](${reportUrl}) for this commit:`,
-                '',
-                `${emoji(scores.performance)} Performance: ${format(scores.performance)}`,
-                `${emoji(scores.accessibility)} Accessibility: ${format(scores.accessibility)}`,
-                `${emoji(scores['best-practices'])} Best Practices: ${format(scores['best-practices'])}`,
-                `${emoji(scores.seo)} SEO: ${format(scores.seo)}`,
-                '',
-                `*Tested on [${previewUrl}](https://${previewUrl})*`
-              ].join('\n');
-
-              core.setOutput('comment', comment);
-            } catch (error) {
-              console.error('Error:', error);
-              core.setOutput('comment', '⚠️ Failed to generate Lighthouse report. Check workflow logs.');
-            }
-
-      - name: Post Commit Comment
-        uses: peter-evans/commit-comment@v4
-        with:
-          body: ${{ steps.format.outputs.comment }}

package/packages/create-basement-app/templates/webgl/.vscode/extensions.json

@@ -1,20 +0,0 @@
-{
-  "recommendations": [
-    // Formatting & Linting
-    "biomejs.biome",
-
-    // CSS & Styling
-    "bradlc.vscode-tailwindcss",
-    "csstools.postcss",
-
-    // GraphQL (Shopify, etc.)
-    "graphql.vscode-graphql-syntax",
-
-    // Sanity CMS (GROQ syntax + validation)
-    "sanity-io.vscode-sanity",
-
-    // DX Enhancements
-    "yoavbls.pretty-ts-errors",
-    "waderyan.gitblame"
-  ]
-}

package/packages/create-basement-app/templates/webgl/.vscode/settings.json

@@ -1,105 +0,0 @@
-{
-  // Language-specific formatters (explicit per-language ensures no fallback to other formatters)
-  "[css]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[postcss]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "colorize.languages": [
-    "javascript",
-    "typescript",
-    "css",
-    "scss",
-    "less",
-    "html",
-    "json",
-    "yaml",
-    "markdown",
-    "glsl"
-  ],
-  "css.lint.unknownAtRules": "ignore",
-
-  // CSS (Tailwind v4)
-  "css.lint.validProperties": ["user-drag"],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.biome": "always",
-    "source.organizeImports.biome": "always"
-  },
-  "editor.defaultFormatter": "biomejs.biome",
-
-  // Formatting
-  "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "file",
-
-  // File associations
-  "files.associations": {
-    "*.css": "css",
-    "*.json": "jsonc"
-  },
-
-  // General
-  "files.eol": "\n",
-  // "typescript.experimental.useTsgo": true, // Disabled: tsgo doesn't support Next.js plugin
-  "javascript.suggest.autoImports": true,
-  // Disable Prettier to prevent silent formatter conflicts
-  "prettier.enable": false,
-
-  // Search exclusions (performance)
-  "search.exclude": {
-    "**/.next": true,
-    "**/.vercel": true,
-    "**/bun.lock": true,
-    "**/lib/integrations/sanity/sanity.types.ts": true,
-    "**/node_modules": true
-  },
-  "tailwindCSS.classAttributes": [
-    "class",
-    "className",
-    ".*ClassName",
-    ".*Styles"
-  ],
-  "tailwindCSS.classFunctions": ["cn", "cva", "twMerge", "cx"],
-  "tailwindCSS.experimental.classRegex": [
-    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ],
-  "tailwindCSS.experimental.configFile": "./lib/styles/css/tailwind.css",
-  "tailwindCSS.includeLanguages": {
-    "typescriptreact": "html"
-  },
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-
-  // TypeScript
-  "typescript.suggest.autoImports": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-
-  // Editor labels (fixed for .tsx files)
-  "workbench.editor.customLabels.patterns": {
-    "**/app/**/layout.tsx": "${dirname(1)}/${dirname} <layout>",
-    "**/app/**/page.tsx": "${dirname(1)}/${dirname} <page>",
-    "**/app/api/**/route.ts": "${dirname(1)}/${dirname} <route>",
-    "**/components/**/index.tsx": "${dirname} <component>"
-  },
-  "workbench.editorAssociations": {
-    "*.svg": "default"
-  }
-}

package/packages/create-basement-app/templates/webgl/app/layout.tsx

@@ -1,104 +0,0 @@
-import type { Metadata, Viewport } from "next"
-import { Geist } from "next/font/google"
-import { type PropsWithChildren, Suspense } from "react"
-import { Link } from "@/components/ui/link"
-import { themes } from "@/lib/styles/colors"
-import { fontsVariable } from "@/lib/styles/fonts"
-import AppData from "@/package.json"
-import "@/lib/styles/css/index.css"
-import { cn } from "@/lib/styles/cn"
-
-const APP_NAME = AppData.name
-const APP_DEFAULT_TITLE = "Basement Starter"
-const APP_TITLE_TEMPLATE = "%s - Basement Starter"
-const APP_DESCRIPTION = AppData.description
-const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
-
-const geist = Geist({
-  subsets: ["latin"],
-})
-
-export const metadata: Metadata = {
-  alternates: {
-    canonical: "/",
-    languages: {
-      "en-US": "/en-US",
-    },
-  },
-  appleWebApp: {
-    capable: true,
-    statusBarStyle: "default",
-    title: APP_DEFAULT_TITLE,
-  },
-  applicationName: APP_NAME,
-  authors: [{ name: "basement.studio", url: "https://basement.studio" }],
-  description: APP_DESCRIPTION,
-  formatDetection: { telephone: false },
-  metadataBase: new URL(APP_BASE_URL),
-  openGraph: {
-    description: APP_DESCRIPTION,
-    images: [
-      {
-        alt: APP_DEFAULT_TITLE,
-        height: 630,
-        url: "/opengraph-image.jpg",
-        width: 1200,
-      },
-    ],
-    locale: "en_US",
-    siteName: APP_NAME,
-    title: {
-      default: APP_DEFAULT_TITLE,
-      template: APP_TITLE_TEMPLATE,
-    },
-    type: "website",
-    url: APP_BASE_URL,
-  },
-  other: {
-    "fb:app_id": process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || "",
-  },
-  title: {
-    default: APP_DEFAULT_TITLE,
-    template: APP_TITLE_TEMPLATE,
-  },
-  twitter: {
-    card: "summary_large_image",
-    description: APP_DESCRIPTION,
-    title: {
-      default: APP_DEFAULT_TITLE,
-      template: APP_TITLE_TEMPLATE,
-    },
-  },
-}
-
-export const viewport: Viewport = {
-  colorScheme: "normal",
-  themeColor: themes.dark.primary,
-}
-
-export default async function Layout({ children }: PropsWithChildren) {
-  return (
-    <html
-      lang="en"
-      dir="ltr"
-      className={cn(fontsVariable, geist.className)}
-      // NOTE: This is due to the data-theme attribute being set which causes hydration errors
-      suppressHydrationWarning
-    >
-      <body>
-        {/* Skip link for keyboard navigation accessibility */}
-        <Suspense fallback={null}>
-          <Link
-            href="#main-content"
-            className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-9999 focus:rounded focus:bg-black focus:px-4 focus:py-2 focus:text-white focus:outline-none focus:ring-2 focus:ring-white"
-          >
-            Skip to main content
-          </Link>
-        </Suspense>
-
-        {children}
-      </body>
-    </html>
-  )
-}

package/packages/create-basement-app/templates/webgl/app/robots.ts

@@ -1,15 +0,0 @@
-import type { MetadataRoute } from "next"
-
-const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
-
-export default function robots(): MetadataRoute.Robots {
-  return {
-    rules: {
-      userAgent: "*",
-      allow: "/",
-      disallow: [],
-    },
-    sitemap: `${APP_BASE_URL}/sitemap.xml`,
-  }
-}

package/packages/create-basement-app/templates/webgl/app/sitemap.ts

@@ -1,16 +0,0 @@
-import type { MetadataRoute } from "next"
-
-const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
-
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseRoutes: MetadataRoute.Sitemap = [
-    {
-      url: APP_BASE_URL,
-      lastModified: new Date(),
-      changeFrequency: "daily",
-      priority: 1,
-    },
-  ]
-  return baseRoutes
-}

package/packages/create-basement-app/templates/webgl/components/layout/footer/index.tsx

@@ -1,27 +0,0 @@
-import Logo from "@/components/basement.svg"
-import { Link } from "@/components/ui/link"
-
-export function Footer() {
-  return (
-    <footer className="flex flex-col items-center justify-between p-safe font-mono uppercase 2xl:flex-row 2xl:items-end">
-      <Link href="https://basement.studio/" className="link">
-        <Logo className="w-148 text-secondary" />
-      </Link>
-      <div>
-        <Link
-          href="https://github.com/basementstudio/next-starter/generate"
-          className="link"
-        >
-          use this template
-        </Link>
-        {" / "}
-        <Link
-          href="https://github.com/basementstudio/next-starter"
-          className="link"
-        >
-          github
-        </Link>
-      </div>
-    </footer>
-  )
-}

package/packages/create-basement-app/templates/webgl/components/layout/header/index.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-export function Header() {
-  return (
-    <nav className="sticky top-0 z-2 flex flex-col font-mono uppercase">
-      <div className="inline-flex px-safe py-safe">
-        <h1>Basement Next Starter</h1>
-      </div>
-    </nav>
-  )
-}

package/packages/create-basement-app/templates/webgl/components/layout/theme/index.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-import { createContext, useContext, useEffect, useState } from "react"
-import type { Themes } from "@/lib/styles/colors"
-import { type ThemeName, themes } from "@/lib/styles/config"
-
-export const ThemeContext = createContext<{
-  name: ThemeName
-  theme: Themes[ThemeName]
-  setThemeName: (theme: ThemeName) => void
-}>({
-  name: "light",
-  theme: themes.light,
-  setThemeName: () => {
-    void 0
-  },
-})
-
-export function useTheme() {
-  return useContext(ThemeContext)
-}
-
-export function Theme({
-  children,
-  theme,
-  global,
-}: {
-  children: React.ReactNode
-  theme: ThemeName
-  global?: boolean
-}) {
-  const pathname = usePathname()
-
-  const [currentTheme, setCurrentTheme] = useState(theme)
-
-  useEffect(() => {
-    setCurrentTheme(theme)
-  }, [theme])
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to trigger on path change
-  useEffect(() => {
-    if (global) {
-      document.documentElement.setAttribute("data-theme", currentTheme)
-    }
-  }, [pathname, currentTheme, global])
-
-  return (
-    <>
-      {global && (
-        <script>
-          {`document.documentElement.setAttribute('data-theme', '${currentTheme}');`}
-        </script>
-      )}
-      <ThemeContext.Provider
-        value={{
-          name: currentTheme,
-          theme: themes[currentTheme],
-          setThemeName: setCurrentTheme,
-        }}
-      >
-        {children}
-      </ThemeContext.Provider>
-    </>
-  )
-}

package/packages/create-basement-app/templates/webgl/components/layout/wrapper/index.tsx

@@ -1,65 +0,0 @@
-/**
- * Main page wrapper providing theme, smooth scrolling, and WebGL context.
- *
- * Customize the Header and Footer components for your project needs.
- */
-"use client"
-
-import cn from "clsx"
-import { Footer } from "@/components/layout/footer"
-import { Header } from "@/components/layout/header"
-import { Theme } from "@/components/layout/theme"
-import type { ThemeName } from "@/lib/styles/config"
-
-/**
- * Props for the Wrapper component.
- */
-interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Theme to apply ('dark' | 'light'). Defaults to 'dark'. */
-  theme?: ThemeName
-}
-
-/**
- * Main page wrapper component providing theme.
- *
- * This component serves as the root container for pages, automatically handling
- * theme application and layout structure.
- * It includes navigation and footer.
- *
- * @param props - Component props
- * @param props.theme - Color theme to apply to the page
- * @param props.children - Page content
- * @param props.className - Additional CSS classes
- *
- * @example
- * ```tsx
- * // Basic usage with theme
- * export default function Page() {
- *   return (
- *     <Wrapper theme="dark">
- *       <section>My page content</section>
- *     </Wrapper>
- *   )
- * }
- * ```
- */
-export function Wrapper({
-  children,
-  theme = "dark",
-  className,
-  ...props
-}: WrapperProps) {
-  return (
-    <Theme theme={theme} global>
-      <Header />
-      <main
-        id="main-content"
-        className={cn("relative flex grow flex-col", className)}
-        {...props}
-      >
-        {children}
-      </main>
-      <Footer />
-    </Theme>
-  )
-}

package/packages/create-basement-app/templates/webgl/components/ui/README.md

@@ -1,77 +0,0 @@
-# Components
-
-UI components organized by purpose.
-
-```
-components/
-├── ui/        → Primitives (reusable across projects)
-├── layout/    → Site chrome (customize per project)
-└── magic/   → Animation & visual enhancements
-```
-
-## Direct Imports (Recommended)
-
-```tsx
-// UI Components - import directly for better clarity
-import { Image } from '@/components/ui/image'
-import { Link } from '@/components/ui/link'
-
-// Layout Components
-import { Wrapper } from '@/components/layout/wrapper'
-import { Header } from '@/components/layout/header' 
-import { Footer } from '@/components/layout/footer'
-
-// Magic Components
-import { Marquee } from '@/components/magic/marquee'
-```
-
-## UI Components
-
-| Component | Purpose |
-|-----------|---------|
-| `image/` | Optimized images (always use this, never `next/image`) |
-| `link/` | Smart navigation (auto-detects external) |
-
-## Layout Components
-
-| Component | Purpose |
-|-----------|---------|
-| `wrapper/` | Page wrapper (theme, WebGL, Lenis) |
-| `header/` | Site header/navigation |
-| `footer/` | Site footer |
-| `lenis/` | Smooth scrolling |
-
-```tsx
-<Wrapper theme="dark" webgl lenis>
-  <section>Your content</section>
-</Wrapper>
-```
-
-## Effects Components
-
-| Component | Purpose |
-|-----------|---------|
-| `marquee/` | Infinite scrolling text |
-
-## Best Practices
-
-```tsx
-// ✅ Always use custom Image
-import { Image } from '@/components/ui/image'
-<Image src="/photo.jpg" alt="Photo" aspectRatio={16/9} />
-
-// ✅ Always use custom Link
-import { Link } from '@/components/ui/link'
-<Link href="/about">Internal</Link>
-<Link href="https://example.com">External</Link>
-
-// ✅ CSS Modules + Tailwind
-import s from './component.module.css'
-<div className={cn(s.wrapper, 'flex items-center')} />
-```
-
-## Related
-
-- [Image docs](ui/image/README.md)
-- [Real Viewport docs](ui/real-viewport/README.md)
-- [WebGL Components](../lib/webgl/README.md)