deploy.sh 2.0.0 → 3.0.0

package/app/routes/home.tsx

@@ -0,0 +1,134 @@
+import { Link } from 'react-router';
+
+export default function Component() {
+  return (
+    <main className="max-w-7xl mx-auto px-6">
+      <section className="py-20 max-w-2xl">
+        <p className="text-sm font-medium text-accent mb-4">Self-hosted deployment platform</p>
+        <h1 className="text-4xl font-bold tracking-tight leading-tight mb-5">
+          Deploy from your own server.
+          <br />
+          <span className="text-text-secondary">No cloud provider needed.</span>
+        </h1>
+        <p className="text-text-secondary leading-relaxed mb-8">
+          deploy.sh turns any machine into a deployment platform. Push your code, and it handles
+          building, containerization, and routing. Node.js apps, Docker containers, static
+          sites&mdash;all managed through a single dashboard.
+        </p>
+        <div className="flex gap-3">
+          <Link to="/docs" className="btn btn-primary">
+            Read the docs
+          </Link>
+          <Link to="/dashboard" className="btn">
+            Open dashboard
+          </Link>
+        </div>
+      </section>
+
+      <section className="border-t border-border py-16">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-border rounded-xl overflow-hidden border border-border">
+          <div className="bg-bg-surface p-6">
+            <div className="text-xs font-mono text-accent mb-3">01</div>
+            <h3 className="text-sm font-semibold mb-2">Push your code</h3>
+            <p className="text-sm text-text-secondary leading-relaxed">
+              Bundle your project and upload it. deploy.sh auto-detects whether it&apos;s a Node.js
+              app, Docker container, or static site.
+            </p>
+          </div>
+          <div className="bg-bg-surface p-6">
+            <div className="text-xs font-mono text-accent mb-3">02</div>
+            <h3 className="text-sm font-semibold mb-2">Automatic builds</h3>
+            <p className="text-sm text-text-secondary leading-relaxed">
+              A Dockerfile is generated if needed, the image is built, and a container is started
+              with an allocated port.
+            </p>
+          </div>
+          <div className="bg-bg-surface p-6">
+            <div className="text-xs font-mono text-accent mb-3">03</div>
+            <h3 className="text-sm font-semibold mb-2">Manage everything</h3>
+            <p className="text-sm text-text-secondary leading-relaxed">
+              View logs, monitor status, scale, or tear down deployments from the dashboard or CLI.
+              Your server, your rules.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-t border-border py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <div>
+            <h2 className="text-lg font-semibold mb-4">Why self-host?</h2>
+            <ul className="space-y-3">
+              <li className="flex gap-3 text-sm text-text-secondary">
+                <span className="text-accent shrink-0 mt-0.5">&#10003;</span>
+                <span>
+                  <strong className="text-text">No vendor lock-in.</strong> Run on any Linux
+                  machine, old laptop, Raspberry Pi, or rack server.
+                </span>
+              </li>
+              <li className="flex gap-3 text-sm text-text-secondary">
+                <span className="text-accent shrink-0 mt-0.5">&#10003;</span>
+                <span>
+                  <strong className="text-text">No monthly bills.</strong> Use hardware you already
+                  own. No per-seat pricing, no compute charges.
+                </span>
+              </li>
+              <li className="flex gap-3 text-sm text-text-secondary">
+                <span className="text-accent shrink-0 mt-0.5">&#10003;</span>
+                <span>
+                  <strong className="text-text">Full control.</strong> Your data stays on your
+                  machine. Inspect and modify the platform itself.
+                </span>
+              </li>
+              <li className="flex gap-3 text-sm text-text-secondary">
+                <span className="text-accent shrink-0 mt-0.5">&#10003;</span>
+                <span>
+                  <strong className="text-text">Open source.</strong> MIT licensed. Read the code,
+                  contribute, fork it.
+                </span>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold mb-4">Quick start</h2>
+            <div className="rounded-xl border border-border bg-bg-surface overflow-hidden">
+              <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border">
+                <div className="w-2.5 h-2.5 rounded-full bg-text-tertiary/30" />
+                <div className="w-2.5 h-2.5 rounded-full bg-text-tertiary/30" />
+                <div className="w-2.5 h-2.5 rounded-full bg-text-tertiary/30" />
+                <span className="text-xs text-text-tertiary ml-2 font-mono">terminal</span>
+              </div>
+              <pre className="p-4 text-sm font-mono leading-relaxed text-text-secondary overflow-x-auto">
+                <code>
+                  <span className="text-text-tertiary">$</span>{' '}
+                  <span className="text-text">git clone</span>{' '}
+                  <span className="text-accent">https://github.com/gabrielcsapo/deploy.sh.git</span>
+                  {'\n'}
+                  <span className="text-text-tertiary">$</span>{' '}
+                  <span className="text-text">cd</span> deploy.sh{'\n'}
+                  <span className="text-text-tertiary">$</span>{' '}
+                  <span className="text-text">npm install</span>
+                  {'\n'}
+                  <span className="text-text-tertiary">$</span>{' '}
+                  <span className="text-text">npm run server</span>
+                  {'\n'}
+                  <span className="text-success">&#10003;</span>{' '}
+                  <span className="text-text-tertiary">API running at http://localhost:5050</span>
+                  {'\n'}
+                  {'\n'}
+                  <span className="text-text-tertiary">$</span>{' '}
+                  <span className="text-text">npm run dev</span>
+                  {'\n'}
+                  <span className="text-success">&#10003;</span>{' '}
+                  <span className="text-text-tertiary">
+                    Dashboard running at http://localhost:5173
+                  </span>
+                </code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

package/app/routes/root.client.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useNavigation, useRouteError } from 'react-router';
+
+export function GlobalNavigationLoadingBar() {
+  const navigation = useNavigation();
+
+  if (navigation.state === 'idle') return null;
+
+  return (
+    <div className="h-0.5 w-full bg-bg-surface overflow-hidden fixed top-0 left-0 z-50">
+      <div className="animate-progress origin-[0%_50%] w-full h-full bg-accent" />
+    </div>
+  );
+}
+
+export function DumpError() {
+  const error = useRouteError();
+  const message =
+    error instanceof Error ? (
+      <div>
+        <pre className="text-sm bg-bg border border-border rounded-lg p-4 overflow-auto">
+          {JSON.stringify(
+            {
+              ...error,
+              name: error.name,
+              message: error.message,
+            },
+            null,
+            2,
+          )}
+        </pre>
+        {error.stack && (
+          <pre className="text-xs text-text-tertiary mt-4 overflow-auto">{error.stack}</pre>
+        )}
+      </div>
+    ) : (
+      <div className="text-sm text-text-secondary">Unknown Error</div>
+    );
+  return (
+    <div className="max-w-7xl mx-auto px-6 py-16">
+      <h1 className="text-lg font-semibold text-danger mb-4">Something went wrong</h1>
+      {message}
+    </div>
+  );
+}

package/app/routes.ts

@@ -0,0 +1,21 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/home.tsx'),
+  route('docs', 'routes/docs/layout.tsx', [
+    index('routes/docs/index.tsx'),
+    route('deploying', 'routes/docs/deploying.tsx'),
+    route('cli', 'routes/docs/cli.tsx'),
+    route('architecture', 'routes/docs/architecture.tsx'),
+  ]),
+  route('dashboard', 'routes/dashboard/layout.tsx', [
+    index('routes/dashboard/index.tsx'),
+    route(':name', 'routes/dashboard/detail/layout.tsx', [
+      index('routes/dashboard/detail/overview.tsx'),
+      route('logs', 'routes/dashboard/detail/logs.tsx'),
+      route('requests', 'routes/dashboard/detail/requests.tsx'),
+      route('resources', 'routes/dashboard/detail/resources.tsx'),
+      route('history', 'routes/dashboard/detail/history.tsx'),
+    ]),
+  ]),
+] satisfies RouteConfig;

package/app/styles.css

@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@import './theme.css';
+
+@utility vt-name {
+  view-transition-name: var(--vt-name);
+}
+
+@utility no-vt {
+  view-transition-name: none;
+}
+
+@view-transition {
+  navigation: auto;
+}

package/app/theme.css

@@ -0,0 +1,134 @@
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono:
+    'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  --color-bg: hsl(250 24% 9%);
+  --color-bg-surface: hsl(250 21% 11%);
+  --color-bg-hover: hsl(250 20% 14%);
+  --color-bg-active: hsl(250 18% 17%);
+
+  --color-border: hsl(250 15% 20%);
+  --color-border-hover: hsl(250 15% 28%);
+
+  --color-text: hsl(0 0% 98%);
+  --color-text-secondary: hsl(250 10% 60%);
+  --color-text-tertiary: hsl(250 10% 42%);
+
+  --color-accent: hsl(262 83% 68%);
+  --color-accent-hover: hsl(262 83% 74%);
+
+  --color-success: hsl(142 60% 55%);
+  --color-warning: hsl(38 92% 60%);
+  --color-danger: hsl(0 72% 60%);
+
+  --animate-progress: progress 1s infinite linear;
+
+  @keyframes progress {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    40% {
+      transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+}
+
+@layer base {
+  html {
+    @apply bg-bg text-text antialiased;
+  }
+
+  body {
+    @apply min-h-screen;
+  }
+
+  ::selection {
+    @apply bg-accent/30;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors;
+    @apply bg-bg-surface border border-border text-text;
+    @apply hover:bg-bg-hover hover:border-border-hover;
+    @apply disabled:opacity-50 disabled:pointer-events-none;
+  }
+
+  .btn-primary {
+    @apply bg-accent text-white border-accent;
+    @apply hover:bg-accent-hover hover:border-accent-hover;
+  }
+
+  .btn-danger {
+    @apply bg-danger/10 text-danger border-danger/30;
+    @apply hover:bg-danger/20;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .card {
+    @apply rounded-xl border border-border bg-bg-surface;
+  }
+
+  .input {
+    @apply w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-text placeholder:text-text-tertiary;
+    @apply focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/50;
+    @apply disabled:opacity-50;
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+  }
+
+  .badge-success {
+    @apply bg-success/10 text-success;
+  }
+
+  .badge-warning {
+    @apply bg-warning/10 text-warning;
+  }
+
+  .badge-danger {
+    @apply bg-danger/10 text-danger;
+  }
+}
+
+/* Dark theme overrides for @tailwindcss/typography prose */
+.prose {
+  --tw-prose-body: var(--color-text-secondary);
+  --tw-prose-headings: var(--color-text);
+  --tw-prose-links: var(--color-accent);
+  --tw-prose-bold: var(--color-text);
+  --tw-prose-counters: var(--color-text-tertiary);
+  --tw-prose-bullets: var(--color-text-tertiary);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-text-secondary);
+  --tw-prose-code: var(--color-text);
+  --tw-prose-pre-code: var(--color-text-secondary);
+  --tw-prose-pre-bg: var(--color-bg);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+
+  :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    text-decoration: none;
+  }
+  :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {
+    color: var(--color-accent-hover);
+  }
+  :where(code):not(:where(pre *, [class~='not-prose'], [class~='not-prose'] *)) {
+    @apply rounded bg-bg-hover px-1.5 py-0.5 font-mono text-sm;
+  }
+  :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    @apply rounded-lg border border-border;
+  }
+  :where(th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    color: var(--color-text);
+  }
+}