1f7058f | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

1f7058f — pyrossh 2026-07-14T14:31:01+05:30

Task 3: static pages - layout, home, CV, robots, 404

Files changed (7) hide show

app/404.zig +83 -0
app/_mercss.css +1 -0
app/about.zig +40 -0
app/cv.zig +22 -0
app/index.zig +91 -0
app/layout.zig +124 -0
app/robots.zig +8 -0

app/404.zig ADDED Viewed

@@ -0,0 +1,83 @@
+const std = @import("std");
+const mer = @import("mer");
+const config = @import("config");
+pub fn render(req: mer.Request) mer.Response {
+    var buf: std.Io.Writer.Allocating = .init(req.allocator);
+    const w = &buf.writer;
+    w.writeAll(
+        \\<!DOCTYPE html>
+        \\<html lang="en">
+        \\<head>
+        \\  <meta charset="UTF-8">
+        \\  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        \\  <title>404 —
+    ) catch return mer.notFound();
+    w.writeAll(config.site_title) catch return mer.notFound();
+    w.writeAll(
+        \\</title>
+        \\  <link rel="preconnect" href="https://fonts.googleapis.com">
+        \\  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        \\  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
+        \\  <noscript><link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
+        \\  <style>
+        \\    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        \\    :root { --bg:#f0ebe3; --bg2:#e8e2d9; --bg3:#ddd5cc; --text:#252530; --muted:#8a7f78; --border:#d5cdc4; --red:#e8251f; }
+        \\    body { background:var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
+        \\    a { color:inherit; text-decoration:none; }
+        \\    .scene { position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; padding:40px 24px; z-index:1; }
+        \\    .bg-num { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'DM Serif Display',Georgia,serif; font-size:min(60vw, 500px); font-weight:700; color:var(--red); opacity:0.06; line-height:0.85; letter-spacing:-0.04em; pointer-events:none; z-index:0; user-select:none; }
+        \\    .wordmark { font-family:'DM Serif Display',Georgia,serif; font-size:18px; letter-spacing:-0.02em; }
+        \\    .wordmark span { color:var(--red); }
+        \\    .code-wrap { position:relative; }
+        \\    .code { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(100px, 20vw, 180px); font-weight:700; line-height:1; color:var(--red); letter-spacing:-0.04em; position:relative; }
+        \\    .code::after { content:'404'; position:absolute; top:0; left:0; color:var(--bg3); clip-path:inset(0 0 50% 0); animation:glitch 3s ease-in-out infinite; }
+        \\    @keyframes glitch {
+        \\      0%,90%,100% { transform:translate(0); }
+        \\      92% { transform:translate(-3px, 2px); }
+        \\      94% { transform:translate(3px, -1px); }
+        \\      96% { transform:translate(-2px, 1px); }
+        \\    }
+        \\    .divider { width:40px; height:3px; background:var(--red); border-radius:2px; }
+        \\    h1 { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(24px, 4vw, 36px); letter-spacing:-0.02em; line-height:1.2; }
+        \\    .sub { font-size:15px; color:var(--muted); max-width:380px; line-height:1.7; }
+        \\    .path { font-family:'SF Mono','Fira Code',monospace; font-size:13px; color:var(--red); background:rgba(232,37,31,0.06); border:1px solid rgba(232,37,31,0.15); border-radius:8px; padding:10px 20px; letter-spacing:0.02em; }
+        \\    .actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
+        \\    .btn { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; padding:12px 24px; border-radius:8px; transition:all 0.2s; }
+        \\    .btn-red { background:var(--red); color:#fff; }
+        \\    .btn-red:hover { opacity:0.9; transform:translateY(-1px); box-shadow:0 4px 12px rgba(232,37,31,0.25); }
+        \\    .btn-ghost { border:1px solid var(--border); color:var(--muted); }
+        \\    .btn-ghost:hover { color:var(--text); border-color:var(--text); }
+        \\    .hint { font-size:12px; color:var(--muted); opacity:0.7; }
+        \\    .hint code { font-family:'SF Mono',monospace; font-size:11px; background:var(--bg2); padding:2px 6px; border-radius:3px; }
+        \\  </style>
+        \\</head>
+        \\<body>
+        \\<div class="bg-num">404</div>
+        \\<div class="scene">
+        \\  <a href="/" class="wordmark">
+    ) catch return mer.notFound();
+    w.writeAll(config.site_title) catch return mer.notFound();
+    w.writeAll(
+        \\</a>
+        \\  <div class="code-wrap">
+        \\    <div class="code">404</div>
+        \\  </div>
+        \\  <div class="divider"></div>
+        \\  <h1>This route doesn't exist yet.</h1>
+        \\  <p class="sub">You're looking for a page that hasn't been built. Drop a <code>.zig</code> file in <code>app/</code> and it becomes a route automatically.</p>
+        \\  <div class="path" id="path"></div>
+        \\  <div class="actions">
+        \\    <a href="/" class="btn btn-red">Back to home</a>
+        \\    <a href="/about" class="btn btn-ghost">About</a>
+        \\  </div>
+        \\  <p class="hint">Create <code>app/your-page.zig</code> → route appears at <code>/your-page</code></p>
+        \\</div>
+        \\<script>document.getElementById('path').textContent = location.pathname;</script>
+        \\</body>
+        \\</html>
+    ) catch return mer.notFound();
+    return .{ .status = .not_found, .content_type = .html, .body = buf.written() };
+}

app/_mercss.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* mercss stub */

app/about.zig ADDED Viewed

@@ -0,0 +1,40 @@
+const mer = @import("mer");
+const h = mer.h;
+pub const prerender = true;
+pub const meta: mer.Meta = .{
+    .title = "About",
+    .description = "About this merjs project.",
+};
+const page_node = page();
+pub fn render(req: mer.Request) mer.Response {
+    return mer.render(req.allocator, page_node);
+}
+fn page() h.Node {
+    return h.div(.{ .class = "page" }, .{
+        h.h1(.{ .class = "title" }, "About"),
+        h.p(.{}, .{
+            h.text("This project is built with "),
+            h.a(.{ .href = "https://github.com/justrach/merjs" }, "merjs"),
+            h.text(" — a Zig-native web framework with file-based routing, SSR, and WASM support."),
+        }),
+        h.div(.{ .class = "features" }, .{
+            feature("File-based routing", "Drop a .zig file in app/ or api/ and it becomes a route."),
+            feature("Server-side rendering", "Pages render at request time via render(req)."),
+            feature("Type-safe APIs", "Return Zig structs as JSON — no hand-rolled serialization."),
+            feature("Zero node_modules", "One zig build serve. That's it."),
+        }),
+        h.a(.{ .href = "/", .class = "btn" }, "Back to home"),
+    });
+}
+fn feature(title: []const u8, desc: []const u8) h.Node {
+    return h.div(.{ .class = "feature" }, .{
+        h.div(.{ .class = "feature-title" }, title),
+        h.p(.{ .class = "feature-desc" }, desc),
+    });
+}

app/cv.zig ADDED Viewed

@@ -0,0 +1,22 @@
+const mer = @import("mer");
+pub const meta: mer.Meta = .{
+    .title = "Curriculum Vitae",
+    .description = "Peter John CV",
+    .extra_head = "<link rel=\"stylesheet\" href=\"/assets/css/workers/cv.css\" />",
+};
+pub fn render(req: mer.Request) mer.Response {
+    _ = req;
+    return mer.html(
+        \\<div>
+        \\  <h1 style="display:flex;align-items:flex-start;font-weight:800;font-size:2rem;margin-bottom:1rem">
+        \\    Curriculum Vitae
+        \\    <a href="/assets/pdfs/resume.pdf" target="_blank" rel="noopener noreferrer" style="margin-left:0.4rem;margin-top:0.8rem;color:var(--color-link)">↗</a>
+        \\  </h1>
+        \\  <div style="border:1px solid black">
+        \\    <img src="/assets/pdfs/resume.svg" alt="Resume" style="width:100%" />
+        \\  </div>
+        \\</div>
+    );
+}

app/index.zig ADDED Viewed

@@ -0,0 +1,91 @@
+const std = @import("std");
+const mer = @import("mer");
+const config = @import("config");
+pub const meta: mer.Meta = .{
+    .title = config.site_title,
+    .description = "Tech Lead from Bangalore who likes to create frameworks and programming languages.",
+    .extra_head = "<link rel=\"stylesheet\" href=\"/assets/css/workers/home.css\" />",
+};
+pub fn render(req: mer.Request) mer.Response {
+    var buf: std.Io.Writer.Allocating = .init(req.allocator);
+    const w = &buf.writer;
+    w.writeAll(
+        \\<div class="pageContainer">
+        \\  <h1 class="title">Hello!</h1>
+        \\  <p class="description">
+        \\    <a href="https://www.linkedin.com/in/pyrossh" target="_blank" rel="noopener noreferrer" class="linkUnderline"><strong>I'm</strong></a>
+        \\    a tech lead based out of Bangalore, India and have worked for startups and enterprises
+        \\    that focus on products in the healthcare and finance domains. I like to build
+        \\    frameworks and automate common tasks to make it easier to develop applications.
+        \\  </p>
+        \\  <p class="description">
+        \\    I enjoy working on open-source projects, and during the last decade, I've created a
+        \\    number of projects that are widely used.
+        \\  </p>
+        \\  <div class="gridContainer">
+        \\    <section class="interests">
+        \\      <h2>Interests</h2>
+        \\      <ul style="list-style:none;padding:0">
+    ) catch return mer.internalError("write failed");
+    for (&[_][]const u8{ "HTML", "CSS", "Javascript", "S3", "SQL", "Bun", "Astro", "Tauri", "Remix", "Zig", "K8s", "Iceberg" }) |interest| {
+        w.print("<li>{s}</li>\n", .{interest}) catch return mer.internalError("write failed");
+    }
+    w.writeAll(
+        \\      </ul>
+        \\    </section>
+        \\    <section class="contact">
+        \\      <h2>Contact</h2>
+        \\      <ul style="list-style:none;padding:0">
+        \\        <li><strong>email:</strong><span>[email protected]</span></li>
+        \\        <li><strong>crates:</strong><a href="https://crates.io/users/pyrossh">https://crates.io/users/pyrossh</a></li>
+        \\        <li><strong>npm:</strong><a href="https://www.npmjs.com/~pyrossh">https://www.npmjs.com/~pyrossh</a></li>
+        \\        <li><strong>linkedin:</strong><a href="https://www.linkedin.com/in/pyrossh">https://www.linkedin.com/in/pyrossh</a></li>
+        \\        <li><strong>google group:</strong><a href="https://groups.google.com/g/rust-embed-devs">rust-embed-devs</a></li>
+        \\      </ul>
+        \\    </section>
+        \\  </div>
+        \\  <section class="tools">
+        \\    <h2>Tools</h2>
+        \\    <ul style="list-style:none;padding:0">
+    ) catch return mer.internalError("write failed");
+    for (config.tools) |tool| {
+        w.print("<li><a href=\"{s}\" target=\"_blank\" rel=\"noopener noreferrer\"><div>{s}</div>", .{ tool.link, tool.name }) catch return mer.internalError("write failed");
+        if (tool.image) |img| {
+            w.print("<img src=\"{s}\" alt=\"{s}\" />", .{ img, tool.name }) catch return mer.internalError("write failed");
+        }
+        w.writeAll("</a></li>\n") catch return mer.internalError("write failed");
+    }
+    w.writeAll(
+        \\    </ul>
+        \\  </section>
+        \\  <section>
+        \\    <h2>Git</h2>
+        \\    <div class="repos">
+    ) catch return mer.internalError("write failed");
+    for (config.repos) |repo| {
+        w.writeAll("<div class=\"repo\">") catch return mer.internalError("write failed");
+        w.print("<h4><a href=\"/repos/{s}\">{s}</a></h4>", .{ repo.title, repo.title }) catch return mer.internalError("write failed");
+        w.print("<p>{s}</p>", .{ repo.description }) catch return mer.internalError("write failed");
+        w.writeAll("<div class=\"tags\">") catch return mer.internalError("write failed");
+        for (repo.tags) |tag| {
+            w.print("<span class=\"tag\">#{s}</span>", .{ tag }) catch return mer.internalError("write failed");
+        }
+        w.writeAll("</div></div>\n") catch return mer.internalError("write failed");
+    }
+    w.writeAll(
+        \\    </div>
+        \\  </section>
+        \\</div>
+    ) catch return mer.internalError("write failed");
+    return mer.html(buf.written());
+}

app/layout.zig ADDED Viewed

@@ -0,0 +1,124 @@
+const std = @import("std");
+const mer = @import("mer");
+const config = @import("config");
+pub fn wrap(allocator: std.mem.Allocator, path: []const u8, body: []const u8, meta: mer.Meta) []const u8 {
+    var buf: std.Io.Writer.Allocating = .init(allocator);
+    const w = &buf.writer;
+    const title = if (meta.title.len > 0) meta.title else config.site_title;
+    const description = if (meta.description.len > 0) meta.description else config.site_description;
+    w.writeAll(
+        \\<!DOCTYPE html>
+        \\<html lang="en">
+        \\<head>
+        \\  <meta charset="utf-8" />
+        \\  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        \\  <meta name="theme-color" content="#131618" />
+        \\  <link rel="icon" type="image/svg+xml" href="/assets/icons/icon.svg" />
+        \\  <link rel="alternate" type="application/rss+xml" title="pyrossh" href="/rss.xml" />
+        \\  <link rel="canonical" href="https://pyrossh.dev/" />
+        \\  <link rel="stylesheet" href="/assets/css/shared.css" />
+        \\  <title>
+    ) catch return body;
+    w.writeAll(title) catch return body;
+    w.writeAll(
+        \\</title>
+        \\  <meta name="title" content="
+    ) catch return body;
+    w.writeAll(title) catch return body;
+    w.writeAll(
+        \\" />
+        \\  <meta name="description" content="
+    ) catch return body;
+    w.writeAll(description) catch return body;
+    w.writeAll(
+        \\" />
+        \\  <meta property="og:title" content="
+    ) catch return body;
+    w.writeAll(title) catch return body;
+    w.writeAll(
+        \\" />
+        \\  <meta property="og:description" content="
+    ) catch return body;
+    w.writeAll(description) catch return body;
+    w.writeAll(
+        \\" />
+        \\  <meta property="og:image" content="/assets/icons/icon.svg" />
+        \\  <meta name="twitter:card" content="summary_large_image" />
+        \\  <script src="https://unpkg.com/[email protected]"></script>
+    ) catch return body;
+    if (meta.extra_head) |extra| {
+        w.writeAll("\n  ") catch return body;
+        w.writeAll(extra) catch return body;
+    }
+    w.writeAll(
+        \\</head>
+        \\<body>
+        \\  <div class="safe-area"></div>
+        \\  <header>
+        \\    <div class="wrapper">
+        \\      <nav>
+        \\        <a href="/" class="logo
+    ) catch return body;
+    if (std.mem.eql(u8, path, "/")) {
+        w.writeAll(" active") catch return body;
+    }
+    w.writeAll(
+        \\">木 pyrossh</a>
+        \\        <div class="links">
+        \\          <span id="astro-color-scheme-switch">
+        \\            <button id="theme-change" type="button" onclick="document.documentElement.toggleAttribute('data-theme')">
+        \\              <svg style="display:var(--btn-light)" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M11.288 4.713Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288M16.95 7.05q-.275-.275-.275-.687t.275-.713l1.4-1.425q.3-.3.712-.3t.713.3q.275.275.275.7t-.275.7L18.35 7.05q-.275.275-.7.275t-.7-.275M20 13q-.425 0-.713-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712 9.713Q11 22.425 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05l-1.425-1.4q-.3-.3-.3-.725t.3-.7q.275-.275.7-.275t.7.275L7.05 5.65q.275.275.275.7t-.275.7q-.3.275-.7.275t-.7-.275m12.7 12.725l-1.4-1.425q-.275-.3-.275-.712t.275-.688t.688-.275t.712.275l1.425 1.4q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm2.225 6.775q-.275-.275-.275-.7t.275-.7L5.65 16.95q.275-.275.687-.275t.713.275q.3.3.3.713t-.3.712l-1.4 1.4q-.3.3-.725.3t-.7-.3M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75"/></svg>
+        \\              <svg style="display:var(--btn-dark)" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="m15 8l-3-3l3-3l3 3zm5 3l-2-2l2-2l2 2zm-7.925 11q-2.1 0-3.937-.8t-3.2-2.162t-2.163-3.2t-.8-3.938q0-3.65 2.325-6.437T10.225 2q-.45 2.475.275 4.838t2.5 4.137t4.138 2.5t4.837.275q-.65 3.6-3.45 5.925T12.075 22"/></svg>
+        \\            </button>
+        \\          </span>
+        \\          <div>|</div>
+    ) catch return body;
+    for (config.nav_items) |item| {
+        w.writeAll("          <a href=\"") catch return body;
+        w.writeAll(item.href) catch return body;
+        w.writeAll("\"") catch return body;
+        if (std.mem.startsWith(u8, path, item.href)) {
+            w.writeAll(" class=\"active\"") catch return body;
+        }
+        w.writeAll(">") catch return body;
+        w.writeAll(item.label) catch return body;
+        w.writeAll("</a>\n          <div>|</div>\n") catch return body;
+    }
+    w.writeAll(
+        \\        </div>
+        \\      </nav>
+        \\    </div>
+        \\  </header>
+        \\  <div class="safe-area"></div>
+        \\  <div class="wrapper">
+        \\    <main>
+    ) catch return body;
+    w.writeAll(body) catch return body;
+    w.writeAll(
+        \\    </main>
+        \\  </div>
+        \\  <footer>
+        \\    <div class="wrapper">
+        \\      <div class="container">
+        \\        <div class="spacer"></div>
+        \\        <p class="copyright-container">
+        \\          Copyright © <current-year>2026</current-year>
+        \\          <a class="link" href="https://pyrossh.dev">pyrossh</a>
+        \\        </p>
+        \\      </div>
+        \\    </div>
+        \\  </footer>
+        \\  <div class="safe-area"></div>
+        \\</body>
+        \\</html>
+    ) catch return body;
+    return buf.written();
+}

app/robots.zig ADDED Viewed

@@ -0,0 +1,8 @@
+const mer = @import("mer");
+pub const meta: mer.Meta = .{};
+pub fn render(req: mer.Request) mer.Response {
+    _ = req;
+    return mer.text(.ok, "User-agent: *\nAllow: /\n");
+}