diff --git a/src/components/layout.mts b/src/components/layout.mts index c3a53f7..5ff8587 100644 --- a/src/components/layout.mts +++ b/src/components/layout.mts @@ -1,21 +1,17 @@ import { AnyNode, Elem } from "ren"; -export async function Layout(page: AnyNode): Promise { - return new Elem("html") - .withAttr("lang", "ru") - .withChild( - new Elem("head").withChildren([ - new Elem("meta").withAttr("charset", "utf-8"), - new Elem("link").withAttrs({ - rel: "stylesheet", - href: "/static/styles.css", - }), - new Elem("title").withText("hello world"), - ]) +export function Layout(page: AnyNode): Elem { + return new Elem("html").withAttr("lang", "ru").withChildren( + new Elem("head").withChildren( + new Elem("meta").withAttr("charset", "utf-8"), + new Elem("link").withAttrs({ + rel: "stylesheet", + href: "/static/styles.css", + }), + new Elem("title").withText("hello world") + ), + new Elem("body").withChildren( + new Elem("div").withAttr("id", "root").withChildren(page) ) - .withChild( - new Elem("body").withChild( - new Elem("div").withAttr("id", "root").withChild(page) - ) - ); + ); } diff --git a/src/components/page_layout.mts b/src/components/page_layout.mts index 178ce06..d05d97e 100644 --- a/src/components/page_layout.mts +++ b/src/components/page_layout.mts @@ -1,24 +1,24 @@ import { AnyNode, Elem } from "ren"; -export async function PageLayout(children: AnyNode[]): Promise { +export function PageLayout(...children: AnyNode[]): Elem { return new Elem("div") .withAttr("id", "main") - .withChildren([ + .withChildren( Header(), - new Elem("div").withAttr("class", "content").withChildren(children), - Footer(), - ]); + new Elem("div").withAttrs({ class: "content" }).withChildren(...children), + Footer() + ); } export function Header(): Elem { - return new Elem("header").withChild(HeaderNav()); + return new Elem("header").withChildren(HeaderNav()); } export function HeaderNav(): Elem { - return new Elem("nav").withChildren([ + return new Elem("nav").withChildren( new Elem("a").withAttr("href", "/").withText("About"), - new Elem("a").withAttr("href", "/works").withText("Works"), - ]); + new Elem("a").withAttr("href", "/works").withText("Works") + ); } export function Footer(): Elem { diff --git a/src/server.mts b/src/server.mts index 923f8b4..43869e3 100644 --- a/src/server.mts +++ b/src/server.mts @@ -43,15 +43,15 @@ async function handleHttpReq( if (/^[/](?:about[/]?)?$/.test(req.url)) { httpRes .writeHead(200, { "content-type": "text/html" }) - .end(await ren.render(Layout(AboutPage()))); + .end(ren.render(Layout(AboutPage()))); } else if (/^[/]works[/]?/.test(req.url)) { httpRes .writeHead(200, { "content-type": "text/html" }) - .end(await ren.render(Layout(WorksPage()))); + .end(ren.render(Layout(WorksPage()))); } else { httpRes .writeHead(404, { "content-type": "text/html" }) - .end(await ren.render(Layout(E404()))); + .end(ren.render(Layout(E404()))); } } } catch (err) { @@ -63,10 +63,7 @@ async function handleHttpReq( } } -const mimeTypeByExt = new Map([ - [".html", "text/html"], - [".css", "text/css"], -]); +const mimeTypeByExt = new Map([[".css", "text/css"]]); export function tryIntoAppServerRequest( req: http.IncomingMessage diff --git a/src/views/about.mts b/src/views/about.mts index 0f6cfa2..08bcfd4 100644 --- a/src/views/about.mts +++ b/src/views/about.mts @@ -1,6 +1,6 @@ import { PageLayout } from "../components/page_layout.mjs"; -import { AnyAsyncNode, Elem } from "ren"; +import { AnyNode, Elem } from "ren"; -export async function AboutPage(): AnyAsyncNode { - return PageLayout([new Elem("p").withText("Привет мир")]); +export function AboutPage(): AnyNode { + return PageLayout(new Elem("p").withText("Привет мир")); } diff --git a/src/views/e404.mts b/src/views/e404.mts index 54208e3..8bcd20a 100644 --- a/src/views/e404.mts +++ b/src/views/e404.mts @@ -1,6 +1,6 @@ import { PageLayout } from "../components/page_layout.mjs"; -import { AnyAsyncNode, Elem } from "ren"; +import { AnyNode, Elem } from "ren"; -export async function E404(): AnyAsyncNode { - return PageLayout([new Elem("p").withText("Page not found")]); +export function E404(): AnyNode { + return PageLayout(new Elem("p").withText("Page not found")); } diff --git a/src/views/works.mts b/src/views/works.mts index b799284..7d2e96e 100644 --- a/src/views/works.mts +++ b/src/views/works.mts @@ -1,6 +1,6 @@ import { PageLayout } from "../components/page_layout.mjs"; -import { AnyAsyncNode, Elem } from "ren"; +import { AnyNode, Elem } from "ren"; -export async function WorksPage(): AnyAsyncNode { - return PageLayout([new Elem("p").withText("Works")]); +export function WorksPage(): AnyNode { + return PageLayout(new Elem("p").withText("Works")); } diff --git a/static/styles.css b/static/styles.css index a867312..cb26f70 100644 --- a/static/styles.css +++ b/static/styles.css @@ -5,27 +5,23 @@ } html { - height: 100%; background-color: #eee; } -body { +html, body { height: 100%; } - + #root { min-height: 100vh; - display: flex; - flex-direction: column; align-items: stretch; } -#main { +#root, #main { display: flex; - flex: 1 0; flex-direction: column; } -.content { +#main, .content { flex: 1 0; } \ No newline at end of file