dashcaddy.net/src/app/docs/catalog/digital-clock/page.tsx

import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import DocsLayout from '@/components/docs/DocsLayout';

export const metadata = {
  title: 'Install Digital Clock — DashCaddy Docs',
  description: 'Install and configure Digital Clock via DashCaddy. Live digital clock with time, date, and day of week',
};

export default function digitalClockDocsPage() {
  return (
    <div className="flex min-h-screen flex-col bg-surface-950 text-surface-50">
      <Navbar />
      <DocsLayout
        title="Install Digital Clock"
        intro="Live digital clock with time, date, and day of week"
      >
<div className="mb-6 flex flex-wrap gap-3 text-xs font-semibold">
          <span className="rounded-full bg-surface-800 px-3 py-1 text-surface-300">Category: Utilities</span>
          <span className="rounded-full px-3 py-1" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Difficulty: Easy</span>
          <span className="rounded-full bg-surface-800 px-3 py-1 text-surface-300">Docker image: <code className="text-brand-400">N/A</code></span>
        </div>

        <h2>What is Digital Clock?</h2>
        <p>Live digital clock with time, date, and day of week</p>
        <p>Digital Clock ships as a self-contained Docker image that DashCaddy provisions with one click. The platform handles the container lifecycle, DNS, reverse proxy, HTTPS certificate, and persistent storage so you can focus on using Digital Clock, not installing it.</p>

        <h2>Prerequisites</h2>
        <ul>
          <li>A running DashCaddy host with the dashboard accessible.</li>
          <li>No special host paths required.</li>
          
          <li>If you want a stable subdomain: Technitium DNS recommended (otherwise DashCaddy will use direct IP access).</li>
        </ul>

        <h2>Install via the DashCaddy dashboard</h2>
        <ol>
          <li>Sign in at <code>https://status.sami</code> (or your host's dashboard URL).</li>
          <li>Open <strong>Apps → Catalog</strong> and select <strong>Digital Clock</strong> from the <em>Utilities</em> category.</li>
          <li>Choose your host (or pick <em>Local</em> if you have one host).</li>
          <li>Fill in any required fields (notably the media library path and any claim token).</li>
          <li>Click <strong>Deploy</strong>. DashCaddy will:
            <ol>
              <li>Pull the <code>N/A</code> image.</li>
              <li>Create persistent volumes for config and data.</li>
              <li>Reserve a host port and wire it through Caddy.</li>
              <li>Issue a Let's Encrypt certificate for <code>digital-clock.&lt;your-domain&gt;</code>.</li>
              <li>Wait for the container health check (<code>/healthz</code>) to pass.</li>
            </ol>
          </li>
          <li>After ~30–60 seconds the dashboard will turn the row <strong>Running</strong> and the URL will become clickable.</li>
        </ol>

        <h2>Install via the REST API</h2>
        <p>If you script deployments or use the MCP / AI Intent Router, install with:</p>
        <pre className="overflow-x-auto rounded-lg bg-surface-900 p-4 text-sm"><code>curl -X POST https://your-dashcaddy-host/api/v1/apps/deploy \\
  -H "Authorization: Bearer $DASHCADDY_API_TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '&#123;
    "template": "digital-clock",
    "host": "local",
    "subdomain": "digital-clock",
    "port": "&#123;&#123;PORT&#125;&#125;",
    
    "labels": &#123; "managed-by": "dashcaddy" &#125;
  &#125;'</code></pre>
        <p>Response returns a deployment ID. Poll <code>GET /api/v1/apps/&#123;id&#125;/status</code> until <code>state === &quot;running&quot;</code>.</p>

        <h2>Install via the AI Intent Router</h2>
        <p>From any chat surface wired to DashCaddy's MCP server, just say:</p>
        <blockquote className="border-l-4 border-brand-500/50 bg-brand-500/5 p-4 rounded-r-lg">
          <p className="text-surface-300">"Deploy Digital Clock on my home host and expose it at <code>digital-clock.sami</code>"</p>
        </blockquote>
        <p>The Intent Router will pick the right template, prompt you for any missing fields, and start the deployment.</p>

        <h2>Post-install: first-run checklist</h2>
        <ol>
          <li>Clock appears in the top bar to the right of the weather widget</li>
          <li>No configuration needed — runs automatically</li>
        </ol>



        <h2>Volumes and persistent data</h2>
        <p>DashCaddy creates these volume mounts:</p>
        <ul>
          
        </ul>
        <p>All paths are absolute host paths; the left side is the container-side mount. Restarting the container never deletes the data; reinstalling the template preserves it unless you explicitly check <em>Wipe data</em> on the deploy form.</p>

        <h2>Environment variables</h2>
        <p>None. The container runs with its upstream defaults.</p>
        <p>Override any of these from the deploy form's <em>Environment</em> panel, or programmatically in the API <code>environment</code> object.</p>

        <h2>Updating</h2>
        <p>DashCaddy's built-in Watchtower integration will pull <code>N/A</code> every 24 hours and restart your container with zero downtime if the image digest changes. To force an update immediately, click <strong>Apps → Digital Clock → Update</strong>.</p>

        <h2>Backups</h2>
        <p>The config volume for Digital Clock is included in DashCaddy's default nightly snapshot. To restore on a fresh host, redeploy the same template and DashCaddy will prompt to restore from the most recent snapshot during install.</p>

        <h2>Troubleshooting</h2>
        <p>Common issues with Digital Clock:</p>
        <ul>
          <li><strong>Container won't start:</strong> check the dashboard's <em>Logs</em> tab. Most startup failures are permission errors on the media/config volume.</li>
          
          
          <li><strong>Slow first scan:</strong> expected for large libraries on first run. Subsequent restarts are fast.</li>
        </ul>
        <p>For layer-by-layer diagnostics, see the <a href="/docs/troubleshooting" className="text-brand-400 underline">Troubleshooting guide</a>.</p>

        <h2>Related services</h2>
        <p>Digital Clock is in the <strong>Utilities</strong> category. Common pairings:</p>
        <ul>
          <li><a href="/docs/catalog" className="text-brand-400 underline">Browse the catalog</a></li>
        </ul>

        <hr className="my-8 border-surface-700" />
        <p className="text-sm text-surface-400">
          Last reviewed against DashCaddy product version in <code>dashcaddy-api/src/docker/app-templates.js</code>.
          Template ID: <code>digital-clock</code>. If anything here looks wrong, edit the file and the change will appear in the next docs rebuild.
        </p>

      </DocsLayout>
      <Footer />
    </div>
  );
}