@linktr.ee/linkapp 0.0.1 → 0.0.2

package/dev-server/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "linkapp-dev-server",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node server.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-tabs": "^1.1.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.545.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5",
+    "vite": "^6.0.3"
+  }
+}

package/dev-server/preview/Preview.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/ui/tabs'
+import { Portal } from '@radix-ui/react-portal'
+import { cn } from '../lib/utils'
+
+export default function Preview() {
+  const [selectedTab, setSelectedTab] = useState<'classic' | 'featured'>('classic')
+
+  return (
+    <div className={cn("min-h-screen", {
+      "bg-black/50": selectedTab === 'classic',
+      "bg-gray-200": selectedTab === 'featured'
+    })} id="preview">
+      <Tabs value={selectedTab} onValueChange={(value) => setSelectedTab(value as 'classic' | 'featured')}>
+        <Portal>
+          <div className="fixed top-0 left-0 right-0 p-4 flex justify-center bg-background border-b" style={{ zIndex: 1000000 }}>
+            <TabsList>
+              <TabsTrigger value="classic">Classic</TabsTrigger>
+              <TabsTrigger value="featured">Featured</TabsTrigger>
+            </TabsList>
+          </div>
+        </Portal>
+
+        {/* Main Content with Padding for Fixed Tabs */}
+        <div className="pt-20">
+          <TabsContent value="classic" className="m-0">
+            {/* Classic Modal - Always Open */}
+            <Dialog open={true} modal={false}>
+              <DialogContent className="max-w-[512px] max-h-[calc(100%-64px)] overflow-auto">
+                <DialogHeader className='sticky top-0 bg-white px-4'>
+                  <DialogTitle>Classic Layout Preview</DialogTitle>
+                </DialogHeader>
+
+                <div className="mt-4">
+                  <iframe
+                    src="/classic"
+                    className="w-full h-[600px] border-0 rounded-lg"
+                    title="Classic Layout Preview"
+                  />
+                </div>
+              </DialogContent>
+            </Dialog>
+          </TabsContent>
+
+          <TabsContent value="featured" className="m-0 flex justify-center p-8">
+            {/* Featured Iframe - Max Width 524px */}
+            <div className="w-full max-w-[580px] shadow-xl flex flex-col rounded-3xl px-[28px] py-7 items-center bg-gray-100">
+              <div className="w-full max-w-[524px]">
+                <iframe
+                  src="/featured"
+                  className="w-full border-0 rounded-lg"
+                  title="Featured Layout Preview"
+                />
+              </div>
+            </div>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  )
+}

package/dev-server/preview/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import Preview from './Preview'
+import './preview.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) {
+  throw new Error('Root element not found')
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <Preview />
+  </StrictMode>
+)

package/dev-server/preview/preview.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dev-server/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  root: resolve(__dirname),
+  server: {
+    port: 3000,
+    strictPort: true,
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, ".."),
+      "@/components": resolve(__dirname, "components"),
+      "@/lib": resolve(__dirname, "lib"),
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+        classic: resolve(__dirname, "classic.html"),
+        featured: resolve(__dirname, "featured.html"),
+      },
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/linkapp",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Development, build, and deployment tooling for LinkApps",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
     "dist",
     "bin",
     "runtime",
+    "dev-server",
     "linkapp-preview"
   ],
   "exports": {