You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import { Context } from "koa";
|
|
import { tempstream } from "tempstream";
|
|
import { Page } from "@sealcode/sealgen";
|
|
import html from "../html";
|
|
import { Posts } from "../collections/collections";
|
|
import { CollectionItem } from "sealious";
|
|
import { getMOTD } from "./motd.post";
|
|
|
|
export const actionName = "ssr1";
|
|
|
|
async function footer() {
|
|
return /* HTML */ `<div class="footer">Copyright 2022. ${await getMOTD()}</div>`;
|
|
}
|
|
|
|
function navbar() {
|
|
return /* HTML */ ` <div class="navbar">
|
|
<div class="logo">My app</div>
|
|
<div>
|
|
<a href="/react/">react</a>
|
|
<a href="/ssr1/">ssr1</a>
|
|
<a href="/ssr2/">ssr2</a>
|
|
<a href="/ssr25/">ssr2.5</a>
|
|
<a href="/ssr3/">ssr3</a>
|
|
<a href="/ssr4/">ssr4</a>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function sidebar() {
|
|
return /* HTML */ `
|
|
<div class="sidebar">
|
|
<ul class="filters">
|
|
<li><input type="checkbox" /> Filtr1</li>
|
|
<li><input type="checkbox" /> Filtr2</li>
|
|
<li><input type="checkbox" /> Filtr3</li>
|
|
<li><input type="checkbox" /> Filtr4</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderItem(item: CollectionItem<typeof Posts>) {
|
|
return /* HTML */ `
|
|
<li class="item">
|
|
<h3>${item.get("title")}</h3>
|
|
<p>${item.get("description")}</p>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
async function content() {
|
|
const { items } = await Posts.suList().fetch();
|
|
return /* HTML */ `<div class="content">
|
|
<ul class="items">
|
|
${items.map((item) => renderItem(item)).join("")}
|
|
</ul>
|
|
</div>`;
|
|
}
|
|
|
|
export default new (class ssr1Page extends Page {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
async canAccess(_: Context) {
|
|
return { canAccess: true, message: "" };
|
|
}
|
|
|
|
async render(ctx: Context) {
|
|
return /* HTML */ `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>SSR1 version</title>
|
|
<link href="/dist/style.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
${navbar()}${sidebar()}${await content()}${await footer()}
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
})();
|