This site is a pretty standard demo
website; a site with links to different pages. Nothing to write home about
except that the whole website is contained within a single JavaScript file, and
is rendered dynamically, just in time, at the edge, close to the user.

The routing is fairly minimal: we use the
router module which uses
URLPattern
under the hood for pattern matching.

import { serve } from "https://deno.land/std@0.133.0/http/server.ts";
import { router } from "https://crux.land/router@0.0.11";
import { h, ssr } from "https://crux.land/nanossr@0.0.4";

const render = (component) => ssr(() => <App>{component}App>);

serve(router(
  {
    "/": () => render(<Landing />),
    "/stats": () => render(<Stats />),
    "/bagels": () => render(<Bagels />),
  },
  () => render(<NotFound />),
));

We have 3 paths: / for the main page, and/stats for some statistics, and
/bagels to display various bagels that we sell. We also have a fallback
handler (the last argument in the snippet), which will be called when none of
the paths match, acting as a 404 page. These are served using the serve
function from the standard library.

For rendering of the JSX, we use nanossr,
which is a tiny server-side renderer that uses twind under the hood for
styling. This is invoked by using the ssr function, to which a callback is
passed which should return JSX. The ssr function returns a
Response. We
create a render function to remove the need for larger duplication of code,
just to tidy things up.

But before any of this, you probably noticed some funny looking comments. Let’s
go through them:

• /** @jsx h */: this pragma tells Deno which function we want to use for
  transpiling the JSX.
• /// : Deno comes wi