Source Code: main.ts

← Back to Home
import hljs from "highlight.js";

// Determine if running on Deno Deploy
const isDeployed = Deno.env.get("DENO_DEPLOYMENT_ID") !== undefined;

const SHARED_STYLES = `
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
a { color: #0969da; text-decoration: none; }
a:hover { color: #da4646; text-decoration: underline; }
code.command { background: #eeeeee; color: #da4646; padding: 0.2rem 0.4rem; }
`;

const listenHost = isDeployed ? "0.0.0.0" : "127.0.0.1";
let requestCount = 0;
Deno.serve({ hostname: listenHost, port: 8000 }, async (req) => {
    requestCount++;
    const url = new URL(req.url);
    const userAgent = req.headers.get("user-agent") || "unknown";
    const showAllParam = url.searchParams.get("show") === "all";
    const timestamp = new Date().toISOString();

    // Log every request
    console.log(
        `[${timestamp}] ${req.method} ${url.pathname} - User-Agent: ${userAgent}`,
    );

    // Simple routing
    if (url.pathname === "/") {
        console.log("Serving home page");

        // list environment variables in local dev or if ?show=all is in the URL
        const listEnvVars = isDeployed || showAllParam;
        const envVars = listEnvVars ? Deno.env.toObject() : { "ALL_VARIABLES": "Hidden" };
        const envMessage = isDeployed
            ? "Production: showing all variables"
            : showAllParam
                ? "Local with override: showing all variables"
                : "Local: showing DENO_* variables only";

        // anonymize environment variables with "TOKEN" in the name
        const filtered = ["TOKEN", "PASSWORD", "PASS", "SECRET", "KEY"];
        for (const key of Object.keys(envVars)) {
            if (filtered.some(word => key.toUpperCase().includes(word))) {
                envVars[key] = "*".repeat(20);
            }
        }

        // build table rows
        const tableRows = Object.entries(envVars)
            .filter(([key]) => isDeployed || showAllParam || key.startsWith("DENO_")) // in dev, show only DENO_* variables
            .sort(([a], [b]) => a.localeCompare(b))
            .map(([key, value]) =>
                `<tr><td>${key}</td><td>${value}</td></tr>`
            ).join("\n            ");

        return new Response(
            `
      <html>
        <head>
          <title>My Deploy App</title>
          <style>
            ${SHARED_STYLES}
            table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
            th, td { padding: 0.5rem; text-align: left; border: 1px solid #ddd; }
            th { background: #f5f5f5; }
          </style>
        </head>
        <body>
          <h1>Welcome to My Deploy App!</h1>
          <p>This app was deployed using the <code class="command">deno deploy</code> command.</p>
          <nav>
            <a href="/source">Source code</a> |
            <a href="/about">About</a> |
            <a href="/api/status">API Status</a> |
            <a href="/api/error">Test Error</a>
          </nav>

          <h2>Environment Variables</h2>
          <p><em>${envMessage}</em></p>

          <table>
            <thead>
              <tr>
                <th>Variable</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
            ${tableRows || '<tr><td colspan="2">No environment variables found</td></tr>'}
            </tbody>
          </table>
        </body>
      </html>
    `,
            {
                headers: { "content-type": "text/html" },
            },
        );
    }

    if (url.pathname === "/about") {
        console.log("Serving about page");
        return new Response(
            `
      <html>
        <head>
          <title>About - My Deploy App</title>
          <style>
            ${SHARED_STYLES}
          </style>
        </head>
        <body>
          <h1>About This App</h1>
          <p>This is a simple demonstration of deploying with the <code class="command">deno deploy</code> CLI.</p>
          <p>Check the logs to see request information!</p>
          <a href="/">← Back to Home</a>
        </body>
      </html>
    `,
            {
                headers: { "content-type": "text/html" },
            },
        );
    }

    if (url.pathname === "/api/status") {
        const responseData = {
            status: "ok",
            timestamp: new Date().toISOString(),
            message: "API is running successfully",
            requestCount: requestCount + 1, // Simulate request counter
        };

        console.log("API status check - all systems operational");
        console.log(`Response data:`, responseData);

        return Response.json(responseData);
    }

    if (url.pathname === "/api/error") {
        // This endpoint demonstrates error logging
        console.error("Error endpoint accessed - demonstrating error logging");
        console.warn("This is a warning message that will appear in logs");

        return Response.json({
            error: "This is a test error for demonstration",
            timestamp: new Date().toISOString(),
            tip: "Check the logs with: deno deploy logs",
        }, { status: 500 });
    }

    /*
Dark Themes:
  atom-one-dark.min.css (Popular, widely used)
  github-dark.min.css (GitHub's dark theme)
  monokai.min.css (Classic vibrant colors)
  dracula.min.css (Popular dark theme with high contrast)
  nord.min.css (Cool, arctic blue palette)

Light Themes:
  github.min.css (GitHub's light theme)
  atom-one-light.min.css
  vs.min.css (Visual Studio style)
    */
    if (url.pathname === "/source") {
        const styleName = "atom-one-dark.min.css";
        console.log("Serving source code");
        const source = await Deno.readTextFile("./main.ts");
        const highlighted = hljs.highlight(source, { language: 'typescript' }).value;
        return new Response(
            `
      <html>
        <head>
          <title>Source Code - My Deploy App</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/${styleName}">
          <style>
            ${SHARED_STYLES}
            pre { margin: 1rem 0; overflow-x: auto; border: 1px solid #ddd; }
          </style>
        </head>
        <body>
          <h1>Source Code: main.ts</h1>
          <a href="/">← Back to Home</a>
          <pre><code class="language-typescript hljs">${highlighted}</code></pre>
        </body>
      </html>
    `,
            {
                headers: { "content-type": "text/html" },
            },
        );
    }

    // 404 for all other routes
    console.warn(`404 - Route not found: ${url.pathname}`);
    return new Response("Not Found", { status: 404 });
});